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 tag used to contain the elements of a form various form elements go in here usually laid out with text labels, images and other information

attributes of 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 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 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 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 <FORM METHOD = POST #sending data to the server# ACTION = sendRhyme.php #to server process# >

Example 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

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

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 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 tag

the 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 tag this allows selection from a range of choices an 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 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

VALUE attribute –this specifies the data to be sent to the server process along with NAME of the 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 –, 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 Web Banking Web Banking Welcome to our web banking page. no, you can't make deposits or get cash.... but you can get balances, make transfers and list the recent transactions on your account. Account Number: PIN: Transaction: Account Balances Transfers Show recent transactions Stop payment on a check

Mail me a written verification Do not mail me a written verification Mail me some information on: Certificates of Deposit Home mortgage interest rates Auto loan interest rates Tell us what you think about our Web Services!