Home  >  Article  >  Web Front-end  >  What are the form elements in HTML5

What are the form elements in HTML5

清浅
清浅Original
2018-11-24 17:12:237024browse

Today I will share with you the new form elements in HTML5 and their usage. It has certain reference value and I hope it will be helpful to everyone.

HTML5 introduces new form elements that provide some new benefits for all form elements. When designing and building web pages, we can apply these new properties and functions to any form element. Next, we will introduce how to use them in detail in the article

HTML5 New Form Element

datalist

Specifies the option list of the input field. The list is created through the option element in the datalist

Note: option The element must set the value

<form action="#" method="get">
选课: <input type="text" list="subject" />
<datalist  id="subject">
	<option label="Math" value="数学" />
	<option label="English" value="英语" />
	<option label="Chinese" value="语文" />
</datalist>
<input type="submit" />
</form>

What are the form elements in HTML5

keygen

The role is to provide a reliable method to authenticate users.

When the form is submitted, two keys will be generated, one is the private key and the other is the public key. The private key is stored on the client, and the public key is sent to the server. The public key can be used to later verify the user's client certificate

<form action="#" method="get">
用户名<input type="text" name="username" />
密码:<input type="password" name="password" />
<keygen name="security" />
<input type="submit" />
</form>

Image 23.jpg

What are the form elements in HTML5

##output

Used for different types of output, such as calculation or script output


oninput

Real-time monitoring of changes in input box values ​​(note that oninput is not compatible under IE9)

<form oninput="c.value=parseInt(a.value)+parseInt(b.value)">
		<input type="text" name="加数" id="a">+
		<input type="text" name="被加数" id="b">=
		<output name="c" for="a b"></output>
	</form>

Image 25.jpg

Summary: The above is the entire content of this article. I hope it will be helpful to everyone learning HTML5.

The above is the detailed content of What are the form elements in HTML5. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Related articles

See more