![browser]()
HTML5 brings us new form attributes that you can use reduce the dependency of JavaScript to manage your input form elements. For example, some of the new attributes allow you to set a minimum or maximum value for an input element, or
set a maximum length which can limit the input of a string value. As HTML5 is being developed, one of the considerations has been making forms on the web easier to use with built-in
features without the need for extra JavaScript. The new HTML5 form attributes, as of this writing, is not supported by all of the major browsers. Chrome, Opera, Firefox, and Safari have the most support. Each item below is tested for
support in the current browser. In the items below, green indicates that your current browser should support the attribute while red indicates that it
does not. Please note that the HTML5 specification is still being developed, so this information can change. On the right side of this text, you will notice that this page has detected your browser version.
Form Attributes | Description |
autocomplete | Specifies is a field should enable the autocomplete feature. |
autofocus | Focuses the input on the element when the page is loaded. |
form | Specifies one or more forms to which the input element belongs. |
formaction | Overrides the action attribute on the form element. |
formenctype | Overides the enctype attribute on the form element. |
formmethod | Overrides the method attribute on the form element. |
formnovalidate | Overrides the novalidate attribute on the form element. |
formtarget | Overrides the target attribute on the form element. |
heigth | Sets the height of an input element of type "image". |
list | The list attribute refers to a datalist element that contains pre-defined options for an input element. |
max | The max attribute specify the maximum value for an input element. |
maxlength | The maxlength attribute limits the number of characters that an input or textarea can accept. |
multiple | Allows file inputs to accept more than one file for upload. |
min | The min attribute specify the minimum value for an input element. |
novalidate | Disables the form submission validation when specified on a form element. |
pattern | Validates the value of an element value against a regular expression. |
placeholder | Gives the user a hint about what type of data they should enter. |
required | A boolean attribute that means the element is required. |
step | Value specified that increments the value for an input with the type equal to "number". |
width | Sets the width of an input element of type "image" |
Autocomplete
The autocomplete attribute specifies whether a form or input field should have autocomplete on or off. If the autocomplete attribute is set to "on", the browser automatically
complete values based on values that the user has entered before. You may need to activate the autocomplete function in your browser for this attribute to work properly.
<form action="form.htm" autocomplete="on">
First name:<input type="text" name="fname">
Last name: <input type="text" name="lname">
E-mail: <input type="email" name="email" autocomplete="off">
<input type="submit">
</form>
Autofocus
The autofocus attribute is a boolean attribute. When present, it specifies that an <input> element should get focus when the page loads.
Name: <input type="text" name="fullName" autofocus>
Form
The form attribute specifies one or more forms an <input> element belongs to. For an input element to belong to more than one form, use a space-separated list of form ids.
<form id="form1" action="form.htm">
First name:<input type="text" name="fname">
<input type="submit" value="submit">
</form>
Last name: <input type="text" form="form1" name="lname">
Formaction
The formaction attribute specifies the URL of a file that will process the input control when the form is submitted. This attribute overrides the action attribute of the
<form> element.
<action="form.htm">
First name:<input type="text" name="fname">
<input type="submit" value="Here">
<input type="submit" value="There" formaction="/">
</form>
Formenctype
The formenctype attribute specifies how the form data should be encoded when submitting it to the server, when the form method is "post".
<action="form.htm" method="post">
First name:<input type="text" name="fname">
<input type="submit" value="Submit">
<input type="submit" value="Multipart" formenctype="multipart/form-data">
</form>
Formmethod
The formmethod attribute defines the HTTP method for sending form data to the action URL.
<action="form.htm" method="get">
First name:<input type="text" name="fname">
<input type="submit" value="Get">
<input type="submit" value="Post" formmethod="post">
</form>
Formnovalidate
The novalidate attribute is a boolean attribute. When specified, it instructs the browser that the <input> element should not be validated when submitted.
<action="form.htm">
Email:<input type="email" name="userEmail">
<input type="submit" value="Submit">
<input type="submit" value="No Validate" formnovalidate>
</form>
Formtarget
The formtarget attribute indicates where to display the response after submitting the form.
<action="form.htm">
Name:<input type="text" name="name">
<input type="submit" value="Submit">
<input type="submit" value="New Window" formtarget="_blank">
</form>
Height and Width
The height and width attributes specify the height and width of an <input> element with the type = "image".
<action="form.htm">
Name:<input type="text" name="name">
<input type="image" src="submit.gif" alt="Submit" width="32" height="32">
</form>
List
The list attribute refers to a datalist element that contains pre-defined options for an input element.
Select a Browser: <input list="browsers" />
<datalist id="myDatalist">
<option value="Internet Explorer"/>
<option value="Firefox"/>
<option value="Chrome"/>
<option value="Opera"/>
<option value="Safari"/>
</datalist>
Min and Max
The min and max attributes specify the minimum and maximum value for an input element.
Qty (5-10):<input type="number" min="5" max="10" name="qty">
<input type="submit">
</form>
Maxlength
The maxlength attribute limits the number of characters that an input or textarea can accept.
Code:<input type="text" maxlength="10" name="code">
<input type="submit">
</form>
Multiple
The multiple attribute is a boolean attribute. If specified, the user is allowed to enter more than one value in the <input> element.
Select Files: <input type="file" multiple>
</form>
Novalidate
The novalidate attribute is a boolean attribute. If specified, the form data should not be validated when submitted.
<action="form.htm" novalidate>
Email:<input type="email" name="userEmail">
<input type="submit" value="Submit">
</form>
Pattern
The pattern attribute specifies a regular expression that the <input> element's value is checked against.
Pin:<input type="text" name="pinNum" pattern="[0-9]{4}">
Placeholder
The placeholder attribute specifies a hint that describes the expected value of an input field. The hint is displayed in the input field when it is empty, and disappears when the field gets focus.
Name:<input type="text" name="fullName" placeholder="Enter your Full Name">
Required
The required attribute is a boolean attribute. If specified, an input field must be filled out before submitting the form.
UserName:<input type="text" name="username" required>
Step
The step attribute specifies the number interval for an <input> element.
Points:<input type="number" step="2">
Did you find the page informational and useful? Share it using one of your favorite social sites.
Recommended Books & Training Resources