HTML5新增input標籤屬性

時間 2019-11-29 標籤 html5 html 新增 input 標籤屬性

一. input type屬性

<form action="">
        郵箱<input type="email" name="" id=""> <input type="submit" value="提交"><br /><br />
        手機號碼<input type="tel" name="" id=""> <input type="submit" value="提交"><br /><br />
        網址<input type="url" name="" id=""> <input type="submit" value="提交"><br /><br />
        數字<input type="number" name="" id=""> <input type="submit" value="提交"><br /><br />
        搜索框<input type="search" name="" id=""> <input type="submit" value="提交"><br /><br />
        拖動滑塊<input type="range" name="" id=""> <input type="submit" value="提交"><br /><br />
        時間<input type="time" name="" id=""> <input type="submit" value="提交"><br /><br />
        日期<input type="date" name="" id=""> <input type="submit" value="提交"><br /><br />
        日期時間<input type="datetime" name="" id=""> <input type="submit" value="提交"><br /><br />
        幾年幾月<input type="month" name="" id=""> <input type="submit" value="提交"><br /><br />
        幾年幾周<input type="week" name="" id=""> <input type="submit" value="提交"><br /><br />
    </form>

如下是Firefox顯示效果(每一個瀏覽器上的默認顯示效果不一樣,能夠經過css修改統同樣式)css

二. 其餘新增屬性：

1. placeholder

placeholder 屬性提供可描述輸入字段預期值的提示信息（hint）。該提示會在輸入字段爲空時顯示，並會在字段得到焦點時消失。html

placeholder 屬性適用於如下的 <input> 類型：text, search, url, telephone, email 以及 password。瀏覽器

與value的區別就是用戶輸入字的時候，value須要刪除默認的字，以下面的"請輸入關鍵詞"，而placeholder 不須要，像背景，而且顏色也淺一點url

 <input type="search" name="" id="" value="請輸入關鍵詞"><br><br>
 <input type="search" name="" id="" placeholder="請輸入關鍵詞">

2.autofocus

當載入頁面時，光標焦點會自動定在文本框內，默認是沒有光標焦點的，須要鼠標點擊纔會有spa

自動獲取光標焦點<input type="text" name="" id="" autofocus>

3.multiple

multiple 屬性規定輸入字段可選擇多個值。若是使用該屬性，則字段可接受多個值。code

multiple 屬性使用歐冠與如下 <input> 類型：email 和 file。orm

文件上傳能夠一次上傳多個文件，默認是隻能一次選擇上傳一個htm

多文件上傳<input type="file" name="" id="" multiple>

4.autocomplete（瞭解）

屬性規定輸入字段是否應該啓用自動完成功能。blog

自動完成容許瀏覽器預測對字段的輸入。當用戶在字段開始鍵入時，瀏覽器基於以前鍵入過的值，應該顯示出在字段中填寫的選項。教程

註釋：autocomplete 屬性適用於 <form>，以及下面的 <input> 類型：text, search, url, telephone, email, password, datepickers, range 以及 color。

5.accesskey

屬性規定激活（使元素得到焦點）元素的快捷鍵。註釋：如下元素支持 accesskey 屬性：<a>, <area>, <button>, <input>, <label>, <legend> 以及 <textarea>。

幾乎全部瀏覽器均 accesskey 屬性，除了 Opera。

<body>

<a href="http://www.w3school.com.cn/html/" accesskey="h">HTML 教程</a><br />
<a href="http://www.w3school.com.cn/css/" accesskey="c">CSS 教程</a>

<p><b>註釋：</b>請使用Alt + <i>accessKey</i> (或者 Shift + Alt + <i>accessKey</i>) 來訪問帶有指定快捷鍵的元素。</p>

</body>