表单，在网页中的作用不可小视，主要负责数据采集的功能，比如你可以采集访问者的名字和e－mail地址、调查表、留言簿等等。
运用各种表单控件收集用户信息
Form
文本框
文本域
密码框
隐藏框
复选框
单选框
下拉选择框
提交按钮
重置按钮
$_POST
$_GET
一个表单有三个基本组成部分：表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。 表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。为了顾及不同的网页设计工具，本文只讲述代码的设计，不具体讲述操作方法，下面就是表单的HTML代码设计要点：
表单的用途
用户注册某种服务时，收集其姓名、地址、电话号码、电子邮件地址和其他信息。
收集购买物品所需的信息。例如，如果想通过Internet 购买一本书，就需要填写姓名、邮政地址和付款方式等。
7.4.2 表单控件
1 表单标签
＜form＞＜/form＞
功能：用于声明表单，定义采集数据的范围，也就是＜form＞和＜/form＞里面包含的数据将被提交到服务器或者电子邮件里。
语法：＜FORM ACTION="URL" METHOD="GET|POST" ENCTYPE="MIME" TARGET="..."＞. . .＜/FORM＞
属性解释见下表：
action=url指定一来处理提交表单的格式.它可以是一个URL地址(提交给程式)或一个电子邮件地址.
method=get或post指明提交表单的HTTP方法.可能的值为： post：POST方法在表单的主干包含名称/值对并且无需包含于action特性的URL中. get：不赞成。GET方法把名称/值对加在action的URL后面并且把新的URL送至服务器.这是往前兼容的缺省值.这个值由于国际化的原因不赞成 使用.
enctype=cdata指明用来把表单提交给服务器时(当method值为"post")的互联网媒体形式.这个特性的缺省值是"application/x-www-form-urlencoded"
TARGET="..."指定提交的结果文档显示的位置： _blank ：在一个新的、无名浏览器窗口调入指定的文档； _self ：在指向这个目标的元素的相同的框架中调入文档；_parent：把文档调入当前框的直接的父FRAMESET框中；这个值在当前框没有父框时等价于_self；
例如：
＜form action="http://www.xxx.com/test.asp" method="post" target="_blank"＞...＜/form＞
表示表单将向http://www.xxx.com/test.asp以post的方式提交，提交的结果在新的页面显示，数据提交的媒体方式是默认的application/x-www-form-urlencoded方式；
表单域
表单域包含了文本框、多行文本框、密码框、隐藏域、复选框、单选框和下拉选择框等，用于采集用户的输入或选择的数据，下面分别讲述这些表单域的代码格式：
2 文本框
文本框是一种让访问者自己输入内容的表单对象，通常被用来填写单个字或者简短的回答，如姓名、地址等。
代码格式：＜input type="text" name="..." size="..." maxlength="..." value="..."＞
属性解释：
type="text"定义单行文本输入框；
name属性定义文本框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；
size属性定义文本框的宽度，单位是单个字符宽度；
maxlength属性定义最多输入的字符数。
value属性定义文本框的初始值
样例1：
样例1代码：
＜input type="text" name="example1" size="20" maxlength="15"＞
3 文本域
也是一种让访问者自己输入内容的表单对象，只不过能让访问者填写较长的内容。
代码格式：＜TEXTAREA name="..." cols="..." rows="..." wrap="VIRTUAL"＞＜/TEXTAREA＞
属性解释：
name属性定义多行文本框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；
cols属性定义多行文本框的宽度，单位是单个字符宽度；
rows属性定义多行文本框的高度，单位是单个字符宽度；
wrap属性定义输入内容大于文本域时显示的方式，可选值如下：
默认值是文本自动换行；当输入内容超过文本域的右边界时会自动转到下一行，而数据在被提交处理时自动换行的地方不会有换行符出现；Off，用来避免文本换行，当输入的内容超过文本域右边界时，文本将向左滚动，必须用Return才能将插入点移到下一行； Virtual，允许文本自动换行。当输入内容超过文本域的右边界时会自动转到下一行，而数据在被提交处理时自动换行的地方不会有换行符出现； Physical，让文本换行，当数据被提交处理时换行符也将被一起提交处理。
样例2：
样例2代码：
＜TEXTAREA name="example2" cols="20" rows="2" wrap="PHYSICAL"＞＜/TEXTAREA＞
4 密码框
是一种特殊的文本域，用于输入密码。当访问者输入文字时，文字会被星号或其它符号代替，而输入的文字会被隐藏。
代码格式：＜input type="password" name="..." size="..." maxlength="..."＞
属性解释：
type="password"定义密码框；
name属性定义密码框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；
size属性定义密码框的宽度，单位是单个字符宽度；
maxlength属性定义最多输入的字符数。
样例3：
样例3代码：
＜input type="password" name="example3" size="20" maxlength="15"＞
5 隐藏域
隐藏域是用来收集或发送信息的不可见元素，对于网页的访问者来说，隐藏域是看不见的。当表单被提交时，隐藏域就会将信息用你设置时定义的名称和值发送到服务器上。
代码格式：＜input type="hidden" name="..." value="..."＞
属性解释：
type="hidden"定义隐藏域；
name属性定义隐藏域的名称，要保证数据的准确采集，必须定义一个独一无二的名称；
value属性定义隐藏域的值
例如：＜input type="hidden" name="ExPws" value="dd"＞
6 复选框
复选框允许在待选项中选中一项以上的选项。每个复选框都是一个独立的元素，都必须有一个唯一的名称。
代码格式：＜INPUT type="checkbox" name="..." value="..."＞
属性解释：
type="checkbox"定义复选框；
name属性定义复选框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；
value属性定义复选框的值
样例4： xxx.com xxx.com
样例4代码：
＜input type="checkbox" name="yesky" value="09"＞xxxcom
＜input type="checkbox" name="Chinabyte" value="08"＞xxx.com
7 单选框
当需要访问者在待选项中选择唯一的答案时，就需要用到单选框了。
代码格式：＜input type="radio" name="..." value="..."＞
属性解释：
type="radio"定义单选框；
name属性定义单选框的名称，要保证数据的准确采集，单选框都是以组为单位使用的，在同一组中的单选项都必须用同一个名称；
value属性定义单选框的值，在同一组中，它们的域值必须是不同的。
样例5： xxx.com xxx.com
样例5代码：
＜input type="radio" name="myFavor" value="1"＞xxx.com
＜input type="radio" name="myFavor" value="2"＞xxx.com
8 下拉选择框
下拉选择框允许你在一个有限的空间设置多种选项。
代码格式：
＜select name="..." size="..." multiple＞
＜option value="..." selected＞...＜/option＞
...
＜/select＞
属性解释：
size属性定义下拉选择框的行数；
name属性定义下拉选择框的名称；
multiple属性表示可以多选，如果不设置本属性，那么只能单选；
value属性定义选择项的值；
selected属性表示默认已经选择本选项。
样例7： xxx.com xxx.com
样例7代码：
＜select name="mySel" size="1"＞
＜option value="1" selected＞xxx.com＜/option＞
＜option value="d2"＞xxx.com＜/option＞
＜/select＞
样例8：
xxx.com xxx.com internet.com按Ctrl可以多选
样例8代码：
＜select name="mySelt" size="3" multiple＞
＜option value="1" selected＞xxx.com＜/option＞
＜option value="d2"＞xxx.com＜/option＞
＜option value="3"＞internet.com＜/option＞
＜/select＞
9 表单按钮
表单按钮控制表单的运作。
1.3.1提交按钮
提交按钮用来将输入的信息提交到服务器。
代码格式：＜input type="submit" name="..." value="..."＞
属性解释：
type="submit"定义提交按钮；
name属性定义提交按钮的名称；
value属性定义按钮的显示文字；
样例9：
样例9代码：
＜input type="submit" name="mySent" value="发送"＞
1.3.2复位按钮
复位按钮用来重置表单。
代码格式：＜input type="reset" name="..." value="..."＞
属性解释：
type="reset"定义复位按钮；
name属性定义复位按钮的名称；
value属性定义按钮的显示文字；
样例10：
样例10代码：
＜input type="reset" name="myCancle" value="取消"＞
1.3.3一般按钮
一般按钮用来控制其他定义了处理脚本的处理工作。
代码格式：＜input type="button" name="..." value="..." onClick="..."＞
属性解释：
type="button"定义一般按钮；
name属性定义一般按钮的名称；
value属性定义按钮的显示文字；
onClick属性，也可以是其它的事件，通过指定脚本函数来定义按钮的行为；
样例11：
样例11代码：
＜input type="button" name="myB" value="保存" onClick="javascript:alert('it is a button')"＞
主要的表单控件：文本框、密码框、单选框、多选框、下拉列表、文字域、图片域、隐藏域、提交按钮、重置按钮等都需要温习。
其中最重要的就是多选框，在PHP中命名多选框是比较特殊的，需要用[]来命名，一组多选的id和name在命名上都是需要注意的。PHP页面如何接收各种控件的值都需要单独练习。尤其是多选项在接收后是一个数组结构的数据，在存入数据库前需要转化成字符串再入库。
代码示范如下：
文本框：<input type="text" name="username" id="username" />
密码框：<input type="password" name="psd" id="psd" />
单选项：
下拉列表：
<select name="xueli">
</select>
多选框：
篮球<input type="checkbox" name="hobby[]" value="篮球" id="hobby1"/>
上网<input type="checkbox" name="hobby[]" value="上网" id="hobby2"/>
旅游<input type="checkbox" name="hobby[]" value="旅游" id="hobby3"/>
游泳<input type="checkbox" name="hobby[]" value="游泳" id="hobby4"/> 【提示：需要特别注意的是PHP中对于多选项的命名。】
隐藏域：<input type="hidden" name="id" value="100" />
提示：隐藏域的使用目的是为了隐式传值，所以必须有value值才有意义。
文本域：<textarea name="introduce" id="introduce"></textarea>
提交：<input name="submit" type="submit" value="注册">
重置：<input name="reset" type="reset" value="重置">
每种控件一般常用属性都需要写，name属性为了表单传值；id属性主要用于样式和表单脚本验证；Value属性表示控件初始值，视情形而定；size属性主要是定义控件的大小；maxlength属性定义最大允许输入内容的长度。
10 超级全局数组变量
$_POST $_GET这两个变量都是数组变量，下标是表单文本框的name属性。
echo $_POST['username'];//用户名
echo $_POST['psd'];//密码
echo $_POST['sex'];//性别
echo $_POST['xueli'];//学历
echo implode(",",$_POST['hobby']);//爱好
echo $_POST['id'];//隐藏域id
echo $_POST['introduce'];//简介
7.5.1 用户注册模块功能介绍
用户注册模块是学习表单用到的范例。本模块是大多数网站都会用到的一个功能部分，同时这注册模块也是表单集中体现的一个地方，其中会需要用户填写用户名、密码、邮箱、学历、爱好、性别、简介等，而这又恰恰是表单里边的文本框、密码框、选择框、单选框、文本域等，除此还有提交按钮、重置按钮等。之前同学们有接触过表单，但都是在html下使用的，今天我们学习的表单 是需要和js、php程序结合的。是对表单学习的延续、同时也是在复习以往的学习知识。
注册页效果图如下：
【提示：以上效果图，并非本教学中真实页面图。】
7.5.2 注册模块需求分析（业务逻辑）
一个表单有三个基本组成部分：表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。 表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。为了顾及不同的网页设计工具，本文只讲述代码的设计，不具体讲述操作方法。
7.5.3 注册模块设计思路（实现思路）
用户注册模块会涉及两个页面，一个表单页面，一个接收页面，其中接收页面用户接收表单页面的数据
表单页面会有文本框、密码框、隐藏框、单选框、选择框、复选框、文本域，按钮会有提交按钮、重置按钮
在接收页面使用php程序语言来接收表单数据，会用到$_POST $_GET两个超级全局数组变量。
本章通过用户注册学习了表单的使用，表单不只可以多用户注册，比如添加商品、修改商品等类似的动作都需要表单在中间协调，希望同学们对表单有很好的理解。
网友评论