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

2016-01-29 12:45 21 1 收藏

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

【 tulaoshi.com - Html 】

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

一、表单概述


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

1、表单的组成


  一个表单有三个基本组成部分: 表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。 表单域:包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。 表单按钮:包括提交按钮、复位按钮和一般按钮;用于将数据传送到服务器上的CGI脚本或者取消输入,还可以用表单按钮来控制其他定义了处理脚本的处理工作。  为了顾及不同的网页设计工具,本文只讲述代码的设计,不具体讲述操作方法,下面就是表单的HTML代码设计要点:

1.1 表单标签

  功能:用于申明表单,定义采集数据的范围,也就是<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代码:

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/html/)

<input type="text" name="example1" size="20" maxlength="15">

1.2.2 多行文本框

  也是一种让访问者自己输入内容的表单对象,只不过能让访问者填写较长的内容。
  代码格式:<TEXTAREA name="..." cols="..." rows="..." wrap="VIRTUAL"></TEXTAREA>
  属性解释:
  name属性定义多行文本框的名称,要保证数据的准确采集,必须定义一个独一无二的名称;
  cols属性定义多行文本框的宽度,单位是单个字符宽度;
  rows属性定义多行文本框的高度,单位

来源:http://www.tulaoshi.com/n/20160129/1487417.html

延伸阅读
当指派表单或者表单上的控件到该表单模块以外的一个对象变量中时,如果要卸载表单,就必须首先将那个变量设置为toNothing。也就是说,如果不设置为Nothing,即使看不到这个对象了,但它仍旧是保存在内存中的。 注意:这并非是一个bug,这仅仅是COM引用规则的一个结果。唯一要注意的就是引用的这个控件将阻止整个表单的卸载操作,它将依赖于它...
标签: Web开发
     此前,我曾经写过一个基于JQuery的表单校验 validator.js ,用了一段时间发现出现了一些问题。与大家互相探讨一下。 version: alpha 1.0 举其中一个验证函数为例: ...... function CheckNull(obj, objname){     $(obj).ready( function(){            ...
标签: Web开发
JavaScript表单验证年龄,判断一个输入量是否符合年龄,通过正则表达式实现。 //检查年龄 function isAge(str){        var mydate=new Date;        var now=mydate.getFullYear();        if (str now-60 || str now-18){    &...
不管是动态网站,还是其它B/S结构的系统,都离不开表单 表单做为客户端向服务器提交数据的载体担当相当重要的角色. 这就引出了一个问题,提交的数据合法吗?摆在我们面前的问题就是验证这些数据 保证所提交的数据是合法的.所以,我们写了一个大堆的验证函数.当我们开始新的一个 项目的开发时,我们又得写一大堆的验证函数,然后再调试这一大堆的函数.....
标签: Web开发
16.4  使用XMLHttpRequest创建智能表单 我们可能已经多次遇到过这样的情况:当通过某个Web站点的表单注册用户,或者申请注册一个基于Web界面的电子邮箱时,在我们填写完长长的表单之后,结果却发现我们申请的用户名已经被其他人占用了。最糟糕的就是直到我们填完表单并提交,且页面被重新加载之后,我们才能发现所申请的用户名是否已经...

经验教程

819

收藏

73

精华推荐

css制作表单效果

css制作表单效果

空白记忆ljh

iframe创建智能表单

iframe创建智能表单

完和妹

制作网页评论表单

制作网页评论表单

trippizza16

微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部