HTML FORMS
Forms
• The FORM element is used to create a data input form.
• A Form is an area that can contain Form
Control/Elements.
• A region using forms is enclosed within the <FORM>
</FORM> tags.
• A form usually contains a Submit button to send the
information in the form elements to the server
• The FORM element has two important attributes:
– ACTION
– METHOD.
Form Processing
HTML
Form
B Data from
Input
r Form
Data from Form
o Web
User Form Processing
w Server Program
s HTML
(CGI)
Output e Document Data
Flow
r HTML
Document
Database
Management
System
Flow of Information for Forms
Forms
• ACTION:
– Specifies the destination URL to which the form
should be submitted, once it has been completed
by the user.
– If no URL is specified, the URL of the current
document containing the form is used.
– MAILTO Action: The data from the form is
mailed to the specified E-mail address.
Forms
• METHOD:
– Specifies the way in which the data from the user are
sent to the server.
– Forms should use METHOD=“GET” when the form
doesn’t modify anything on the server
• Example : A search engine Query
• Database search
– Forms should use METHOD=“POST” when the form
changes the state of the server or sends large amounts
of data
• Example : Entering a message on a forum
• Uploading a file
Form Tag
<Form Action=“getemp.asp” Method=“post”>
(all form elements inside)
</Form>
Forms
• Form Input: INPUT
– Only used within a FORM element and is denoted by
<INPUT>.
– Attributes:
• TYPE: Defines the type of data used in the field.
• VALUE: Contain the initial value displayed to users.
• NAME: The name of the particular element.
• MAXLENGTH: The maximum number of characters that can be
entered by users in a text field.
• SIZE: Specifies the size of the field and depends on its type.
• SRC: Denote URL for an image.
• CHECKED: Indicates that a checkbox or radio button is selected.
• DISABLED: Prevents the field from receiving focus.
• ALIGN: Alignment if image is used.
• READONLY: Prevents modification of the contents of the field.
TYPE Attribute
• TEXT type:
– Specifies a single line text entry field.
– The default width is 20 characters,
– MAXLENGTH and SIZE attributes is used to limit the number
of characters (MAXLENGTH <= SIZE)
<P><B> First Name:</B> <INPUT NAME=“textfield” TYPE =
text MAXLENGTH=30 SIZE =30></P>
<P><B> Last Name:</B> <INPUT NAME=“textfield” TYPE =
text MAXLENGTH=30 SIZE =30></P>
Text Input (type=“text”)
• Example : A text field named "text1" that is 30 characters wide.
• <input type="text" name="text1" size="30">
• Example : A text field named "text2" that is 30 characters wide but will
only accept 20 characters.
• <input type="text" name="text2" size="30" maxlength="20">
• Example : A text field named "text3" that is 40 characters wide with
default value.
• <input type="text" name="text3" size="40" value="We are not alone">
TYPE Attribute
• PASSWORD Type:
– Same as text except the text entered by the user is obscured(not visible).
– Use the MAXLENGTH and SIZE attributes.
<P><B> Enter Your Password:</B>
<INPUT NAME=“password” TYPE = password MAXLENGTH=30
SIZE =30></P>
• Example : A password field named "pass1" that is 30 characters wide
• <input type="password" name="pass1" size="30">
• Example : A password field named "pass2" that is 30 characters wide but will
only accept 20 characters
• <input type="password" name="pass2" size="30" maxlength="20">
Text Input (type=“textarea”)
• Text fields that have more than one line and can scroll as the viewer enters
more text.
• The tag options define the size of the field by the number of rows and character
columns.
• You can also include default text to appear in the field
• Example 6: A textarea field named "comments" that is 45 characters wide
and 6 lines high
• <textarea name="comments" rows="6" cols="45" >
The first time I ever saw a web page, I thought.... (continue)
</textarea>
11
TYPE Attribute
• SUBMIT and RESET Types:
– SUBMIT: Used to submit the form’s content, as
specified by the ACTION attribute.
– RESET: Set all fields in the form to their initial
values.
<P>INPUT TYPE=SUBMIT>
<INPUT TYPE=RESET>
<P><INPUT TYPE=SUBMIT VALUE = “Place Your
Order”>
<INPUT TYPE=RESET VALUE = “Start over”>
TYPE Attribute
• Radio Boxes:
• Set of controls that are linked so that only one radio button among each
set is selected at a time
• If you click one radio button, the others in the set are automatically de-
selected.
• A set of radio buttons is defined by providing them the same name
Male: <input type = "radio" name = "gender"
value="Male"/>
Female: <input type = "radio" name = "gender"
value="Female"/>
TYPE Attribute
• Checkbox:
– An object where several values can be selected at
the same time.
– The checkbox is submitted as separate
name/value pair for each selected value.
– Checkbox that are grouped together should have
• a different name.
• a unique value.
TYPE Attribute
• Checkbox:
<FORM>
What pets do you own?
<P><INPUT TYPE=CHECKBOX name = petdog
value=“dog”> DOG
<BR><INPUT TYPE=CHECKBOX name = petcat
value=“cat”> CAT
<BR><INPUT TYPE=CHECKBOX name = petbird
value=“bird”> BIRD
<BR><INPUT TYPE=CHECKBOX name = petfish
value=“fish”> FISH
</FORM>
TYPE Attribute
• BUTTON Input Type:
– Creates a button whose use can be defined
through scripting and onClick event.
– Use to create a back button.
– Only useful to browsers that support scripting.
<FORM><P><INPUT TYPE=“button”
VALUE=“Back to Last Document”
onClick=“history.back( )”></P></FORM>
PullDown Menu
• Use SELECT and OPTION to create pulldown menu.
• SELECT:
– Allows the user to choose one (or possibly more) items from a
list.
– Attributes: MULTIPLE, SIZE, and NAME.
• OPTION:
– Specifies the list items.
– Attributes: SELECTED, VALUE, and LABEL
• A menu or list:
<select name="select">
<option value="red">red</option>
<option value="green">green</option>
<option value=“blue">blue</option>
</select>
Practice Exercise
18
