HTML5 form with example

By /

Once our site is set the main thing we require is user input, by saying user input the first thing that comes to our mind is FORM. HTML5 has several new input types for form. These new features allows us better input control and validation. Not all major browsers support all the new input types. However, we can still use them, If they are not supported, they will behave as regular text fields.

If you have missed out our previous post on HTML5 features and structure elements

Please have a look at the Form below, it explains some of the input types and attributes. Try submitting empty fields, to check how everything works.

 

Demonstrating attribute Autofocus and Required

The autofocus attribute is a boolean attribute. When present, it specifies that an <input> element should automatically get focus when the page loads.
The required attribute is a boolean attribute.When present, it specifies that an input field must be filled out before submitting the form. Works with the input types: text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file.

It can be implemented as,
<input id=’name’ name=’name’ type=’text’ required autofocus />
Attribute autofocus works with only any one field for a form if applied to multiple, it will reflect on the first one only. Autofocus works in all browsers except IE, whereas required works with Firefox, Chrome and Opera
 

Demonstrating input type Email and attribute placeholder

The input type email can be used for input fields that should contain an e-mail address, it will only take a valid email address as input, if not provided it will generate error.
The placeholder attribute specifies a short hint that describes the expected value of an input field (e.g. a sample value or a short description of the expected format). It is displayed in the input field when it is empty, and disappears when the field gets focus.It works with input types text, search, url, tel, email, and password.

It can be implemented as,
<input id=’email’ name=’email’ type=’email’ placeholder=’example@domain.com’ required />
Type email works with Firefox, Chrome and Opera.
 

Demonstrating input type number and attributes min max

The number type can be used for input fields that should contain a numeric value, with its MIN and MAX attribute we can also set restrictions on what numbers are accepted.
The min and max attributes specify the minimum and maximum value for an <input> element.These attributes work with input types: number, range, date, datetime, datetime-local, month, time and week.

It can be implemented as
<input id=’siblings’ name=’siblings’ type=’number’ min=’1′ max=’5′ required />
It works best with Chrome.
 

Demonstrating input type date

The date type allows the user to select a date.

It can be implemented as
<input id=’Birthdate’ name=’Birthdate’ type=’date’ required />
It works best with Opera, which provides a calender to select date from.
 

Demonstrating input type url

The url type can be used for input fields that should contain a URL address.The value of the url field is automatically validated when the form is submitted.

It can be implemented as
<input id=’url’ name=’url’ type=’url’ required />
It works best with Chrome and Firefox.
 

Demonstrating element datalist and attribute list

The <datalist> element specifies a list of pre-defined options for an <input> element.
The <datalist> element can be used to provide an autocomplete feature on <input> elements. Users will see a drop-down list of pre-defined options as they input data. To accomplish this we need the <input> element’s list attribute and bind it together with the <datalist> element. The value of list attribute of input should be a valid id of datalist element.

So now both the users and the developers will not require to write more, i.e. users can easily select from the predefined set of input values and the developers will not need to write Great Logics to provide autocomplete facilities to users.

Try typing any initial letter of the name of any popular browser, and a drop down will be shown.

It is implemented as,


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

Demonstrating attribute multiple

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 input types: email, and file. Thus we can now select multiple images via a single input, and the best part is it works in all browsers except IE.

It can be implemented as
<input id=’pics’ name=’pics’ type=’file’ multiple required />
 
 

Demonstrating type color

The color type is used for input fields that should contain a color.

It can be implemented as
<input type=”color” name=”mycolor” required />
Works with opera.
 
 

Beside the one’s covered above the other input types are

DATETIME The datetime type allows the user to select a date and time (with time zone).
DATETIME-LOCAL The datetime-local type allows the user to select a date and time (no time zone).
MONTH The month type allows the user to select a month and year
RANGE The range type can be used for input fields that should contain a value from a range of numbers.Similar to type NUMBER, we can also set restrictions on what numbers are accepted.
SEARCH The search type can be used for search fields (currently a search field behaves like a regular text field as it is not supported by many browser).
TIME The time type allows the user to select a time no time zone is defined currently.
WEEK The week type allows the user to select a week and year.

With an implementation of these new input types we can save alot of Javascript validation.

 

Attributes for Form and Input tag

autocomplete 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. It is possible to have autocomplete “on” for the form, and “off” for specific input fields, or vice versa.
novalidate The novalidate attribute is a boolean attribute. When present, it specifies that the form-data (input) should not be validated when submitted.
form The form attribute helps us to specifie us that an <input> element belongs to one or more forms. To refer to more than one form, we can use a space-separated list of form ids.
formaction 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.It is used with type=”submit” and type=”image”.
formenctype 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.It is used with type=”submit” and type=”image”.
formmethod 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”.
formnovalidate 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”.
formtarget 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”.
pattern The pattern attribute specifies a regular expression that the <input> element’s value is checked against.
step 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 can be used together with the max and min attributes to create a range of legal values. Works with the following input types: number, range, date, datetime, datetime-local, month, time and week. The pattern attribute works with the input types: text, search, url, tel, email, and password.

More to come on HTML5 features, API’s and also on other Web Development topics (CSS, PHP, AJAX, etc…) in our upcoming posts. So Keep visiting…

Related Posts