简述form表单

关于form表单

表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分：

1. 表单标签：这里面包含了处理表单数据所用CGI(Common Gateway Interface，通用网关接口)程序的URL以及数据提交到服务器的方法。
2. 表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
3. 表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。

下面对表单的三个部分分别进行说明。

一、 表单标签

1. 功能
   表单标签用于申明表单，定义采集数据的范围。也就是说< form>和< /form >里面包含的数据将被提交到服务器或者电子邮件里。
2. 标签格式
   基本格式：
   <form></form>
   基本语法格式：
   <form action="URL" method="GET|POST" enctype="MIME" target="_blank|_self|_parent|_top|framename">...</form>
3. 属性解释

属性	值	描述
accept-charset	charset_list	规定服务器可处理的表单数据字符集。
action	URL	规定当提交表单时向何处发送表单数据。
autocomplete	on / off	规定是否启用表单的自动完成功能。
enctype	application/x-www-form-urlencoded(默认值)	规定在发送到服务器之前应该如何对表单数据进行编码。
method	get / post	规定用于发送 form-data 的 HTTP 方法。
name	form_name	规定表单的名称。
novalidate	novalidate	如果使用该属性，则提交表单时不进行验证。
target	_blank / _self / _parent / _top / framename	规定在何处打开 action属性的URL。

关于 HTML <form> 标签

二、表单域
<input> 标签用于搜集用户信息。
根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

1. 文本框
   文本框是一种让访问者自己输入内容的表单对象，通常被用来填写单个字或者简短的回答，如姓名、地址等。代码格式如下：

<input type="text" name="..." size="..." maxlength="..." value="...">
<input type="text" name="example1" size="20" maxlength="15" />

• type=”text”：定义单行文本输入框；
• name：定义文本框名称；要保证数据的准确采集，必须定义一个独一无二的名称；
• size：定义文本框的宽度，单位是单个字符宽度；
• maxlength：定义最多输入的字符数；
• value：定义文本框的初始值；

2. 多行文本框
   多行文本框也是一种让访问者自己输入内容的表单对象，只不过能让访问者填写较长的内容。代码格式如下：

<textarea name="..." cols="..." rows="..." wrap="VIRTUAL"></textarea>
<textarea name="example2" cols="20" rows="2" wrap="PHYSICAL"></textarea>

• name：定义多行文本框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；
• cols：定义文本框的宽度，单位是单个字符宽度；
• rows：定义文本框的高度，单位是单个字符宽度；
• wrap：定义输入内容大于文本域时显示的方式，可选值如下：
  默认值：文本自动换行,当输入内容超过文本域的右边界时会自动转到下一行，而数据在被提交处理时自动换行的地方不会有换行符出现；
  Off：用来避免文本换行，当输入的内容超过文本域右边界时，文本将向左滚动，必须用Return才能将插入点移到下一行；
  Virtual：允许文本自动换行；Physical：让文本换行，当数据被提交处理时，换行符也将被一起提交处理。

3. 密码框
   密码框是一种特殊的文本域，用于输入密码。当访问者输入文字时，文字会被星号或其它符号代替，而输入的文字会被隐藏。代码格式如下：

<input type="password" name="..." size="..." maxlength="...">
<input type="password" name="example3" size="20" maxlength="15">

• type=”password”：定义密码框；
• name：定义密码框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；
• size：定义文本框的宽度，单位是单个字符宽度；
• maxlength：定义最多输入的字符数；

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

<input type="hidden" name="..." value="...">
<input type="hidden" name="ExPws" value="dd">

• type=”hidden”：定义隐藏域；
• value：定义隐藏域的值；

5. 复选框
   复选框允许在待选项中选中一项以上的选项。每个复选框都是一个独立的元素，都必须有一个唯一的名称。代码如下：

<input type="checkbox" name="..." value="...">
<input type="checkbox" name="yesky" value="09">xxxcom
<input type="checkbox" name="Chinabyte" value="08">

6. 单选框

<input type="radio" name="..." value="...">
<input type="radio" name="myFavor" value="1">
<input type="radio" name="myFavor" value="2">

7. 文件上传框
   有时候，需要用户上传自己的文件，文件上传框看上去和其它文本域差不多，只是它还包含了一个浏览按钮。访问者可以通过输入需要上传的文件的路径或者点击浏览按钮选择需要上传的文件。
   注：在使用文件域以前，请先确定你的服务器是否允许匿名上传文件。表单标签中必须设置ENCTYPE=”multipart/form-data”来确保文件被正确编码；另外，表单的传送方式必须设置成POST。
   代码格式如下：

<input type="file" name="..." size="15" maxlength="100">
<input type="file" name="myfile" size="15" maxlength="100">

• type=”file”：定义文件上传框；
• size：定义文件上传框的宽度，单位是单个字符宽度；
• maxlength：定义最多输入的字符数；

8. 下拉选择框
   下拉选择框允许你在一个有限的空间设置多种选项。示例如下：

<select name="mySel" size="1">
  <option value="1" selected>Try one</option>
  <option value="d2">Try two</option>
</select>

• size：定义下拉选择框的行数；
• name：定义下拉选择框的名称；
• multiple：表示可以多选，如果不设置本属性，那么只能单选；
• value：定义选择项的值；
• selected：表示默认已经选择本选项；

关于 HTML <input> 标签
关于 细说 Form (表单)