HTML Forms

An HTML form is used to collect user input. The user input is most often sent to a server for
processing.
Forms in HTML are used to handle operations like taking orders, conducting surveys, user
registration, etc.
To create a form the tag used is <form> and </form>. It is a container element.

Syntax: <FORM NAME= “Form Name” ACTION=”URL” METHOD=” get/post”>

The attributes of form element are (covered in portion)

1. Name : This specifies the name of the form but will not be displayed on form. As there can
be more than one FORM in an HTML document, a name is required to differentiate one form
from another.

2. Action : Specifies the URL where to send the form-data when a form is submitted.

3. Method : The method attribute specifies how to send form-data.

Syntax: <form method="get|post">

Notes on GET:
 Default and appends form-data into the URL in name/value pairs :
URL?name=value&name=value
 The length of a URL is limited (about 3000 characters)
 Never use GET to send sensitive data! (will be visible in the URL)
 Useful for form submissions where a user wants to bookmark the result
 GET is better for non-secure data, like query strings in Google

Notes on POST:
 Appends form-data inside the body of the HTTP request (data is not shown in URL)
 Has no size limitations
 Form submissions with POST cannot be bookmarked

The HTML <form> Elements

The HTML <form> element can contain one or more of the following form elements:
<input> Defines an input control

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

<label> Defines a label for an <input> element

<fieldset> Groups related elements in a form

<legend> Defines a caption for a <fieldset> element

<select> Defines a drop-down list

<optgroup> Defines a group of related options in a drop-down list

<option> Defines an option in a drop-down list

<button> Defines a clickable button

<datalist> Specifies a list of pre-defined options for input controls

<output> Defines the result of a calculation

Text Input Controls
There are three types of text input used on forms −
 Single-line text input controls − This control is used for items that require only one line
of user input, such as search boxes or names. They are created using HTML <input> tag.
 Password input controls − This is also a single-line text input but it masks the character
as soon as a user enters it. They are also created using HTMl <input> tag.
 Multi-line text input controls − This is used when the user is required to give details that
may be longer than a single sentence. Multi-line input controls are created using
HTML <textarea> tag.

The <input> Element :

One of the most used form element is the <input> element. It is an empty element. It is used to
provide an Input field in a form where the user can enter the data. Its attributes are type, name,
value, maxlength, size, src, checked, align, disabled, required, etc.

Syntax: <Input type =”Field type Name” Name = “Field Name” Value = “ Field Text”
Size =”20” >

Attribute Name Description

Name It specifies the name of the field as there can be more than one field in a
single form.

Size takes the value of a number in quotes which is equal to the width of the
field.
Maxlength takes the value of a number in quotes which is equal to the maximum
number of characters that can be entered.
Value It displays the text to be displayed on the field.

Type type attribute determines field type of input field to be provided in the
form. Filed type can be like text, radio, password, checkbox, submit, reset,
button.

An <input> element can be displayed in many ways, depending on the type attribute.

Type Description

<input type="text"> Displays a single-line text input field

<input type="radio"> Displays a radio button (for selecting one of many choices)

<input type="checkbox"> Displays a checkbox (for selecting zero or more of many choices)

<input type="submit"> Displays a submit button (for submitting the form)

<input type="button"> Displays a clickable button

<input type=”password”> Displays the masked characters as soon as user enters

<input type="reset"> Displays a reset button ( to reset initial values)

TextBox Field
If the value of the type attribute is “text” i.e. <input type= “Text”>, the form will show a
textbox. This textbox accepts the input in one line.
Along with this the TextBox field accepts value, size, name, maxlength within the <input> tag.

Attributes of Text Description

Field
Size It defines the width of the field. It contains no. of visible characters.

Maxlength It defines the maximum length of the field. It contains maximum no. of
characters that can be entered in the field.
Name It adds an internal name to the field so the program that handles the form
can identify the fields.
Value It defines what will appear in the box as the default value.

For Example:
HTML Code:

<html>
<head> <title> form</title></head>
<body leftmargin=50 topmargin=50>
<form name=details>
Father’s Name:
<input type=”text” name==”FName” size=20 maxlength=30 >
<br> <br> <br>
Mother’s name:
<input type=”text” name=”MName” size=20 maxlength=20 value= enter-here>
</form>
</body>
</html>
<form>

Output:
Password input controls: This is also a single line text input but it masks the
character as soon as a user enters it.
Its attributes are name, size, and maxlength.

Example :

<html>
<head> <title> form</title></head>
<body leftmargin=50 topmargin=50>
<form name=details>
Enter User ID:
<input type=text name=”id”>
<br><br><br>

Password :
<input type=password name=”pass”>
</form>
</body>
</html>

Output :
Radio Buttons
If the value of the type attribute is “radio” i.e. <input type= “Radio”>, the form will show a radio
button. This button is also called toggle button.
Radio button enables the selection of one of the options out of the many.

Attributes of Description
Text Field
Name It adds an internal name to the field so the program that handles the form can
identify the fields. To group the radio buttons so that only one could be selected
at a time, same name is given to all the buttons.

Value It defines what will be submitted if checked.

Checked This attribute can have value (e.g., checked=”checked | unchecked”).

For Example:
<html>
<head> <title> form</title></head>
<br><br> What types of lighting you have in your room?
<br><br>Lighting type:
<input type=radio name=”Ltype” value=”tube”>TubeLight
<input type=radio name=”Ltype” value=”bulb”>Bulb
<br><br>Lighting Size:
<input type=radio name=”LSize” value=”Long”>Long
<input type=radio name=”LSize” value=”medium”>Medium
<input type=radio name=”LSize” value=”short”>Short <br>
</form>
</body> </html>
Output:
The user is allowed to select one of the two from Lighting type i.e. either TubeLight or Bulb.
Similarly, the user can select any one of the three from Lighting Size i.e. Long, Medium and Short.
This is achieved by naming all options of a set the same. Here all light type has the name Ltype
while all light size is name LSize. This is where the id attribute comes handy, especially if the value
has to be used later on.

Checkboxes
If the value of the type attribute is “checkbox” i.e. <input type= “Checkbox”>, the form
will show a checkbox. As compared to radio button, a checkbox allows for multiple selections of
items. The check box’s attributes namely, name, value and checked behave the same as a
radio button’s attributes. Every checkbox does not get a different name, rather a collection of
checkboxes get the same name so as to refer to a group as shown in the following code.
For example:
All the checkboxes have the same name i.e. “sweet”, though the value for each one of them is
different.
<html>
<head> <title> form</title></head>
<br> I love to eat Chocolate:
<input type=checkbox name=”sweet” value=”Chocolate”>
<br><br> I love to eat Ladoo:
<input type=checkbox name=”sweet” value=”Ladoo”>
<br> <br> I love to eat Cake:
<input type=checkbox name=”sweet” value=”Cake”>
</form>
</body>
</html>

Output :
Command Button
If the value of the type attribute is “Submit” i.e. <input type= “submit | reset”>, the form will
show a command button.
❖ Submit button: When activated, a submit button submits a form. A form may contain more
than one submit button.
❖ Reset button: When activated, a reset button resets all controls to their initial values.
❖ Button: This creates a button that is used to trigger a client side script when the user clicks
that button
❖ Image : This creates a clickable button but we can use an image as background of the button
Example :
<html>
<head> <title> form</title></head>
<body leftmargin=50 topmargin=50>
<form name=details>
<input type=submit name=click1 value=SUBMIT> <br> <br>
<input type=reset name=click2 value=RESET> <br><br>
<input type=button name=click3 value=OK> <br><br>
<input type=image name=click4 src="C:\Users\baby\Pictures\follow.jpg"
height=100 width=100>
</form>
</body>
</html>
Output:
Text Area
Text areas are the fields that display several text lines at a time. Textarea field is generally used to
prepare the body of the email or use it to take comment from the user. The <textarea> tag has
both start and the end tag indicating from where the textarea begins and where the area where
you were writing text ends.
The attributes are:
Attribute Name Description
Cols It takes the value as number. Columns indicate the length of the textarea.

It takes the value as number. The rows indicate the number of rows with
Rows
text that will be visible at a time.

Used to give a name to the control which is sent to the server to be

Name
recognized and get the value.

<html>
<head> <title> form</title></head>
<body leftmargin=50 topmargin=50>
<form name=details>
<textarea rows=”5” cols=”30” name=”comments” >
Enter Comments Here
</textarea>
</form>
</body>
</html>

OUTPUT
 Select box control / Drop down Box ( combobox/lists)
Drop down Box contains a list that prompts the user to select one item from the list. It is created by
using <select> and <option> tags. Both <Select> and <option> tag have start and an end tag. A
SELECT element must contain at least one OPTION element.

attributes of <select> tag −

Attribute Description
Name It adds an internal name to the field so the program that handles the
form can identify the fields

Size It defines the number of items to be visible when user clicks on the drop
down box
Multiple It allows for multiple selections (ctrl to select )

Attributes of <option> tag –

Attribute Description
Selected Specifies that this option should be the initially selected value when the
page loads.
Value It defines what will be submitted to the computer when an item is
selected. If the value attribute takes the string as “Ind”, then “Ind” will
only be understood by the computer when the item selected is “Indan”.

Example :code OUTPUT

<html>
<head> <title> form</title></head>
<body leftmargin=50 topmargin=50>
<form name=details >
Taste of food
<select name=”taste” size=3 multiple>
<option value=”Indian” selected>Indian</option>
<option value=”chinese” >Chinese</option>
<option value=”mexican” >Mexican</option>
<option value=”italian” >Italian</option>
<option value=”continental” >Continental</option>
<option value=”karim” >Karim’s Special</option>
<option value=”japanese” >Japanese Sweets</option>
</select>
</form>
</body>
</html>
Label tag
Users who have difficulty clicking on very small regions (such as checkboxes) - because when a user
clicks the text within the <label> element, it toggles the input (this increases the hit area).
The <label> tag comes in pairs. The content is written between the opening (<label>) and closing
(</label>) tags. you can nest the <input> directly inside the <label> tag.

Associating a <label> with an <input> element has some advantages:

 The label text is both visually and pragmatically associated with the text input.
 You can click on the associated label for focusing or activating the input, as well as on the input
itself.

<html>
<head> <title> form</title></head>
<body leftmargin=50 topmargin=50>
<form name=details>

<label>Enter your Name :

<input type=text name=”first” id=first> </label>
<br>

<p>A label element is displayed like this:</p>

<label>Male
<input type="radio" name="gender" value="male"></label>
<br>
<label>Female
<input type="radio" name="gender" value="female"></label>
<br>
<label>Other
<input type="radio" name="gender" value="other">
</label>
</form>
</body>
</html>
Output:
Fieldset and legend tags
The <fieldset> tag is used to group related elements in a form.
The <fieldset> tag draws a box around the related elements.
The <legend> tag defines a caption for the <fieldset> element.

<html>
<head> <title> form</title></head>
<body leftmargin=50 topmargin=50>
<form name=details>

<fieldset>
<legend> personal details </legend><br>
Enter your Name :
<input type=text name=”first”>
<br><br><br>

Enter Email ID:

<input type=text name=”id”>
<br><br><br>

Birthday :
<input type=date name=”birthday”>
</fieldset>

</form>
</body>
</html>
<optgroup> tag
The <optgroup> tag is used to group related options in a <select> element (drop-down list).
If you have a long list of options, groups of related options are easier to handle for a user.
Attribute Description

disabled Specifies that an option-group should be disabled

label Specifies a label for an option-group

<html>
<body>
<p>The optgroup tag is used to group related options in a drop-down list:</p>
<form name=details>

<label>Choose a car:

<select name="cars">

<optgroup label="Swedish Cars">

<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>

<optgroup label="German Cars">

<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>

</select>
</label>
</form>
</body>
</html>
Summary
1. A form is an object that is used for collecting data from the user.
2. A The method attribute specifies how to send form-data using URL variables (with
method=”get”) or as HTTP post transaction (with method=”post”).
3. A The <input> tag collects the information from the user.
4. A The textfield control accepts the input in one line.
5. A Text areas are the fields that displays several text lines at a time. The <textarea> tag has both
start and the end tag.
6. A Radio button enables the selection of one of the options out of the many.
7. A Checkbox allows for multiple selections of items.
8. A The command button placed on the form performs some action when the user clicks on it.
9. A Submit buttons: When activated, a submit button submits a form. A form may contain more
than one submit button.
10. Reset buttons: When activated, a reset button resets all controls to their initial values.
11. Drop down Box contains a list that prompts the user to select one item from the list. It is
created by using <select> and <option> tags.

Exercise
A. Multiple choice questions
1. A _____ can be inserted in HTML document which can act as a container for all the input elements.
(a) Text field (b) Teaxt area (c) Form (d) Command Button

2. ________ method is used to sent form data as URL variables.

(a) get (b) set (c) post (d) none of them

3. ________ method is used to sent form data as HTTP post.

(a) get (b) set (c) post (d) none of them

4. What is the purpose of a web form

(a) An outdated feature still used to help the page load faster
(b) An useful way to send information from the user directly to the search engines
(c) A way to input data into a website or an application
(d) To enable the user to navigate the website with ease

5. Which element allows for the creation of groups of options in a select menu?
(a) <select> (b) <group> (c) <option> (d) <optgroup>

6. Which of the option will be selected with the following code snippet?
<select>
<option selected value=”Fiat”>Fiat</option>
<option value=”selected”>Saab</option>
<option value=”opel”>selected</option>
<option value=”audi”>Audi</option>
</select>
(a) Fiat (b) Saab (c) Selected (d) Audi
B. Answer the following questions:
1. Why forms are used in web pages?
2. Explain all the attributes of Form tag.
3. Differentiate between Get & Post methods of Form tag.
4. How text field and text area controls are different from each other?
5. Explain the use of Radio buttons in HTML forms with the help of an suitable example.
6. Mention all the attributes of Check box. Justify how it is different from Radio button.
7. State the purpose of Submit and Reset button.
8. Which attributes are necessary to insert drop down list in a HTML page?
9. Sometimes it is better to use the text area element instead of an input element of type text. Write
a short note to explain when and why?

C. Lab Session
1. Write HTML code to generate the following form. Save it as task1.html