Unit: II Chapter

HTML(Hypertext Markup Language)

9
HTML
FORMS

INTRODUCTION
Forms are an essential part of the Internet, as they provide
a way for web sites to capture information from users and
process requests. For many different reasons people or
companies are asking for our e‐mail addresses, names and
Objectives: site URLs. Buying products on the Internet today is quite
common and with the advent of security devices, the
 Understanding HTML Web Forms
method used for submitting your details and hard earned
 How HTML Forms work money is usually performed via forms.
 Creating a Form using <form> Tag
In this lesson we'll discuss how to use HTML to mark up a
 Using <input> Tag and its Attributes
form, what elements to use to capture different types of
 Creating Selection list, Check Boxes, Radio Buttons, data. We won't get too deep into how information from a
Menus & Text Areas
form is processed and handled on the back end of a
 Placing Image in the Form website as form processing is a deeper topic, for now we'll
 Understanding Submit button stick to the creation of forms.

144
9.1 UNDERSTANDING HTML FORMS
An HTML form is a part of a web page that is required when you want to collect some Definition
data from the site visitor. For example registration information: name, email address, Forms provide a way for web sites to
credit card, etc. Generally web forms allow web page readers to send their feedbacks, capture information from users and to
process requests, also they offer
orders or other information to the host of web page. A form will take input from the site
controls for nearly every imaginable
visitor and then will post it to the web server. Then back‐end application will do the use of an application.
required processing on that data in whatever way the companies require.

HTML forms are a composition of buttons, check boxes and text input
fields embedded inside the HTML documents with one goal in mind
i.e. to capture user input. By doing things such as providing fields for Label
user data such as names, phone number and email addresses, web
forms give users the opportunity to interact directly with a web page.
Option Buttons
HOW HTML FORM WORKS?
Text input fields
Before making the HTML form, one should know how the information
filled by the reader in a form makes its way back to the publisher. Web Check boxes

publisher needs to have a person who runs the web server computer
and sets it to process his forms. Almost all ISP companies offering web
page hosting also provide pre‐programmed scripts to their customers
for processing forms. Buttons

2 Form Submission 3

1 Webserver
Form processor
4 script
Visitor's se
web 5 Respon
browser

1 Visitor loads the form: The browser sends a request to the web server. The web server returns the HTML page that
contains the form.

2 Visitor fills the form and submits it: Every form must include a button for the user to submit the form. When someone
clicks that button, all the information visitor has filled in is sent (in a standard format) to an Internet address that you
specify in the form itself.
The form submission data is sent to the web server: Once the visitor has submitted the form, the form data is sent to
3
the web server. In the form, the author of the form has to mention an 'action' URL that tells the browser where to send
the form submission data. The 'action' usually points to the URL of a script that knows what to do with the data.

4 The web server processes the request: The web server passes the form submission data to the form processor script
(mentioned by the 'action'). The form processor script is written in languages like PHP, ASP, or Perl. The form processor
script can send the form data by email or save the data to a database file.

5 A response is sent back to the browser: The form processor script sends a response indicating the success or failure of
the form processing operations back to the server. The response could be re‐directed to another web page.

Computer Applications ‐ X 145

9.2 CREATING HTML FORM
Before starting to code, it's always better to step back and take the time to think about the sketch of your form. Designing a
quick mockup will help you to define the right set of data you want to ask to your user.
TABLE : Tags used to implement the form's interface
Tag Name Description
<form> . . . </form> Defines an HTML form for user input.
<input> . . . </input> The <input> element is used to enter user information.
<label> . . . </label> Defines a heading for an <input> element.
Teacher Says
<select> . . . </select> Defines a drop‐down list. Forms cannot be nested
<option> . . . </option> Defines an option in a drop‐down list. like tables or lists. But you
can have more than one
<fieldset> . . . </fieldset> Group related elements in a form. form in a page.

<textarea> . . . </textarea> Defines a multiline input control (text area).

<button> Defines a clickable button.

FORM TAG <FORM> . . . </FORM>

All HTML forms start with a <form> tag. It can be placed anywhere in the body of the HTML document. This tag defines a
form within HTML document. A document may contain multiple <form> elements, but these elements may not be nested.
Non‐form tags can be used within a <form> element.
The <form> tag without attributes does nothing. It should have at least two attributes:
<form method= "post/get" action= "mail to:[email protected]">

Method: Tells the browser how to send form data to a web Action: The action attribute contains path information so
server. The method attribute is always 'post', which means that the server knows what script or program it (the
to send the form entry result as a document. If you use the server) has to execute.
'GET' method, the results of your form will appear in the
URL box in the top of the browser and name value pairs,
separated by '&'.

Action attribute can be used in two ways:

• You can type the location of a form‐processing program on the web server computer and the form data will be sent
to that program.
• You can type mail to: followed by your email address and the form data will be sent directly to you.
<INPUT> TAG
This tag is used to ask the reader to enter or type a specific piece of information which label specifies, within a form. This tag
should fall between the <form> and </form> tags, but it can be placed anywhere on the page in relation to text, images and
other html tags. Each input field assigns a value to a variable, which has a specified name and data type.
ATTRIBUTES WITH <INPUT> TAG
Text fields are used to collect short text responses from a user and can also be used to gather numerical data. Text fields are
created using the <input> tag. When used to create text fields, the <input> tag has two required attributes, type and name
and three optional attributes value, size and maxlength.
146 Computer Applications ‐ X
 Syntax : <input type="variable_type" name="var name" value="default text" size= “value” maxlength= “value”>
Type attribute : This is used to specify the data type for the variable or in other words it indicates what type of form
element to display. There are three values of the TYPE attribute which are used to create text fields.
type="text": Input tag with type="text" are used to create an empty box of one line to gather data typed by the user.
type="password": Input tag with type="password" also creates an empty box, but when the user types information in
that box, the characters are replaced by a masking character ( *) asterik.
type="hidden": Input tag with type="hidden" does not appear on the screen of the form.
Name attribute: This is used to assign names for the form fields. Choose names for your form fields which are
meaningful,for example if you have a field that asks for the user's name, it is best to use name="U_name".
Value attribute: This is an optional attribute used to include default text in a text field.
Size attribute :This is an optional attribute that defines the length of the text box in characters means how many
characters wide the text input box should be.
Maxlength attribute : This is an optional attribute that defines the maximum length in characters of the text the user can
type.
Example:
What is Your Name? <input type=“text” size=”20” maxlength=”30” >
What is Your E‐Mail Address? <input type= “text” size= “20” maxlength= “30”>
If you want the user to enter text without it being displayed on the screen, use
Simple one‐line text entry
<input type= “password” />. When the user types anything in the box, the asterisks box will be displayed.
(***) will be displayed in the place of text.
Example: Creating a Simple Form.
<html>
<head><title>FORM</title></head>
</body>
<body bgcolor="pink">
<font face= “arial”>
<h1 align=“center”> ENTRY FORM </h1></font>
<img src="picture.jpg" width="200" height="200"
align="right" >
<form method="post">
<p> ENTER YOUR PASSWORD <input type=“password”
name=”pass” size=”10”>
<p> ENTER YOUR NAME <input type= “text” name= “name”
value="enter your name here" size= “20” maxlength=
“30” />
<p> ENTER YOUR AGE <input type=“text” name= “age” size=“2” maxlength=“3” />
<p> ENTER YOUR ADDRESS <input type=“text” name= “add” size=“30” maxlength= “40” />
<p> ENTER YOUR E-MAIL ID <input type=“text” name= “email” size=“15” maxlength= “20” />
<p> ENTER YOUR TELEPHONE NUMBER <input type=“text” name= “telno” size=“10” maxlength=”10” />
</form>
</body>
</html>

Computer Applications ‐ X 147

<LABEL> TAG
The <label> tag is associated with the description and the FOR attribute of the <label> tag specifies the Input tag that is
associated with the label. It tells the user what type of data input the form expects.

Example: Modify the above example with <label> tag and save the file as webform.htm.
<html>
<head><title>FORM</title></head>
</body>
<body bgcolor="pink">
<font face= “arial”>
<h1 align=“center”> ENTRY FORM </h1>
<img src="picture.jpg" width="200" height="200"
align="right" >
<form>
<label for="pass">ENTER PASSWORD:<input
type=“password” name=”pass” size=”10”></label>
<p><label for="name">ENTER NAME:<input type=
“text” name= “name” value="enter your name here"
size= “20” maxlength= “30” /></label>
<p><label for="age">ENTER AGE:<input type=“text” name= “age” size=“2” maxlength=“3”
/></label>
<p><label for="add">ENTER ADDRESS:<input type=“text” name= “add” size=“30”
maxlength= “40” /></label>
<p><label for="email">ENTER E-MAIL:<input type=“text” name= “email” size=“15”
maxlength= “20” /></label>
<p><label for="telno">ENTER TELEPHONE NO:<input type=“text” name= “telno” size=“8”
maxlength=”10” /></label>
</form>
</body>
</html>

9.3 CHECK BOXES

Check box is the simplest input type, that appears as a small square. Check boxes allow the user to toggle between possible
choices. They work like an on/off switch. The user can select or deselect by clicking them. A name for each check box should
be given separately. They are used when you want to let the visitor select one or more options from a set of alternatives.
Check boxes are created using the <Input> tag. When check boxes are created, the <Input> tag has three required attributes,
TYPE, NAME and VALUE, and two optional attribute, ID and CHECKED.

• TYPE attribute takes the value "checkbox" when used to create a

checkbox.

• NAME attribute is used to assign names for check boxes.

• CHECKED attribute indicates that the checkbox which includes this

attribute should appear on the browser's screen with the
checkbox selected.

148 Computer Applications ‐ X

Example : Add the following code lines in webform.htm before the </form> command and observe the output.

<p> SELECT YOUR HOBBIES

<input type="checkbox" name= “hobby1” value="1"
checked="checked"/> INTERNET
<input type=“checkbox” name= “hobby2” value="2"/>
MUSIC
<input type=“checkbox” name= “hobby3”value="3" />
READING
<input type=“checkbox” name= “hobby4” value="4"/>
TRAVELING

9.4 Radio Buttons

Radio buttons are like check boxes except they are used when only one choice has to be selected from a group of options.
Radio buttons are created using the <input> tag. While using radio buttons, the <input> tag has three required attributes,
TYPE, NAME, and VALUE and two optional attribute, ID and CHECKED.

Example: Add following code lines in webform.htm example and observe

the output: checked means by default
selected option.

<p> GENDER
<input type= “radio” name=”gender”
checked= "checked”/>MALE
<input type= “radio” name=”gender” />FEMALE

9.5 MENUS
Menus are used to allow the user to select one or more from a list of options. Pull‐down menus and scrollable menus are
both created with the <select>. . </select> and <option>. . </option> tags. The <select> tag has one required attribute, NAME
and two optional attributes, SIZE and MULTIPLE.

<SELECT> … </SELECT> TAG

This tag work together with <option> tag and is used to create both scrolling lists and pull‐down pick list.

<OPTION> …</OPTION> TAG

The <option> tag is used to define the options of a pull‐down or scrolling menu. The <option> tag takes two optional
attributes, Value and Selected.

Example : To create a Scrolling List.

<select name="menu" size="4" multiple> Teacher Says
<option value="Chinese">Chinese Food</option> Scrolling means viewing items
<option value="Japanese">Japanese Food</option> by clicking up‐down arrows.
<option value="Italian">Italian Food</option>
<option value="Mexican">Mexican Food</option>
<option value="French">French Food</option>
<option value="Thai">Thai Food</option>

Computer Applications ‐ X 149

 <option value="Indian">Indian Food</option>
<option value="German">German Food</option>
</select>
Observe this example using Multiple attribute with <select> tag, it is used
to allow the user to select more than one option from a scrolling menu. All
menus with the MULTIPLE attribute are scrolled menus, the SIZE attribute
determines how many options are visible simultaneously. If the SIZE
attribute is not included, the list will create a pull‐down pick list.
Example: To create Pull‐Down pick List.
<p> SUGGESTION FOR IMPROVEMENT OF THIS SITE </p>
<select name= “suggestions”>
<option selected> This is one of the best site I have
ever visited</option>
<option> This site requires some more
information</option>
<option> Reconstruction of the complete site is
required</option>
</select>
Observe the example carefully, this command line option is followed by selected, it means that this particular option will be
selected by default when the form is displayed.
Example: Add following lines in the webform.htm example and observe the output.
<p> SELECT YOUR PROFESSION
<select name= “choices” size=”3” >
<option> BUSINESS</Option>
<option> BANKING</Option>
<option> SERVICE WITH MNC</option>
<option> SERVICE WITH PSU</option>
<option> HOUSEWIFE</option>
<option> STUDYING</option>
<option> NONE OF THE ABOVE</option>
</select></p>
<p> ENTER YOUR CITY
<select name= “city” >
<option selected>DELHI</option>
<option>MUMBAI</option>
<option>KOLKATA</option>
<option>CHENNAI</option>
</select></p>

9.6 TEXT BOXES

Text boxes are used to gather lengthy or multiple‐line text responses from a user. They allow the user to enter multiple lines
of text in a single input item as compared to <input type= “text”> attribute that allows limited text. Text boxes are created
using the <textarea>. .</textarea> tag. The <textarea> tag has three required attributes NAME, ROWS and COLS.
Example: <textarea name="comments" rows="10" cols="50" > Default Text</textarea>
If 'default text' is present it will be displayed when the field appears, otherwise the field will be blank. The rows and cols
attributes control the number of rows and columns of text area. If the user enters the text that exceeds the display area then
both the scroll bars appear to scroll the text.

150 Computer Applications ‐ X

Example: Add the following lines in the 'webform.htm' and observe the output.
<textarea name= “COMMENTS” rows= “4” cols= “20”>
COMMENTS (IF ANY):
</textarea>

<FIELDSET> TAG AND <LEGEND> TAG >

The <fieldset> tag is used for grouping related form elements by creating a border around a form or section of a form. The
<legend> tag sets the title of the lined box created by <fieldset> tag. By using these two tags, you can make your forms much
easier to understand for your users.
Example: Using <fieldset> and <legend> tag.
<html>
<head><title> Enquiry Form</title></head>
<body bgcolor="khaki">
<form>
<fieldset>
<legend><b> Personal Information</b></legend>
<b>Name:</b><INPUT TYPE="text" SIZE="20">
<p><b>Email:</b><INPUT TYPE="text" SIZE="20"></p>
</fieldset>
<fieldset>
<legend><b> Age and Gender</b></legend>
<p><b>GENDER</b></p>
<input type= “radio” name=”gender” checked=”checked”/>Male
<input type= “radio” name=”gender” />Female
<p><b>AGE</b></p>
<input type="radio" name= “age” /> Less than 18 Years
<input type="radio" name= “age” /> More than 18 Years
</fieldset>
</form> </body> </html>
Example: Creating a Login window using <fieldset> tag.
<html>
<body bgcolor="lightgreen">
<form>
<fieldset>
<label>
Username
<input type="text" name="username">
</label>
<label>
Password <input type="password" name="pass">
</label>
</fieldset>
<fieldset>

Computer Applications ‐ X 151

 <input class="btn" type="submit" name="submit" value="Login">
<label>
<input type="checkbox" name="remember"> Stay signed in
</label>
</fieldset>
</form> </body> </html>

9.7 SUBMIT BUTTON

For every form a submit button is required to submit the form data to the server or to reset all the form fields to the default
values. Action buttons are created using the <Input> tag. While creating the action buttons, the <Input> tag has one required
attribute i.e. TYPE and four optional attributes, NAME, VALUE, SRC and ALIGN.
Example: <input type="submit" name="submit_button" value=" Submit the Data" />
TYPE ATTRIBUTE
This is a required attribute means it is essential and has three values used to create action buttons.
type="submit" : Input tag with type="submit" are used to create a button which, when clicked, submits the form to
the server.
type="reset" : Input tag with type="reset" are used to create a button which, when clicked, resets all the form fields to
their default values.
type="image" : Input tag with type="image" are used to put an image to submit the form data to the server when the
image is clicked.
Example: <input type= “submit” value= “Click Here to Submit” />
Value attribute is used to put any label on the button.
A gray button with a text label which is assigned in the value attribute, will
be displayed. By clicking it, all data items in the form will be sent to the web
server.

Example: <input type= “reset” value= “Clear this Form” />

A button marked with 'Clear this Form' will appear. By clicking it, all the
entries in the form will be cleared, now the user can start entering the data
from the beginning.

Example : <input type= “image” src= “ button.gif” />

You are allowed to put any graphic image to submit the form data instead
of default buttons. The image named button.gif will appear on the form,
the form data will be submitted whenever someone clicks this image.

Example: Add the following code lines in the 'webform.htm' and

observe the output.
<input type= “submit” value = “Click to Submit Data”/>
<input type= “reset” value = “Clear the Data”/>

152 Computer Applications ‐ X

Example: Creating a form with image submit and reset buttons.

<html>
<head><title>FORM</title></head>
<form method="post">
<body bgcolor="silver">
<font face="arial">
<h1 align="center"><font color="red">
REGISTRATION FORM</font></h1>
<fieldset>
<p>ENTER YOUR NAME <input type= “text” size= “20” maxlength= “30” />
<p>ENTER YOUR AGE<input type= “text” size“2” maxlength= “3” />
<P>ENTER YOUR ADDRESS <input type=“text” size= “30” maxlength= “40” />
<p>ENTER YOUR E-MAIL ID <input type=“text” size= “15” maxlength= “20” />
</fieldset>
<input type="image" src="submit1.jpg" width="70" height="70" />
<input type="image" src="reset1.jpg" width="70" height="70" />
</form>
</body>
</html>

RECAP BYTE
 Html forms provide an area where visitor can enter information to be sent back to the server of the web page.
 <form> tag defines a form within html document.
 Multiple <form> elements are allowed in a single page, but nested <form> elements are not allowed.
 <form> tag has two attributes i.e. method and action.
 Method attribute is always ‘post’ means to send the form information as a document or data.
 Action attribute specifies the Internet address to which form data is sent.
 <input> tag is used to ask the visitor to put information within form.
 Type attribute with <input> tag specifies the data type for the variables used to input the data.
 Size attribute with <input> tag indicates the size of text input box.
 Maxlength attribute with <input> tag specifies the number of characters the user is allowed to enter into the text box.
 Check boxes appear as a small square and allow the user to input the data by clicking them.
 Radio buttons are used when either of the choice has to be selected.
 <select> tag creates selection lists where the option for choices are displayed either as scrolling list or pull‐down pick list.
 <option> tag is used together with <select> tag.
 <textarea> tag creates text areas that allow the user to enter multiple lines of text in a single input box.
 Rows and cols attribute of the <textarea> tag controls the number of rows and columns of text area.
 Submit button is used to submit the form data to the server.
 Reset button clears all the current entries in the form so that you can start entering new data from the beginning.

Computer Applications ‐ X 153

COMPUTER LAB ACTIVITY
ACTIVITY 1: Create the Personal Information Enquiry form by using <fieldset> and <legend> tag.
<html>
<head><title></title></head>
<body bgcolor="khaki">
<form action="mail to:www.hightech.com" method="post">
<fieldset>
<legend> Personal Information</legend>
<label for="firstname">First name:
<input type="text" name="firstname" name="firstname" /></label><br />
<label for="lastname">Last name:
<input type="text" name="lastname" name="lastname" /></label><br />
<label for="email">email:
<input type="text" name="email" name="email" /></label><br />
<label for="Male"><input type="radio" name="gender" value="Male" id="Male" />
Male</label>
</br>
<label for="Female"><input type="radio" name="gender" value="Female"
id="Female" /> Female</label><br />
</fieldset>
<fieldset>
<legend>Interests</legend>
<input type="checkbox" checked="checked" name="programming" value="yes"
id="programming" />
<label for="programming">Programming</label><br />
<input type="checkbox" name="graphics" value="yes" id="graphics" />
<label for="graphics">Graphic Design</label><br />
<input type="checkbox" checked="checked" name="layout" value="yes"
id="layout" />
<label for="layout">Page Layout</label><br />
<input type="checkbox" name="writing" value="yes" id="writing" />
<label for="writing">Technical Writing</label><br /><br />
<label for="Department-1">College: </label><br />
<select name="Department-1" name="Department-1">
<option>Architecture</option>
<option>Business</option>
<option>Communication </option>
<option>Law </option>
<option>Engineering </option>
</select>
</fieldset>
<input type="submit" value="Send" />
<input type="reset" />
</form>
</body> Observe the output and label the parts of
</html> the output form.

154 Computer Applications ‐ X

 PRACTICE YOUR SKILLS
1. Read the following statements and select (3) the correct option.

i) A part of a web page used to collect some data from viii) An attribute with <input> tag that specifies the kind of
the site visitor and sent it to the host of the web site. data to be entered in a particular field.
a) Comment Page b) Feed back Page a) data b) declare
c) Form d) Submit form c) type d) none of them
ii) Following are parts of the web forms, except one. ix) The attribute with <input> tag that indicates how
a) Input text fields b) Buttons many characters wide the text input box should be.
c) Images d) Tools a) <length> b) <size>
iii) The tag which implements the form's interface. c) <numbers> d) <width>
a) <start form> b) <open form> x) An object on the form page which submits the form
c) <form> d) <start form> data to the web server.
iv) A <form> tag has these two required attributes. a) go button b) save button
a) Start and Stop b) Get and Post c) submit button d) reset button
c) Method and Action d) Begin and End xi) A <form> tag attribute that is used to send the form
entry result as a document.
v) The following tags are used within <form> tag, except
one: a) method b) send
a) <input> b) <option> c) submit d) post
c) <select> d) <color> xii) An attribute of the <form> tag that specifies the URL
to which the data is sent.
vi) The tag used to ask the visitor to enter information
within a form. a) address b) url
a) <input> b) <info> c) action d) method
c) <enter> d) <mail to>
vii) The type of control used when only one option is to ANSWERS i) a ii) d iii) c iv) c v) d vi) a
be selected from the set of alternatives. vii) b viii) c ix) b x) c xi) d xii ) c
a) Check boxes b) Radio buttons

2. State whether the following statements are True or False by ticking (3) them accordingly. True False
a) <form> tag can be nested within <form> tag.
b) <form> tag can be placed anywhere in the html document.
c) In forms, image can't be used in a submit button.
d) Size attribute is valid for the submit button.
e) Check boxes are used where multiple selection of information is required.
f) Radio buttons are the best option to choose the gender of the visitor.

ANSWERS a) T b) T c) F d) F e) T f) T

Computer Applications ‐ X 155

3. Read the following statements and identify the components used to create the form.
a) To identify where on the web page the form control elements will appear. .......................................
b) It uses the type attribute to define the type of information to be captured .......................................
within the control.
c) This tag differs from the <input> tag as it can accept larger passages of text .......................................
spanning multiple lines.
d) They allow user to make a quick choice from a small list of options but permit .......................................
selection of only one option, as opposed to multiple options.
e) It is a perfect way to provide users with a long list of options in a practical .......................................
manner.
f) They allow the user to put information into action, after the user has input .......................................
the requested information.

ANSWERS a) <form> tag b) <input> tag c) <textarea> tag d) Radio buttons e) Menus f) Submit button

APPLICATION BASED QUESTION

1. Tushar is creating a customer feedback form for his website. Suggest him the correct form control he should use
for the following.
a) To define an area where user can enter his/her name and address. Ans: Input control using <input type= “text”>
tag
b) To define an area where user can enter his comments. Ans: Text boxes using <textarea> tag
c) To select the name of the city from a list of twenty cities. Ans: Scrolling menu using <select> tag
d) To provide the option to the user to enter his/her gender. Ans: Radio button using <input type=”radio”>tag
e) To provide a list of five options from which customer has to select more than one option. Ans: Check boxes using
<input type= “checkbox”>tag
ASSESS YOUR KNOWLEDGE
1. Answer the following questions.
a) What do you understand by html forms and how do they work?
b) Write the steps and tags to be used to create a form.
c) What is form tag and how can we use it?
d) Explain two attributes that are associated with <form> tag.
e) Explain the attribute with their arguments associated with <input> tag.
f) Differentiate between Check Boxes and Radio Buttons.
g) Differentiate between Submit Button and Clear Button.
h) Define Text Area with its utility.
i) How will you create a custom button?

156 Computer Applications ‐ X