08Webpage Form

Webpage Form

---

表单（form）在网页中主要负责数据采集功能。一个表单有三个基本组成部分： 表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。 表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。 表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。

表单标签

用于申明表单，定义采集数据的范围，也就是<form>和</form>里面包含的数据将被提交到服务器或者电子邮件里。表单标签定义的基本格式如下：<form 属性1="属性值1"  ...  属性n="属性值n" ></form>

<form id="" class="" name="" method="" action="" target=""></form>

name属性用于给这个表单指定一个名字，可以用字母和数字组合的方式来给表单命名，但不要用数字开头。

method属性用于指定提交表单数据的方式，常用的有GET和POST两种方式，如果没有设置此属性或者此属性值为空，则使用GET方式来提交数据。GET和POST提交方式的主要不同点在于如下两点：

1. 因为GET数据是URL的一部分，所以它会将表单数据附在URL后面传送。也就是说，在浏览器的地址栏将会显示表单中的数据，并且，在通常情况下，浏览器会将这个附加数据后的URL保存起来，可以查阅通过浏览器的“历史”来得到它。所以，这种方式不适合于发送需要保密的数据的表单，比如，密码等。而POST不是URL的一部分，所以它不会将表单数据附在URL后面，所以这种方式不会发生上面的问题。
2. 因为浏览器通常会限制URL的长度，所以，使用GET这种方式无法传送大量的数据。而POST方式不会有这种问题。

所以，如果没有特殊的需要，最好使用POST方式来传送表单数据。

action属性用于指定此表单数据提交的目标URL，它通常是一个相对路径。如果没有设置这个属性或者属性值为空，表单数据将提交给此表单自身的URL。

target属性用于指定打开目标链接的位置。

enctype属性用于定义数据在发送前需要完成的编码方式，如果没有设置这个属性，那么会使用默认的值application/x-www-form-urlencoded，它使用的编码方式是UTF-8。

accept-charset属性用于指定处理表单数据的ASP、JSP、Servlet或者其他的程序接受的字符编码。

表单域

表单域包含了文本框、密码框、多行文本框、隐藏域、文件上传组件、单选框、复选框和下拉选择框等，用于采集用户的输入或选择的数据。

文本框

文本框：<input id="" class="" name="文本框" type="text" align="" size="" maxlength="" value="">

name属性用于给文本框指定一个名字，这个属性是必需的；value属性可以用于指定文本框的默认值；size属性用于定义文本框的大小，默认是20；而maxlength是用于限制文本框的输入数据长度的属性。

密码框

密码框：<input id="" class="" name="" type="password" align="" size="" maxlength="" value="">

在密码框中输入数据的时候，密码框中不会明文显示输入的数据，而是用“*”或其他的掩盖字符来表示，但这并不影响到将输入的数据发送。

文本域

文本域：<textarea id="" class="" name="文本域" cols="20" rows="10" wrap=""></textarea>

文本域rows用于设置文本域的行数cols用于设置文本域的列数，如果文本域有默认值，默认值放在标签之间。

隐藏域

隐藏域：<input name="" type="hidden" value="隐藏域">

隐藏域是用来收集或发送信息的不可见元素，对于网页的访问者来说，隐藏域是看不见的。当表单被提交时，隐藏域就会将信息用你设置时定义的名称和值发送到服务器上。

文件上载组件

文件上载组件：<input id="" class="" name="文件上载组件" type="file" align="" size="" maxlength="">

有时候我们需要将客户端的文件上载到服务器端，这时候就需要使用文件上载组件来接收需要上载的文件的路径。

单选框

单选框：
        <input id="" class="" name="单选" type="radio" value="单选一" checked>单选一
        <input id="" class="" name="单选" type="radio" value="单选二">单选二
        <input id="" class="" name="单选" type="radio" value="单选三">单选三

单选框提供给用户多选一的组件。一个<INPUT>只能定义一个单选框选项，因此对于一组的选项，必须针对每个选项定义并且需要给它们提供一样的名字，这样这些选项就能组成一个“组”，在这些选项中，每次最多只能有一个选项被选中。如果需要指定默认的选项，可以给该选项指定“CHECKED”属性即可。

多选框

复选框：
        <input id="" class="" name="复选" type="checkbox" value="复选一" checked>复选一
        <input id="" class="" name="复选" type="checkbox" value="复选二">复选二
        <input id="" class="" name="复选" type="checkbox" value="复选三">复选三
        <input id="" class="" name="复选" type="checkbox" value="复选四">复选四
        <input id="" class="" name="复选" type="checkbox" value="复选五">复选五
        <input id="" class="" name="复选" type="checkbox" value="复选六" checked>复选六

多选框提供给用户一个选择多个选项的组件，通常情况下，将一组同样性质的多选框指定一样的名字。如果需要指定某些选项为默认选项，可以给这个选项指定“CHECKED”属性。被选择中的各个选项值会组成一个字符串发送到服务器端，各个选项值之间用逗号隔开。

下拉列表

下拉列表向用户提供一系列的选项。它可以分为单选列表和多选列表两种。单选列表可以让用户选择一个选项，它也是下拉列表的默认设置；多选列表可以让用户选择多个选项。

        <select id="" class="" name="单选下拉列表" size="2">
            <option id="" class="" value="man">男</option>
            <option id="" class="" value="female" selected>女</option>
        </select>
        <select id="" class="" name="多选下拉列表" size="" multiple>
            <option id="" class="" value="basketball" selected>篮球</option>
            <option id="" class="" value="volleyball">排球</option>
            <option id="" class="" value="table tennis">乒乓球</option>
            <option id="" class="" value="tennis" selected>网球</option>
        </select>

下拉列表使用SELECT标记来定义，需要使用“NAME”属性来给它指定一个名字，“SIZE”属性用于指定下拉列表在浏览器中显示的行数，如果不指定这个属性，那么在浏览器中只有一行可见。下拉列表的各个选项可以使用<OPTION>标记来定义，使用“VALUE”属性来给选项指定值，这个值不会显示在浏览器中，如果需要指定一个默认的选项，可以在该选项中加上一个“SELECTED”属性；而在<OPTION></OPTION>之间，可以定义显示到浏览器中的内容。如果需要定义多选列表，可以通过指定<SELECT>标记的一个属性MULTIPLE来完成，并且同时将“SIZE”属性值设置为2或者2以上。

插入图像域——image

表单按钮

在html中，有三种类型的按钮：submit、reset和button。使用submit按钮可以将表单提交到FORM标记的ACTION所指定的url中；reset按钮可以将表单的内容回复到原始的状态；而button类型的按钮通常情况下需要和JavaScript结合起来使用才有意义。

submit按钮

提交按钮：<input id="" class="" name="提交按钮" type="submit" value="提交按钮">

reset按钮

reset按钮用于将表单中的各个组件的值恢复到最初设置的初值

复位按钮：<input id="" class="" name="复位按钮" type="reset" value="复位按钮">

button按钮

一般按钮：<input id="" class="" name="普通按钮" type="button" value="普通按钮">