HTML5表單的新功能

HTML5 Web Forms 2.0是對目前Web表單的全面提升矩欠,它在保持了簡便易用的特性的同時,增加了許多內(nèi)置的控件或者控件屬性來滿足用戶的需求灵巧,并且同時減少了開發(fā)人員的編程髓需。HTML5 主要在以下幾個方面對目前的Web表單做了改進(jìn):

HTML結(jié)構(gòu)更加自由

XHTML中需要放在form之中的諸如input/button/select/textarea等標(biāo)簽元素啡氢,在HTML 5中完全可以放在頁面任何位置,然后通過新增的form屬性指向元素所屬表單的ID值掰曾,即可關(guān)聯(lián)起來旭蠕。

    <form id="form0" action="http://www.baidu.com"></form>
    <input type="search" form="form0" name="kw">

新增控件類型

  1. Email/Url類型
    <input type="email" name="email"></input> 
    <input type="url" name="url"></input> 

必須輸入正確的email/url地址,表單才能正常提交。

  1. search
    <input type="search" search="s"></input> 

此類型表示輸入的將是一個搜索關(guān)鍵字掏熬,通過results=s可顯示一個搜索小圖標(biāo)佑稠。

  1. number/range
    <input type="number" name="points" min="5" step="5" max="100" />
    <input type="range" name="points" min="5" step="5" max="100" />

不同的數(shù)字輸入模式

  1. color
    <input type="color"></input> 

此類型可讓用戶通過顏色選擇器選擇一個顏色值,并反饋到value中旗芬。

  1. date/month/week/time/datetime 日期選擇器
    <input type="date" name="user_date" />

新增表單屬性

  1. placeholder
    <input type="text" placeholder="請輸入用戶名"></input>
  1. require/pattern
    <input type="text" name="require" required=""></input> 
    <input type="text" name="require1" required="required"></input> 
    <input type="text" name="require2" pattern="^[1-9]\d{5}$"></input> 
  1. autofocus
    <input type="text" autofocus="true"></input> 

頁面初始時舌胶,聚焦

  1. list
    <input type="text" list="ilist"/> 
    <datalist id="ilist"> 
        <option label="a" value="a"></option> 
        <option label="b" value="b"></option> 
        <option label="c" value="c"></option> 
    </datalist>

list 屬性規(guī)定輸入域的 datalist。datalist 是輸入域的選項列表疮丛。

  1. multiple 規(guī)定輸入域中可選擇多個值幔嫂。
    <input type="file" name="img" multiple="multiple" />
  1. XML Submission編碼格式
    我們一般常見的是Web Form的編碼格式是application/x-www-form-urlencoded。開發(fā)人員都很清楚這種格式誊薄,數(shù)據(jù)送到服務(wù)器端履恩,可以方便的存取。HTML5提供一種新的數(shù)據(jù)格式:XML Submission呢蔫,即application/x-www-form+xml切心。簡單的舉例說,服務(wù)器端將直接接收到XML形式的表單數(shù)據(jù)片吊。
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末绽昏,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子俏脊,更是在濱河造成了極大的恐慌全谤,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,561評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件爷贫,死亡現(xiàn)場離奇詭異认然,居然都是意外死亡,警方通過查閱死者的電腦和手機沸久,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,218評論 3 385
  • 文/潘曉璐 我一進(jìn)店門季眷,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人卷胯,你說我怎么就攤上這事子刮。” “怎么了窑睁?”我有些...
    開封第一講書人閱讀 157,162評論 0 348
  • 文/不壞的土叔 我叫張陵挺峡,是天一觀的道長。 經(jīng)常有香客問我担钮,道長橱赠,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,470評論 1 283
  • 正文 為了忘掉前任箫津,我火速辦了婚禮狭姨,結(jié)果婚禮上宰啦,老公的妹妹穿的比我還像新娘。我一直安慰自己饼拍,他們只是感情好赡模,可當(dāng)我...
    茶點故事閱讀 65,550評論 6 385
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著师抄,像睡著了一般漓柑。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上叨吮,一...
    開封第一講書人閱讀 49,806評論 1 290
  • 那天辆布,我揣著相機與錄音,去河邊找鬼茶鉴。 笑死锋玲,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的蛤铜。 我是一名探鬼主播嫩絮,決...
    沈念sama閱讀 38,951評論 3 407
  • 文/蒼蘭香墨 我猛地睜開眼丛肢,長吁一口氣:“原來是場噩夢啊……” “哼围肥!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起蜂怎,我...
    開封第一講書人閱讀 37,712評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后趋惨,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體员帮,經(jīng)...
    沈念sama閱讀 44,166評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,510評論 2 327
  • 正文 我和宋清朗相戀三年幽歼,在試婚紗的時候發(fā)現(xiàn)自己被綠了朵锣。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,643評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡甸私,死狀恐怖诚些,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情皇型,我是刑警寧澤诬烹,帶...
    沈念sama閱讀 34,306評論 4 330
  • 正文 年R本政府宣布,位于F島的核電站弃鸦,受9級特大地震影響绞吁,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜唬格,卻給世界環(huán)境...
    茶點故事閱讀 39,930評論 3 313
  • 文/蒙蒙 一家破、第九天 我趴在偏房一處隱蔽的房頂上張望颜说。 院中可真熱鬧,春花似錦汰聋、人聲如沸脑沿。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,745評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽庄拇。三九已至,卻和暖如春韭邓,著一層夾襖步出監(jiān)牢的瞬間措近,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,983評論 1 266
  • 我被黑心中介騙來泰國打工女淑, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留瞭郑,地道東北人。 一個月前我還...
    沈念sama閱讀 46,351評論 2 360
  • 正文 我出身青樓鸭你,卻偏偏與公主長得像屈张,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子袱巨,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,509評論 2 348

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