Web Authoring

Topic 20Part 1-

HTML Forms

Objectives

1. Identify and use the various form features:

• Text boxes• Password boxes• Radio buttons• Check boxes• Text area• Menus

Students should able to:

What a HTML form?

Interactive web pages that are able to gather user input.

It contains special elements called controls (checkboxes, radio buttons, menus, etc.)

Users generally "complete" a form by modifying its controls, before submitting the form to a server for processing

FORM tag

The opening tag <FORM> and the closing tag </FORM> define the enclosed section of the document as an HTML form.

Common attributes:- ACTION- METHOD- NAME

FORM Action

<form action=address of the server program for handling user input (CGI, JSP, ASP, Java Servlets)

method=“post” | “get”

name = “name of the form”>…</form>

<form> and <input> sample<form action=“mailto:webmaster@ite.edu.sg" method="post">

</form>

First name: <input type="text" id="firstname"><BR>

Last name: <input type="text" id="lastname"><BR>

<INPUT type="submit" value="Send">

<input> tag

Input tag creates the control in a HTML form.

Common attributes of INPUT tagTYPENAMEVALUESIZE

<input> tag<input

name = “name”

type = text | password | checkbox | radio | submit | reset | file | hidden | image | button

value = “initial value to be displayed”>

Control Types <input> tagType: This attribute determines the nature of the input control. The possible choices are:

- button: Displays a button. With this input type the value attribute must be specified.- checkbox: Displays a checkbox.- file:Displays an textbox with a button adjacent to it. The default button caption depends on the host browser. Clicking on the button causes a file selector dialog to be displayed.

Control Types <input> tag

The possible choices are:- hidden: Creates an invisible control. A typical use for this would be to uniquely identify a user when cookies have been disabled on the web browser.- image: Displays a clickable image which acts like a submit button. The mouse coordinates where the click occurred are shipped back to the server along with other form data.

Control Types <input> tag

The possible choices are:- password: Displays an edit box in which the characters typed in by the user are replaced by a placeholder - * in Firefox and Opera and • in IE.- radio: Displays a radio button.- reset: Clicking on this button input causes all the form controls to be reset to their initial state.

Control Types <input> tag

The possible choices are:- submit: When this button input is clicked the form data are shipped back to the URL defined in the form action attribute.- text: Displays a textbox.

Text area<TEXTAREA> creates multi-line text input fields.

< TEXTAREAname = “name”Rows = “number of rows”Cols = “number of columns”

>Default text

</ TEXTAREA >

<select> and <option> tag

It’s a drop down menu.

SELECT tag produces a pull-down or scrollable option menu

OPTION tag creates the menu items for SELECT tag

Sample for <select>

<selectname = “name”size = “size number”multiple>

</select>

<option [selected]>option 1

<option [selected]>option 2

SubmitThe submit input type defines a button for submitting the form. The presence of the NAME attribute will cause the browser to send a name/value pair for the submit button if it is used to submit the form. This allows authors to provide multiple submit buttons.