HTML5表單元素的新增屬性

Input標簽(類型屬性)

email/url/range/number/search/color/tel/時間選擇/針對PC端的其它類型(除了number和時間選擇外畦木,其它的類型都只有在手機端的輸入板有效果)

  • email(郵箱輸入框根盒,focus后在手機輸入版中會有@字符)
    <input type="email">
  • url(網(wǎng)址輸入框,focus后在手機輸入版中會有.com字符)
    <input type='url'>
  • tel(電話輸入框,focus后自動彈出數(shù)字輸入板)
    <input type="tel" name='tel'>
  • number(數(shù)字輸入框)
    <input type="number" name='number'>
    PC端顯示(只有數(shù)字自沧、運算符和字母e可以作為自然數(shù)的常數(shù)可以輸入):

    移動端輸入板顯示:
  • 時間選擇(年月日)
    <input type="date">             :年月日
    <input type="month">          :年月
    <input type="week">           :年月星期
    <input type="time">             :時分秒
    <input type="datetime">      :年月日時分秒(UTC時間)
    <input type="datetime-local">:年月日時分秒(本地時間)
PS:以上的input類型基本只有谷歌和Opera瀏覽器是完全支持的纵柿,datetime類型谷歌瀏覽器不兼容

效果圖:



此外還有選項框等:



手機端效果都是以滾輪的形式呈現(xiàn)的:
例如datetime-local類型
  • 其它類型:(color、range鸯绿、search)
    1.color:選取顏色跋破,點擊可以彈出調(diào)色板
    <input type="color">

    2.range:選取數(shù)值范圍,有max和min兩個屬性(不填寫則默認為0到100)
    <input type="range" max='20' min='0' value='20'>

    3.search:search類型和普通輸入框很相像瓶蝴,但是當有值輸入的時候毒返,會多出一個可以點選刪除的叉叉
    <input type="search">

表單屬性

autocomplete/autofocus/multiple/required

  • autocomplete:是否自動補全(該屬性有兩個值,on/off舷手,默認是on)拧簸,該屬性也可以用在所有input標簽中
  • autofocus:在頁面剛載入時,焦點放在哪個輸入框上聚霜,(該屬性有一個值autofocus狡恬,只填寫屬性不填寫值也能生效),可以用于所有input標簽中蝎宇,當頁面中有多個autofocus時弟劲,只有自上而下第一個使用該屬性的標簽生效
  • multiple:輸入多個值,只適用于file和email類型的input姥芥,語法multiple='multiple'兔乞,或者只寫一個multiple屬性也有效果
    1.file:在type='file'中,使用multiple屬性后,選取文件可以按住ctrl鍵同時選取多個文件(在此吐槽一下狗爹的網(wǎng)頁文件上傳只能一個一個上傳庸追,惡心死.)



    2.email:在type='email'中霍骄,使用multiple屬性后,可以在一個輸入框中填寫多個郵箱地址(用分號分隔)淡溯,然后傳輸過去后臺读整,后臺會識別這是多個郵箱地址(數(shù)組)而不是一個郵箱地址


  • required:input填寫該屬性后,表單提交時會對該input做簡單的校驗咱娶,不能為空并且需要必須的字段
    例如:
    <input type='text' required>

    <input type='email' required>

鏈接屬性

link的sizes屬性/base對的target屬性

  • sizes(主要用于link中的網(wǎng)頁圖標進行大小的控制米间,如下圖圖標)


  • base標簽(放置在head標簽中)中的target(可以控制整個網(wǎng)頁中a鏈接打開新窗口。也可以控制a鏈接跳轉(zhuǎn)的頁面)
    例如:a鏈接在新窗口中打開百度
 <head>
    <base  target='_blank'>
</head>
<body>
    <a href>aaa</a>
</body>

其他屬性

script/ol

  • script標簽新增屬性
    async和defer(異步加載外部js文件膘侮,可解決外部js放置在頭部導(dǎo)致的白屏問題)
    不同點:
    async:什么時候加載完js什么時候執(zhí)行
    defer:所有資源加載完后再執(zhí)行js

  • ol新增屬性
    start(起始值)和reversed(倒序排列)屈糊,注意,reversed的倒敘并不會使內(nèi)容也倒敘琼了,只是ol自帶的序號倒敘
    start:



    reversed:


最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末逻锐,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子雕薪,更是在濱河造成了極大的恐慌昧诱,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,104評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件蹦哼,死亡現(xiàn)場離奇詭異鳄哭,居然都是意外死亡,警方通過查閱死者的電腦和手機纲熏,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,816評論 3 399
  • 文/潘曉璐 我一進店門妆丘,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人局劲,你說我怎么就攤上這事勺拣。” “怎么了鱼填?”我有些...
    開封第一講書人閱讀 168,697評論 0 360
  • 文/不壞的土叔 我叫張陵药有,是天一觀的道長。 經(jīng)常有香客問我苹丸,道長愤惰,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 59,836評論 1 298
  • 正文 為了忘掉前任赘理,我火速辦了婚禮宦言,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘商模。我一直安慰自己奠旺,他們只是感情好蜘澜,可當我...
    茶點故事閱讀 68,851評論 6 397
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著响疚,像睡著了一般鄙信。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上忿晕,一...
    開封第一講書人閱讀 52,441評論 1 310
  • 那天装诡,我揣著相機與錄音,去河邊找鬼杏糙。 笑死慎王,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的宏侍。 我是一名探鬼主播,決...
    沈念sama閱讀 40,992評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼蜀漆,長吁一口氣:“原來是場噩夢啊……” “哼谅河!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起确丢,我...
    開封第一講書人閱讀 39,899評論 0 276
  • 序言:老撾萬榮一對情侶失蹤绷耍,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后鲜侥,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體褂始,經(jīng)...
    沈念sama閱讀 46,457評論 1 318
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,529評論 3 341
  • 正文 我和宋清朗相戀三年描函,在試婚紗的時候發(fā)現(xiàn)自己被綠了崎苗。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,664評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡舀寓,死狀恐怖胆数,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情互墓,我是刑警寧澤必尼,帶...
    沈念sama閱讀 36,346評論 5 350
  • 正文 年R本政府宣布,位于F島的核電站篡撵,受9級特大地震影響判莉,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜育谬,卻給世界環(huán)境...
    茶點故事閱讀 42,025評論 3 334
  • 文/蒙蒙 一券盅、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧斑司,春花似錦渗饮、人聲如沸但汞。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,511評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽私蕾。三九已至,卻和暖如春胡桃,著一層夾襖步出監(jiān)牢的瞬間踩叭,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,611評論 1 272
  • 我被黑心中介騙來泰國打工翠胰, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留容贝,地道東北人。 一個月前我還...
    沈念sama閱讀 49,081評論 3 377
  • 正文 我出身青樓之景,卻偏偏與公主長得像斤富,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子锻狗,可洞房花燭夜當晚...
    茶點故事閱讀 45,675評論 2 359

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

  • HTML5 新的表單元素 HTML5 有以下新的表單元素: < datalist> 注意:不是所有的瀏覽器都支持H...
    鹿守心畔光閱讀 613評論 0 2
  • <input type=> text:在表單中輸入字母满力、數(shù)字等內(nèi)容,默認寬度為20字符 radio:單選按鈕 ch...
    梨啊梨閱讀 589評論 0 0
  • html5新增了許多表單屬性轻纪。這里主要分為 屬性和 屬性油额,當然還有關(guān)于checkbox的和label標簽的屬性我們...
    便U_Life閱讀 2,076評論 0 8
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn)刻帚,斷路器潦嘶,智...
    卡卡羅2017閱讀 134,704評論 18 139
  • 曾香香閱讀 116評論 0 0