Shulou(Shulou.com)05/31 Report--

Today, the editor will share with you the relevant knowledge points about how to use the newly added form elements in html5, the content is detailed, and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article.

Html5 added three new form elements: 1, datalist element, used to set the drop-down list for input, in which the options are pre-defined and will be used as user input data; 2, keygen element, which can be used to specify the key pair generator field used in the form; 3, output element, used to output and display the calculation results.

The operating environment of this tutorial: windows7 system, HTML5 version, Dell G3 computer.

Three new form elements have been added to HTML5: datalist, keygen, and output.

1. Datalist element

The tag specifies a list of possible options for the element.

Tags are used to provide "autocomplete" features for elements. The user can see a drop-down list in which the options are predefined and will be used as user input data.

Note here that the datalist element should write id to create a relationship with the list attribute of the input form element

Example 1:

It appears on the page as follows:

Example 2:

It appears on the page as follows:

If you want to enter a URL, you need to note that the value value must add http://

Example 3

The datalist element here does not have a drop-down list on Firefox, so be careful!

And the child element option of datalist can be written in the format of a single tag: eg:

2. Keygen element

The label specifies the key pair generator field used for the form. When the form is submitted, the private key is stored locally and the public key is sent to the server.

Is a new element in HTML5 to establish a key generator

When the form is submitted, the private key is stored locally and the public key is sent to the server. The main function is to provide a way for users to verify their identity.

Note that different browsers have different levels of support when using it; Internet Explorer and Safari currently do not support it.

Because it involves some knowledge of the server, we can get to know this element recently in this lesson, and the knowledge related to the server is not within the scope of this course.

Attributes of the keygen element element:

Name/form/autofocus/disabled

Challenge property: set the value of keygen to ask on submission.

Keytype attribute: defines the key type. If set to rsa (a cryptographic algorithm), the RSA key is generated.

Example

Untitled documents master the use of fieldset/legend elements (much like figure and figcaption, except for forms)

User registered user name:

Password:

Keygen element usage:

Encryption:

3. Output element

The tag is displayed as the output of the calculation (such as the output of the execution script).

Output tag syntax format

Default content

Note: the content in the output tag is the default display content, which will change with the change of related elements.

Output tag attribute

For: defines one or more elements related to the output domain, separated by spaces.

Form: defines one or more forms to which the input field belongs, separated by spaces.

Name: defines the unique name of the object (used when the form is submitted).

Example

Detailed introduction of output tags in html output tag demonstration: addition Calculator + = 0

These are all the contents of the article "how to use the newly added form elements in html5". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.