上一期和大家讨论了html5新增的一些input表单，至此input的表单基本介绍完了。
就和人一样需要化妆打扮，这也一样，它们也需要附各种属性值来修饰它们。前两期只是简单了解了一下input表单有哪些，怎样去将它写出来，它们的属性只是提到一点，没有详细阐述，今天我们就一下来看看它有哪些属性，都有哪些作用。
1、form
第一点也是最重要的一点，要想input表单有实际作用，我们就得用<form></form>标签去包着它们，这样input表单才能提交。
拿提交按钮举例，不用form标签包着它是无法提交的，只是简单一个按钮，无实际作用，我们来看一下效果：

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

当它被form标签包住之后，点击提交按钮就能提交到目标地址

form.png

2、name
input的表单的名称，为表单提交提供数据，例如：你需要给一个input框一个密码的名称，这样写：

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

若想要单选框实现单选功能，给这些单选框一个同样name名就能实现。

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

一个简单的单选就做好了

radio1.png

我们可以看一下，当选中其他选项时，当前默认选中的选项就会取消，这就实现了单选功能。

radio2.png

radio3.png

3、placeholder
这是表单内的提示性文字，还是拿文本框举例

        <input type="text">

这样写只显示一个简单的文本框

placeholder1.png

咱们先看一下这个属性怎么写

        <input type="text" placeholder="请输入密码">

placeholder的内容会显示在文本框内

placeholder2.png

当输入内容时，它就会被覆盖

placeholder3.png

只是简单起到提示作用。

4、value
表单内容，所有按钮内字样都可以通过这个属性来更改

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

原本是提交字样，附上value值后，就变成了value里的内容了

value.png

当然它的实际功能不变。

5、disabled禁用

        <input type="radio" disabled>

当附上这个值后，input表单就被禁用了，无法执行操作

disabled.png

这是一个单选框，可以看到它现在变成灰色的了，无法选中。

6、enabled可用
写法和上述一致，当然啦，写input表单大多数都是要用它的，所以一般都设置为可用，它是个默认值，在不附任何属性时它默认为可用，一般不需要单独设置。

7、readonly只读
input表单为只读状态，无法操作

   <input type="text" readonly>

这里拿文本框举例，现在就无法进行任何操作，无法输入文字

readonly.png

8、checked选中

    <input type="radio" checked>

附上这个值后，input表单默认选中状态

checked.png

9、selected下拉框选中

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

当不附这个值时，它默认选中第一个
当给它加上这个值时，它就选中附上这个值得选项

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

l来看一下效果：

selected2.png

我们给香蕉这个选项附上selected这个值后，默认状态就是选中香蕉这个选项了

10、required
附上这个值时，你所要提交的input表单就不能为空，必须输入内容才能提交。

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

前面说了，要想提交，必须得用form标签包着，附上required时，内容为空就不能提交

required.png

当输入内容时就能提交了

required2.png

required3.png

可以看到已经提交了

11、min最小值
通常用在数字文本框上

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

这里给它附上最小值5，可选数字最小值就是5,，无法选择比它更小的值

min.png

12、max最大值
有最小值就有最大值，max就是给它一个最大值

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

这里它的最大值就是5了

max1.png

这里还能选择比它更小的值

max2.png

13、maxlength
可以输入最大字数，超出不显示

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

这里就表示这个文本框最多可输入五个字，超出就不显示了

14、cols、rows
列和宽

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

这里表示文本域（多行文本框）列为30，宽为10

cols、rows.png

15、宽、高、背景色等
所有input表单都能设置宽高背景色等属性

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

现在文本框就成了宽100像素、高50像素、背景色是红色的文本框了

宽高.png

至此，input表单基本介绍完了。

小编能力有限，存在不足或不全，请大家指出，共同学习与交流。