An HTML form

An HTML form is used to collect user input. The user input is most often sent to
a server for processing.
The HTML <form> element is used to create an HTML form for user input:
<form>
.
form elements
.
</form>
The <form> element is a container for different types of input elements, such as:
text fields, checkboxes, radio buttons, submit buttons, etc.

Form Attribute

❖
❖ The Action Attribute

The action attribute defines the action to be performed when the form is
submitted.
Usually, the form data is sent to a file on the server when the user clicks on the
submit button.
In the example below, the form data is sent to a file called "action_page.php".
This file contains a server-side script that handles the form data:
Example
On submit, send form data to "action_page.php":
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
If the action attribute is omitted, the action is set to the current page.
The Target Attribute

SUDHAKAR DWIVEDI AKGEC IT

The target attribute specifies where to display the response that is received after
submitting the form.
The target attribute can have one of the following values:
Value Description
_blank The response is displayed in a new window or tab

_self The response is displayed in the current window

_parent The response is displayed in the parent frame

_top The response is displayed in the full body of the window

framename The response is displayed in a named iframe

The default value is _self which means that the response will open in the current
window.
Example
Here, the submitted result will open in a new browser tab:
<form action="/action_page.php" target="_blank">

❖ The Method Attribute

The method attribute specifies the HTTP method to be used when submitting the
form data.
The form-data can be sent as URL variables (with method="get") or as HTTP
post transaction (with method="post").
The default HTTP method when submitting form data is GET.
Example
This example uses the GET method when submitting the form data:
<form action="/action_page.php" method="get">

GET:

• Appends the form data to the URL, in name/value pairs

SUDHAKAR DWIVEDI AKGEC IT

 • NEVER use GET to send sensitive data! (the submitted form data is visible
in the URL!)
• The length of a URL is limited (2048 characters)
• Useful for form submissions where a user wants to bookmark the result
• GET is good for non-secure data, like query strings in Google

POST:

• Appends the form data inside the body of the HTTP request (the submitted
form data is not shown in the URL)
• POST has no size limitations, and can be used to send large amounts of
data.
• Form submissions with POST cannot be bookmarked

❖ The Autocomplete Attribute

The autocomplete attribute specifies whether a form should have autocomplete

on or off.
When autocomplete is on, the browser automatically complete values based on
values that the user has entered before.
Example
A form with autocomplete on:
<form action="/action_page.php" autocomplete="on">

❖ The Novalidate Attribute

The novalidate attribute is a boolean attribute.

When present, it specifies that the form-data (input) should not be validated when
submitted.
Example
A form with a novalidate attribute:
<form action="/action_page.php" novalidate>

SUDHAKAR DWIVEDI AKGEC IT

 List of All <form> Attributes

Attribute Description
accept-charset Specifies the character encodings used for form
submission
action Specifies where to send the form-data when a form is
submitted
autocomplete Specifies whether a form should have autocomplete on or
off
enctype Specifies how the form-data should be encoded when
submitting it to the server (only for method="post")
method Specifies the HTTP method to use when sending form-
data
name Specifies the name of the form
novalidate Specifies that the form should not be validated when
submitted
rel Specifies the relationship between a linked resource and
the current document
target Specifies where to display the response that is received
after submitting the form

HTML Input Types

HTML Input Types

Here are the different input types you can use in HTML:
• <input type="button">
• <input type="checkbox">
• <input type="color">
• <input type="date">
• <input type="datetime-local">

SUDHAKAR DWIVEDI AKGEC IT

 • <input type="email">
• <input type="file">
• <input type="hidden">
• <input type="image">
• <input type="month">
• <input type="number">
• <input type="password">
• <input type="radio">
• <input type="range">
• <input type="reset">
• <input type="search">
• <input type="submit">
• <input type="tel">
• <input type="text">
• <input type="time">
• <input type="url">
• <input type="week">
Tip: The default value of the type attribute is "text".

Input Type Text

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

Example
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>

SUDHAKAR DWIVEDI AKGEC IT

 Input Type Password

<input type="password"> defines a password field:

Example
<form>
<label for="username">Username:</label><br>
<input type="text" id="username" name="username"><br>
<label for="pwd">Password:</label><br>
<input type="password" id="pwd" name="pwd">
</form>

Input Type Submit

<input type="submit"> defines a button for submitting 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:
Example

SUDHAKAR DWIVEDI AKGEC IT

<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>

Input Type Reset

<input type="reset"> defines a reset button that will reset all form values to their
default values:
Example
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>

Input Type Radio

<input type="radio"> defines a radio button.

Radio buttons let a user select ONLY ONE of a limited number of choices:

SUDHAKAR DWIVEDI AKGEC IT

Example
<p>Choose your favorite Web language:</p>

<form>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript"
>
<label for="javascript">JavaScript</label>
</form>

Input Type Checkbox

<input type="checkbox"> defines a checkbox.

Checkboxes let a user select ZERO or MORE options of a limited number of
choices.
Example
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>

SUDHAKAR DWIVEDI AKGEC IT

 Input Type Color

The <input type="color"> is used for input fields that should contain a color.
Depending on browser support, a color picker can show up in the input field.
Example
<form>
<label for="favcolor">Select your favorite color:</label>
<input type="color" id="favcolor" name="favcolor">
</form>

SUDHAKAR DWIVEDI AKGEC IT

 Input Type Date

The <input type="date"> is used for input fields that should contain a date.
Depending on browser support, a date picker can show up in the input field.
Example
<form>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">
</form>

You can also use the min and max attributes to add restrictions to dates:
Example
<form>
<label for="datemax">Enter a date before 1980-01-01:</label>
<input type="date" id="datemax" name="datemax" max="1979-12-
31"><br><br>
<label for="datemin">Enter a date after 2000-01-01:</label>
<input type="date" id="datemin" name="datemin" min="2000-01-02">
</form>

Input Type Datetime-local

The <input type="datetime-local"> specifies a date and time input field, with no
time zone.
Depending on browser support, a date picker can show up in the input field.

SUDHAKAR DWIVEDI AKGEC IT

Example
<form>
<label for="birthdaytime">Birthday (date and time):</label>
<input type="datetime-local" id="birthdaytime" name="birthdaytime">
</form>

Input Type Email

The <input type="email"> is used for input fields that should contain an e-mail
address.
Depending on browser support, the e-mail address can be automatically validated
when submitted.
Some smartphones recognize the email type, and add ".com" to the keyboard to
match email input.
Example
<form>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">
<input type=”Submit”>
</form>

SUDHAKAR DWIVEDI AKGEC IT

 Input Type Image

The <input type="image"> defines an image as a submit button.

The path to the image is specified in the src attribute.
Example
<form>
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="4
8">
</form>

Input Type File

The <input type="file"> defines a file-select field and a "Browse" button for file
uploads.
Example
<form>
<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile">
</form>

SUDHAKAR DWIVEDI AKGEC IT

 Input Type Month

The <input type="month"> allows the user to select a month and year.
Depending on browser support, a date picker can show up in the input field.
Example
<form>
<label for="bdaymonth">Birthday (month and year):</label>
<input type="month" id="bdaymonth" name="bdaymonth">
</form>

Input Type Number

The <input type="number"> defines a numeric input field.

You can also set restrictions on what numbers are accepted.
The following example displays a numeric input field, where you can enter a
value from 1 to 5:
Example
<form>
<label for="quantity">Quantity (between 1 and 5):</label>
<input type="number" id="quantity" name="quantity" min="1" max="5">
</form>

SUDHAKAR DWIVEDI AKGEC IT

 Input Restrictions

Here is a list of some common input restrictions:

Attribute Description
checked Specifies that an input field should be pre-selected when
the page loads (for type="checkbox" or type="radio")
disabled Specifies that an input field should be disabled
max Specifies the maximum value for an input field
maxlength Specifies the maximum number of character for an input
field
min Specifies the minimum value for an input field
pattern Specifies a regular expression to check the input value
against
readonly Specifies that an input field is read only (cannot be
changed)
required Specifies that an input field is required (must be filled
out)
size Specifies the width (in characters) of an input field
step Specifies the legal number intervals for an input field
value Specifies the default value for an input field

Input Type Range

The <input type="range"> defines a control for entering a number whose exact
value is not important (like a slider control). Default range is 0 to 100. However,
you can set restrictions on what numbers are accepted with the min, max,
and step attributes:
Example
<form>
<label for="vol">Volume (between 0 and 50):</label>
<input type="range" id="vol" name="vol" min="0" max="50">
</form>

SUDHAKAR DWIVEDI AKGEC IT

 Input Type Search

The <input type="search"> is used for search fields (a search field behaves like a
regular text field).
Example
<form>
<label for="gsearch">Search Google:</label>
<input type="search" id="gsearch" name="gsearch">
</form>

Input Type Tel

The <input type="tel"> is used for input fields that should contain a telephone
number.
Example
<form>
<label for="phone">Enter your phone number:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-
9]{3}">
<input type="Submit">
</form>

SUDHAKAR DWIVEDI AKGEC IT

 Input Type Week

The <input type="week"> allows the user to select a week and year.
Depending on browser support, a date picker can show up in the input field.
Example
<form>
<label for="week">Select a week:</label>
<input type="week" id="week" name="week">
</form>

HTML Input Attributes

The value Attribute

The input value attribute specifies an initial value for an input field:
Example
Input fields with initial (default) values:
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form>

SUDHAKAR DWIVEDI AKGEC IT

 The readonly Attribute

The input readonly attribute specifies that an input field is read-only.

A read-only input field cannot be modified (however, a user can tab to it, highlight
it, and copy the text from it).
The value of a read-only input field will be sent when submitting the form!
Example

A read-only input field:

<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John" readonly><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form>

The disabled Attribute

The input disabled attribute specifies that an input field should be disabled.
A disabled input field is unusable and un-clickable.
The value of a disabled input field will not be sent when submitting the form!
Example
A disabled input field:
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John" disabled><br>

SUDHAKAR DWIVEDI AKGEC IT

 <label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form>

The size Attribute

The input size attribute specifies the visible width, in characters, of an input field.
The default value for size is 20.
Note: The size attribute works with the following input types: text, search, tel,
url, email, and password.
Example
Set a width for an input field:
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" size="50"><br>
<label for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin" size="4">
</form>

The maxlength Attribute

The input maxlength attribute specifies the maximum number of characters

allowed in an input field.
Note: When a maxlength is set, the input field will not accept more than the
specified number of characters. However, this attribute does not provide any
feedback. So, if you want to alert the user, you must write JavaScript code.
Example
Set a maximum length for an input field:

SUDHAKAR DWIVEDI AKGEC IT

<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" size="50"><br>
<label for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin" maxlength="4" size="4">
</form>

The min and max Attributes

The input min and max attributes specify the minimum and maximum values for
an input field.
The min and max attributes work with the following input types: number, range,
date, datetime-local, month, time and week.
Tip: Use the max and min attributes together to create a range of legal values.
Example
Set a max date, a min date, and a range of legal values:
<form>
<label for="datemax">Enter a date before 1980-01-01:</label>
<input type="date" id="datemax" name="datemax" max="1979-12-
31"><br><br>

<label for="datemin">Enter a date after 2000-01-01:</label>

<input type="date" id="datemin" name="datemin" min="2000-01-
02"><br><br>

<label for="quantity">Quantity (between 1 and 5):</label>

<input type="number" id="quantity" name="quantity" min="1" max="5">
</form>

The multiple Attribute

The input multiple attribute specifies that the user is allowed to enter more than
one value in an input field.
The multiple attribute works with the following input types: email, and file.
Example

SUDHAKAR DWIVEDI AKGEC IT

A file upload field that accepts multiple values:
<form>
<label for="files">Select files:</label>
<input type="file" id="files" name="files" multiple>
</form>

The pattern Attribute

The input pattern attribute specifies a regular expression that the input field's
value is checked against, when the form is submitted.
The pattern attribute works with the following input types: text, date, search, url,
tel, email, and password.
Use the global title attribute to describe the pattern to help the user.
Example
An input field that can contain only three letters (no numbers or special
characters):
<form>
<label for="country_code">Country code:</label>
<input type="text" id="country_code" name="country_code"
pattern="[A-Za-z]{3}" title="Three letter country code">
</form>

The placeholder Attribute

The input placeholder attribute specifies a short hint that describes the expected
value of an input field (a sample value or a short description of the expected
format).
The short hint is displayed in the input field before the user enters a value.
The placeholder attribute works with the following input types: text, search, url,
number, tel, email, and password.
Example
An input field with a placeholder text:

SUDHAKAR DWIVEDI AKGEC IT

<form>
<label for="phone">Enter a phone number:</label>
<input type="tel" id="phone" name="phone"
placeholder="123-45-678"
pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>

The required Attribute

The input required attribute specifies that an input field must be filled out before
submitting the form.
The required attribute works with the following input types: text, search, url, tel,
email, password, date pickers, number, checkbox, radio, and file.
Example
A required input field:
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
</form>

The step Attribute

The input step attribute specifies the legal number intervals for an input field.
Example: if step="3", legal numbers could be -3, 0, 3, 6, etc.
This attribute can be used together with the max and min attributes to create a
range of legal values.
The step attribute works with the following input types: number, range, date,
datetime-local, month, time and week.
Example
An input field with a specified legal number intervals:
<form>
<label for="points">Points:</label>
<input type="number" id="points" name="points" step="3">
</form>

SUDHAKAR DWIVEDI AKGEC IT

 The autofocus Attribute

The input autofocus attribute specifies that an input field should automatically get
focus when the page loads.
Example
Let the "First name" input field automatically get focus when the page loads:
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" autofocus><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>

The height and width Attributes

The input height and width attributes specify the height and width of an <input
type="image"> element.

SUDHAKAR DWIVEDI AKGEC IT