HTML5 表單屬性

HTML5 新的表單屬性
HTML5的<form>和<input>標(biāo)簽添加了幾個新的屬性
<from>新屬性：
1.autocomplete
2.novalidate
<input>新屬性
autocomplete
autofocus
form
formaction
formenctype
formmethod
formnovalidate
formtarget
height 與 width
list
min 與 max
multiple
pattern (regexp)
placeholder
required
step

<from>/<input>autocomplete屬性
autocomplete屬性規(guī)定from或input域應(yīng)該擁有自動完成功能
當(dāng)用戶在自動完成域中開始輸入時(shí)德频，瀏覽器應(yīng)該在該域中顯示填寫的選項(xiàng)
提示：autocomplete屬性有可能在from元素中是開啟的，而在input元素中是閉合的
??：autocomplete適用于<from>標(biāo)簽本今，以及以下類型的<input>標(biāo)簽：text,url,search,telephone,email,password,detepickers以及color

實(shí)例：HTML form中開啟autocomplete（一個input字段關(guān)閉autocomplete）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>

<form action="demo-form.php" autocomplete="on">
First name:<input type="text" name="fname">

Last name: <input type="text" name="lname">

E-mail: <input type="email" name="email" autocomplete="off">

<input type="submit">
</form>

<p>填寫并提交表單誊册，然后重新刷新頁面查看如何自動填充內(nèi)容。</p>
<p>注意 form 的 autocomplete 屬性為 "on"（開）茅坛，但是 e-mail 自動為“off”（關(guān)）。</p>

</body>
</html>
提示:某些瀏覽器中盆色，您可能需要啟用自動完成功能灰蛙，以使該屬性生效。

<from>novalidate屬性
novalidate屬性是一個boolean屬性
novalifate屬性規(guī)定在提交表單是不應(yīng)該驗(yàn)證from或input
實(shí)例：無需驗(yàn)證提交的表單數(shù)據(jù)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>

<form action="demo-form.php" novalidate>
E-mail: <input type="email" name="user_email">
<input type="submit">
</form>

<p><strong>注意：</strong>在 Safari 和 Internet Explorer 9 及之前的版本中不支持 novalidate 屬性隔躲。</p>

</body>
</html>

<input>autofocus屬性
autofocus屬性是一個boolean屬性
autofocus屬性福鼎在頁面加載時(shí)摩梧，域自動獲得焦點(diǎn)
實(shí)例：讓“first name” input輸入域在頁面載入是自動聚焦
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>

<form action="demo-form.php">
First name: <input type="text" name="fname" autofocus>

Last name: <input type="text" name="lname">

<input type="submit">
</form>
<p><strong>注意：</strong> Internet Explorer 9及更早 IE 版本不支持 input 標(biāo)簽的 autofocus 屬性。</p>

</body>
</html>

<input>from屬性
from屬性規(guī)定輸入域所屬的一個或多個表單
提示：如需引用一個以上的表單宣旱，請使用空格分隔的列表
實(shí)例：位于from表單外的input字段引用HTML from（該input表單仍然屬于from表單的一部分）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>

<form action="demo-form.php" id="form1">
First name: <input type="text" name="fname">

<input type="submit" value="提交">
</form>

<p> "Last name" 字段沒有在 form 表單之內(nèi)仅父，但它也是 form 表單的一部分。</p>

Last name: <input type="text" name="lname" form="form1">

<p><b>注意:</b> IE 不支持 form 屬性</p>

</body>
</html>

<input>formaction屬性
The formaction 屬性用于描述表單提交的URL地址.
The formaction 屬性會覆蓋<form> 元素中的action屬性.
注意: The formaction 屬性用于 type="submit" 和 type="image".
實(shí)例：HTML from表單包含兩個不同地址的提交按鈕
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>

<form action="demo-form.php">
First name: <input type="text" name="fname">

Last name: <input type="text" name="lname">

<input type="submit" value="提交">

<input type="submit" formaction="demo-admin.php" value="提交">
</form>
<p><strong>注意：</strong> Internet Explorer 9及更早 IE 版本不支持 input 標(biāo)簽的 formaction 屬性浑吟。</p>

</body>
</html>

<input> formenctype屬性
formenctype屬性描述了表單提交到服務(wù)器的數(shù)據(jù)編碼（支隊(duì)from表單中 method=“post”表單）
formenctype屬性覆蓋from元素的enctype屬性
主要：該屬性與type= "submit"和 type = ”image"配合使用
實(shí)例：第一個提交按鈕已默認(rèn)編碼發(fā)送表單數(shù)據(jù)笙纤，第二個提交按鈕以“multipart/from-data”編碼格式發(fā)送表單數(shù)據(jù)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>

<form action="demo-post-enctype.php" method="post">
First name: <input type="text" name="fname">

<input type="submit" value="提交">
<input type="submit" formenctype="multipart/form-data" value="以 Multipart/form-data 提交">
</form>

<p><strong>注意：</strong> Internet Explorer 9及更早 IE 版本不支持 input 標(biāo)簽的 formenctype 屬性。</p>

</body>
</html>

<input>formmethod屬性
formmethod屬性覆蓋了<from>元素的method元素
注意：該屬性可以與type=“submit”和type=“image”配合使用
實(shí)例：重新定義表單提交方式實(shí)例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>

<form action="demo-form.php" method="get">
First name: <input type="text" name="fname">

Last name: <input type="text" name="lname">

<input type="submit" value="提交">
<input type="submit" formmethod="post" formaction="demo-post.php" value="使用 POST 提交">
</form>

<p><strong>注意：</strong> Internet Explorer 9及更早 IE 版本不支持 input 標(biāo)簽的 formmethod 屬性组力。</p>

</body>
</html>

<input>fromnovalidate屬性
novalidate屬性是一個boolean屬性
novalidate屬性描述<input>元素在表單提交時(shí)無需被驗(yàn)證
fromnocalidate屬性會覆蓋<from>元素的novalidate屬性
注意：fromnovalidate屬性與type="submit"一起使用
實(shí)例：兩個提交按鈕的表單（使用與不使用驗(yàn)證）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>

<form action="demo-form.php">
E-mail: <input type="email" name="userid">

<input type="submit" value="提交">

<input type="submit" formnovalidate="formnovalidate" value="不驗(yàn)證提交">
</form>

<p><strong>注意：</strong> Internet Explorer 9及更早 IE 版本,或 Safari 不支持 input 標(biāo)簽的 formnovalidate 屬性省容。</p>

</body>
</html>

<input>formtarget屬性
formtarget屬性制定一個名稱或一個關(guān)鍵字來指明表單提交數(shù)據(jù)接收后的展示
formtarget屬性覆蓋<from>元素的target屬性
注意：formtarget屬性與type="submit"和type="image"配合使用
實(shí)例：兩個提交按鈕的表單，在不同窗口中顯示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>

<form action="demo-form.php">
First name: <input type="text" name="fname">

Last name: <input type="text" name="lname">

<input type="submit" value="正常提交">
<input type="submit" formtarget="_blank" value="提交到一個新的頁面上">
</form>

<p><strong>注意：</strong> Internet Explorer 9及更早 IE 版本不支持 input 標(biāo)簽的 formtarget 屬性燎字。</p>

</body>
</html>

<input>width和height屬性
height和width屬性規(guī)定用于image類型的<input>標(biāo)簽的圖像高度和寬度
注意：height和width屬性只是用image類型的<input>標(biāo)簽
提示：圖像通常會同時(shí)制定高度和寬度屬性腥椒，如果圖像設(shè)置高度和寬度阿宅，圖像所需的空間在加載頁時(shí)會被保留，如果沒有這些屬性笼蛛，瀏覽器不知道圖像的大小洒放，并不能預(yù)留適當(dāng)?shù)目臻g，圖片在加載過程中會使頁面效果改變（盡管圖片與加載）
實(shí)例：定義一個退選哪個提交按鈕滨砍，使用height和width
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>

<form action="demo-form.php">
First name: <input type="text" name="fname">

Last name: <input type="text" name="lname">

<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form>

</body>
</html>

<input>list屬性
list屬性規(guī)定輸入域的datalist往湿，datalist是輸入域的選項(xiàng)列表
實(shí)例：在<datalist>中預(yù)定義<input>值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>

<form action="demo-form.php" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>

<p><strong>注意:</strong> Internet Explorer 9（更早 IE 版本），Safari 不支持 datalist 標(biāo)簽惋戏。</p>

</body>
</html>

<input>min和max屬性
min领追，max和step屬性用于為包含數(shù)字或日期的input類型規(guī)定限定
注意：min，max和step屬性適用于以下類型的<input>標(biāo)簽：dete pickers日川， number以及range
實(shí)例：<input>元素最小值與最大值設(shè)置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>

<form action="demo-form.php">

輸入 1980-01-01 之前的日期:
<input type="date" name="bday" max="1979-12-31">

輸入 2000-01-01 之后的日期:
<input type="date" name="bday" min="2000-01-02">

數(shù)量 (在1和5之間):
<input type="number" name="quantity" min="1" max="5">

<input type="submit">
</form>

<p><strong>注意:</strong> Internet Explorer 9及更早 IE 版本蔓腐，F(xiàn)irefox 不支持 input 標(biāo)簽的 max 和 min 屬性。</p>
<p><strong>注意:</strong>
在 Internet Explorer 10中 max 和 min 屬性不支持輸入日期和時(shí)間龄句，IE 10 不支持這些輸入類型回论。</p>

</body>
</html>

<input>multiple屬性
multiple屬性是一個boolean屬性
multiple屬性規(guī)定<input>元素中可選擇多個值
注意：multiple屬性適用于提下類型的<input>標(biāo)簽：email和file
實(shí)例：上傳多個文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>

<form action="demo-form.php">
選擇圖片: <input type="file" name="img" multiple>
<input type="submit">
</form>

<p>嘗試選取一張或者多種圖片。</p>

<p><strong>注意:</strong> Internet Explorer 9及更早 IE 版本不支持 input 標(biāo)簽的 multiple 屬性分歇。</p>

</body>
</html>

<input>pattern屬性
pattern屬性描述了一個正則表達(dá)式用于驗(yàn)證<input>元素值
注意：pattern屬性適用于以下類型的<input>標(biāo)簽：text傀蓉，search,url,email,password
提示：是用來全局title屬性描述了模式
實(shí)例：顯示了一個只能包含三個字母的文本域（不含數(shù)字及特殊字符）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>

<form action="demo-form.php">
Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
<input type="submit">
</form>

<p><strong>注意:</strong> Internet Explorer 9及更早 IE 版本，或 Safari 不支持 input 標(biāo)簽的 pattern 屬性职抡。</p>

</body>
</html>

<input>placeholder屬性
placeholder屬性提供一種提示（hint）葬燎，描述輸入域所期待的值
剪短的提示在用戶輸入值錢會顯示在輸入域上
注意：placeholder屬性使用與以下類型的<input>標(biāo)簽：text,search,url,telephone,email以及 password
實(shí)例：input字段提示文本
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>

<form action="demo-form.php">
<input type="text" name="fname" placeholder="First name">

<input type="text" name="lname" placeholder="Last name">

<input type="submit" value="提交">
</form>

<p><strong>注意：</strong> Internet Explorer 9及更早 IE 版本不支持 input 標(biāo)簽的 placeholder 屬性。</p>

</body>
</html>

<input>required屬性
required屬性是一個boolean屬性
required屬性規(guī)定必須在提交之前填寫輸入域（不能為空）
注意：required屬性適用于一下類型的<input>標(biāo)簽：text,search,telephone,email,password,date pickers,number,checkbox,radio以及file
實(shí)例：不能為空的input字段
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>

<form action="demo-form.php">
Username: <input type="text" name="usrname" required>
<input type="submit">
</form>

<p><strong>注意：</strong> Internet Explorer 9及更早 IE 版本缚甩，或 Safari 不支持 input 標(biāo)簽的 required 屬性谱净。</p>

</body>
</html>

<input>step屬性
step屬性為輸入域規(guī)定合法的數(shù)字間隔
如果step="3",則合法的數(shù)是-3，0擅威，3壕探，6
提示：step屬性可以與max和min屬性創(chuàng)建一個區(qū)域之
注意：step屬性與一下type類型一起使用：number,range,date,datetime,datetime-local,month,time,week
實(shí)例：規(guī)定input step步長為3
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>

<form action="demo-form.php">
<input type="number" name="points" step="3">
<input type="submit">
</form>

<p><strong>注意：</strong> Internet Explorer 9及更早 IE 版本，或 Firefox 不支持 input 標(biāo)簽的 step 屬性郊丛。</p>

</body>
</html>

HTML5<input>標(biāo)簽
<from> 定義一個from表單
<input>定義一個input

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末李请，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子厉熟，更是在濱河造成了極大的恐慌导盅，老刑警劉巖，帶你破解...
    沈念sama閱讀 221,888評論 6贊 515
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件揍瑟，死亡現(xiàn)場離奇詭異白翻，居然都是意外死亡，警方通過查閱死者的電腦和手機(jī)绢片，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,677評論 3贊 399
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門滤馍，熙熙樓的掌柜王于貴愁眉苦臉地迎上來恩急，“玉大人，你說我怎么就攤上這事纪蜒。” “怎么了此叠？”我有些...
    開封第一講書人閱讀 168,386評論 0贊 360
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵纯续，是天一觀的道長。 經(jīng)常有香客問我灭袁，道長猬错，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 59,726評論 1贊 297
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任茸歧，我火速辦了婚禮倦炒，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘软瞎。我一直安慰自己逢唤，他們只是感情好，可當(dāng)我...
    茶點(diǎn)故事閱讀 68,729評論 6贊 397
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布涤浇。 她就那樣靜靜地躺著鳖藕，像睡著了一般。 火紅的嫁衣襯著肌膚如雪只锭。 梳的紋絲不亂的頭發(fā)上著恩，一...
    開封第一講書人閱讀 52,337評論 1贊 310
  • 城市分裂傳說
    那天，我揣著相機(jī)與錄音蜻展，去河邊找鬼喉誊。 笑死，一個胖子當(dāng)著我的面吹牛纵顾，可吹牛的內(nèi)容都是我干的伍茄。 我是一名探鬼主播，決...
    沈念sama閱讀 40,902評論 3贊 421
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼片挂，長吁一口氣：“原來是場噩夢啊……” “哼幻林！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起音念，我...
    開封第一講書人閱讀 39,807評論 0贊 276
  • 萬榮殺人案實(shí)錄
    序言：老撾萬榮一對情侶失蹤沪饺，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后闷愤，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體整葡，經(jīng)...
    沈念sama閱讀 46,349評論 1贊 318
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,439評論 3贊 340
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年讥脐，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了遭居。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片啼器。...
    茶點(diǎn)故事閱讀 40,567評論 1贊 352
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖俱萍，靈堂內(nèi)的尸體忽然破棺而出端壳，到底是詐尸還是另有隱情，我是刑警寧澤枪蘑，帶...
    沈念sama閱讀 36,242評論 5贊 350
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布损谦，位于F島的核電站，受9級特大地震影響岳颇，放射性物質(zhì)發(fā)生泄漏照捡。R本人自食惡果不足惜，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,933評論 3贊 334
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一话侧、第九天 我趴在偏房一處隱蔽的房頂上張望栗精。 院中可真熱鬧，春花似錦瞻鹏、人聲如沸悲立。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,420評論 0贊 24
  • 一樁弒父案新博，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽级历。三九已至，卻和暖如春叭披，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背嚼贡。 一陣腳步聲響...
    開封第一講書人閱讀 33,531評論 1贊 272
  • 情欲美人皮
    我被黑心中介騙來泰國打工叮盘， 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留，地道東北人愈魏。 一個月前我還...
    沈念sama閱讀 48,995評論 3贊 377
  • 代替公主和親
    正文 我出身青樓溪厘，卻偏偏與公主長得像珊佣，于是被迫代替她去往敵國和親僻爽。 傳聞我的和親對象是個殘疾皇子敦捧，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,585評論 2贊 359

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

  • 表單屬性 1.autocomplete屬性 form 或input 域應(yīng)該擁有自動完成功能 例如：autocomp...
    越IT閱讀 293評論 0贊 0
  • 兼容性參考：https://caniuse.com/1）新的 form 屬性：autocompletenovali...
    yzr_0802閱讀 215評論 0贊 0
  • HTML5 新的表單元素HTML5有以下新的表單元素 ??：不是所有的瀏覽器都支持HTML5新的表單元素，但是你...
    龍飝閱讀 265評論 0贊 1
  • HTML標(biāo)簽解釋大全 一紊扬、HTML標(biāo)記 標(biāo)簽：!DOCTYPE 說明：指定了 HTML 文檔遵循的文檔類型定義(D...
    米塔塔閱讀 3,260評論 1贊 41
  • 格式后期處理玩祟。 Jeremy Keith在 Fronteers 2010 上的主題演講 今天我想跟大家談一談HTM...
    LordZhou閱讀 1,133評論 0贊 17