HTML Forms. collect information for passing to server- side processes built up from standard widgets –text-input, radio buttons, check boxes, option lists,

HTML Forms

HTML Forms• collect information for passing to server-

side processes

• built up from standard “widgets”– text-input, radio buttons, check boxes, option

lists, buttons, images

• usually mixed in with other HTML– especially tables

• may also contain JavaScript– for input validation and user instruction

The <form> tag

• used to contain the elements of a form

<form>various form elements go in here

usually laid out with text labels, images and other information

</form>

attributes of <FORM>

• ACTION– URL pointing to a server-side process– all data from the form is sent as a list of

name+value pairs– the data is used by the server-side process,

which usually sends back a response page

attributes of <FORM>• METHOD

• this attribute specifies which http method the browser will use to connect to the server– GET

• to retrieve data from the server

• form data appears as request parameters in the browser message window

– POST - to send data to the server• should be used for data to be held on the server

attributes of <form>

• ENCTYPE attribute specifies how the form data is encoded

• data is encoded before being sent to server– avoids data corruption– not the same as encryption

• data will be decoded by the web server or receiving process

ENCTYPE

• the default value of ENCTYPE is:application/x-www-form-urlencoded

• converts “ “ to “+”• nonalphanumeric characters as % followed by ASCII code

(as 2 hexadecimal digits)

• line break is %OD%OA (carriage return, line-feed)

• this is the most commonly used encoding

• this is non-encrypted because it is trivial to decode by reversing the above procedures

ENCTYPE

• ENCTYPE can also take the value:multipart/form-data

• encapsulates the form fields as a single, MIME-compatible compound document

• used in particular with the POST method

• still unencrypted; the data can be read by anyone intercepting the request

form widgets

the <input> tag

• used to define a number of different widgets

• each widget is specified by TYPE attribute

• a NAME attribute is associated with widget data on submission of the form.

• NAME is also used to manipulate the widget using JavaScript.

Example

<FORMMETHOD = “POST” #sending data to the server#ACTION = “sendRhyme.php” #to server process#

><!-- The form contains a single text field called RHYME --><INPUT TYPE = “TEXT” NAME = “RHYME”>

<!-- other form elements could appear here -->

</FORM>

Example

http://.../sendRhyme.php? rhyme = roses

Text Field Attributes

• SIZE– width, in characters, of display box

• MAXLENGTH– total number of characters accepted as input

• may be > SIZE

• default is unlimited

• VALUE– default text to appear in field– does not need to be specified

more widgets defined by <INPUT>

Password Fields

• TYPE = “PASSWORD”

• accepts any text

• displays *****s instead

• attributes as for TEXT

• NB: transmitted unencrypted!

File-selection Fields• TYPE = “FILE”• “Browse” button appears, send file on client to server • other attributes as for TEXT

Checkboxes• TYPE = “CHECKBOX”

• for yes/no type non-exclusive selections by user

• VALUE specifies string sent to server

• CHECKED controls default display

• can be grouped– all given same NAME– values sent as comma-separated string to server

Checkboxes

(Captions and cell-borders added using other HTML)

Radio Buttons

• TYPE = “RADIO”

• typically grouped by NAME

• represent mutually exclusive choices

• only one box in group can be checked– specified using the CHECKED attribute– first element is checked if no other is specified

• VALUE should be set for each button

• other attributes as for CHECKBOX

Radio Buttons

(Captions and cell-borders added using other HTML)

Submission Buttons

• TYPE = “SUBMIT”

• triggers submission of form data

• VALUE controls caption on button

• NAME sent to server

Reset Buttons

• TYPE = “RESET”

• form data reset to default values

• VALUE controls caption on button

Custom Buttons

• TYPE = “IMAGE”

• SRC = image URL

• acts as a submit button when clicked

• also submits mouse x-y coords to server

• ALIGN - as per <IMG>

Hidden Fields

• TYPE = “HIDDEN”

• embeds additional information in the page

• cannot be seen by user

• cannot be ignored by browser– NAME and VALUE submitted to server

• used to record state between HTTP transactions and to label forms

more form widgets

the <TEXTAREA> tag

• this appears as a multi-line text area

• the user may type, cut and paste text

• the COLS and ROWS attributes are used to control the dimensions of the textarea

• a NAME attribute must be specified

• default text can be inserted as the content of the <textarea> tag

the <TEXTAREA> tag

• WRAP = “OFF”– text is rendered and transmitted as typed

• WRAP = “VIRTUAL”– text is wrapped in the browser display but

transmitted as typed

• WRAP = “PHYSICAL”– text is wrapped in the browser display and

transmitted as rendered

the <SELECT> tag

• this allows selection from a range of choices

• an <option> tag is used to specify each choice– plain text included as tag content

• the tag is displayed as a pull-down menu of choices

• using SELECT reduces onscreen clutter compared to checkboxes or radio buttons if the number of choices is large

the <SELECT> tag

• NAME attribute– sent to server with selected value

• MULTIPLE attribute– allows selection of many options– values sent as a comma-separated list

• SIZE attribute– controls the number of options visible at one time

<option>

• VALUE attribute– this specifies the data to be sent to the server

process along with NAME of the <SELECT> tag

• SELECTED attribute– this is a keyword attribute– when specified it pre-selects an option– by default, no options are pre-selected

Using forms• forms alone are rather primitive

• use DHTML to control presentation and interaction– <PRE>, <TABLE> for layout– CSS positioning and layers for layout and navigation– JavaScript for navigation and validation

• other methods available for web page GUIs– Java applets, Active X– large implementation overheads

Example<HTML><HEAD><TITLE> Web Banking</TITLE></HEAD><BODY><H1> Web Banking </H1>Welcome to our web banking page. no, you can't make depositsor get cash .... but you can get balances, make transfers and list the recent transactions on your account.

<FORM METHOD = "POST" ACTION = "/cgi-bin/banking.pl"><PRE>Account Number: <INPUT TYPE = "TEXT" NAME = "ACCT">PIN: <INPUT TYPE = "PASSWORD" NAME = "PIN" SIZE = "8">

Transaction: <SELECT NAME = "TRANSACTION"><OPTION SELECTED> Account Balances </OPTION><OPTION> Transfers </OPTION><OPTION> Show recent transactions </OPTION><OPTION> Stop payment on a check </OPTION></SELECT>

<INPUT TYPE = "RADIO" NAME = "VERIFY_BY_MAIL" VALUE = "YES" CHECKED>Mail me a written verification<INPUT TYPE = "RADIO" NAME = "VERIFY_BY_MAIL" VALUE = “NO">Do not mail me a written verification

Mail me some information on:<INPUT TYPE = "CHECKBOX" NAME = "INFO" VALUE = "CDS">Certificates of Deposit

<INPUT TYPE = "CHECKBOX" NAME = "INFO" VALUE = "MORTGAGES">Home mortgage interest rates

<INPUT TYPE = "CHECKBOX" NAME = "INFO" VALUE = "AUTOLOANS">Auto loan interest rates

Tell us what you think about our Web Services!<TEXTAREA ROWS = "5" COLS = "60" NAME = "COMMENTS"></TEXTAREA><INPUT TYPE = "SUBMIT"> <INPUT TYPE = "RESET"></PRE></FORM></BODY></HTML>