表单和脚本

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

  一、表单概述
  表单,在网页中的作用不可小视,主要负责数据采集的功能,比如你可以采集访问者的名字和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="...">
  属性解释:
  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: yesky.com chinabyte.com
  样例7代码:
  <select name="mySel" size="1">
  <option value="1" selected>yesky.com</option>
  <option value="d2">chinabyte.com</option>
  </select>
  样例8:
  yesky.com chinabyte.com internet.com 按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')">

 

 

 

脚本

  解释一
  脚本script是使用一种特定的描述性语言,依据一定的格式编写的可执行文件,又称作宏或批处理文件。脚本通常可以由应用程序临时调用并执行。各类脚本目前被广泛地应用于网页设计中,因为脚本不仅可以减小网页的规模和提高网页浏览速度,而且可以丰富网页的表现,如动画、声音等。举个最常见的例子,当我们点击网页上的E-mail地址时能自动调用Outlook Express或Foxmail这类邮件软件,就是通过脚本功能来实现的。也正因为脚本的这些特点,往往被一些别有用心的人所利用。例如在脚本中加入一些破坏计算机系统的命令,这样当用户浏览网页时,一旦调用这类脚本,便会使用户的系统受到攻击。所以用户应根据对所访问网页的信任程度选择安全等级,特别是对于那些本身内容就非法的网页,更不要轻易允许使用脚本。通过“安全设置”对话框,选择“脚本”选项下的各种设置就可以轻松实现对脚本的禁用和启用。
  现在的脚本语言是比较多的,一般的脚本语言的执行只同具体的解释执行器有关,所以只要系统上有相应语言的解释程序就可以做到跨平台。脚本(Script),就是含有bind和alias等命令的集合,你可以把这个集合存为一个独立的文件然后在需要的时候执行,这样就可以方便你在CS中的使用。脚本可以存为后缀名为.cfg的文件放在cstrike文件夹下,执行时在控制台输入:exec(脚本文件名).cfg即可。比如将一个脚本存为 buys.cfg文件,则在控制台中输入:execbuys.cfg则可以实现我们所需要的功能。要实现一个命令只要把这一过程定义(alias)好,并且分配一个键位给这个命令,以后只要按分配好的键位,就可以实现这一过程。所有的脚本都是通过这一方法实现的。

  解释二
  动态程序一般有两种实现方式,一是二进制方式,一是脚本方式。
  二进制方式是先将我们编写的程序进行编译,变成机器可识别的指令代码(如.exe文件),然后再执行。这种编译好的程序我们只能执行、使用,却看不到他的程序内容。
  脚本简单地说就是一条条的文字命令,这些文字命令是我们可以看到的(如可以用记事本打开查看、编辑),脚本程序在执行时,是由系统的一个解释器,将其一条条的翻译成机器可识别的指令,并按程序顺序执行。因为脚本在执行时多了一道翻译的过程,所以它比二进制程序执行效率要稍低一些。
  什么是脚本?
  脚本是批处理文件的延伸,是一种纯文本保存的程序,一般来说的计算机脚本程序是确定的一系列控制计算机进行运算操作动作的组合,在其中可以实现一定的逻辑分支等。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值