How to use new form elements in HTML5

In this issue, the editor will bring you about how to use the new form elements in HTML5. The article is rich in content and analyzes and narrates it from a professional point of view. I hope you can get something after reading this article.

HTML5 has several elements and attributes that involve forms.

This chapter introduces the following new form elements:

Datalist

Keygen

Output

Browser support

Input typeIEFirefoxOperaChromeSafaridatalistNoNo9.5NoNokeygenNoNo10.53.0NooutputNoNo9.5NoNo

Datalist element

The datalist element specifies the list of options for the input field.

The list is created through the option element within the datalist.

To bind datalist to the input field, use the list attribute of the input field to reference the id of datalist:

Example

The code is as follows:

Webpage:

Tip: the option element always sets the value attribute.

Keygen element

The purpose of the keygen element is to provide a reliable way to authenticate users.

Keygen element is the key pair generator (key-pair generator). When the form is submitted, two keys are generated, one is the private key and the other is the public key.

The private key (private key) is stored on the client, and the public key (public key) is sent to the server. The public key can be used to validate the user's client certificate (client certificate) later.

Currently, browsers' poor support for this element does not make it a useful security standard.

Example

The code is as follows:

Username: Encryption:

Output element

The output element is used for different types of output, such as calculation or script output:

Example

The code is as follows:

The above is the editor for you to share how to use the new form elements in HTML5, if you happen to have similar doubts, you might as well refer to the above analysis to understand. If you want to know more about it, you are welcome to follow the industry information channel.