当前位置: 首页 > 图文教程 > 网页制作 > HTML/XHTML教程 > 轻松玩转花样表单--表单概述

HTML/XHTML教程
XHTML中不再使用HTML中的一些废弃元素
语义化的HTML结构怎么理解
Web 标准学习 理解结构和表现相分离
html5 标签
HTML5 新事件 小结
HTML5 b和i标记将被赋予真正的语义
HTML是网页制作者必须要学习掌握的
HTML DOCTYPE的缩写
Readonly和Disabled的区别
16进制颜色代码(完全)
H标记要在网页制作中合理使用
abbr标记和acronym标记
知名浏览器对DOCTYPE模式的选择机制
用标准dl,dt,dd标签抛弃table列表
html 标签ID可以是变量
iframe 自适应大小实现代码
HTML5 解析规则分析
HTML减肥 精简HTML标记制作网页
HTML5 File API改善网页上传功能
HTML 5 Reset Stylesheet

HTML/XHTML教程 中的 轻松玩转花样表单--表单概述


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-11-04   浏览: 86 ::
收藏到网摘: n/a

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

一、表单概述


  表单,在网页中的作用不可小视,主要负责数据采集的功能,比如你可以采集访问者的名字和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属性定义多行文本框的高度,单位