HTML 5 New Form Elements and HTML 5 New Form Attributes

0 60

New Form Elements Attributes Autocomplete Placeholder Progress

in this tutorial, we will learn about New Form Elements Attributes Autocomplete Placeholder Progress and related others new form elements and attributes

HTML 5 New Form Elements

HTML 5 has introduced some new form elements that can be use in web pages. These elements are designed to be used with the JavaScript and these elements will be more functional with JavaScript.
New form elements are follows:

  • Datalist
  • Progress
  • Meter
  • Output

HTML 5 Datalist element

Datalist is a form-specific element.it will display a drop-down list of pre-defined options as they input data in input field. The list attribute of the <input> element, must refer to the id attribute of the <datalist> element.

HTML 5 Progress element

The progress element represents the current status of a task, which gradually changes as the task heads for completion. This is not a form-specific element. For example, when the user downloads any file from a particular Web page, the download task is represented as a progress bar.

HTML 5 Meter element

meter element will represent a measurement scale for a known range. The known range have the definite minimum and maximum values to measure the data on the scale.

HTML 5 Output

Output element will show result of calculation data on form.

The <textarea> Element

Text area element will define a multi lines (text area like a box):

The <button> Element

The <button> Element will define a button.

The <select> Element (Drop-Down List)

<select> element will define a drop down list in input field:

HTML 5 New Form Attributes

Earlier web developer need to write JavaScript code to check browser based validations on the data entered by user in a web form fields.
HTML 5 introduced new attributes to perform browser-based validation without writing a JavaScript codes.

  • Required
  • Placeholder
  • Pattern
  • Multiple
  • Autofocus
  • Autocomplete Attribute

Required

Required attribute is Boolean attribute that informs to browser submit that form only when no field left blank by user. The input type elements, such as button, range, and color cannot be set for required attribute as they have a default value.

Placeholder

Placeholder shows a small hint to a user that what data to enter in field. Placeholder works like a toggle like its appears in the field and disappear when user clicks inside input field.

Pattern

This attribute uses regular expressions for validating the fields. The data entered by the user must match with the pattern specified in the regular expression. This helps to limit the input accepted from the user.

Multiple

Multiple is a Boolean attribute that allows a user to enter multiple values for some input types.in earlier versions it was available only select input type but HTML5 allows multiple attributes with input types such as email and files.

Autofocus

Earlier, Web developers were using JavaScript code to set the focus to the input field on page load. The purpose was to force the focus over the input field, even if the user selected some other element while page is still loading. As a result of the JavaScript code, control moves to the input field upon completion of page load. This way, regardless of what the user selected, the focus would always be on the input field.
But HTML5 introduced new autofocus attribute. Autofocus attribute will focus on the input field on page load.

Autocomplete Attribute

Many browsers help user in filling forms by providing data in the input fields, such as email and tel, based on their earlier input. In many situations, the autocomplete behavior may not be secure, especially with certain fields accepting password or credit card number data.
HTML5 offers an autocomplete attribute which provides control on prefilled values displayed in the fields. It must be specified on the form element which applies for all input fields or on particular input fields. The input element that can support autocomplete are text, url, tel, password, datepickers, range, and color.

Comments

comments

Leave A Reply

Your email address will not be published.