詳解HTML5新表單屬性-H5教程-PHP中文網

#autocomplete(自動完成)

新的表单元素

datalist

keygen" >keygen

output" >output

首頁

web前端

H5教程

詳解HTML5新表單屬性

零下一度

May 06, 2017 am 11:52 AM

新表單屬性

最完整的表單屬性可以透過查閱w3cschool-h5表單屬性取得,這裡僅針對常見屬性講解

#autocomplete(自動完成)

能夠記錄使用者的輸入,並且給予提示,這就是autocomplete的作用

#取值:

on:開啟

#範例程式碼:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="" >
    <input type="text" autocomplete="on" name="userName">
    <input type="submit">
</form>
</body>
</html>

登入後複製

使用注意:

標籤需要新增
name屬性
#只有提交了一次以後才會出現提示

#autofocus(取得焦點)

當某一頁有很多個可供輸入的元素時,使用者需要使用滑鼠點選元素進行輸入,為了提升使用者體驗,我們可以透過
autofocus屬性來指定頁面中預設選取的元素

#使用方法:

需要哪一個
表單元素取得焦點,只需要加入該屬性即可
#不需要賦值,只需要新增屬性即可,見範例程式碼

#範例程式碼:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<form action="" >
  姓名:<input type="text"  name="userName">
  <br/>
  年龄<input type="number" name="telNum" autofocus>
  <input type="submit">
</form>
</body>
</html>

登入後複製

使用注意:

在沒有該屬性之前,能夠使用
JavaScript<a href="http://www.php.cn/wiki/48.html" target="_blank"></a>來指定元素
如果頁面中多個元素設定了該屬性,最後一個會獲得焦點

#form(表單關聯)

當我們想要要提交資料時,需要把
表單元素放到對應的form標籤中,這個屬性的出現讓表單元素的放置位置不在受到約束

使用方法:

想要某個
表單外元素跟該表單建立聯繫,只需要為元素添加屬性form="表單id"設定為想要建立聯繫的表單id即可

範例程式碼

#讓表單外輸入愛好的
input#標籤跟id為userForm表單建立聯繫

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="" id="userForm" >
    姓名:<input type="text"  name="userName">
    <br/>
    年龄:<input type="number" name="telNum" autofocus>
    <br/>
    <input type="submit">
</form>

<br/>
爱好:<input type="text" name="habbit" form="userForm">
</body>
</html>

登入後複製

使用注意:

雖然這個屬性可以讓元素的放置位置不在成為限制,但是編碼時依舊建議,將元素放置到對應的表單中,除了兼容性問題以外,也為了提升代碼的可讀以及可維護性

multiple(多選)

如果想要在某個
input標籤中選擇多個值,可以使用該屬性

適用情況:

該屬性可以用在type為
file<a href="http://www.php.cn/wiki/1313.html" target="_blank"></a>標籤內

#範例程式碼

選擇多檔案時,需要按住
ctrl按鈕
```
<input type="file" multiple >
```
登入後複製

#placeholder(佔位提示)

輸入元素內預設顯示一些提示訊息,當使用者輸入之後自動消失,這種效果我們需要使用
JavaScript來實現,知道出現了placeholder這個屬性#這個屬性

使用方式:

#直接為該屬性賦值想要提示的內容即可

適用情況:

#想要不透過JavaScript來實現提示功能

範例程式碼:

placeholder.png

显示效果如下

<input type="text"placeholder="输入用户名">

登入後複製

新的表单元素

除了在input标签中增加了一些新的type属性以外,H5也推出了一些新的表单元素,由于浏览器的兼容问题,使用频率并不广,了解即可 w3cSchool_新表单元素

datalist

该元素规定了输入区域的选项列表,可以让用户有一些选项

测试代码:

注:测试代码只是body内部的代码

网址:<input type="url" list="url_list" name="link"/>
<datalist id="url_list">
    <option label="W3School" value="http://www.W3School.com.cn"/>
    <option label="Google" value="http://www.google.com"/>
    <option label="Microsoft" value="http://www.microsoft.com"/>
</datalist>

电话: <input type="tel" list="tel_list">
<datalist id="tel_list">
    <option value="186xxx" label="移动">移动</option>
    <option value="187xxx" label="联通">联通</option>
    <option value="135xxx" label="天翼">天翼</option>
</datalist>

登入後複製

datalist:

id:id属性,想要使用该datalist的元素需要通过list=id的方式来指定

option:

value:指定具体的值
label:提示信息

注意:

如果input的type为url,option中对应的value需要使用http://开始

keygen

keygen 元素是密钥对生成器（key-pair generator）。当提交表单时，会生成两个键，一个是私钥，一个公钥。
私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate），即实现非对称加密
目前，浏览器对此元素的糟糕的支持度不足以使其成为一种有用的安全标准。