轻松玩转花样表单--表单概述

　　本专题从最基础的表单知识，到表单的高级应用，让您有一个比较全面地认识，相信您在读完本专题以后，一定会对表单很熟悉。

一、表单概述

　　表单，在网页中的作用不可小视，主要负责数据采集的功能，比如您能够采集访问者的名字和e－mail地址、调查表、留言簿等等。

1、表单的组成

　　一个表单有三个基本组成部分：

• 表单标签：这里面包含了处理表单数据所用CGI程式的URL连同数据提交到服务器的方法。
• 表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文档上传框等。
• 表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或取消输入，还能够用表单按钮来控制其他定义了处理脚本的处理工作。

　　为了顾及不同的网页设计工具，本文只讲述代码的设计，不具体讲述操作方法，下面就是表单的HTML代码设计要点：

1.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； _top ：把文档调入原来的最顶部的浏览器窗口中(因此取消任何其他框架)；这个值等价于当前框没有您框时的_self.

　　例如：
　　＜form action="http://www.yesky.com/test.asp" method="post" target="_blank"＞...＜/form＞
　　表示表单将向http://www.yesky.com/test.asp以post的方式提交，提交的结果在新的页面显示，数据提交的媒体方式是默认的application/x-www-form-urlencoded方式；
1.2 表单域

　　表单域包含了文本框、多行文本框、密码框、隐藏域、复选框、单选框和下拉选择框等，用于采集用户的输入或选择的数据，下面分别讲述这些表单域的代码格式：

1.2.1 文本框

　　文本框是一种让访问者自己输入内容的表单对象，通常被用来填写单个字或简短的回答，如姓名、地址等。
　　代码格式：＜input type="text" name="..." size="..." maxlength="..." value="..."＞

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

样例1：

样例1代码：

＜input type="text" name="example1" size="20" maxlength="15"＞

1.2.2 多行文本框

　　也是一种让访问者自己输入内容的表单对象，只但是能让访问者填写较长的内容。
　　代码格式：＜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＞
　　

1.2.3 密码框

　　是一种特别的文本域，用于输入密码。当访问者输入文字时，文字会被星号或其他符号代替，而输入的文字会被隐藏。

　　代码格式：＜input type="password" name="..." size="..." maxlength="..."＞

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有