您的位置: 首页 > 技术文档 > 网页制作 > 轻松玩转花样表单
Dreamweaver打造多彩文字链接 回到列表 Dreamweaver基础技巧全面接触
 轻松玩转花样表单

作者:redidea 时间: 2003-07-03 文档类型:原创 来自:蓝色理想

第 1 页 表单概述
第 2 页 花样表单
第 3 页 表单提交
第 4 页 常用技巧

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

一、表单概述


  表单,在网页中的作用不可小视,主要负责数据采集的功能,比如你可以采集访问者的名字和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方法.可能的值为:
  1. post:POST方法在表单的主干包含名称/值对并且无需包含于action特性的URL中.
  2. get:不赞成。GET方法把名称/值对加在action的URL后面并且把新的URL送至服务器.这是往前兼容的缺省值.这个值由于国际化的原因不赞成使用.
enctype=cdata 指明用来把表单提交给服务器时(当method值为"post")的互联网媒体形式.这个特性的缺省值是"application/x-www-form-urlencoded"
TARGET="..." 指定提交的结果文档显示的位置:
  1. _blank :在一个新的、无名浏览器窗口调入指定的文档;
  2. _self :在指向这个目标的无素的相同的框架中调入文档;
  3. _parent :把文档调入当前框的直接的父FRAMESET框中;这个值在当前框没有父框时等价于_self;
  4. _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="...">

  属性解释:
  type="password"定义密码框;
  name属性定义密码框的名称,要保证数据的准确采集,必须定义一个独一无二的名称;
  size属性定义密码框的宽度,单位是单个字符宽度;
  maxlength属性定义最多输入的字符数。

样例3:

样例3代码:

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


1.2.4 隐藏域

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

  代码格式:<input type="hidden" name="..." value="...">

  属性解释:
  type="hidden"定义隐藏域;
  name属性定义隐藏域的名称,要保证数据的准确采集,必须定义一个独一无二的名称;
  value属性定义隐藏域的值
  例如:<input type="hidden" name="ExPws" value="dd">


1.2.5 复选框

  复选框允许在待选项中选中一项以上的选项。每个复选框都是一个独立的元素,都必须有一个唯一的名称。

  代码格式:<INPUT type="checkbox" name="..." value="...">

  属性解释:
  type="checkbox"定义复选框;
  name属性定义复选框的名称,要保证数据的准确采集,必须定义一个独一无二的名称;
  value属性定义复选框的值

样例4: yesky.com Chinabyte.com

样例4代码:
  <input type="checkbox" name="yesky" value="09">yesky.com
  <input type="checkbox" name="Chinabyte" value="08">Chinabyte.com


1.2.6 单选框

  当需要访问者在待选项中选择唯一的答案时,就需要用到单选框了。

  代码格式:<input type="radio" name="..." value="...">

  属性解释:
  type="radio"定义单选框;
  name属性定义单选框的名称,要保证数据的准确采集,单选框都是以组为单位使用的,在同一组中的单选项都必须用同一个名称;
  value属性定义单选框的值,在同一组中,它们的域值必须是不同的。

 样例5: yesky.com Chinabyte.com

样例5代码:
  <input type="radio" name="myFavor" value="1">yesky.com
  <input type="radio" name="myFavor" value="2">Chinabyte.com


1.2.7 文件上传框

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

  代码格式:<input type="file" name="..." size="15" maxlength="100">

  属性解释:
  type="file"定义文件上传框;
  name属性定义文件上传框的名称,要保证数据的准确采集,必须定义一个独一无二的名称;
  size属性定义文件上传框的宽度,单位是单个字符宽度;
  maxlength属性定义最多输入的字符数。

 样例6:

样例6代码:

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


1.2.8 下拉选择框

  下拉选择框允许你在一个有限的空间设置多种选项。

  代码格式:
  <select name="..." size="..." multiple>
  <option value="..." selected>...</option>
  ...
  </select>

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

 样例7:

样例7代码:
  <select name="mySel" size="1">
  <option value="1" selected>yesky.com</option>
  <option value="d2">chinabyte.com</option>
  </select>

 样例8:
   按Ctrl可以多选

样例8代码:
  <select name="mySelt" size="3" multiple>
  <option value="1" selected>yesky.com</option>
  <option value="d2">chinabyte.com</option>
  <option value="3">internet.com</option>
  </select>

1.3 表单按钮

  表单按钮控制表单的运作。

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')">

  

出处:蓝色理想
责任编辑:无意

上一页 下一页 花样表单

◎进入论坛网页制作网站综合版块参加讨论

相关文章 更多相关链接
重构、标准、布局
表单相关特效整理
DW MX 中表单数据的传递
熟悉常用表单格式的五点技巧
神奇的图片:突破你的想象力
作者文章
轻松玩转花样表单
热门搜索:CSS Fireworks 设计比赛 网页制作 web标准 用户体验 UE photoshop Dreamweaver Studio8 Flash 手绘 CG
站点最新 站点最新列表
周大福“敬•自然”设计大赛开启
国际体验设计大会7月将在京举行
中国国防科技信息中心标志征集
云计算如何让安全问题可控
云计算是多数企业唯一拥抱互联网的机会
阿里行云
云手机年终巨献,送礼标配299起
阿里巴巴CTO王坚的"云和互联网观"
1499元买真八核 云OS双蛋大促
首届COCO桌面手机主题设计大赛
栏目最新 栏目最新列表
浅谈JavaScript编程语言的编码规范
如何在illustrator中绘制台历
Ps简单绘制一个可爱的铅笔图标
数据同步算法研究
用ps作简单的作品展示页面
CSS定位机制之一:普通流
25个最佳最闪亮的Eclipse开发项目
Illustrator中制作针线缝制文字效果
Photoshop制作印刷凹凸字体
VS2010中创建自定义SQL Rule
>> 分页 首页 前页 后页 尾页 页次:1/41个记录/页 转到 页 共4个记录 分享按钮

蓝色理想版权申明:除部分特别声明不要转载,或者授权我站独家播发的文章外,大家可以自由转载我站点的原创文章,但原作者和来自我站的链接必须保留(非我站原创的,按照原来自一节,自行链接)。文章版权归我站和作者共有。

转载要求:转载之图片、文件,链接请不要盗链到本站,且不准打上各自站点的水印,亦不能抹去我站点水印。

特别注意:本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有,文章若有侵犯作者版权,请与我们联系,我们将立即删除修改。

您的评论
用户名:  口令:
说明:输入正确的用户名和密码才能参与评论。如果您不是本站会员,你可以注册 为本站会员。
注意:文章中的链接、内容等需要修改的错误,请用报告错误,以利文档及时修改。
不评分 1 2 3 4 5
注意:请不要在评论中含与内容无关的广告链接,违者封ID
请您注意:
·不良评论请用报告管理员,以利管理员及时删除。
·尊重网上道德,遵守中华人民共和国的各项有关法律法规
·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
·本站评论管理人员有权保留或删除其管辖评论中的任意内容
·您在本站发表的作品,本站有权在网站内转载或引用
·参与本评论即表明您已经阅读并接受上述条款
推荐文档 | 打印文档 | 评论文档 | 报告错误  
专业书推荐 更多内容
网站可用性测试及优化指南
《写给大家看的色彩书1》
《跟我去香港》
众妙之门—网站UI 设计之道
《Flex 4.0 RIA开发宝典》
《赢在设计》
犀利开发—jQuery内核详解与实践
作品集 更多内容

杂⑦杂⑧ Gold NORMANA V2