Copyright (c) 2004 Prentice-Hall. All rights reserved. 1 Committed to Shaping the Next Generation of...

Copyright (c) 2004 Prentice-Hall. All rights reserved. 1Committed to Shaping the Next Generation of IT Experts.

Project 6: Creating XHTML Forms

Kelly L. Valqui

Essentials for DesignXHTML

Copyright (c) 2004 Prentice-Hall. All rights reserved. 2

Why Use Forms?Purpose of a form – acquire information from

the user and send it to the server Many advantages:

Monitor users’ behavior on your sites Interactions with users E-commerce Enable Internet searches


Visual Summary

A typical form

Single-line text fields

Multi-line text area

Submit input


Using the <form> Tag

<form> </form>Tells browser where a form begins

and ends Attributes can indicate

Name of formDestination of form dataHow data is sent


Using the <input> Tag

<input/> Specifies an input field of the form Attributes can indicate

Name of input fieldType of input field (e.g. text, submit

button, etc.)Other items such as size, color, formats


Code for Form Page

<html><head><title>Form Test Page</title></head><body><form> <input name="welcome" /></form></body></html>

Start of form

End of formText type input field


Effects of <form> and <input>(initial page)

The text-type input field.

User has typed text into the field


Effects of <form> and <input>(after user types text and hits Enter)

Note that data entered by user was sent to the Web server, added to the URL address


Submitting Form DataForm data – the information a user

types into a formSubmitting – pressing the Enter key, or

clicking a Submit buttonForm Data is submitted as part of the

URL address locationData is submitted in name-value pairs

Name – the name of the input field's tag Value – the value the user typed into the input

field


The <form> Tag's action Attribute

Form action – the receiving page of the data sent by the browser

Action attribute – specifies the relative or absolute URL of the receiving page

Action attribute will usually pertain to a server-side script file (CGI, ASP, PHP)


Effect of Using the action Attribute

Action attribute caused a different page to be called

<form action="login_action.htm">

Data was sent to this page as a name-value pair

Name = username

Value = test user name (spaces represented with +)


Working with Text Input FieldsText input field – a single-line option that

allows users to enter alphanumeric text Attributes controlling text input fields

type – if you indicate "text", this makes it a single-line text field

value – sets initial value displayed in the text field size – specifies number of visible characters maxlength – specifies the maximum number of

characters that can be input into the fieldExample syntax:


Effect of Input Tag Attributes

Type = "text"Single line text field

Size = "20"20 visible characters

Maxlength = "20"max 20 characters can be entered

Value = "Enter Your Userid"initial value seen in text field

<input type="text" size="20" name="username" maxlength="20" value="Enter Your Userid" />


Using Password Fields

Setting the <input> tag's type attributetype = "password"

Effect – data typed by the user cannot be observed on the

screencharacters displayed as black dots

Limitationsthis does not encrypt the data as it is sent over the

Internet


Using Submit Buttons

Setting the <input> tag's type attributetype = "submit"

Effect – Clicking the button sends data to the Web serverParticularly useful for forms with multiple input tags


Effect of Input Password and Submit

<input type="password" size="20" name="password" />

<input type="submit"/>


Radio ButtonsRadio button – input field with a round button for

item selectionRadio group – a group of radio buttonsOnly one radio button in a radio group can be

selectedAttributes for radio button input tags

type = "radio"name – specifies the radio groupchecked – indicates that a button is selected


Radio Buttons Syntax

<input type="radio"name="name" value="val" checked="checked">Text to Display

Indicates radio type

Value that will be submitted for the group if checked

Selected item. Only one in a group

Label displayed to the user for the radio button

Name of the group


Effect of Radio Buttons

<input type="radio" name="choice" value="Y" checked="checked">Yes

<input type="radio" name="choice" value="N">No

<input type="radio" name="choice" value="M">Maybe


Checkboxes Indicate something to which the user must agree Similar to Radio Buttons Difference from Radio Buttons – user can select

more than one choice Attributes

type="checkbox" name – specifies the checkbox group checked – indicates that a checkbox is selected


Effect of CheckBoxes

<input type="checkbox" name="choice" value="Y" checked="checked">Yes

<input type="checkbox" name="choice" value="N">No

<input type="checkbox" name="choice" value="M">Maybe


Creating an Order Form

Check boxes, more than one can be checked at a time

Radio buttons, only one in the group can be checked at a time

Radio buttons, only one in the group can be checked at a time


Working with Order Forms

A typical type of Web form is an Order Form Order form – a form that allows users to buy

items from a Web site, usually on a secure server

Secure server – a Web server that ensures encryption of data to prevent hacking

Order forms make use of many input types, including checkboxes and radio buttons


Tabbing Through a FormGoal – control which input tag gets the focus

when user presses the Tab keySolution – use the <input> tag's tabindex

attributetabindex is assigned a number, which

determines the tab order of the input tagExample syntax:

<input type="text" name="name" size="20" maxlength="30" tabindex="1" />


Select Boxes

Concepts Pull-down menus, drop-down boxes, drag-down

menus, or drop lists Select and option elements Single vs. multiple selections

Hands-on Exercise Add a Select Box Add a Multiple-Choice Select List


Select Boxes

Also known as pull-down menus, drop-down boxes, drag-down menus, or drop lists

Hybrids of radio buttons and checkboxesTwo tags:

<select> </select> – indicates the complete list of options to choose from

<option> </option> – indicates one of the choices (nested within <select> </select>)


Attributes of the <select> and <option> Tags<select> attributes

name – name of the element from which a value is chosen

size – how many options are visible at a timemultiple – whether more than one option can be

chosen at a time<option> attributes

value – value of the optionselected – whether the option is chosen


Single-Selection Dropdown List

<select name="choice"> <option value="Y" selected="selected">Yes</option> <option value="N">No</option> <option value="M">Maybe</option> </select>


Multiple-Selection List

<select name="choice" size="3" multiple="multiple"> <option value="Y" selected="selected">Yes</option> <option value="N">No</option> <option value="M">Maybe</option> </select>


Working with the <textarea> Tag

<textarea> – a multiline text box<textarea> attributes

cols – indicates number of visible characters in a line

rows – indicates the number of lines of the text area that will be visible


Effect of <textarea>

<textarea cols="60" rows="5"> The initial text for a textarea goes into the textarea element. </textarea>


Purpose of Hidden FieldsSend information to Web server without

displaying to userExample uses:

Session number that identifies userInformation of pages user has visitedInformation on page the user visited before

coming to the form. Additional information about product required for

packaging.


Creating Hidden Fields

Example syntax:<input type="hidden" name="order_id"

value="1234" /> Submitting form:

Hidden field is submitted with the page Hidden field is in plain view in the URL Not encrypted or secure


Submit and Reset Buttons Submit buttons

Send form data to the Web serverSyntax: <input type="submit" />

Reset buttonsClear the data in input fields of a formSyntax: <input type="reset" />

Attributesname – identifier of the buttonvalue – text that appears in the label of the button


Button Tags

<input type="submit" name="submitButton" value="Submit Form" />

<input type="reset" value="Undo Changes To Form" />


Form Script Options

Form submissions go to Web server scripts to be processed

Server script is identified in the form tag's action attribute

Common types of server-side scripts Common Gateway Interface (CGI) ColdFusion Active Server Pages (ASP)

Date post:	18-Jan-2018
Category:	Documents
Upload:	antonia-bruce
View:	216 times
Download:	0 times

Copyright (c) 2004 Prentice-Hall. All rights reserved. 1 Committed to Shaping the Next Generation of...

Documents