The new form attributes in HTML5 - HTML5 Forms

Zia

2 Followers

Jul 18, 2024

0 sec read

632

❌

Earlier, Web developers needed to write JavaScript snippets for performing validations on the data entered by users in form fields. HTML5 has provided several new attributes that perform validations without writing JavaScript snippets for them. These attributes perform the following tasks:

Check the data provided by users with the regular expression pattern assigned to the fields.
Inform users of appropriate errors.
Check that the required fields are not left empty by the users.
Enable multiple values for the fields, if provided.

These attributes can be used to support scripting drawbacks, without actually hardcoding them in the Web pages. Browsers that do not understand these new attributes will ignore them.

1. Required:

This is a boolean attribute that informs the browser to submit the form only when users do not leave the required fields empty. The input type elements, such as button, range, and color cannot be set for attributes needed as they have a default value. Different Web browsers such as Opera and Chrome. Firefox provides error messages, such as "This is a required field" or "Please fill out this field" for required attributes.

The assignment of the required attribute to the name field on the registration form.

2. Placeholder:

This attribute displays a short hint or text inside a form element. This informs the user about what data needs to be entered in that field. The placeholder text toggles, which means it appears in the field and disappears when the user clicks inside the field. Earlier, Web developers provided this functionality through JavaScript snippets which is now done in browsers with the help of the placeholder attribute. At present, all browsers such as Chrome, Safari, Opera, and Firefox support the placeholder attribute.

If the size of the hint exceeds the field size, then use the title attribute to describe the text for the field.

The assignment of the placeholder attribute to the name field on the registration form.

3. Pattern:

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

While including regular expressions through the pattern attribute, it informs the users about the accepted pattern for the data. This can be achieved in the current browsers using the title attribute, which is displayed as a tooltip when the user moves the pointer over the field.

You need to validate a zip code of five numbers on the form. There is no pre-defined input type to restrict input to numbers of a specified length. Thus, the pattern attribute can be used to create user-defined check values for the field. Also, a title attribute can be used to customize the error message displayed for the field.

The assignment of the pattern attribute to the phone number field on the registration form.

In this code, the [+0-9] pattern indicates that only special characters '+' as well as numbers are allowed. Also, {1,4} refers to the length of the numbers, which is between 1 and 4. Similarly {8,} means a minimum of eight numbers are allowed in the tel input type field.

4. Multiple:

This is a boolean attribute that allows multiple values for some input types. This was available only for select input types in the earlier version of HTML.

HTML5 allows multiple attributes with input types, such as email and file. If assigned, it allows the selection of multiple files or includes several e-mail addresses in the email field separated by a comma separator.

At present, browsers such as Chrome, Opera, and Firefox support multiple attributes for email and file elements.

The assignment of multiple attributes to the e-mail address field on the registration form.

In the code, multiple attributes will allow the insertion of multiple e-mail addresses in the field. Every e-mail address will be validated individually by the browser.

5. Autofocus:

Earlier, Web developers were using JavaScript code to set the focus on 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 the page was still loading. As a result of the JavaScript code, the control moves to the input field upon completion of the page load. This way, regardless of what the user selected, the focus would always be on the input field.

To provide an easier solution to this behavior, HTML5 has introduced an autofocus attribute for the form elements. The autofocus attribute will focus on the input field on page load. However, depending on the situation, it will not move the focus away if the user has selected some other field. Only one element can be focused with the autofocus attribute on a particular page while loading.

The assignment of the autofocus attribute to the first name field on the registration form.

6. Form:

Earlier, all the form controls were required to be provided between the opening and closing <form> tag. In HTML5, elements can be inserted at any place in the document and they can reference the form using the form attribute.

The association of an element with a form on a web page.

In the code, the form is declared with an ID attribute. The value of the ID attribute is assigned to the input element using the form attribute.

7. Autocomplete attribute:

Many browsers help the 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 in certain fields accepting password or credit card number data.

HTML5 offers an autocomplete attribute that provides control over the prefilled values displayed in the fields. It must be specified in the form element that applies to all input fields or particular input fields. The input elements that can support autocomplete are text, URL, tel, password, date picker, range, and color.

The autocomplete feature comprises two states namely ON and OFF. The ON state indicates that data that is not sensitive can be remembered by the browser. Similarly, the OFF state indicates that data will not be remembered. Such data may be sensitive and not safe for storage in browsers. Hence, the user needs to explicitly provide the data each time while filling out the form.

By default, many browsers have the autocomplete feature enabled in them. Browsers that do not support autocompletion can be turned ON or OFF for this behavior by specifying autocomplete attributes either on the form or specific input elements.

HTML5 HTML HTML5 Forms Form attributes new form attributes new form attributes in HTML5 form attributes in html input attributes in html form in html types of attributes in html form

Published by:

2 Followers

Zia

Zia, founder and CEO of Texvn and Toolx, is a passionate entrepreneur and tech enthusiast. With a strong focus on empowering developers, he creates innovative tools and content, making coding and idea generation easier.