HTML5 Forms

HTML5 brings many features and improvements to web form creation. There are new attributes and input types that were introduced to help create better experiences for web users.

Form creation is done in HTML5 the same way as it was in HTML4:

<form>
   <label>Your name:</label>
   <input id=“user” name=“username” type=“text” />
</form>

Note!
Use the novalidate attribute to avoid form validation on submissions.

New Attributes

HTML5 has introduced a new attribute called placeholder. On <input> and <textarea> elements, this attribute provides a hint to the user of what information can be entered into the field.

<form>
   <label for=“email”>Your e-mail address: </label>
   <input type=“text” name=“email” placeholder=“email@example.com” />
</form>

 

Result: 

Holla Tech - Learn HTML5

The autofocus attribute makes the desired input focus when the form loads:

<form>
   <label for=“email”>Your e-mail address: </label>
   <input type=“text” name=“email” autofocus/>
</form>

 

Result: 

Holla Tech - Learn HTML5

Note!
The required attribute tells the browser that the input is required.

Forms with Required Fields
 

The “required” attribute is used to make the input elements required.

<form autocomplete=off>
   <label for=“e-mail”>Your e-mail address: </label>
   <input name=“Email” type=“text” required />
   <input type=“submit” value=“Submit”/>
</form>

 

The form will not be submitted without filling in the required fields.

Result:

Holla Tech - Learn HTML5

Note!
The autocomplete attribute specifies whether a form or input field should have autocomplete turned on or off. When autocomplete is on, the browser automatically complete values based on values that the user has entered before.

HTML5 added several new input types:
– color
– date
– datetime
– datetime-local
– email
– month
– number
– range
– search
– tel
– time
– url
– week

New input attributes in HTML5:
– autofocus
– form
– formaction
– formenctype
– formmethod
– formnovalidate
– formtarget
– height and width
– list
– min and max
– multiple
– pattern (regexp)
– placeholder
– required
– step

Note!
Input types that are not supported by old web browsers, will behave as input type text.

BACK NEXT

HTML MAIN COURSE PAGE

 

CONTACT HOLLA TECH LEARN SUPPORT