1. Web Authoring
Topic 20
Part 2-
HTML Forms

2. Objectives
Students should able to:
1. Identify and use the various form
features:
• Text boxes
• Password boxes
• Radio buttons
• Check boxes
• Text area
• Menus

3. 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

4. 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

5. 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>

6. <form> and <input> sample
<form action=“mailto:webmaster@ite.edu.sg"
method="post">
First name: <input type="text"
id="firstname"><BR>
Last name: <input type="text"
id="lastname"><BR>
<INPUT type="submit" value="Send">
</form>

7. <input> tag
Input tag creates the control in a HTML
form.
Common attributes of INPUT tag
TYPE
NAME
VALUE
SIZE

8. <input> tag
<input
name = “name”
type = text | password | checkbox |
radio | submit | reset | file | hidden | image
| button
value = “initial value to be
displayed”>

9. Control Types <input> tag
Type: 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.

10. 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.

11. 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.

12. 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.

13. Text area
<TEXTAREA> creates multi-line text input
fields.
< TEXTAREA
name = “name”
Rows = “number of rows”
Cols = “number of columns”
>
Default text
</ TEXTAREA >

14. <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

15. Sample for <select>
<select
name = “name”
size = “size number”
multiple>
<option [selected]>option 1
<option [selected]>option 2
</select>

16. Submit
The 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.