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

2008-02-23 06:15:51来源:互联网 阅读 ()

新老客户大回馈,云服务器低至5折

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

一、表单概述


  表单,在网页中的作用不可小视,主要负责数据采集的功能,比如您能够采集访问者的名字和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="...">

标签:

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

上一篇: DW3行为(Behaviors)全接触(序)

下一篇: 轻松玩转花样表单--常用技巧