13

CREATING FORMS

13,1 Input tag

13.2 Drop down Box

You can create a form using HTML code. A formn is just 1like any other form
that collects data from the user or the client depending on your need. The
information asked by the form can be name, emnail address, credit card, etc.
You may ask a person to place an order or you can gather his statistics or
register the person to your web forum or subscribe him to your weekly
newsletter using a form.
A form in HTML is an area that can contain form elements or form fields. The
form elements or the fields are the ones that allow the user to enter information
like text fields, textarea fields, drop-down menus, radio buttons, checkboxes,
etc.

The basic construction of a HTML form is this :

<form>
<input>
<input>
</form>

<form> begin a form

<input> ask for information in one of several different ways
<input> there can be as many input areas as you wish
</form> end a form

13.1 INPUT TAG

The input tag is the most common tag used inside form tag. The attributes that
are generally used inside <input> tag are:
" name - Assigns a name to the given field so that you may reference it
later.
" size - Sets the horizontal width of the field. The unit of measurement is in
blank spaces.
maxlength - Dictates the maximum number of characters that can be
entered.
|13.1|
 13.2
" type
it forms a text box. If the type is "radio", a radio
ComputertheAppltypeicatiison - I
Determines what kind of input field it will be. If
type is "checkbox", acheckbox becomes part of thebutton is drawn. "tIefxtth"e
the type attribute changes, a different field is formedform. As the
form valandue thein
attributes accompanying type gets changed. In the in the

13.1.1
will discuss about the various fields
Submit Button
following
formed by type attribute. section we
When <input type = «Submit"> the form will
generally the last item in the form. It takes the show a button. It is
Name defines what the label of the button will be.
following attributes:
"Send" or Submit".
It may be set to
In addition to adding the submit button, you need a
information and specify how you want it to travel to destination
that
for this
have to add the following attributes to your <form>; place. You
MethodThe post functionality of the method is generally
sends thedata without displaying any of the used, which
information to the visitor
Action - Specifies the URL to send the data to. The
send the information to a fake email examples below
address.
13.1.2 Text Fields
When <input type= Text">, the form will show a textbox. This is one line
text field, which means you can insert only one line. The attributes that may
accompany the type attribute are:
The size option defines the width of the field. That is how many visible
characters it can contain.
The maxlength option defines the maximum length of the
field. That is how many characters can be entered in the
field. If you do not specify a maxlength, the visitor can easily enter more
characters than are visible in the field at one time.
Ihe name setting adds an internal name to the field so the program that
handles the form can identify the fields.
The value setting defines what will appear inthe box as the default Valu
The align setting defines howthe field is aligned. Valid entries are: TOP,
MIDDLE, BOTTOM, RIGHT, LEFT, TEXTTOP, BASELINE,
ABSMIDDLE, ABSBOTTOM.
should be
The tabindex setting defines in which order the different fields
activated when the visitor clicks the tab key.
attributes:
The following table provides alist and the description of text field
 Creating Form 13.3
S.No. Attributes with Text Field Description
1 Size =
Number of characters shown.
2
MaxLength = Max characters allowed.
3 Name = Name of the field.
4
Value = Initial value in the field.
Align = Alignment of the field.
6
Tabindex = Tab order of the field.
Example 13.1
The following HTML Code helps in
forming two text boxes one of whose
internal name is firstname" and the others is "lastname". The internal
can be different from the label. The name
make a distinction between the two internal name is meant for the computer to
controls (here
controls on the form. This internal name also helps in textboxes) and to place the
controls to the database saved in the storing the value from the
server.
<form>
First name:
<input type="text' name="firstname">
<br>
Last name:
<input type="text name="lastname">
</form>
The above code produces the following
textboxes in the browser.
First name:
Last name:
Since the input tag is used after the label First name:", the textbox is
after this label. The width of the text fields is 20 characters by displayed
is the case for the label "Last name:". The <br> tag is
default. Similar
used to place the second
label and the text box below the first textbox. Had we not used the <br> tag.
the Last name:" and the text box would be placed on the right hand side of
first name and its textbOx.

Example 13.2
This is the varjation of the above example. In the following example, method
and action attributes are used with form tag. In the input tag, type attribute
forms atext box, size increases the length of the textbox to 10 characters.
maxlength makes the textbox hold 40 characters at a stretch and name provides
13.4 Computer Application - II
a computer name for the textbox.
<form method="post" action="mailto:youremail@email.com"'>
Name: <input type="text" size="10" maxlength="40" name="name">
<br>
Password: <input type="password" size="10" maxlength="10"
name="password">
<br>
<input type="submit" value="Send">
</form>

The above code produces the following form:

Name :

Password:

Send

data in the
Do not use the password feature for security purposes. The
password field is not encrypted and is not secure in any way. You can change
form.
the email address to your own and this will make your first functional
13.1.3 Radio Buttons
Radio
When <input type= Radio">, the form will show a radio button.
button helps in selection of one and only one option. You can see the radio
buttons in the quizzes, questionnaires, and other web sites that give the user a
multiple-choice question. The attributes that may accompany the type attribute
are:

Name: The name setting tells which group of radio buttons the field belongs
to. When you select one button, all other buttons in the same group are
unselected. If you omit the name attribute, you will not be able to form
other group of radio button.
Value: The value setting defines what will be submitted if checked.
Align: The align setting defines how the field is aligned. Valid entries
are: TOP, MIDDLE, BOTTOM, RIGHT, LEFT, TEXTTOP, BASELINE,
ABSMIDDLE, ABSBOTTOM.
Tabindex: The tabindex setting defines in which order the different fielas
should be activated when the visitor clicks the tab key.
The following table provides a list and the description of radio button.
CreatingForm 13.5

Attributes with Radio Button Description

Name = Name of the group.
Value = Value that is submitted if checked.
Align = Alignment of the field.
Tabindex = Tab order of the field.
Checked Default check this field.

Example 13.3:
In the following HTML code, the name of the two radio buttons remains the
same to refer them to the same group. They are distinguished by the value
ottribute that defines the value that will be submitted to the server when
checked upon. In the following example, since the input tag is used before the
Jabel "Male", the radio button is placed before "Male". The <br> tag inserts a
line feed and places the second radio button below the first one. Radio Buttons
are used when you want the user to select one of a limited number of choices.
<form>
<input type="radio" name="sex" value="male"> Male
<r>
<input type="radio" name="sex' value="female"> Female
</form>

The above code produces the following output in the browser window:
Male

Female

Note that only one option can be chosen.

Example 13.4:
This example shows
two groups of radio buttons, one with the name =
"shade" and the other with the name ="size". The value of all the radio
buttons however, is different in both the groups. This value will be
submitted to the server when checked. Since there are two groups, only two
radio buttons, one from each group will send the value to the server.
<form method='post" action="mailto:youremail@email.com">
What kind of shirt are you wearing? <br>
Shade:
<i<innputput type="radio" name="shade" value="dark">Dark
type="radio" name="shade" value="light">Light <br>
13.6
Computer Application - II
Size:
<input type='radio" name="size" value="small'>Small
<input type='radio" name="size" value="medium">Medium
<input type="radio" name="size" value="large">Large <br>
<input type="submit" value="Email Myself">
</form>

The above code produces the following set of radio buttons:

Shade: C Dark C Light
Size: Small C Medium C Large
Email Myselt

If you change the email address to your own then you willget an email with
"shade-(choice) size-(choice)".
Example 13.5:
The following example provides two groups of radio buttons named "groupl"
and group2". The <div>tag divided the two group into
<html>
<head>
<title>My Page</title>
</head>
<body>
<form name=myform" action="http://www.mydomain.com/
myformhandler.cgi" method="POST">
<div align="center'><b
<input type="radio" name="'group1" value="Milk"> Milk<br>
<input type="radio" name="group1" value="Butter" checked> Butter<br>
<input type="radio" name="group1" value="Cheese"> Cheese
<hr>
<input type='radio" name="group2" value="Water'> Water<br>
<input type="radio" name='group2" value="Beer'> Beer<br>
<input type='radio" name="group2" value="Wine" checked> Wine<br>
</diy>
</form>
</body>
</htm>
</body>
</html>
 Creating Form 13.7
The above code will produce the following output:

Milk
Butter
Cheese

Water
Beer

Wine

13.4.1 Checkboxes C
When <input type = checkbox"> is used, the form will display the
checkbox. Check boxes allow for multiple items to be selected for a certain
group of choices. The check box's name and value attributes behave the same
as a radio button. Checkboxes àre used when you want the user to
select one
or more options of a limited number of choices.
The attributes that are used Checkbox are discussed below:
The name setting adds an internal name to the field so the
program that
handles the form can identify the fields.
The value setting defines what will be submitted if checked.
The align setting defines how the field is aligned. Valid entries are:
TOP,
MIDDLE, BOTTOM, RIGHT, LEFT, TEXTTOP, BASELINE,
ABSMIDDLE, ABSBOTTOM.
The tabindex setting defines in which order the different fields should be
activated when the visitor clicks the tab key.
Attributes with Checkbox Description
Name = Name of the field.
value = Value that is submitted if checked.
align = Alignment of the field.
tabindex = Tab order of the field.
checked. Default check this field.

Example 13.6:
Ihe following HTML code displays the use of checkbox. Checkbox acts like a
13.8 Computer
attribute
Application -I
but a
radio button that takes the same value for "name'" different value
for the "value" attribute.
<form method="post" action="mailto:youremail@email.com">
Select your favorite cartoon characters.
value="Goofy">Goofy
<input type="checkbox" name="toon" value="Donald">Donald
<input type="checkbox" name="tOon"
value="Bugs'>Bugs Bunny
<input type="checkbox" name="toon" value='Scoob">Scoobv
name="toon" Doo
<input type="checkbox"
<input type="submit" value="Email Myself'>
</form>

The above produces the following output

Select the 2 greatest toons.
Goofy
Donald
Bugs Bunny
Scooby Doo
Email Myself

Example 13.7:
The following HTML code displays how to place a checkbox next to the text.
In all the checkbox values, the name of the checkbox is same i.e. "vehicle".

<form>
Ihave a bike:
<input type="checkbox" name="vehicle" value="Bike">
<brr
Ihave acar.
<input type='checkbox" name="vehicle" value="Car'>
<br>
Ihave an airplane:
<input type="checkbox" name="vehicle" value="Airplane">
</form>
How it looks in a browser:

Ihave a bike:
Ihave acar:
Ihave an airplane:
 Creatng Form 13.9
Example 13.8:
The following HTML COde shows how to place the checkbox next to a text,
make the second checkbox, checked and divide the checkboxes intodivision
using <diy> tag.
<html>
<head>
<title>My Page</title>
</head>
<body>
<formname="myform"action="'http:Awww.mydomain.com/
myformhandler.cgi" method="POST">
<divalign="center'><br>
<input type='checkbox" name="option1"value="Milk"> Milk<br>
<input type="checkbox" name="option2" value="Butter" checked+
Butter<br>
<input type="checkbox" name="option3" value="Cheese"> Cheese<br>
<br>
</diy>
</form>
</body>
</html>
And the resulting output from it:
Milk
Butter
Cheese
13.2 DROP DOWN BOX
Drop down menus are created with the <select> and <option> tags.
<Select> is the list itself and each <option> is an available choice for the
User. Both tags have an opening and a closing tag.
Example 13.9:
An example of the syntax of <select> and <option> would be :
<select>
<option>Milk</option>
<option>Coffee</option>
<option>Tea</option>
</select
The <select> tag defines the menu.
The name setting adds an internal name to the field so the program that
 13.10
Computer Application -II
handles the form can identify the fields.
The size option defines how many items should be visible: at a time. Default
is one item.

The multiple setting will allow for multiple selections if present.

The <option> tag defines the single items in the menu.
The value setting defines what will be submitted if the item is selected
Thisis not always the same as what it says in the menu.
Example 13.10:
An example of value attribute with option tag would be:
<option value="|D">ldaho</option>

The above example would display "ldaho" in the form but the computer will
understand this as "ID" and this would be submitted to the server.
You can force an item to be default selected by adding the selected option
<option selected
The following list provides attributes that accompany the respective tags:
Attributes with Dropdown Box Description
select Drop-down menu
name=
Name of the field.
size = Visible items in list.
multiple = Allows multiple choices if yes.
option Individual items in the menu.
selected Default selects the item.
value = Value to send if selected.
Example 13.11:
The following code displays the use of <select> and <option> tag to show the
dropdown box in the browser. It takes the name of the dropdown box as
"degree. This name is understood by the computer and is meant to store he
control with this name.
<form method="post" action="mailto youremail@email.com">
College Degree?
<select name="'degree">
<option>Choose One</option>
<option>Some High School</option>
<option>High School Degree</option>
<option>Some College</option>
 Creating Form 13.11
ootion>Bachelor's Degree</option>
<option>Doctorate</option>
sinput type='submit" value="Email Yourself'>
</select>
</form>

The above code produces the following output:

College Degree? Choose One
Email Youself
Example 13.12:
The following code displays the use of <select> and <option> tag to show the
Arondown box in the browser. This is the simplest of all the examples. It
shows allthe options in the drop down box for the user to select from one of
them.

<html>
<body>
<form>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab"> Saab</option>
<option value="fiat'>Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
</body>
</html>

The above code produces the following output:

Volvo

Example 13.13:
Ine Tollowing code displays the use of <select> and <option> tag to show the
dropdown box in the browser.
<html>
<head>
<title>My Page</title>
</head>
<body>
<form>
<div align="center>
SSelect name="mydropdown>
<option value="Milk":>Fresh Milk</option>
 13.12
<option value="Cheese">Old Cheese</option>
<option value="Bread'>Hot Bread</option>
Computer Application- I
</select>
</div>
</form>
</body>
</html>
And the resulting output from it:

Fresh Milk

13.3 HIGHLIGHTED SELECTION LIST

There can be aform that shows a selection list that has highlighted
This form willpost what the user highlights. Basically, it is another wayoptions.
to oet
the input from the user. The selected option tells the browser which choice t
select by default.
Example 13.14:
The following code displays the use of <select> and <option> tag to show the
dropdown box in the browser. This is similar to example 1.12 except that the
option "fiat" is already selected. But at the same time it provides all the other
options in the drop down box for the user to select from one of them.
The following code displays the use of <select> and <option> tag to show the
dropdwon box in the browser.The following code displays the use of <select>
and <option> tag to show the dropdwon box in the browser.Top of Form
<htm>
<body>
<form>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab'>Saab</option>
<optionvalue="fiat" selected="selected">Fiat</option>
<optionvalue="audi>Audi</option>
</select>
</form>
</body>
</html>

Example 13.15
The following code shown below displays the use of <select> and <optio
how many
to show the dropdown box in the browser. The size attribute selects
options will be shown at once before needing to scroll.