【HTML入门】第十四课 - form表单（下）表单控件们（一）

上一节，我们学习了基本的 form 标签的属性们，我们说过，form表单是一个区域，里面有一些控件元素，这一小节，我们来看一下这些控件们。

1 文本输入框

2 密码输入框

3 数值型输入框

4 文本域输入框

1 文本输入框

输入框的标签是 input ，但是慢慢你会发现，input标签，可以表示很多种控件。他们是通过 type 属性来决定具体是哪种控件的。

比如现在要说的这个 文本输入框。意思就是可以输入文字，可以输入数字，但其实数字也有单独的控件，我们先这么学习着，后面就到专门输入数字的数值型文本框了。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>我的第一个网页</title><style type="text/css"></style></head><body><form method="get" action="http://www.aatest.com/setUser" target="_blank"><label for="name">用户名:</label><input type="text" id="name"><hr/></form></body>
</html>

看，我们可以在前面定义输入框的标题，表示这里我要输入我的用户名啦，后面就是本文输入框，type 的属性值是 text 。

2 密码输入框

密码输入框，和文本输入框，都是 input 标签，但 type 的属性值不同。密码输入框，很明显，是用来输入密码的，用户输入的内容是不可见的。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>我的第一个网页</title><style type="text/css"></style></head><body><form method="get" action="http://www.aatest.com/setUser" target="_blank"><label for="name">用户名:</label><input type="text" id="name"><hr/><label for="pwd">密码:</label><input type="password" id="pwd"><hr/></form></body>
</html>

看，密码输入框的type属性值是 password 。用户输入的值不可见，如果键盘指法不是太好的用户，可能会忘记输入的是什么，所以一般注册的时候，平台会要求用户连续输入两次，以确保自己记住了自己注册时候输入的密码。

3 数值型输入框

数值型输入框，就是只能输入数字，不能输入其他文本。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>我的第一个网页</title><style type="text/css"></style></head><body><form method="get" action="http://www.aatest.com/setUser" target="_blank"><label for="name">用户名:</label><input type="text" id="name"><hr/><label for="pwd">密码:</label><input type="password" id="pwd"><hr/><label for="age">年龄:</label><input type="number" id="age"><hr/></form></body>
</html>

数值型的 type 属性值是 number，做了这个控制以后，这个输入框里面就只能输入数字了，也可以是小数。右边还有加减的小按钮来使用。不过这个小按钮呀，很多时候做项目，大家会觉得不好看，所以还是需要修改的。

4 文本域输入框

我们上面说的，都是输入一行文字或者数字，但是有时候需要输入多一些内容，input 输入框就不好使了。可以使用文本域输入框。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>我的第一个网页</title><style type="text/css"></style></head><body><form method="get" action="http://www.aatest.com/setUser" target="_blank"><label for="name">用户名:</label><input type="text" id="name"><hr/><label for="pwd">密码:</label><input type="password" id="pwd"><hr/><label for="age">年龄:</label><input type="number" id="age"><hr/><label for="desc">描述:</label><textarea id="desc"></textarea><hr/></form></body>
</html>