「HTML」表單

表單
input 控件
label標(biāo)簽
textarea控件(文本域)
select下拉菜單
form表單域
HTML5新表單屬性
- autocomplete(自動(dòng)完成)
- autofocus(獲取焦點(diǎn))
- form(表單關(guān)聯(lián))
- multiple(多選)
- placeholder(占位提示)
新的表單元素
- datalist
- keygen
- output
input的新type屬性介紹
- input表單驗(yàn)證
- w3cSchool 查閱位置
- email標(biāo)簽
- required屬性
- pattern 自定義驗(yàn)證規(guī)則
- 自定義驗(yàn)證信息
- 小結(jié)

表單

在HTML中，一個(gè)完整的表單通常由表單控件（也稱(chēng)為表單元素）、提示信息和表單域3個(gè)部分構(gòu)成。

表單.png

表單控件：包含了具體的表單功能項(xiàng)，如單行文本輸入框、密碼輸入框、復(fù)選框、提交按鈕、重置按鈕等。

提示信息：一個(gè)表單中通常還需要包含一些說(shuō)明性的文字，提示用戶(hù)進(jìn)行填寫(xiě)和操作。

表單域：他相當(dāng)于一個(gè)容器，用來(lái)容納所有的表單控件和提示信息，可以通過(guò)他定義處理表單數(shù)據(jù)所用程序的url地址，以及數(shù)據(jù)提交到服務(wù)器的方法。如果不定義表單域，表單中的數(shù)據(jù)就無(wú)法傳送到后臺(tái)服務(wù)器。

input 控件

在上面的語(yǔ)法中，<input />標(biāo)簽為單標(biāo)簽，type屬性為其最基本的屬性，其取值有多種，用于指定不同的控件類(lèi)型。除了type屬性之外，<input />標(biāo)簽還可以定義很多其他的屬性，其常用屬性如下表所示。

input屬性.png

label標(biāo)簽

label 標(biāo)簽為 input 元素定義標(biāo)注（標(biāo)記）。

作用：用于綁定一個(gè)表單元素, 當(dāng)點(diǎn)擊label標(biāo)簽的時(shí)候, 被綁定的表單元素就會(huì)獲得輸入焦點(diǎn)

如何綁定元素呢？

for 屬性規(guī)定 label 與哪個(gè)表單元素綁定。

<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male">

textarea控件(文本域)

如果需要輸入大量的信息，就需要用到<textarea></textarea>標(biāo)簽。通過(guò)textarea控件可以輕松地創(chuàng)建多行文本輸入框，其基本語(yǔ)法格式如下：

<textarea cols="每行中的字符數(shù)" rows="顯示的行數(shù)">
       文本內(nèi)容
</textarea>

select下拉菜單

使用select控件定義下拉菜單的基本語(yǔ)法格式如下

<select>
        <option>選項(xiàng)1</option>
        <option>選項(xiàng)2</option>
        <option>選項(xiàng)3</option>
       ...
</select>

注意：

1.<select></select>中至少應(yīng)包含一對(duì)<option></option>。

2.在option 中定義selected =" selected "時(shí)，當(dāng)前項(xiàng)即為默認(rèn)選中項(xiàng)。

form表單域

在HTML中，form標(biāo)簽被用于定義表單域，即創(chuàng)建一個(gè)表單，以實(shí)現(xiàn)用戶(hù)信息的收集和傳遞，form中的所有內(nèi)容都會(huì)被提交給服務(wù)器。創(chuàng)建表單的基本語(yǔ)法格式如下：

<form action="url地址" method="提交方式" name="表單名稱(chēng)">
       各種表單控件
</form>

常用屬性：

1.Action 在表單收集到信息后，需要將信息傳遞給服務(wù)器進(jìn)行處理，action屬性用于指定接收并處理表單數(shù)據(jù)的服務(wù)器程序的url地址。

2.method 用于設(shè)置表單數(shù)據(jù)的提交方式，其取值為get或post。

3.name 用于指定表單的名稱(chēng)，以區(qū)分同一個(gè)頁(yè)面中的多個(gè)表單。

注意：每個(gè)表單都應(yīng)該有自己表單域。

HTML5新表單屬性

最完整的表單屬性可以通過(guò)查閱w3cschool-h5表單屬性獲取,這里僅針對(duì)常見(jiàn)屬性講解

autocomplete(自動(dòng)完成)

能夠記錄用戶(hù)的輸入,并且給予提示,這就是autocomplete的作用

取值:
- on:開(kāi)啟
- off:關(guān)閉
適用情況:
- 一般用在input標(biāo)簽中
示例代碼:

<!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>

使用注意:
- 標(biāo)簽需要添加name屬性
- 只有提交了一次以后才會(huì)出現(xiàn)提示

autofocus(獲取焦點(diǎn))

當(dāng)某一頁(yè)有很多個(gè)可供輸入的元素時(shí),用戶(hù)需要使用鼠標(biāo)點(diǎn)選元素進(jìn)行輸入,為了提升用戶(hù)體驗(yàn),我們可以通過(guò)autofocus屬性來(lái)指定頁(yè)面中默認(rèn)選中的元素

使用方法:
- 需要哪個(gè)表單元素獲得焦點(diǎn),只需要添加該屬性即可
- 不需要賦值,只需要添加屬性即可,見(jiàn)示例代碼
示例代碼:

<!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>

使用注意:
- 在沒(méi)有該屬性之前,能夠使用JavaScript來(lái)指定元素
- 如果頁(yè)面中多個(gè)元素設(shè)置了該屬性,最后一個(gè)會(huì)獲得焦點(diǎn)

form(表單關(guān)聯(lián))

當(dāng)我們想要提交數(shù)據(jù)時(shí),需要把表單元素放到對(duì)應(yīng)的form標(biāo)簽中,這個(gè)屬性的出現(xiàn)讓表單元素的放置位置不在受到約束

使用方法:
- 想要某個(gè)表單外元素跟該表單建立聯(lián)系,只需要為元素添加屬性form="表單id"設(shè)置為想要建立聯(lián)系的表單id即可
示例代碼
- 讓表單外輸入愛(ài)好的input標(biāo)簽跟id為userForm表單建立聯(lián)系

<!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/>
愛(ài)好:<input type="text" name="habbit" form="userForm">
</body>
</html>

使用注意:
- 雖然這個(gè)屬性可以讓元素的放置位置不在成為限制,但是編碼時(shí)依舊建議,將元素放置到對(duì)應(yīng)的表單中,除了兼容性問(wèn)題以外,也為了提升代碼的可讀以及可維護(hù)性

multiple(多選)

如果想要在某個(gè)input標(biāo)簽中選擇多個(gè)值,可以使用該屬性

適用情況:
- 該屬性可以用在type為file標(biāo)簽內(nèi)
示例代碼
- 選擇多文件時(shí),需要按住ctrl按鈕

<input type="file" multiple >

placeholder(占位提示)

輸入元素內(nèi)默認(rèn)顯示一些提示信息,當(dāng)用戶(hù)輸入之后自動(dòng)消失,這種效果我們需要使用JavaScript來(lái)實(shí)現(xiàn),知道出現(xiàn)了placeholder這個(gè)屬性

使用方式:
- 直接為該屬性賦值想要提示的內(nèi)容即可
適用情況:
- 想要不通過(guò)JavaScript來(lái)實(shí)現(xiàn)提示功能

示例代碼:

顯示效果如下

<input type="text"placeholder="輸入用戶(hù)名">

placeholder.png

新的表單元素

除了在input標(biāo)簽中增加了一些新的type屬性以外,H5也推出了一些新的表單元素,由于瀏覽器的兼容問(wèn)題,使用頻率并不廣,了解即可 w3cSchool_新表單元素

datalist

該元素規(guī)定了輸入?yún)^(qū)域的選項(xiàng)列表,可以讓用戶(hù)有一些選項(xiàng)

測(cè)試代碼:

注:測(cè)試代碼只是body內(nèi)部的代碼

網(wǎng)址:<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>

電話(huà): <input type="tel" list="tel_list">
<datalist id="tel_list">
    <option value="186xxx" label="移動(dòng)">移動(dòng)</option>
    <option value="187xxx" label="聯(lián)通">聯(lián)通</option>
    <option value="135xxx" label="天翼">天翼</option>
</datalist>

datalist:
- id:id屬性,想要使用該datalist的元素需要通過(guò)list=id的方式來(lái)指定
option:
- value:指定具體的值
- label:提示信息
注意:
- 如果input的type為url,option中對(duì)應(yīng)的value需要使用http://開(kāi)始

keygen

keygen 元素是密鑰對(duì)生成器（key-pair generator）。當(dāng)提交表單時(shí)，會(huì)生成兩個(gè)鍵，一個(gè)是私鑰，一個(gè)公鑰。
私鑰（private key）存儲(chǔ)于客戶(hù)端，公鑰（public key）則被發(fā)送到服務(wù)器。公鑰可用于之后驗(yàn)證用戶(hù)的客戶(hù)端證書(shū)（client certificate），即實(shí)現(xiàn)非對(duì)稱(chēng)加密
目前，瀏覽器對(duì)此元素的糟糕的支持度不足以使其成為一種有用的安全標(biāo)準(zhǔn)。

使用頻率:低

output

屬于新的語(yǔ)義標(biāo)簽:用來(lái)放置輸出的內(nèi)容,但是不能自動(dòng)的計(jì)算結(jié)果,依舊需要通過(guò)js的方式來(lái)動(dòng)態(tài)修改結(jié)果,只是相比于其他的標(biāo)簽,語(yǔ)義性更強(qiáng)。

使用頻率:低

input的新type屬性介紹

首先讓我們來(lái)看一張表

HTML5中的type.png

其中標(biāo)有紅色5的代表HTML5中推出的
更詳細(xì)內(nèi)容請(qǐng)查閱網(wǎng)址:w3cSchool-h5-type

測(cè)試代碼:

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <style>
          form {
              width: 80%;
              background-color: #F7F7F7;
          }
          label {
              display: block;
              width: 80%;
              margin: 0 auto;
              font-size: 30px;
              font-weight: bold;
          }
          input {
              display: block;
              width: 80%;
              margin: 0 auto;
          }
      </style>
  </head>
  <body>
  <form action="">
      <fieldset>
          <legend>測(cè)試type屬性
          </legend>
          <label for="">color:
          </label>
          <input type="color">
          <label for="">date:
          </label>
          <input type="date">
          <label for="">datetime:
          </label>
          <input type="datetime">
          <label for="">datetime-local:
          </label>
          <input type="datetime-local">
          <label for="">month:
          </label>
          <input type="month">
          <label for="">week:
          </label>
          <input type="week">
          <label for="">time:
          </label>
          <input type="time">
          <label for="">email:
          </label>
          <input type="email">
          <label for="">number:
          </label>
          <input type="number">
          <label for="">range:
          </label>
          <input type="range">
          <label for="">search:
          </label>
          <input type="search">
          <label for="">tel:
          </label>
          <input type="tel">
          <input type="submit">
      </fieldset>
  </form>
  </body>
  </html>

運(yùn)行效果

input新type屬性.png

新type屬性的注意要點(diǎn)

點(diǎn)擊不同type的input標(biāo)簽會(huì)有不一樣的彈出內(nèi)容
如果發(fā)現(xiàn)w3cschool內(nèi)容不全,建議去MDN搜索
并不是每一個(gè)新type屬性,在PC端都有不同的顯示
color, date, number 這些效果較為明顯
兼容性問(wèn)題
- 由于ie的兼容性的問(wèn)題,在不同的瀏覽器中顯示效果不盡相同
- 但是在移動(dòng)設(shè)備上的支持效果較好,可以將該頁(yè)面發(fā)送到手機(jī)進(jìn)行測(cè)試
- 實(shí)際開(kāi)發(fā)中可以按照需求選用

input表單驗(yàn)證

用戶(hù)在輸入內(nèi)容的時(shí)候不可能做到全部正確,比如email地址``電話(huà)長(zhǎng)度等等都有可能出現(xiàn)輸入錯(cuò)誤,試想一下,當(dāng)用戶(hù)辛辛苦苦的輸入了10多個(gè)表單內(nèi)容,點(diǎn)擊提交由于輸入錯(cuò)誤,內(nèi)容被清空了

w3cSchool 查閱位置

下面把a(bǔ)pi文檔的查閱位置添加如下

[w3cSchool_事件屬性]w3School
[w3cSchool_input標(biāo)簽]w3cSchool

email屬性

在H5中的input的新type屬性email自帶格式驗(yàn)證

示例代碼:
- 當(dāng)我們點(diǎn)擊提交按鈕時(shí),如果輸入的email格式不正確,會(huì)彈出提示信息
- email標(biāo)簽并不會(huì)驗(yàn)證內(nèi)容是否為空，這個(gè)需要注意

email自帶提示.png

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="">
    email:<input type="email" name="userEmail">
    <br/>
    <input type="submit">
</form>
</body>
</html>

required屬性

對(duì)于沒(méi)有自帶驗(yàn)證效果的標(biāo)簽,就需要手動(dòng)添加屬性增加驗(yàn)證了

使用方法:
只需要添加required屬性即可,不需要賦值

示例代碼:
當(dāng)控件沒(méi)有輸入任何內(nèi)容直接點(diǎn)擊提交時(shí),會(huì)彈出提示

required屬性.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="">
    email:<input type="email" name="userEmail">
    <br/>
    tel:<input type="tel" required>
    <br/>
    <input type="submit">
</form>
</body>
</html>

pattern 自定義驗(yàn)證規(guī)則

使用required標(biāo)簽只能夠驗(yàn)證內(nèi)容是否為空,如果想要驗(yàn)證的更為準(zhǔn)確就需要自定義驗(yàn)證規(guī)則了

使用方法:

在需要添加自定義驗(yàn)證規(guī)則的元素中添加required標(biāo)簽
使用正則表達(dá)式編寫(xiě)驗(yàn)證規(guī)則

示例代碼:

當(dāng)我們輸入的內(nèi)容跟驗(yàn)證條件不符時(shí),就會(huì)彈出對(duì)應(yīng)的提示

自定義驗(yàn)證.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="">
    email:<input type="email" name="userEmail">
    <br/>
    tel:<input type="tel" required pattern="[0-9]{3}">
    <br/>
    <input type="submit">
</form>
</body>
</html>

自定義驗(yàn)證信息

系統(tǒng)的提示消息只能夠提示格式錯(cuò)誤,如果想要更為詳細(xì)的就需要我們通過(guò)js來(lái)自定義了

使用方法:

注冊(cè)事件:oninput:輸入時(shí),oninvalid驗(yàn)證失敗
設(shè)置自定義信息dom.setCustomValidity("這里輸入提示信息");

示例代碼:
輸入時(shí),會(huì)彈出oninput綁定的代碼

輸入中.png

驗(yàn)證失敗時(shí),會(huì)彈出oninvalid綁定的代碼

驗(yàn)證失敗.png

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="">
    email:<input type="email" name="userEmail">
    <br/>
    tel:<input type="tel" required pattern="[0-9]{3}" id="telInput">
    <br/>
    <input type="submit">
</form>
</body>
</html>
<script>
    var telInput = document.getElementById("telInput");
    // 正在輸入時(shí)
    telInput.oninput=function () {
        this.setCustomValidity("請(qǐng)正確輸入哦");
    }
    // 驗(yàn)證失敗時(shí)
    telInput.oninvalid=function(){
        this.setCustomValidity("請(qǐng)不要輸入火星的手機(jī)號(hào)好嗎？");
    };

</script>

總結(jié)

優(yōu)點(diǎn):
- html5自帶的驗(yàn)證使用便捷
- 不需要額外的js框架
缺點(diǎn):
- 兼容性問(wèn)題
- 如果想要兼容所有瀏覽器,建議使用js驗(yàn)證框架

最后編輯于：2018.10.17 14:50:18

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

人面猴
序言：七十年代末，一起剝皮案震驚了整個(gè)濱河市，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌，老刑警劉巖，帶你破解...
沈念sama閱讀 229,763評(píng)論 6贊 539
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場(chǎng)離奇詭異，居然都是意外死亡，警方通過(guò)查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 99,238評(píng)論 3贊 428
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門(mén)，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)，“玉大人，你說(shuō)我怎么就攤上這事?！?“怎么了？”我有些...
開(kāi)封第一講書(shū)人閱讀 177,823評(píng)論 0贊 383
道士緝兇錄：失蹤的賣(mài)姜人
文/不壞的土叔我叫張陵，是天一觀的道長(zhǎng)。經(jīng)常有香客問(wèn)我，道長(zhǎng)，這世上最難降的妖魔是什么？我笑而不...
開(kāi)封第一講書(shū)人閱讀 63,604評(píng)論 1贊 317
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘。我一直安慰自己，他們只是感情好，可當(dāng)我...
茶點(diǎn)故事閱讀 72,339評(píng)論 6贊 410
惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
文/花漫我一把揭開(kāi)白布。她就那樣靜靜地躺著，像睡著了一般。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上，一...
開(kāi)封第一講書(shū)人閱讀 55,713評(píng)論 1贊 328
城市分裂傳說(shuō)
那天，我揣著相機(jī)與錄音，去河邊找鬼。笑死，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播，決...
沈念sama閱讀 43,712評(píng)論 3贊 445
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開(kāi)眼，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼！你這毒婦竟也來(lái)了？” 一聲冷哼從身側(cè)響起，我...
開(kāi)封第一講書(shū)人閱讀 42,893評(píng)論 0贊 289
萬(wàn)榮殺人案實(shí)錄
序言：老撾萬(wàn)榮一對(duì)情侶失蹤，失蹤者是張志新（化名）和其女友劉穎，沒(méi)想到半個(gè)月后，有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 49,448評(píng)論 1贊 335
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 41,201評(píng)論 3贊 357
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點(diǎn)故事閱讀 43,397評(píng)論 1贊 372
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情，我是刑警寧澤，帶...
沈念sama閱讀 38,944評(píng)論 5贊 363
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布，位于F島的核電站，受9級(jí)特大地震影響，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 44,631評(píng)論 3贊 348
男人毒藥：我在死后第九天來(lái)索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧，春花似錦、人聲如沸。這莊子的主人今日做“春日...
開(kāi)封第一講書(shū)人閱讀 35,033評(píng)論 0贊 28
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽(yáng)。三九已至，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背。一陣腳步聲響...
開(kāi)封第一講書(shū)人閱讀 36,321評(píng)論 1贊 293
情欲美人皮
我被黑心中介騙來(lái)泰國(guó)打工，沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留，地道東北人。一個(gè)月前我還...
沈念sama閱讀 52,128評(píng)論 3贊 398
代替公主和親
正文我出身青樓，卻偏偏與公主長(zhǎng)得像，于是被迫代替她去往敵國(guó)和親。傳聞我的和親對(duì)象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 48,347評(píng)論 2贊 377

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

「HTML」表單

「HTML」表單

表單

input 控件

label標(biāo)簽

textarea控件(文本域)

select下拉菜單

form表單域

HTML5新表單屬性

autocomplete(自動(dòng)完成)

autofocus(獲取焦點(diǎn))

form(表單關(guān)聯(lián))

multiple(多選)

placeholder(占位提示)

新的表單元素

datalist

keygen

output

input的新type屬性介紹

input表單驗(yàn)證

w3cSchool 查閱位置

email屬性

required屬性

pattern 自定義驗(yàn)證規(guī)則

自定義驗(yàn)證信息

總結(jié)

推薦閱讀更多精彩內(nèi)容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

「HTML」表單

表單

input 控件

label標(biāo)簽

textarea控件(文本域)

select下拉菜單

form表單域

HTML5新表單屬性

autocomplete(自動(dòng)完成)

autofocus(獲取焦點(diǎn))

form(表單關(guān)聯(lián))

multiple(多選)

placeholder(占位提示)

新的表單元素

datalist

keygen

output

input的新type屬性介紹

input表單驗(yàn)證

w3cSchool 查閱位置

email屬性

required屬性

pattern 自定義驗(yàn)證規(guī)則

自定義驗(yàn)證信息

總結(jié)

推薦閱讀更多精彩內(nèi)容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频