HTML中的表单

一、介绍

表单的用途很多。表单的用途主要用来收集客户端提供的相关信息，是网页具有相互交互的功能，是用户与网站实现交互的重要手段。当用户填写完信息后做提交操作，将表单的信息从客户端的浏览器传送到服务器上，经过服务器处理后，再将用户所需要的信息传送回客户端的浏览器上。在网页中，最常见的表单形式有文本框，密码文本框，单选按钮，复选框，按钮（普通，提交，重置），文件域或图像域，文本域和列表（菜单）。

表单标记是<from></form>。

表单是网页上的一个特定的区域，这个区域通过双<from>标记声明，相当于表单容器，在<form>与</form>之间的一切都是表单的内容，包括所有的表单控件，还有其他的伴随数据。

<form action=”” method=”” enctype=””target=””> </form>。

action:表单的处理程序，表单中收集到的数据将要提交到的地址。

name:为了防止表单信息在提交到后台处理程序时出现混乱而设置的名称。

method：定义处理程序从表单中获得信息的方式，有get和post两个值，默认post。

enctype：表单信息的编码方式。

target:目标窗口的打开方式。

二、表单的各种内容形式

1.单行文本框：<input type=”text” name=”” size=””maxlength=”” value=””/>

maxlength定义文本框中输入最多可以输入的文字字数。

value用于设定文本框的默认值。文本输入框中可以输入任何形式的文本字母数字。

2.密码输入框：<input type=”password” name=””maxlength=”” value=””/>

输入到文本框中以*星号显示。

例如：

在浏览器中打开，如图：

3.单选按钮：<input type=”radio” value=”value”name=”name” checked=”checked”/>

value: 设置用户选中该项目后，传送到处理程序中的值。

checked：表示这一选项默认被选中。

4.复选框：<input type=”checkbox” value=””name=”” checked=””/ >

例如：

在浏览器中打开，效果如图：

按钮：

5.普通按钮：<input type=”button” value=””name=”” onclick=””/>

value:按键上显示的名字；

name:按钮名称；

onclick:当鼠标点击时所进行的处理。

6.提交按钮：<input type=”submit” value=””name=”” />

提交按钮不需要设置onclick在单击该按钮时可以实现表单内容的提交。

7.重置按钮：<input type=”reset” value=”” name=””>

单击重置按钮后，可以清楚表单的内容，恢复默认的内容。

例如：

在浏览器中打开，效果如图：

8.文件域：<input type=”file” accept=”” name=””>

accept:接收文件的类型，有26种，一般省略；

name:文件的传输名称。

文件域在上传文件时经常被用到，用于查找硬盘中文件，然后通过表单将选中的文件上传。在邮件的附件，上传头像，发送文件经常使用这个控件。

例如：

在浏览器中打开，效果如图：

9.文本域：<textarea name=”” value=”” rows=””cols=””></textarea>

rows:行数

cols：列数

value：默认值

文本域与文本框的区别在于可以添加多行文字，从而可以输入更多的文本。

例如：

在浏览器中打开，效果如图：

10.列表、菜单：

<select name=”” size=”” multiple=””>

<optionvalue=”” selected=””>display option</option>

</select>

size:定义显示的长度；

multiple：表示内容可多选；

value:用于定义选项值时使用；

selected:默认被选中。

往往答案或者选项比较多时，使用列表（菜单）可以节省网页空间。正常情况只能看到一个选项，单击菜单后可以看到所有的选项。

如下是一个实现血型，生肖，星座的下拉列表：

在浏览器中打开，效果如图：