advertisement
The new form attributes in HTML5 - HTML5 Forms
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.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.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:
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.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.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.
advertisement
Conversation
Your input fuels progress! Share your tips or experiences on prioritizing mental wellness at work. Let's inspire change together!
Join the discussion and share your insights now!
Comments 0