HTML5 New Form Attributes
HTML5 has new attributes for <form> and <input>.
New attributes for <form>:
New attributes for <input>:
- autocomplete
- autofocus
- form
- formaction
- formenctype
- formmethod
- formnovalidate
- formtarget
- height
and width
- list
- min
and max
- multiple
- pattern
- placeholder
- required
- step
<form> and <input>
autocomplete Attribute
When autocomplete is on, the browser automatically complete
values based on values that the user has entered before.
It is possible to have autocomplete "on" for the
form, and "off" for specific input fields.
In this below example “form” autocomplate is “on” and email “input field” autocomplate is
“off”
<form action="index.jsp"
autocomplete="on">
<table>
<tr><td>First name:</td>
<td><input type="text"
name="fname"></td></tr>
<tr><td>Last name:</td>
<td><input type="text" name="lname"></td></tr>
<tr><td> E-mail:</td>
<td>
<input type="email" name="email"
autocomplete="off"></td></tr>
<tr><td></td>
<td><input type="submit"
value="submit"/></td></tr>
</table>
</form>
<form> novalidate
Attribute
When present, it specifies that the form-data (input) should
not be validated when submitted.
Indicates that the form is not to be validated on submit:
<form action="index.jsp" novalidate>
<table>
<tr><td>First name:</td>
<td><input type="text"
name="fname"></td></tr>
<tr><td> E-mail:</td>
<td>
<input type="email"
name="email"></td></tr>
<tr><td></td>
<td><input type="submit"
value="submit"/></td></tr>
</table>
</form>
<input> autofocus
Attribute
It specifies that an <input> element should
automatically get focus when the page loads.
Let the "E-mail" input field automatically get
focus when the page loads:
First name:<input type="text"
name="fname" >
E-mail : <input type="email"
name="email"autofocus>
<input> form
Attribute
The form attribute specifies one or more forms an
<input> element belongs to.
An input field located outside the HTML form (but still a
part of the form):
<table>
<form
action="index.jsp" id="myform">
<tr><td>First name:</td>
<td><input type="text"
name="fname"/></td></tr>
<tr><td>Last name:</td>
<td><input type="text"
name="lname"/></td></tr>
<tr><td></td>
<td><input type="submit"
value="submit"/></td></tr>
</form>
<tr><td> E-mail:</td>
<td>
<input type="email" name="email"
form="myform"/></td></tr>
</table>
<input> 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.
HTML form with two submit buttons, with different actions:
<form action="user_login.jsp">
First name : <input type="text"
name="fname"><br>
Email : <input type="email" name="email"><br>
<input type="submit" value="Submit"><br>
<input type="submit" formaction=" owner.jsp"
value="Owner Submit">
</form>
<input> formenctype
Attribute
The formenctype attribute specifies how the form-data should
be encoded when submitting it to the server (only for forms with
method="post")
The formenctype attribute overrides the enctype attribute of
the <form> element.
Send form-data that is default encoded (the first submit
button), and encoded as "multipart/form-data" (the second submit
button):
<form action=" enctype.jsp"
method="post">
First name: <input type="text"
name="fname"><br>
<input type="submit" value="Submit">
<input type="submit"
formenctype="multipart/form-data"
value="Submit as form-data">
</form>
<input> 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 second submit button overrides the HTTP method of the
form:
<form action="index.jsp"
method="get">
First name: <input type="text"
name="fname"><br>
Last name: <input type="text"
name="lname"><br>
<input type="submit" value="Submit using GET method">
<input type="submit" formmethod="post" formaction="index.jsp"
value="Submit using POST method">
</form>
<input> 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.
Below example result is open in new tab after submitting the
form.
<form action="index.asp">
First name: <input type="text"
name="fname"><br>
Last name: <input type="text"
name="lname"><br>
<input type="submit" formtarget="_blank" value="Submit
">
</form>
<input> height and width Attributes
The height and width attributes specify the height and width
of an <input> element.
An image as the submit button, with height and width
attributes:
<input type="image" src="img_submit.png"
alt="Submit" width="60" height="30">
<input> list
Attribute
The list attribute refers to a <datalist> element that
contains pre-defined options for an <input> element.
An <input> element with pre-defined values in a
<datalist>:
Select course :<input list="tech">
<datalist id="tech">
<option
value="HTML5">
<option
value="Java">
<option
value="CSS3">
<option
value="HTML">
<option
value="CSS">
<option
value="CSS Tricks">
</datalist>
<input> min and max
Attributes
The min and max attributes specify the minimum and maximum
value for an <input> element.
<input> elements with min and max values:
Enter a date before 2013-12-31:
<input type="date" name="bday" max="2013-12-31">
Enter a date after 2014-01-01:
<input type="date" name="bday" min="2014-01-01">
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1"
max="5">
<input> multiple
Attribute
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.
A file upload field that accepts multiple values:
Select images: <input type="file"
name="img" multiple>
<input> 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.
An input field that can contain only 8 letters (no numbers
or special characters):
Enter name : <input type="text"
name="name" pattern="[A-Za-z]{8}" title="enter eight
letter name">
<input> placeholder
Attribute
The placeholder attribute specifies a short hint that
describes the expected value of an input field The short hint is displayed in
the input field before the user enters a value.
An input field with a placeholder text:
<input type="text" name="fname"
placeholder="First name">
<input> required
Attribute
It specifies that an input field must be filled out before
submitting the form.
A required input field:
<input type="text" name="fname"
placeholder="First name" required>
<input> step
Attribute
The step attribute specifies the legal number intervals for
an <input> element.
Example: if step="3" it allows only number
intervals -6,-3, 0, 3, 6,9,12 etc.
<input type="number" name="points"
step="3">
