HTML Forms

 The HTML <form> element provide a document

section to take input from user.

 It provides various interactive controls for submitting

information to web server such as text field, text area,
password field, etc.

 Users generally complete a form by modifying its

controls e.g. entering text, selecting items, etc. and
submitting this form to a web server for further
processing.

Attributes
Attribute Description
name Assigns a name to the form. This is
used when referencing the form with
stylesheets or scripts. If there are
multiple forms, the name of each form
must be unique.
method Specifies the HTTP method to use
when the form is submitted.
Possible values:

 get (The form data is appended to

Prepared by Khyati Shah,SLICA Page 21
 the URL when submitted. This is
the default value.)
 post (The form data is not

appended to the URL.)

autocomplete Specifies whether the form fields
should be automatically completed
based on the user's history (i.e. based
on previous forms that the user has
completed)
action Specifies a URI/URL of the page that
will process the form.i.e defines
where to send data after submitting
form.

 HTML Form Syntax

<form >
//input controls e.g. textfield, textarea, radiobutton, b
utton
</form>

Prepared by Khyati Shah,SLICA Page 22

 HTML Form Tags

Tag Description
<form> It defines an HTML form to
enter inputs by the used
side.
<input> It defines an input control.
<textarea> It defines a multi-line input
control.
<label> It defines a label for an
input element.
<fieldset> It groups the related
element in a form.
<legend> It defines a caption for a
<fieldset> element.
<select> It defines a drop-down list.
<optgroup> It defines a group of related
options in a drop-down list.
<option> It defines an option in a
drop-down list.
<button> It defines a clickable button.

Prepared by Khyati Shah,SLICA Page 23

 HTML 5 Form Tags

Tag Description
<datalist> It specifies a list of pre-
defined options for input
control.
<keygen> It defines a key-pair
generator field for forms.
<output> It defines the result of a
calculation.

 <input> element
 The HTML <input> element is fundamental form
element. It is used to create form fields, to take input
from user. We can apply different input filed to gather
different information form user. Following is the
example to show the simple text input.
1. TextField Control
 The type="text" attribute of input tag creates textfield
control also known as single line textfield control. The
name attribute is optional.

Prepared by Khyati Shah,SLICA Page 24

 Example.
<form>
First Name: <input type="text" name="firstname"/> <b
r/>
Last Name: <input type="text" name="lastname"/> <b
r/>
</form>

2. Password Field Control

 The password is not visible to the user in password field
control.
Example
<form>
Password: <input type="password" id="password" name="p
assword"/> <br/>
</form>

Prepared by Khyati Shah,SLICA Page 25

 3. Email Field Control
 The email field in new in HTML 5. It validates the text
for correct email address. You must use @ and . in this
field.

<form>
<label for="email">Email: </label>
<input type="email" id="email" name="email"/> <
br/>
</form>
4. Radio Button Control
 The radio button is used to select one option from
multiple options. It is used for selection of gender, quiz
questions etc.

 If you use one name for all the radio buttons, only one
radio button can be selected at a time.

 Using radio buttons for multiple options, you can only

choose a single option at a time.
<form>
<label for="gender">Gender: </label>
<input type="radio" id="gender" name="gender" v
alue="male"/>Male

Prepared by Khyati Shah,SLICA Page 26

 <input type="radio" id="gender" name="gender" v
alue="female"/>Female <br/>
</form>

5. Checkbox Control
 The checkbox control is used to check multiple options
from given checkboxes.
<form>
Hobby:
<input type="checkbox" id="cricket" name="cricke
t" value="cricket"/>
Cricket
<input type="checkbox" id="football" name="foot
ball" value="football"/>
Football:
<input type="checkbox" id="hockey" name="hock
ey" value="hockey"/>
Hockey:
</form>

Prepared by Khyati Shah,SLICA Page 27

6. <textarea> tag in form
 The <textarea> tag in HTML is used to insert multiple-
line text in a form. The size of <textarea> can be
specify either using "rows" or "cols" attribute

7. Adding Button

 The <input type=”button”> tag places a button control

on a HTML form.

8. Submit button control

 HTML <input type="submit"> are used to add a
submit button on web page. When user clicks on submit
button, then form get submit to the server.
Syntax:
<input type="submit" value="submit">
The type = submit , specifying that it is a submit button

Prepared by Khyati Shah,SLICA Page 28

9. Graphical Submit button

 You can add graphics to your regular submit button.

This implies that you can define an image to act as a
button on form.

10. Reset button control

 HTML <input type="reset"> are used to reset the
values of form.
Syntax:
<input type="reset" value="reset">
The type = reset, specifying that it is a reset button

11. File input for form

 The <input type=”file”> tag is used to upload a file on a
web page.
12. Adding URL field for form
 The URL field is used to enter only web addresses, in
the correct format.If the URL is not entered in the
correct format then URL field validates it.

Prepared by Khyati Shah,SLICA Page 29

Attribute
Autofocus: helps in keeping the focus of mouse pointer
on the input field

13. Adding tel field for form

 You can use <input type="tel"> to provide a
telephone number in the field.

14. Adding datetime,date,month,week,time and

datetime-local field to a form
 In HTML5 we can easily select date and time from a
date picker control using various input type values of
date

15. Adding number field for form

 HTML5 contains a number type attribute of input

field.This type is used to validate the textbox only if the
value within the field is a numerical value.

Prepared by Khyati Shah,SLICA Page 30

16. Adding range field for form

 In HTML 5 the range of values by using the type of the

input field. you can use the <input type=”range”> tag,
which is used to specify the range values.
17. Adding color field for form

 The <input type=”color”> tag is used to select a color

from a color picker control.
18. Adding a selection control

 HTML <select> tag is used to create a drop down list

with multiple options. The <option> element is nested
within <select> tag for defining options in a list.

 The <optgroup> element can be used for grouping

related options in a list.
Syntax

<select>
<option></option>
</select>

Prepared by Khyati Shah,SLICA Page 31

Attributes
Attribute Value Description
autofocus autofocus This attribute let
automatically focused the
drop-down list on page
load.
disabled disabled It is used to disable the
control and user cannot
interact with the drop-
down list.
multiple multiple If it sets then a user can
select multiple options
from the list.
name name It determines the name
for the drop-down list.
required required If it specified, user must
select that field before
submitting the form.
size number It specifies the visible
number of options in the
list.

Prepared by Khyati Shah,SLICA Page 32

New Form Elements(HTML5)
1. <datalist> element

 The HTML <datalist> tag is is used to provide an auto

complete feature on form element. It provides a list of
predefined options to the users to select data.

 The datalist tag is introduced in HTML5.

 The <datalist> tag should be used with an

<input>element that contains a "list" attribute. The
value of "list" attribute is linked with the datalist id.

2. <output> element

 HTML <output> tag is used to display the result of

some calculation (performed by JavaScript) or the
outcome of a user action (such as Input data into a form
element).

 The <output> tag is a newly added tag and was

introduced in HTML5.
Syntax
<output>......</output>

Prepared by Khyati Shah,SLICA Page 33

3. <keygen> element
 The KEYGEN Element is commonly used for
generating the key pair in the form. Whenever user hit
the submit button, the KEYGEN Element creates two
key pair, first one is Public Key and another one is
Private Key.

 The private key is encrypted and stored in the local key

database and the public key is sent with the form data to
the server. The KEYGEN Element is most useful
when the user wants to generate the unique key for a
particular form.
Here is the Syntax for KEYGEN Element
<keygen name="key">

Grouping Form Controls

 HTML <fieldset> tag is used to group the logically

related fields/labels contained within an HTML form.

 The use of this tag is optional while creating an HTML

form but using <fieldset>, it is easy to understand the
purpose of grouped elements of form.

Prepared by Khyati Shah,SLICA Page 34

 The <legend> tag is used with the <fieldset> element as
a first child to define the caption for the grouped related
fields.
Syntax
<fieldset>.....</fieldset>

Prepared by Khyati Shah,SLICA Page 35