上一期和大家讨论了html5新增的一些input表单，至此input的表单基本介绍完了。
就和人一样需要化妆打扮，这也一样，它们也需要附各种属性值来修饰它们。前两期只是简单了解了一下input表单有哪些，怎样去将它写出来，它们的属性只是提到一点，没有详细阐述，今天我们就一下来看看它有哪些属性，都有哪些作用。
1、form
第一点也是最重要的一点，要想input表单有实际作用，我们就得用<form></form>标签去包着它们，这样input表单才能提交。
拿提交按钮举例，不用form标签包着它是无法提交的，只是简单一个按钮，无实际作用，我们来看一下效果：
<form action="www.baidu.com">
<input type="submit">
</form>
当它被form标签包住之后，点击提交按钮就能提交到目标地址
form.png
可以看到我这点提交之后跳转到百度了，当然我这只是演示，实际无法提交到百度，后期用到的时候可以给它一个正确的提交地址，这样就能提交了。
这form标签里的属性值action=“”就是写提交地址的。
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
如果不给它一个同样的name值，它将无法实现单选，每一项都能被单独选中。
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表单基本介绍完了。
小编能力有限，存在不足或不全，请大家指出，共同学习与交流。
网友评论