Objectives:
A. Examine forms, text area fields,
select lists, and other input types.
B. Adapt the different demands of
the users of the page.
C. Process online forms.
Online Forms
Are webpages purposely designed for
gathering information on the internet.
HT ML documents are sent back to
the server once the user submits
them.
What is the main use of online
forms?
- is to gather feedback or
opinion from the users for
data processing
Content
The information you will use, and the
way you will present it when you
develop a form.
Content
1. Start by placing the <form> </form> tags inside
the HT ML body tags.
2. Start organizing the form by placing the
input empty tag inside the <form> set of tags
and have its attribute type specify the kind
of input you want.
Content
3. Another attribute, name, distinguishes one input
field from another.
Input Fields
Text
Use text fields when you want users to type
letters or numbers in a form. The type
attribute for these fields needs to be set to
the value “text” :
Input Fields
<form>
<input type=“text” name=“first name” /> First Name <br />
<input type=“text” name=“lastname” /> Surname
</form>
First Name
Surname
[Link]
Input Fields
Text
To control the visible size of the text field, use
the size attribute.
Another attribute is maxlength; sets the maximum
number of characters that can be typed into the
field.
Input Fields
<form>
<input type=“text” name=“first name” /> First Name <br />
<input type=“text” name=“lastname” /> Surname
<input type=“text” name=“location” size=“15” /> City or Town <br />
<input type=“text” name=“phone” size=“11” maxlength=“11” />
Cellphone Number <br />
<input type=“text” name=“email” size=“32” />Email Address
[Link]
Input Fields
Check Boxes
Check boxes are similar to radio buttons, but are
used when you want to let the user select more
than one option among a number of choices.
The type attribute would be set to the value
“checkbox.”
Input Fields
<p> <b> What type of movie do you mostly prefer to watch? </b></p>
<input type=“radio” name=“movietype” value=“action” /> Action
<input type=“radio” name=“movietype” value=“comedy” /> Comedy
<input type=“radio” name=“movietype” value=“drama” /> Drama
<input type=“radio” name=“movietype” value=“none” /> None of
these
[Link]
Input Fields
Radio buttons look like small circles. The checked
attribute can be used to set the default selection
if we want to indicate a pre-chosen selection.
<input type=“radio” name=“movietype” value”none” checked /> None
of these
Input Fields
<p> <b> Where do you watch movies? Select all that apply. </b></p>
<input type=“checkbox” name=“cinema” value=“cinema” /> Cinema
<input type=“checkbox” name=“home” value=“home” /> Home
<input type=“checkbox” name=“computer” value=“computer” />
Computer
<input type=“checkbox” name=“donotwatch” value=“donotwatch” />
Don’t watch [Link]
Cinema Home Computer Don’t watch
Input Fields
Text Areas
Text areas are text fields that have more than
one line for longer text input. These are usually
used to record comments or feedback. The tag
for this is textarea,
<textarea name=“comments”></textarea>
[Link]
Input Fields
Text Areas
You can specify the dimensions of the textbox
with the rows and cols attributes.
<textarea name=“comments” rows=“5” cols=“35”></textarea>
[Link]
Input Fields
Text Areas
There is also an option to include default text to
appear in the field when the page loads.
<textarea name=“comments” rows=“5” cols=“35”>Please
provide any additional comments. Thank you. </textarea>
[Link]
Input Fields
Select Fields
A select field provides drop-down menus that the
user can use to choose information from a given
list. You can create a select field with the
<select> tag.
<p> <b> What is your age group? </b> </p>
<select name=“age”> … </select>
Input Fields
Select Fields
The <option> </option> tags define the text that
is displayed in the menu.
<p> <b> What is your age group? </b> </p>
<select name=“age”>
<option value=“teenager”> younger than 20</option>
<option value=“youngperson”> between 21 and 35/option>
<option value=“middleaged”> older than 36</option>
<option value=“noanswer”> prefer not to say</option>
</select> [Link]
Submit Query and Reset Buttons
The Submit Query button is essential, as it allows
users to submit the information they typed in.
The Reset button, restores the form to the
default state the viewers saw when they
first loaded the page.
Submit Query and Reset Buttons
The input tag is used here with the type
attribute set to submit or reset for each button.
<input type=“submit” />
<input type=“reset” />
[Link]
Submit Query and Reset Buttons
You can also change the name of the buttons to
anything you want with the value attribute.
<input type=“submit” value=“Send data” />
<input type=“reset” value=“Clear all” />
[Link]
Processing Forms
To process the form, tags must have the action
and method attributes.
The action attribute specifies the name of the
field and should be unique within the form.
The method attribute provides content associated
with the action attribute.
<form action=“URL for a program in the server” method=“get”>
Or
<form action=“URL for a program in the server” method=“post”>
When the method is set to post, the information
is sent to the server and then goes to the linked
URL. The easiest way to use the post method is
to put an email link in the action value.
action=“[Link]
<form action=“URL for a program in the server” method=“get”>
Or
<form action=“URL for a program in the server” method=“post”>
When the method is set to get, they are sent to
the URL.
