Form in HTML

FORM
<form>
.
form elements
.
</form>

Tag
<form>
<input>

Description
Defines an HTML form for user input
Defines an input control

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

<label>
<fieldset>

Defines a label for an <input> element

Groups related elements in a form

<legend>

Defines a caption for a <fieldset> element

<select>
<optgroup
>
<option>
<button>

Defines a drop-down list

Defines a group of related options in a drop-down list
Defines an option in a drop-down list
Defines a clickable button

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

<keygen> Defines a key-pair generator field (for forms)
<output>

Defines the result of a calculation

Text Input
<form>
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>

Radio Button Input

<form>
<input type="radio" name="sex"
value="male" checked>Male
<br>
<input type="radio" name="sex"
value="female">Female
</form>

The Submit Button

<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

CheckBox

<form action="">
<input type="checkbox" name="vehicle"
value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle"
value="Car">I have a car
</form>

The <select> Element

<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

FORM in HTML5

FORM in HTML5
HTML5 several new form fields have been added to the
existing form fields in HTML4
form fields are targeted at receiving special type of
data, e.g. email addresses, URL's, dates etc., and come
with built-in browser validation.

Email Field
The email input field can take text input and validate
that the input is a valid email address.
To specify that an input field is an email field using the
type="email" attribute, like this:
<input type="email" name="emailField"/>

URL Field
The URL field can take text input and validate that the
input is a valid URL.
To specify that an input field is a URL field using the
type="url" attribute, like this:
<input type="url" name="urlField"/>

Number Field
The number field can take text input and validate that
the input is a valid number.
The browser may assist the user by showing a numeric
keyboard, e.g. on a mobile phone.
<input type="number" name="numberField"/>

Number Field Attributes

Number fields have three attributes extra they can use which
affect what numbers that can be chosen.
These attributes are:
1.
2.
3.

min
max
step

The min attribute sets the minimum number accepted by the

field.
The max similarly sets the maximum accepted number.
The step attribute sets the number of steps the number i the
number field should increase when clicking the arrow up and
down in the field

Number Field Attributes

<input type="number" name="numberField
min="10" max="20" step="2" />

Range Fields
The range fields are used like number fields, but instead
of having an arrow up and down to select the value, you
have a slider.
<input type="range" name="rangeField"/>

Search Fields
The search fields are used for input to website searches.
The search fields can show a history of previous search
terms, to make searching easier.
You specify that an input field is a search field using the
type="search" attribute, like this:
<input type="search" name="searchField"/>

Tel Fields
The tel fields are used for telephone numbers.
Unlike the number field, a tel field can contain spaces in
between the numbers, but still no letters.
You specify that an input field is a tel field using the
type="tel" attribute, like this:
<input type="tel" name="telField"/>

Date Field
The date field can take text input and validate that the
input is a valid date.
You specify that an input field is a date field using the
type="date" attribute, like this:
<input type="date" name="dateField"/>

Time Field
The time field can take text input and validate that the
input is a valid time.
Time fields allow input hours between 0 and 23, and
minutes between 0 and 59.
You specify that an input field is a time field using the
type="time" attribute, like this:
<input type="time" name="timeField"/>

Datetime Field
The datetime field can take text input and validate that
the input is a valid date and time.
You specify that an input field is a date field using the
type="datetime" attribute, like this:
<input type="datetime" name="datetimeField"/>

Month Field
The month field can take text input and validate that
the input is a valid month.
Months can be be between 1 and 12.
The browser may also assist the user in picking a
month, by showing a list of months in a textual
representation, localized to the users own language.
You specify that an input field is a date field using the
type="month" attribute, like this:
<input type="month" name="monthField"/>

Week Field
The week field can take text input and validate that the
input is a valid week.
Weeks can be between 1 and 53.
You specify that an input field is a date field using the
type="week" attribute, like this:
<input type="week" name="weekField"/>

Color Field
The color fields are used to select colors, for instance in
a drawing program.
You specify that an input field is a color field using the
type="color" attribute, like this:
<input type="color" name="colorField"/>

HTML <output> Tag

The <output> tag represents the result of a calculation
(like one performed by a script).
<form oninput="x.value=parseInt(a.value)
+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>

HTML <datalist> Tag

The <datalist> tag specifies a list of pre-defined options
for an <input> element.
The <datalist> tag is used to provide an
"autocomplete" feature on <input> elements. Users will
see a drop-down list of pre-defined options as they input
data.
Use the <input> element's list attribute to bind it
together with a <datalist> element.

HTML <datalist> Tag

<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>

HTML <keygen> Tag

The <keygen> tag specifies a key-pair generator field
used for forms.
When the form is submitted, the private key is stored
locally, and the public key is sent to the server.
<form action="demo_keygen.asp" method="get">
Username: <input type="text" name="usr_name">
Encryption: <keygen name="security">
<input type="submit">
</form>

HTML Input Attributes

HTML5 added the following attributes for <input>:
autocomplete
autofocus
form
formaction
formenctype
formmethod
formnovalidate

HTML Input AttributesHTML

Input Attributes
HTML5 added the following attributes for <input>:
formtarget
height and width
list
min and max
multiple
pattern (regexp)
placeholder
required
step

The autocomplete Attribute

The autocomplete attribute specifies whether a form or
input field should have autocomplete on or off.
When autocomplete is on, the browser automatically
complete values based on values that the user has
entered before.
The autocomplete attribute works with <form> and the
following <input> types: text, search, url, tel, email,
password, datepickers, range, and color.

The autocomplete Attribute

<form action="action_page.php" autocomplete="on">
First name:<input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
E-mail: <input type="email" name="email"
autocomplete="off"><br>
<input type="submit">
</form>

The autofocus Attribute

The autofocus attribute is a boolean attribute.
When present, it specifies that an <input> element
should automatically get focus when the page loads.
First name:<input type="text" name="fname"
autofocus>

The form Attribute

The form attribute specifies one or more forms an
<input> element belongs to.
<form action="action_page.php" id="form1">
First name: <input type="text" name="fname"><br>
<input type="submit" value="Submit">
</form>
Last name: <input type="text" name="lname"
form="form1">

The formaction Attribute

The formaction attribute specifies the URL of a file that
will process the input control when the form is
submitted.
The formaction attribute overrides the action attribute
of the <form> element.
The formaction attribute is used with type="submit"
and type="image".

The formaction Attribute

<form action="action_page.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit"><br>
<input type="submit" formaction="demo_admin.asp"
value="Submit as admin">
</form>

The formmethod Attribute

The formmethod attribute defines the HTTP method for
sending form-data to the action URL.
The formmethod attribute overrides the method
attribute of the <form> element.
The formmethod attribute can be used with
type="submit" and type="image".

The formmethod Attribute

<form action="action_page.php" method="get">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit">
<input type="submit" formmethod="post"
formaction="demo_post.asp"
value="Submit using POST">
</form>

The formnovalidate Attribute

The novalidate attribute is a boolean attribute.
When present, it specifies that the <input> element
should not be validated when submitted.
The formnovalidate attribute overrides the novalidate
attribute of the <form> element.
The formnovalidate attribute can be used with
type="submit".

The formnovalidate Attribute

<form action="action_page.php">
E-mail: <input type="email" name="userid"><br>
<input type="submit" value="Submit"><br>
<input type="submit" formnovalidate value="Submit
without validation">
</form>

The formtarget Attribute

The formtarget attribute specifies a name or a keyword
that indicates where to display the response that is
received after submitting the form.
The formtarget attribute overrides the target attribute
of the <form> element.
The formtarget attribute can be used with
type="submit" and type="image".

The formtarget Attribute

<form action="action_page.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit as normal">
<input type="submit" formtarget="_blank"
value="Submit to a new window">
</form>

The height and width Attributes

The height and width attributes specify the height and
width of an <input> element.
The height and width attributes are only used with
<input type="image">.
<input type="image" src="img_submit.gif"
alt="Submit" width="48" height="48">

The list Attribute

The list attribute refers to a <datalist> element that
contains pre-defined options for an <input> element.
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>

The min and max Attributes

The min and max attributes specify the minimum and
maximum value for an <input> element.
The min and max attributes work with the following
input types: number, range, date, datetime, datetimelocal, month, time and week.

The min and max Attributes

Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">
Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02">
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1"
max="5">

The multiple Attribute

The multiple attribute is a boolean attribute.
When present, it specifies that the user is allowed to
enter more than one value in the <input> element.
The multiple attribute works with the following input
types: email, and file.
Select images: <input type="file" name="img"
multiple>

The pattern Attribute

The pattern attribute specifies a regular expression that
the <input> element's value is checked against.
The pattern attribute works with the following input
types: text, search, url, tel, email, and password.
Country code: <input type="text"
name="country_code" pattern="[A-Za-z]{3}"
title="Three letter country code">

The placeholder Attribute

The placeholder attribute specifies a hint that describes
the expected value of an input field (a sample value or a
short description of the format).
The 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, tel, email, and password.
<input type="text" name="fname" placeholder="First
name">

The required Attribute

The required attribute is a boolean attribute.
When present, it 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.
Username: <input type="text" name="usrname"
required>

The step Attribute

The step attribute specifies the legal number intervals
for an <input> element.
Example: if step="3", legal numbers could be -3, 0, 3, 6,
etc.
The step attribute works with the following input types:
number, range, date, datetime, datetime-local, month,
time and week.
<input type="number" name="points" step="3">