Did you find this useful?
Socialize it today.


HTML5 Form Attributes

Wednesday, October 17, 2012

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 AttributesDescription
autocompleteSpecifies is a field should enable the autocomplete feature.
autofocusFocuses the input on the element when the page is loaded.
formSpecifies one or more forms to which the input element belongs.
formactionOverrides the action attribute on the form element.
formenctypeOverides the enctype attribute on the form element.
formmethodOverrides the method attribute on the form element.
formnovalidateOverrides the novalidate attribute on the form element.
formtargetOverrides the target attribute on the form element.
heigthSets the height of an input element of type "image".
listThe list attribute refers to a datalist element that contains pre-defined options for an input element.
maxThe max attribute specify the maximum value for an input element.
maxlengthThe maxlength attribute limits the number of characters that an input or textarea can accept.
multipleAllows file inputs to accept more than one file for upload.
minThe min attribute specify the minimum value for an input element.
novalidateDisables the form submission validation when specified on a form element.
patternValidates the value of an element value against a regular expression.
placeholderGives the user a hint about what type of data they should enter.
requiredA boolean attribute that means the element is required.
stepValue specified that increments the value for an input with the type equal to "number".
widthSets 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>
Email:

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">

Please help us spread the word by socializing it today!

email contact us

Did you find something wrong with the information on this page? Please take a moment to report it to us so that we can continue to improve the quality of the information on this site. Click here to report an issue with this page.



Recommended Books & Training Resources

HTML CSS and JavaScript The Definitive Guide to HTML5 Murachs HTML5 and CSS3