HTML入门3：表单

1  表单的应用

网站的用户名注册和登录。主要用来接收用户提交的信息，并把信息提交给服务器，实现客户端和服务器的交互。

2  表单基本语法

使用form标签。表单的所有元素，包括文本域、单选框、复选框、按钮、列表等等，都要包含在form标签内。具体的表单元素如下：

2.1  input标签

单标签，语法：<input type="类型属性" name="名称" ... />
其中，type的属性值有很多种，每种对应一种表单元素。

input的单行文本域
基本语法：<input type="text" name="..." ... />
其他可选属性：

input的密码框
基本语法：<input type="password" name="..." ... />
密码域也是单行文本域的形式，只不过输入其中的信息以圆点的形式显示。

input的文件域
基本语法：<input type="file" name="..." ... />
功能是让用户可以上传本地电脑的文件。不同的浏览器的显示效果不同。

input的单选框
基本语法：<input type="radio" name="..." value="..." checked />
例如，选择性别的单选框：

<form>
        男<input type="radio" name="sex" value="man">
        女<input type="radio" name="sex" value="woman">
</form>

注意：（1）男、女是要写到input标签外面的，input标签的表现形式就仅仅是那个圆点。（2）value值的作用是提交到服务器的值。（3）同一组的name属性值一定要一样，这样才能保证是单选，否则就可以多选了。（4）checked属性的作用是默认选中，哪个input标签设置了checked，哪个单选框就是默认被选中的状态。

input的复选框
基本语法：<input type="checkbox" name="..." value="..." checked />
例如一个关于爱好的复选框：

<form>
        读书<input type="checkbox" name="hobby" value="read" checked>
        唱歌<input type="checkbox" name="hobby" value="sing">
        跳舞<input type="checkbox" name="hobby" value="dance">
</form>

注意：（1）具体的爱好是要写到input标签外面的，input标签的表现形式就仅仅是那个方点。（2）value值的作用是提交到服务器的值。（3）同一组的name属性值没有要求一定要一样，但是规范起见，最好保持一致。（4）checked属性的作用是默认选中，哪个input标签设置了checked，哪个单选框就是默认被选中的状态。

input的按钮

<form><!--value的值是显示在按钮上的文字内容-->
        <input type="button" name="..." value="点我"/><!--普通按钮-->
        <input type="submit" name="..." value="提交"/><!--提交按钮-->
        <input type="reset" name="..." value="重置"/><!--重置按钮-->
        <input type="image" name="..." src="..." /><!--图像按钮-->
</form>

图像按钮是为了让按钮看起来更美观，而插入的一张图片形式的按钮。功能和提交按钮相同。

input隐藏域
假如我们需要提交一些信息给服务器，但是还想隐藏它们，可以使用隐藏域。当用户点击提交按钮后，信息就会提交到服务器。<input type="hidden" name="..." value="想要提交到服务器的信息"/>

2.2  下拉菜单和列表标签select和option

基本语法：

<select><!--下拉菜单-->
            <option value="...">选项</option><!--菜单里的每一项-->
            <option value="...">选项</option>
            ...
</select>

这里的value属性值的作用和上面的都一样，是提交到服务器中的值。
select标签的可选属性：

如果设置了size属性，则显示方式由只显示一项的下拉菜单变为显示多项的列表形式。
option标签可选属性：

例子：

<form><!--下拉菜单5个选项，列表项5个选项，可以多选，可见选项数为3。-->
　    下拉菜单：<br/>
　    <select>
　        <option value="panda">熊猫</option>
　        <option value="cat">猫</option>
　        <option value="dog">狗</option>
　        <option value="pig">猪</option>
　        <option value="monkey">猴子</option>
　    </select>
　    <br/><br/>
　    列表：<br/>
　    <select size="3" multiple>
　        <option value="apple">苹果</option>
　        <option value="banana">香蕉</option>
　        <option value="orange">橙子</option>
　        <option value="peach">桃</option>
　        <option value="pear">梨</option>
　    </select>
　</form>

分组下拉菜单和列表标签optgroup
可以对菜单里的各个项进行分组划分。
例子：

<form>
        <select>
            <option selected>请选择：</option>
            <optgroup label="水果">
                <option value="apple">苹果</option>
                <option value="kivi">猕猴桃</option>
                <option value="apricots">杏子</option>
            </optgroup>
            <optgroup label="蔬菜">
                <option value="tomato">西红柿</option>
                <option value="cabbage">白菜</option>
                <option value="lettuce">油麦菜</option>
            </optgroup>
        </select>
</form>

2.3  多行文本域textarea

基本语法：

<textarea name="..." rows="..." cols="..." ...>
内容
</textarea>

textarea标签的可选属性：

3  表单form标签属性

表单的作用是把用户输入的信息提交到服务器上，那么如何提交？提交到服务器上哪里？如何处理数据？这些是需要在form标签的属性中进行设置的。
基本语法：

<form action="..." method="..." name=''..." ...>
表单元素
</form>

action属性定义的是把表单内容提交到服务器上的一个处理程序的URL地址，即“给谁”。
method属性定义提交的方式，即“怎么给”。如果利用get方式提交，使用URL传递参数，用户的提交信息会被放到action指定的URL地址后面，会暴露在浏览器的地址栏中。发送的信息有数量的限制，一般用于信息的获取。而使用post方式，表单数据会作为HTTP请求体的一部分，不会暴露出来；对发送信息的数量无限制，一般用于提交和修改服务器上的数据。