上一期和大家討論了html5新增的一些input表單媳板，至此input的表單基本介紹完了桑腮。
就和人一樣需要化妝打扮，這也一樣蛉幸，它們也需要附各種屬性值來修飾它們破讨。前兩期只是簡單了解了一下input表單有哪些，怎樣去將它寫出來奕纫，它們的屬性只是提到一點(diǎn)提陶，沒有詳細(xì)闡述，今天我們就一下來看看它有哪些屬性匹层，都有哪些作用隙笆。
1、form
第一點(diǎn)也是最重要的一點(diǎn)升筏，要想input表單有實(shí)際作用撑柔，我們就得用<form></form>標(biāo)簽去包著它們，這樣input表單才能提交您访。
拿提交按鈕舉例铅忿，不用form標(biāo)簽包著它是無法提交的，只是簡單一個(gè)按鈕洋只，無實(shí)際作用辆沦，我們來看一下效果：

<form action="www.baidu.com">
   <input type="submit">
</form>

當(dāng)它被form標(biāo)簽包住之后，點(diǎn)擊提交按鈕就能提交到目標(biāo)地址

form.png

2肛循、name
input的表單的名稱铭腕，為表單提交提供數(shù)據(jù)，例如：你需要給一個(gè)input框一個(gè)密碼的名稱多糠，這樣寫：

<input type="text" name="password">

若想要單選框?qū)崿F(xiàn)單選功能累舷，給這些單選框一個(gè)同樣name名就能實(shí)現(xiàn)。

     <input type="radio" name="check" >蘋果
     <input type="radio" name="check">橘子
     <input type="radio" name="check">香蕉

一個(gè)簡單的單選就做好了

radio1.png

我們可以看一下夹孔，當(dāng)選中其他選項(xiàng)時(shí)被盈，當(dāng)前默認(rèn)選中的選項(xiàng)就會取消，這就實(shí)現(xiàn)了單選功能搭伤。

radio2.png

radio3.png

3身堡、placeholder
這是表單內(nèi)的提示性文字，還是拿文本框舉例

        <input type="text">

這樣寫只顯示一個(gè)簡單的文本框

placeholder1.png

咱們先看一下這個(gè)屬性怎么寫

        <input type="text" placeholder="請輸入密碼">

placeholder的內(nèi)容會顯示在文本框內(nèi)

placeholder2.png

當(dāng)輸入內(nèi)容時(shí)拍鲤，它就會被覆蓋

placeholder3.png

只是簡單起到提示作用贴谎。

4、value
表單內(nèi)容殿漠，所有按鈕內(nèi)字樣都可以通過這個(gè)屬性來更改

        <input type="submit" value="啦啦啦">

原本是提交字樣赴精，附上value值后，就變成了value里的內(nèi)容了

value.png

當(dāng)然它的實(shí)際功能不變绞幌。

5蕾哟、disabled禁用

        <input type="radio" disabled>

當(dāng)附上這個(gè)值后，input表單就被禁用了莲蜘，無法執(zhí)行操作

disabled.png

這是一個(gè)單選框谭确，可以看到它現(xiàn)在變成灰色的了，無法選中票渠。

6逐哈、enabled可用
寫法和上述一致，當(dāng)然啦问顷，寫input表單大多數(shù)都是要用它的昂秃，所以一般都設(shè)置為可用禀梳，它是個(gè)默認(rèn)值，在不附任何屬性時(shí)它默認(rèn)為可用肠骆，一般不需要單獨(dú)設(shè)置算途。

7、readonly只讀
input表單為只讀狀態(tài)蚀腿，無法操作

   <input type="text" readonly>

這里拿文本框舉例嘴瓤，現(xiàn)在就無法進(jìn)行任何操作，無法輸入文字

readonly.png

8莉钙、checked選中

    <input type="radio" checked>

附上這個(gè)值后廓脆，input表單默認(rèn)選中狀態(tài)

checked.png

9、selected下拉框選中

<select>
    <option>蘋果</option>
    <option>橘子</option>
    <option>香蕉</option>
</select>

當(dāng)不附這個(gè)值時(shí)磁玉，它默認(rèn)選中第一個(gè)
當(dāng)給它加上這個(gè)值時(shí)停忿，它就選中附上這個(gè)值得選項(xiàng)

 <select>
    <option>蘋果</option>
    <option>橘子</option>
    <option selected>香蕉</option>
</select>

l來看一下效果：

selected2.png

我們給香蕉這個(gè)選項(xiàng)附上selected這個(gè)值后，默認(rèn)狀態(tài)就是選中香蕉這個(gè)選項(xiàng)了

10蚊伞、required
附上這個(gè)值時(shí)瞎嬉，你所要提交的input表單就不能為空，必須輸入內(nèi)容才能提交厚柳。

<form action="www.baidi.com">
    <input type="text" required>
    <input type="submit">
</form>

前面說了氧枣，要想提交，必須得用form標(biāo)簽包著别垮，附上required時(shí)便监，內(nèi)容為空就不能提交

required.png

當(dāng)輸入內(nèi)容時(shí)就能提交了

required2.png

required3.png

可以看到已經(jīng)提交了

11、min最小值
通常用在數(shù)字文本框上

   <input type="number" min="5">

這里給它附上最小值5碳想，可選數(shù)字最小值就是5,烧董，無法選擇比它更小的值

min.png

12、max最大值
有最小值就有最大值胧奔，max就是給它一個(gè)最大值

 <input type="number" max="5">

這里它的最大值就是5了

max1.png

這里還能選擇比它更小的值

max2.png

13逊移、maxlength
可以輸入最大字?jǐn)?shù)，超出不顯示

   <input type="text" maxlength="5">

這里就表示這個(gè)文本框最多可輸入五個(gè)字龙填，超出就不顯示了

14胳泉、cols、rows
列和寬

 <textarea name="" id="" cols="30" rows="10"></textarea>

這里表示文本域（多行文本框）列為30岩遗，寬為10

cols扇商、rows.png

15、寬宿礁、高案铺、背景色等
所有input表單都能設(shè)置寬高背景色等屬性

   <input type="text" style="width: 100px ;height: 50px;background:red;">

現(xiàn)在文本框就成了寬100像素、高50像素梆靖、背景色是紅色的文本框了

寬高.png

至此控汉，input表單基本介紹完了笔诵。

小編能力有限，存在不足或不全姑子，請大家指出嗤放，共同學(xué)習(xí)與交流。