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
Demonstrating input type Email and attribute placeholder
Demonstrating input type number and attributes min max
Demonstrating input type date
Demonstrating input type url
Demonstrating element datalist and attribute list
Demonstrating attribute multiple
Demonstrating type color
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.|
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…