HTML5表單元素的新增屬性

時間 2019-11-08

標籤 html5 html 表單元素新增屬性欄目 HTML5 简体版

原文原文鏈接

Input標籤（類型屬性）

email/url/range/number/search/color/tel/時間選擇/針對PC端的其它類型（除了number和時間選擇外，其它的類型都只有在手機端的輸入板有效果）數組

email（郵箱輸入框，focus後在手機輸入版中會有@字符） <input type="email">
url（網址輸入框，focus後在手機輸入版中會有.com字符） <input type='url'>
tel（電話輸入框，focus後自動彈出數字輸入板） <input type="tel" name='tel'>
number（數字輸入框） <input type="number" name='number'> PC端顯示（只有數字、運算符和字母e能夠做爲天然數的常數能夠輸入）：

移動端輸入板顯示：
時間選擇（年月日）

<input type="date">             ：年月日
    <input type="month">          ：年月
    <input type="week">           ：年月星期
    <input type="time">             ：時分秒
    <input type="datetime">      ：年月日時分秒（UTC時間）
    <input type="datetime-local">：年月日時分秒（本地時間）
PS：以上的input類型基本只有谷歌和Opera瀏覽器是徹底支持的，datetime類型谷歌瀏覽器不兼容
複製代碼

效果圖：瀏覽器

此外還有選項框等：

手機端效果都是以滾輪的形式呈現的：例如datetime-local類型

其它類型：（color、range、search） 1.color：選取顏色，點擊能夠彈出調色板 <input type="color">

2.range：選取數值範圍，有max和min兩個屬性（不填寫則默認爲0到100） <input type="range" max='20' min='0' value='20'>

3.search：search類型和普通輸入框很相像，可是當有值輸入的時候，會多出一個能夠點選刪除的叉叉 <input type="search">

表單屬性

autocomplete/autofocus/multiple/requiredbash

autocomplete：是否自動補全（該屬性有兩個值，on/off，默認是on），該屬性也能夠用在全部input標籤中
autofocus：在頁面剛載入時，焦點放在哪一個輸入框上，（該屬性有一個值autofocus，只填寫屬性不填寫值也能生效），能夠用於全部input標籤中，當頁面中有多個autofocus時，只有自上而下第一個使用該屬性的標籤生效
multiple：輸入多個值，只適用於file和email類型的input，語法multiple='multiple'，或者只寫一個multiple屬性也有效果 1.file：在type='file'中，使用multiple屬性後，選取文件能夠按住ctrl鍵同時選取多個文件（在此吐槽一下狗爹的網頁文件上傳只能一個一個上傳，噁心死.）

2.email：在type='email'中，使用multiple屬性後，能夠在一個輸入框中填寫多個郵箱地址（用分號分隔），而後傳輸過去後臺，後臺會識別這是多個郵箱地址（數組）而不是一個郵箱地址
required：input填寫該屬性後，表單提交時會對該input作簡單的校驗，不能爲空而且須要必須的字段例如： <input type='text' required>

<input type='email' required>

連接屬性

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

sizes（主要用於link中的網頁圖標進行大小的控制，以下圖圖標）
base標籤（放置在head標籤中）中的target（能夠控制整個網頁中a連接打開新窗口。也能夠控制a連接跳轉的頁面）例如：a連接在新窗口中打開百度

<head>
    <base href='https://www.baidu.com/' target='_blank'>
</head>
<body>
    <a href>aaa</a>
</body>
複製代碼

其餘屬性

script/olasync

script標籤新增屬性 async和defer（異步加載外部js文件，可解決外部js放置在頭部致使的白屏問題）不一樣點： async：何時加載完js何時執行 defer：全部資源加載完後再執行jsui
ol新增屬性 start（起始值）和reversed（倒序排列），注意，reversed的倒敘並不會使內容也倒敘，只是ol自帶的序號倒敘 start： url

reversed：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。