advertisement
The New Form Elements in HTML5 - HTML5 Forms
❌
HTML5 has introduced some brand-new elements that can be incorporated into Web pages. These elements are specifically designed to be used with JavaScript. When combined with JavaScript, these new elements can be more functional.
At present, all browsers do not provide support for these new elements. If the control is not supported by the browser, then it displays the element as a text field. Opera provides support for all new form elements.
The new form elements introduced in HTML5 are as follows:
- Datalist
- Progress
- Meter
- Output
1. Datalist:
Datalist is a form-specific element. It provides a text field with a set of predefined options that are displayed in a drop-down list. When the text field receives focus, a list of options is displayed to the user. The <datalist> element is very similar to the standard <select> element available in earlier HTML. The only difference with the data list is that it allows the user to enter data of their choice or select from the suggested list of options.The syntax of providing the <datalist> element on the form.
In the code, a datalist requires a value attribute to be added with the <option> tag. Values nested between the opening and closing <option> tag will not be displayed in the data list menu.
2. Progress:
The progress element represents the current status of a task, which gradually changes as the task heads towards 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.The syntax for providing progress elements on the form.
In the code, the progress element contains two attributes namely, max and value. The max attribute declares the maximum value for the task to be processed for its completion.
3. Meter:
The meter element represents a measurement scale for a known range. The known range has definite minimum and maximum values to measure the data on the scale. For example, a meter element can be used to represent measurements, such as disk usage space, fraction value, or significance of a query result. All these have a known maximum value defined for them. The meter element cannot indicate age, height, or weight, as maximum values for them cannot be specified.There is another attribute named optimum which refers to the ideal value for the measurement.
4. Output:
The calculation of data from other form elements is to be displayed in the output element.
In the code, the for attribute relates the output element to the elements whose values are taken for calculation. The form on input event handles the input event which is fired whenever the value of the elements changes on receiving input from the user. JavaScript code can also be written to update the values of the output elements.
Hidden Elements
Sometimes, certain information in forms such as security tokens must be returned to the server on submission for scripts to function correctly. The URL of the referring page may be collected along with the form submission. Such information need not be displayed to the user. This is where hidden fields come into the picture. They are named so because they remain out of sight of the user when filling out a form. These fields can have a default value set by the developer or can be populated through JavaScript code. The information in hidden fields is processed by the server after the form is submitted.The use of hidden fields also keeps forms concise. The following elaborates on the most common uses of a hidden field:
- Tracking edited content, such as blogs: Here, when a user edits a blog using a form, the ID of the record is used as hidden input for the hidden field. When a user submits the form, the server-side component knows from the ID the specific record that needs to be updated with submitted data.
- Improves Website security: Hidden inputs are invisible on the rendered page in the user's browser. Thus, if someone tries to view the source code on the user's side, they would not be able to see the hidden field content. Forms on banking websites and other such sites are sensitive and include security measures. One such security measure is the use of a security token to ensure that the right user is filling out the form. It also keeps malicious users away from pretending banks and sending out money transfer forms to unsuspecting users.
Data Attributes
Consider that you want to add some additional attributes to a song, such as genre, tempo, and duration so that users can perform a narrower search on the Website. HTML5 provides data attributes to do so. A data attribute helps store custom data or extra information in an HTML element. The data attributes can be called using JavaScript.Following is the syntax for using data attributes:
In syntax, the attribute name indicates the name of the attribute. Data-product-type is an example of a data attribute name.
advertisement
Web Developer | App Developer | Freelancer | Blogger
More From:
Zia
How to Create and Format...
Tables allow the user to view the data in a structured and ...
What is HTML5? A Comprehensive...
In the trendy virtual landscape, websites have become an integral part of ...
Polymorphism and Method Overriding in...
Polymorphism is derived from two Greek words, namely Poly and Morphos. Poly ...
How to Tell if Your...
Search engine optimization SEO ensures your content appears high in search results. ...
Recomended
What is Repository - Getting...
By now, users know how to successfully set up and configure Git. ...
Function and Array in PHP
Functions can be defined as a named section of a program that ...
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