上次咱們一起學習了一下一些常用的input表單，這次隨小編來看一下html5新增了哪些吧。
不知道大家注意到?jīng)]有，上次咱們提到了單選框、多選框，但在實際使用中除了這兩個還有一個也很常用，是什么呢，我們一起來看一下：

攜程網(wǎng).png

<select>
    <option >江蘇</option>
    <option >北京</option>
    <option >上海</option>
</select>

顯示如下：

下拉框.png

下拉框中的選項內(nèi)容寫在<option></option>中，即可實現(xiàn)下拉菜單；

2、定義拾色器
聽上去很高大上，其實就是字面意思，就是用來選取顏色用的，它的代碼如下：

    <input type="color">

在不點擊它的時候是這樣的：

定義拾色器1.png

這時候可以看到啥也沒有，點擊它時會出現(xiàn)一個調(diào)色板，用以選取顏色:

定義拾色器2.png

3、定義時間

①年/月/日
在瀏覽網(wǎng)頁的時候也常見一下用以選擇時間的表單，例如:

攜程日期選擇.png

他就可以通過這個來實現(xiàn)，我們先來看一下它如何實現(xiàn)：
其實很簡單，僅僅一行代碼

  <input type="date">

可以和攜程這個實現(xiàn)同樣的功能

年月日.png

當然啦，沒它那個好看，這個樣式具體怎樣可以根據(jù)個人喜好或者工作要求去修改。
還有類似可以選擇其他不同時間的表單標簽，咱們一起來看一下

②年/月/日/時/分

    <input type="datetime-local">

它比年月日多了一個具體時間：

年月日時分.png

③年/月

    <input type="month">

這個只可以選擇年月，無法選擇具體日期

年月.png

④年/周

    <input type="week">

只能顯示哪一年第幾周

年周.png

⑤時間

    <input type="time">

只能選擇具體時間

時間.png

4、定義email地址

    <input type="email">

和文本框長一樣，但搭配提交使用輸入的e-mail地址必須合法

email.png

5、數(shù)字文本框

    <input type="number">

和文本框也很相似，當點擊它的時候會出現(xiàn)一個調(diào)整數(shù)字大小的鈕，也只能輸入數(shù)字

數(shù)字文本框.png

6、數(shù)字選擇空間

    <input type="range">

這個用在音量調(diào)節(jié)上比較多，長這樣：

數(shù)字選擇控件.png

它是可以滑動的。

7、搜索框

<input type="search">

這個也和文本框長一樣，它是定義搜索功能的文本框

搜索框.png

8、手機號碼文本框

    <input type="tel">

又是一個和文本框長一樣的框，它只能輸入合法的手機號碼

手機號碼框.png

9、網(wǎng)絡(luò)地址文本框

    <input type="url">

它也和普通文本框長一樣，它和文本框的區(qū)別在于只能輸入合法網(wǎng)絡(luò)地址

網(wǎng)絡(luò)地址文本框.png

input表單中得到各種文本框基本的長一樣，區(qū)別在于定義的功能不同，不同場合使用不同文本框。

input表單基本介紹完了，今天就暫時到這吧。當然它們還有很多屬性，小編將在下期和大家一起討論input表單的各種屬性，請大家持續(xù)關(guān)注哦。

小編作為初學者，多有不足和不對的地方，希望大家指出，同時也希望能和大家一起學習交流！
未完待續(xù)。。。。。。