什么是FORM表单：
表单是用来提交资料、意见，规范流程执行过程的格式。表单在网页中主要负责数据采集功能。
一个表单有三个基本组成部分：
- 表单标签：这里面包含了处理表单数据所用
CGI程序的URL以及数据提交到服务器的方法。 - 表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
- 表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的
CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。
表单标签<form></form>
功能：用于申明表单，定义采集数据的范围，也就是<form>和</form>里面包含的数据将被提交到服务器或者电子邮件里。所有要提交的内容必须被<form>/</form>包围.
语法：
<form actlon="URL" method="get/post" enctype="text/plain" target="...">. . .</form>
actlon:表单提交的地址
method=get或post指明提交表单的HTTP方法.
target:在何处打开action(规定当提交表单时，向何处发送表单数据)
enctype:
-
application/x-www-form-urlencoded:在发送前编码所有字符（默认） -
text/plain: 空格转换为“+”加号，但不对特殊字符编码 -
multipart/form-data:使用包含文件上传控件的表单时，必须使用该值。
get与post区别:
-
get是从服务器上获取数据，post是向服务器传送数据。 -
get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。 - 对于
get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用Request.Form获取提交的数据。
4.get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4中最大量为80KB，IIS5中为100KB。 -
get安全性非常低，post安全性较高。但是执行效率却比Post方法好。
- get方式的安全性较post方式要差一些，所以，包含一些重要的信息的话，简易使用post数据提交方式
- 在做查询统计的时候，使用get方式要更好一些；而在做数据的添加，修改或删除操作时，建议使用post数据提交方式
表单域：
表单域包含了文本框、密码框、隐藏域、复选框、单选框和下拉选择框等，用于采集用户的输入或选择的数据，下面分别讲述这些表单域的代码格式.
文本框:
文本框是一种让访问者自己输入内容的表单对象，通常被用来填写单个字或者简短的回答，如姓名、地址等。
代码格式：
<input type="text" name="..." >
属性解释：
type="text"定义单行文本输入框；
name属性定义文本框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；
例：
<input type="text" name="example1" >
密码框：
是一种特殊的文本域，用于输入密码。当访问者输入密码时，文字会被星号或其它符号代替，而输入的密码会被隐藏。
代码格式：
<input type="password" name="..." placeholder="...">
属性解释：
type="password"定义密码框；
name属性定义密码框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；
placeholder:密码输入框显示内容
例：
<input type="password" name="password"placeholder="输入密码">
隐藏域：
隐藏域是用来收集或发送信息的不可见元素，对于网页的访问者来说，隐藏域是看不见的。当表单被提交时，隐藏域就会将信息用你设置时定义的名称和值发送到服务器上。
代码格式：
<input type="hidden" name="..." value="...">
属性解释：
type="hidden"定义隐藏域；
name属性定义隐藏域的名称，要保证数据的准确采集，必须定义一个独一无二的名称；
value属性定义隐藏域的值
例如：
<input type="hidden" name="ExPws" value="dd">
复选框：
复选框允许在待选项中选中一项以上的选项。每个复选框都是一个独立的元素，都必须有一个唯一的名称。
代码格式：
<input type="checkbox" name="..." value="...">
属性解释：
type="checkbox"定义复选框；
name属性定义复选框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；
value属性定义复选框的值
例：
- <input type="checkbox" name="hobby" value="read">读书
- <input type="checkbox" name="hobby" value="music">音乐
单选框：
当需要访问者在待选项中选择唯一的答案时，就需要用到单选框了。
代码格式：
- <input type="radio" name="..." value="...">
属性解释：
type="radio"定义单选框；
name属性定义单选框的名称，要保证数据的准确采集，单选框都是以组为单位使用的，在同一组中的单选项都必须用同一个名称；
value属性定义单选框的值，在同一组中，它们的域值必须是不同的。
例：
- <input type="radio" name="sex" value="男">男
- <input type="radio" name="sex" value="女">女
文件上传框：
有时候，需要用户上传自己的文件，文件上传框看上去和其它文本域差不多，只是它还包含了一个浏览按钮。访问者可以通过输入需要上传的文件的路径或者点击浏览按钮选择需要上传的文件。
注意：在使用文件域以前，请先确定你的服务器是否允许匿名上传文件。表单标签中必须设置enctype="multipart/form-data"来确保文件被正确编码；另外，表单的传送方式必须设置成post。
代码格式：
- <input type="file" name="..."accept="image/png, image/jpeg">
属性解释：
type="file"定义文件上传框；
name属性定义文件上传框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；
accept规定能够通过文件上传进行提交的文件类型.
例：
- <input type="file" name="myfile"accept="image/png" >
下拉选择框：
下拉选择框允许你在一个有限的空间设置多种选项。
代码格式：
- <select name="..." size="..." multiple>
- <option value="..." selected>...</option>
- ...
- </select>
属性解释：
size属性定义下拉选择框的行数；
name属性定义下拉选择框的名称；
multiple属性表示可以多选，如果不设置本属性，那么只能单选；
value属性定义选择项的值；
selected属性表示默认已经选择本选项。
例：
- <select name="mySel" size="1">
- <option value="beijing" selected>北京</option>
- <option value="shanghai">上海</option>
- </select>
例2：按ctrl可多选
- <select name="mySelt" size="3" multiple>
- <option value="beijing" selected>北京</option>
- <option value="shanghai">上海</option>
- <option value="hangzhou">杭州</option>
- </select>
表单按钮：
表单按钮控制表单的运作。
提交按钮
提交按钮用来将输入的信息提交到服务器。
代码格式：
- <input type="submit" name="..." value="...">
属性解释：
type="submit"定义提交按钮；
name属性定义提交按钮的名称；
value属性定义按钮的显示文字；
例：
- <input type="submit" name="mySent" value="发送">
复位按钮:
复位按钮用来重置表单。
代码格式：
- <input type="reset" name="..." value="...">
属性解释：
type="reset"定义复位按钮；
name属性定义复位按钮的名称；
value属性定义按钮的显示文字；
例：
- <input type="reset" name="myCancle" value="取消">
文本输入框:
文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。
textarea:定义多行的文本输入控件
代码格式：
- <textarea rows="3" cols="20">
-123456789
- </textarea>
属性：
- rows:文本的可见行数。
- cols:文本区内的可见宽度。
- autofocus:规定在页面加载后文本区域自动获得焦点。
- disabled:规定禁用该文本区。
- form (值：
form_id):规定文本区域所属的一个或多个表单。 - maxlength :规定文本区域的最大字符数。
- name(值：
name_of_textarea):文本区的名称。 - placeholder(值：
text):规定描述文本区域预期值的简短提示。 - readonly：规定文本区为只读。
- required:规定文本区域是必填的。
- wrap(值:
hard,soft):规定当在表单中提交时，文本区域中的文本如何换行。
label标签:
<label>标签为input元素定义标注（标记）。
label:不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
属性：
for(值：id):规定 label绑定到哪个表单元素。
form(值：formid):规定label 字段所属的一个或多个表单。
网友评论