html表单:HTML表单基础知识

Size: px

Start display at page:

Download "html表单:HTML表单基础知识"

介元
5 years ago
Views:

1 html 表单 :HTML 表单基础知识疯狂代码 ĵ: 本专题从最基础的表单知识, 到表单的高级应用, 让你有一个比较全面地认识, 相信你在读完本专题以后, 一定会对表单非常熟悉一表单概述表单, 在网页中的作用不可小视, 主要负责数据采集的功能, 比如你可以采集访问者的名字和地址调查表留言簿等等 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-formurlencoded"target="..." 指定提交的结果文档显示的位置 : _blank : 在一个新的无名浏览器窗口调入指定的文档 ; _self : 在指向这个目标的无素的相同的框架中调入文档 ; _parent : 把文档调入当前框的直接的父 FRAMESET 框中 ; 这个值在当前框没有父框时等价于 _self; _top : 把文档调入原来的最顶部的浏览器窗口中

2 ( 因此取消所有其它框架 ); 这个值等价于当前框没有你框时的 _self. 例如 : <form action=" method="post" target="_blank">...</form> 表示表单将向以 post 的方式提交, 提交的结果在新的页面显示, 数据提交的媒体方式是默认的 application/x-www-form-urlencoded 方式 ; 1.2 表单域表单域包含了文本框多行文本框密码框隐藏域复选框单选框和下拉选择框等, 用于采集用户的输入或选择的数据, 下面分别讲述这些表单域的代码格式 : 文本框文本框是一种让访问者自己输入内容的表单对象, 通常被用来填写单个字或者简短的回答, 如姓名地址等代码格式 :<input type="text" name="..." size="..." maxlength="..." value="..."> type="text" 定义单行文本输入框 ; name 属性定义文本框的名称, 要保证数据的准确采集, 必须定义一个独一无二的名称 ; size 属性定义文本框的宽度, 单位是单个字符宽度 ; maxlength 属性定义最多输入的字符数 value 属性定义文本框的初始值样例 1: 样例 1 代码 : <input type="text" name="example1" size="20" maxlength="15"> 多行文本框也是一种让访问者自己输入内容的表单对象, 只不过能让访问者填写较长的内容代码格式 :<TEXTAREA name="..." cols="..." rows="..." wrap="virtual"></textarea> name 属性定义多行文本框的名称, 要保证数据的准确采集, 必须定义一个独一无二的名称 ; cols 属性定义多行文本框的宽度, 单位是单个字符宽度 ;

3 rows 属性定义多行文本框的高度, 单位是单个字符宽度 ; wrap 属性定义输入内容大于文本域时显示的方式, 可选值如下 : 默认值是文本自动换行 ; 当输入内容超过文本域的右边界时会自动转到下一行, 而数据在被提交处理时自动换行的地方不会有换行符出现 ; Off, 用来避免文本换行, 当输入的内容超过文本域右边界时, 文本将向左滚动, 必须用 Return 才能将插入点移到下一行 ; Virtual, 允许文本自动换行当输入内容超过文本域的右边界时会自动转到下一行, 而数据在被提交处理时自动换行的地方不会有换行符出现 ; Physical, 让文本换行, 当数据被提交处理时换行符也将被一起提交处理样例 2: 样例 2 代码 : <TEXTAREA name="example2" cols="20" rows="2" wrap="physical"></textarea> 密码框是一种特殊的文本域, 用于输入密码当访问者输入文字时, 文字会被星号或其它符号代替, 而输入的文字会被隐藏代码格式 :<input type="password" name="..." size="..." maxlength="..."> type="password" 定义密码框 ; name 属性定义密码框的名称, 要保证数据的准确采集, 必须定义一个独一无二的名称 ; size 属性定义密码框的宽度, 单位是单个字符宽度 ; maxlength 属性定义最多输入的字符数样例 3:

4 样例 3 代码 : <input type="password" name="example3" size="20" maxlength="15"> 隐藏域隐藏域是用来收集或发送信息的不可见元素, 对于网页的访问者来说, 隐藏域是看不见的当表单被提交时, 隐藏域就会将信息用你设置时定义的名称和值发送到服务器上代码格式 :<input type="hidden" name="..." value="..."> type="hidden" 定义隐藏域 ; name 属性定义隐藏域的名称, 要保证数据的准确采集, 必须定义一个独一无二的名称 ; value 属性定义隐藏域的值例如 :<input type="hidden" name="expws" value="dd"> 复选框复选框允许在待选项中选中一项以上的选项每个复选框都是一个独立的元素, 都必须有一个唯一的名称代码格式 :<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

5 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 文件上传框有时候, 需要用户上传自己的文件, 文件上传框看上去和其它文本域差不多, 只是它还包含了一个浏览按钮访问者可以通过输入需要上传的文件的路径或者点击浏览按钮选择需要上传的文件注意 : 在使用文件域以前, 请先确定你的服务器是否允许匿名上传文件表单标签中必须设置 ENCTYPE="multipart/form-data" 来确保文件被正确编码 ; 另外, 表单的传送方式必须设置成 POST 代码格式 :<input type="file" name="..." size="15" maxlength="100"> type="file" 定义文件上传框 ; name 属性定义文件上传框的名称, 要保证数据的准确采集, 必须定义一个独一无二的名称 ; size 属性定义文件上传框的宽度, 单位是单个字符宽度 ; maxlength 属性定义最多输入的字符数样例 6:

6 样例 6 代码 : <input type="file" name="myfile" size="15" maxlength="100"> 下拉选择框下拉选择框允许你在一个有限的空间设置多种选项代码格式 : <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>

7 <option value="d2">chinabyte.com</option> <option value="3">internet.com</option> </select> 1.3 表单按钮表单按钮控制表单的运作提交按钮提交按钮用来将输入的信息提交到服务器代码格式 :<input type="submit" name="..." value="..."> type="submit" 定义提交按钮 ; name 属性定义提交按钮的名称 ; value 属性定义按钮的显示文字 ; 样例 9: 样例 9 代码 : <input type="submit" name="mysent" value=" 发送 "> 复位按钮复位按钮用来重置表单代码格式 :<input type="reset" name="..." value="..."> type="reset" 定义复位按钮 ; name 属性定义复位按钮的名称 ;

8 value 属性定义按钮的显示文字 ; 样例 10: 样例 10 代码 : <input type="reset" name="mycancle" value=" 取消 "> 一般按钮一般按钮用来控制其他定义了处理脚本的处理工作代码格式 :<input type="button" name="..." value="..." > type="button" 定义一般按钮 ; name 属性定义一般按钮的名称 ; value 属性定义按钮的显示文字 ; onclick 属性, 也可以是其它的事件, 通过指定脚本函数来定义按钮的行为 ; 样例 11: 样例 11 代码 : <input type="button" name=&quot :06:16 疯狂代码

PowerPoint 演示文稿

PowerPoint 演示文稿按钮对象 (button) 当 JavaScript 读到标记中的 type 属性值为 button 时, 自动建立一个按钮对象, 并将该对象放到表单对象的 elements 数组当中按钮对象包括 : 普通按钮 (button) 提交按钮 (submit) 重置按钮 (reset) 1. 使用按钮对象的格式 document.forms[ 索引值 ].elements[ 索引值