By

Sudha Agarwal
INDEX
 HTML Forms
 Form Elements
 Input Types
 Input Attributes
HTML forms
HTML Forms are required when you want to collect some data from
the site visitor.
A form will take input from the site visitor and then will post it to a
back-end application.
The HTML <form> tag is used to create an HTML form and it has
following syntax:

<form action="Script URL"

method="GET|POST">
form elements like input,
textarea etc.
</form>
Form Attributes
The most frequently used form attributes are:
Attribute Description
Action Specifies an address (url) where to submit the form (default: the
submitting page).
Method Specifies the HTTP method used when submitting the form (default: GET)

Target Specify the target window or frame where the result of the script will be
displayed. It takes values like _blank, _self, _parent etc.
enctype You can use the enctype attribute to specify how the browser encodes
the data before it sends it to the server. Possible values are:
• application/x-www-form-urlencoded - This is the standard method most
forms use in simple scenarios.
• mutlipart/form-data - This is used when you want to upload binary data
in the form of files like image, word file etc.

Example
HTML Form Controls
There are different types of form controls that you can use to collect
data using HTML form:

Text Input Controls

Checkboxes Controls
Radio Box Controls
Select Box Controls
File Select boxes
Hidden Controls
Clickable Buttons
Submit and Reset Button
Form Controls
Single-line text input controls
<input type="text" name="FirstName" value="This is
a text field" />
Attributes
Attribute Description
Type Indicates the type of input control and for text input control it
will be set to text.
Name Used to give a name to the control which is sent to the server to
be recognized and get the value.
Value This can be used to provide an initial value inside the control.
Size Allows to specify the width of the text-input control in terms of
characters.
Maxlength Allows to specify the maximum number of characters a user can
enter into the text box.
Form Controls
Single-line text input controls
<input type="text" name="FirstName" value="This is
a text field" />
Attributes
Attribute Description
Type Indicates the type of input control and for text input control it
will be set to text.
Name Used to give a name to the control which is sent to the server to
be recognized and get the value.
Value This can be used to provide an initial value inside the control.
Size Allows to specify the width of the text-input control in terms of
characters.
Maxlength Allows to specify the maximum number of characters a user can
enter into the text box.
Form Controls…..
Password input controls
<input type="password" name="pass" />

Attributes
Attribute Description
Type Indicates the type of input control and for text input control it will be
set to text.
Name Used to give a name to the control which is sent to the server to be
recognized and get the value.
Value This can be used to provide an initial value inside the control.

Size Allows to specify the width of the text-input control in terms of

characters.
Maxlength Allows to specify the maximum number of characters a user can
enter into the text box.
Form Controls…..
Password input controls
<input type="password" name="pass" />

Attributes
Attribute Description
Type Indicates the type of input control and for text input control it will be
set to text.
Name Used to give a name to the control which is sent to the server to be
recognized and get the value.
Value This can be used to provide an initial value inside the control.

Size Allows to specify the width of the text-input control in terms of

characters.
Maxlength Allows to specify the maximum number of characters a user can
enter into the text box.
Form Controls
Multiple-Line Text Input Controls
<textarea name="Comments">This is a multi-line
text field</textarea>

Attributes
Attribute Description
Name Used to give a name to the control which is sent to the server to be
recognized and get the value.
rows Indicates the number of rows of text area box.

cols Indicates the number of columns of text area box

Form Controls
Multiple-Line Text Input Controls
<textarea name="Comments“ rows=“10” cols=“30”>This
is a multi-line text field</textarea>

Attributes
Attribute Description
Name Used to give a name to the control which is sent to the server to be
recognized and get the value.
rows Indicates the number of rows of text area box.

cols Indicates the number of columns of text area box

 Form Controls
Checkbox Control
<input type="checkbox" name="vehicle1" value="Bike"> I
have a bike<br>
<input type="checkbox" name="vehicle2" value="Car"> I
have a car

Attributes
Attribute Description
type Indicates the type of input control and for checkbox input control it
will be set to checkbox.
name Used to give a name to the control which is sent to the server to be
recognized and get the value.
value The value that will be used if the checkbox is selected.

checked Set to checked if you want to select it by default.

 Form Controls
Checkbox Control
<input type="checkbox" name="vehicle1" value="Bike"> I
have a bike<br>
<input type="checkbox" name="vehicle2" value="Car"> I
have a car

Attributes
Attribute Description
type Indicates the type of input control and for checkbox input control it
will be set to checkbox.
name Used to give a name to the control which is sent to the server to be
recognized and get the value.
value The value that will be used if the checkbox is selected.

checked Set to checked if you want to select it by default.

 Form Controls
Radio Button Control
<input type="radio" name="gender" value="male" checked>
Male
<input type="radio" name="gender" value="female"> Female
<input type="radio" name="gender" value="other"> Other

Attributes
Attribute Description
type Indicates the type of input control and for checkbox input control it
will be set to radio.
name Used to give a name to the control which is sent to the server to be
recognized and get the value.
value The value that will be used if the radio box is selected.

checked Set to checked if you want to select it by default.

 Form Controls
Radio Button Control
<input type="radio" name="gender" value="male" checked>
Male
<input type="radio" name="gender" value="female"> Female
<input type="radio" name="gender" value="other"> Other

Attributes
Attribute Description
type Indicates the type of input control and for checkbox input control it
will be set to radio.
name Used to give a name to the control which is sent to the server to be
recognized and get the value.
value The value that will be used if the radio box is selected.

checked Set to checked if you want to select it by default.

Form Controls
Select Box Control
<select name="gender">
<option value="Male"
selected="selected">Male</option>
<option value="Female">Female</option>
<option value="Other">Other</option>
</select>
Attributes
Attribute Description
name Used to give a name to the control which is sent to the server to be
recognized and get the value.
size This can be used to present a scrolling list box.

multiple If set to "multiple" then allows a user to select multiple items from
the menu.
Form Controls
Select Box Control
<select name="gender">
<option value="Male"
selected="selected">Male</option>
<option value="Female">Female</option>
<option value="Other">Other</option>
</select>
Attributes
Attribute Description
name Used to give a name to the control which is sent to the server to be
recognized and get the value.
size This can be used to present a scrolling list box.

multiple If set to "multiple" then allows a user to select multiple items from
the menu.
Form Controls
File Upload Box
<input type="file" name="fileupload"
accept="image/*" />

Attributes
Attribute Description
name Used to give a name to the control which is sent to the server to be
recognized and get the value.
accept Specifies the types of files that the server accepts.

Hidden Form Controls

<input type="hidden" name="Account" value="This
is a hidden text field" />
Form Controls
File Upload Box
<input type="file" name="fileupload"
accept="image/*" />

Attributes
Attribute Description
name Used to give a name to the control which is sent to the server to be
recognized and get the value.
accept Specifies the types of files that the server accepts.

Hidden Form Controls

<input type="hidden" name="Account" value="This
is a hidden text field" />
Form Controls
The Button Element
<button type="button" onclick="alert('Hello
World!')">Click Me!</button>

Attributes
Attribute Description
name Specifies a name for the button

Type Specifies the type of button (button, reset, submit)

value Specifies an initial value for the button

Form Controls
Button Controls
Type Description
Submit This creates a button that automatically submits a form.

Reset This creates a button that automatically resets form

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.
 The submit button
<input type="submit"> defines a button for submitting the form
data to a form-handler.

The form-handler is typically a server page with a script for

processing input data.

The form-handler is specified in the form's action attribute:

<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
 The Action Attribute
The action attribute defines the action to be performed when the
form is submitted.

Normally, the form data is sent to a web page on the server when
the user clicks on the submit button.
<form action="/action_page.php">
The method Attribute
The method attribute specifies the HTTP method (GET or POST) to
be used when submitting the form data
<form action="/action_page.php" method="get">

or
<form action="/action_page.php" method=“post">

When to use GET?

The default method when submitting form data is GET.

However, when GET is used, the submitted form data will be visible
in the page address field:
The method Attribute
Always use POST if the form data contains sensitive or personal
information.

The POST method does not display the submitted form data in the
page address field.

POST has no size limitations, and can be used to send large

amounts of data.
 The name Attribute
Each input field must have a name attribute to be submitted.

If the name attribute is omitted, the data of that input field will not be
sent at all.
<form action="/action_page.php">
First name:<br>
<input type="text" value="Mickey"> <br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
 Html input Attribute
The value Attribute - specifies the initial value for an input field:
<form action="">
First name:<br>
<input type="text" name="firstname" value="Mickey">
</form>

The readonly Attribute - specifies that the input field is read only
(cannot be changed):
<form action="">
First name:<br>
<input type="text" name="firstname" value=" Mickey "
readonly>
</form>
 Html input Attribute
The disabled Attribute - specifies that the input field is disabled
<form action="">
First name:<br>
<input type="text" name="firstname" value=" Mickey "
disabled>
</form>

The size Attribute - specifies the size (in characters) for the input
field:
<form action="">
First name:<br>
<input type="text" name="firstname" value=" Mickey "
size="40">
</form>
Form labels
Form labels are used to associate an explanatory text to a form
field using the field's ID.
<label for="fn">First Name</label>
<input type="text" id="fn" />

Clicking on a label focuses its associated field (checkboxes are

toggled, radio buttons are checked)

Example
FIELDSET
Fieldsets are used to enclose a group of related form fields:
<form method="post" action="form.aspx">
<fieldset>
<legend>Client Details</legend>
<input type="text" id="Name" />
<input type="text" id="Phone" />
</fieldset>
<fieldset>
<legend>Order Details</legend>
<input type="text" id="Quantity" />
<textarea cols="40" rows="10"
id="Remarks"></textarea>
</fieldset>
</form>

The <legend> is the fieldset's title.

Form Controls example
<form method="post" action="apply-now.php">
<input name="subject" type="hidden" value="Class" />
<fieldset><legend>Academic information</legend>
<label for="degree">Degree</label>
<select name="degree" id="degree">
<option value="BA">Bachelor of Art</option>
<option value="BS">Bachelor of Science</option>
<option value="MBA" selected="selected">Master of
Business Administration</option>
</select>
<br />
<label for="studentid">Student ID</label>
<input type="password" name="studentid" />
</fieldset>
<fieldset><legend>Personal Details</legend>
<label for="fname">First Name</label>
<input type="text" name="fname" id="fname" />
<br />
<label for="lname">Last Name</label>
<input type="text" name="lname" id="lname" />
Form Controls example CONT.
<br />
Gender:
<input name="gender" type="radio" id="gm" value="m" />
<label for="gm">Male</label>
<input name="gender" type="radio" id="gf" value="f" />
<label for="gf">Female</label>
<br />
<label for="email">Email</label>
<input type="text" name="email" id="email" />
</fieldset>
<p>
<textarea name="terms" cols="30" rows="4"
readonly="readonly">TERMS AND
CONDITIONS...</textarea>
</p>
<p>
<input type="submit" name="submit" value="Send Form" />
<input type="reset" value="Clear Form" />
</p>
</form>
Form Controls example CONT.
button Controls example
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<input type="submit" name="submit"
value="Submit" />
<input type="reset" name="reset" value="Reset"
/>
<input type="button" name="ok" value="OK" />
<input type="image" name="imagebutton"
src="/html/images/logo.gif" />
</form>
</body>
</html>
button Controls example
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<input type="submit" name="submit"
value="Submit" />
<input type="reset" name="reset" value="Reset"
/>
<input type="button" name="ok" value="OK" />
<input type="image" name="imagebutton"
src="/html/images/logo.gif" />
</form>
</body>
</html>
Revision
What is the difference between form get and form post?

What are the different attributes of Form tag?

Why do we need Name attribute in input field?

What is the difference between input type “Submit” and input type
“Button”?
assignment
Create a basic student registration form containing following fields:
First Name – input box
LastName – input box
Date of Birth – 3 drop down boxes for date, month and year
Email id – input - box
Mobile Number – input box
Gender – Radio Button
Postal Address – text area
Permanent Address – text area
City – input box
State – drop down
Pincode – input box
Course Interested in – drop down
Query - textarea
Thank you!

Contact Us
info@4kitsolutions.com