HTML5 新表單元素-html教學-PHP中文網

HTML5 新表單元素

不言

發布： 2018-05-08 11:09:59

原創

1295 人瀏覽過

這篇文章主要介紹了關於HTML5 新表單元素，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

HTML5 元素

元素規定輸入域的選項清單

屬性規定form或input域應該擁有自動完成功能。當使用者在自動完成網域中開始輸入時，瀏覽器應該在該網域中顯示填寫的選項；

# 使用元素的清單屬性與元素綁定。

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8" />
		<title>自选教程(如约智惠.com)</title>
		
	</head>
	<body > 
		<form action="demo-form.php" method="get">
			<input list="browsers" name="browser">
			<datalist id="browsers">
				<option value="Internet Explorer"></option>
				<option value="Firefox"></option>
				<option value="Chrome"></option>
				<option value="Opera"></option>
				<option value="Safari"></option>
			</datalist>
			<input type="submit">
		</form>
		
		<p>
			<strong>注意：</strong>Internet Explorer 9， Safari 不支持 datalist 标签。
		</p>
		
	</body>
</html>

登入後複製

#HTML5 元素

元素的功能是提供可靠的使用者方法。

標籤規定表單的金鑰對產生器欄位。

當提交表單時，會產生兩個鍵，一個是私鑰，一個公鑰。

私鑰（private key）儲存於客戶端，公鑰（public key）則被傳送到伺服器。公鑰可用於之後驗證使用者的客戶端憑證（client certificate）。

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8" />
		<title>自选教程(如约智惠.com)</title>
		
	</head>
	<body > 
		<form action="demo-form.php" method="get">
			用户名：<input list="text" name="usr_name">
			密码：<keygen name="security">
			</datalist>
			<input type="submit">
		</form>
		
		<p>
			<strong>注意：</strong>Internet Explorer 不支持 keygen标签。
		</p>
		
	</body>
</html>

登入後複製

#HTML5 元素

# 元素用於不同類型的輸出，例如計算或腳本輸出：

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8" />
		<title>自选教程(如约智惠.com)</title>
		
	</head>
	<body > 
		<form oninput="x.value=parseInt(a.value)+parseInt(b.value)"> 0
			<input type="range" id="a" value="50"> 100
			+<input type="number" id="b" value="50">
			=<output name="x" for="a b"></output>
		</form>
		
		<p>
			<strong>注意：</strong>Internet Explorer 不支持 output 标签。
		</p>
		
	</body>
</html>

登入後複製

##HTML5 新表單元素#標籤說明