HTML语言剖析（八）表单标记--网页教程--爱国设计

HTML语言剖析（八）表单标记

作者： | 时间：2006-12-05 | 来自：太平洋电脑网
浏览数： | 文章有0条评论 | 发布者：makeday
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　大中小

表单标记

　　<FORM> <INPUT>
　　INPUT 的种类： Text, Radio,Checkbox, Password, Submit/Reset, Image, File, Hidden, Button。
　　<SELECT> <OPTION>
　　<TEXTAREA>

　　■ 引子

　　表单的用处很多，于网上无处不见，当然是配合 CGI 使用为佳，所以馈下有意使用或学习 CGI 的话，表单设计见必需的，这一节介绍的标记不多，但其参数变化很多。一份表单的基本架构是：在<FORM> 标记的包围下加上一种或以上的表单输入方式及一个或以上的按键。

　　■<FORM> <INPUT>：

　　<FORM>称为表单标记，用以宣告此为表单模式，属于一个容器标记，表示其它表单标记需要在它的包围中才有效，<INPUT>便是其中的一个，用以设定各种输入资料的方法。它是一个空标记。
　　
　　<FORM> 的参数设定（常用）：

　　例如： <form action="http://your.isp.com/cgi-local/example.cgi" method="POST">

　　●　action="http://your.isp.com/cgi-local/example.cgi"
　　表单通常是与 CGI 配合使用的，参数 action 便是用以指明该 CGI 程式的位置，这样此表单所填的资料才能正确传给 CGI 作处理。若馈下没有 CGI 以进行测试，可设定此参数为ACTION="mailto:your@email.com" 那样该表单所填的资料将会寄至此电邮地址（红色部分）。

　　●　method="POST"
　　传送资料给 CGI 的的方式，可选值为 POST, GET。你只需记住POST容许传送大量资料，但 GET则只接受低于 1K 的资料，所以你若看过别人的表单原始码的话，你会发现申请表单用的是POST 而搜找器用的是 GET。

<INPUT> 的参数设定（常用）：

　　由于其第一个参数 type 己有很多的选择，而不同的选择表示出不同的输入方式，且其它参数亦因此而异，故以下将独立介绍不同输入方式及其它参数设定。

　　●　type="Text"
　　可选值为 Text, Radio,Checkbox, Password, Submit/Reset, Image, File, Hidden, Button。

　　输入方式一： Text （单行文字盒）

　　例如<input type="Text" name="age" value="20" align="MIDDLE" size="2" maxlength="255">

　　●　type="Text"
　　输入方式为 Text，能产生一单行文字盒，上限为 255 字元。

　　●　name="age"
　　此一单行文字盒名称，这是最重要的一个，方便 CGI 辨认由表单传来的资料，虽说可随便命名，但通常 CGI 程式中都有指定名称，若转用其它名称便需要修改该 CGI 程式了，名称可为没空白没特别符号的英文或数字，有大小写的分别，可以写成Your_Age，若有访客于此表单此一文字盒填入 40 的话，那末传给 CGI 的字串便是 Your_Age=40。

　　●　value="20"
　　此一单行文字盒内定值。若不填写则文字盒是空白的，等待访客亲自键入，若 value="20" 的话， 20 便会出现在文字盒中，当然访客可以修改之。

　　●align="MIDDLE"
　　可选值：top, middle, bottom, left, right, texttop, baseline, absmiddle. 没太大有处。

　　●　size="2"
　　此一单行文字盒显示的长度，若馈下是采用 Big5 编码的中文网页便要小心，同 size 的文字盒 NC 会显示得比 IE 狻长。

　　●　maxlength="255"
　　此一单行文字盒可输入字元的上限，为方便编排资料或避免错输入等，宜设定上限，例如输入电话或 ICQ UIN 的可设为 8，年龄为 2 等。

　　例子：

始码	<form action="http://your.isp.com/cgi-local/example.cgi" method="POST"> 请填入电话号码：<input type="Text" name="phone" value="" size="10" maxlength="8"> </form>
显示结果	请填入电话号码：

输入方式七： File

　　例如：<input type="File" name="upload" align="BOTTOM" size="20" maxlength="100" accept="text/html">

　　●　input type="File"
　　输入方式为 Image。通常用以传输文件。

　　●　name="upload"
　　这文件传输的名称，用以识别之用。

　　●　align="BOTTOM"
　　可选值：top, middle, bottom, left, right, texttop, baseline, absmiddle。

　　●　size="20"
　　所显示文字盒的长度。

　　●　maxlength="100"
　　可输入字元的上限。

　　●　accept="text/html"
　　所接受的文件类别，有二十六种选择，但可不设定。

　　例子：

始码 <form action="http://your.isp.com/cgi-local/example.cgi" method="POST">
<type="File" name="upload" size="30" maxlength="100" accept="text/html">
</form>
显示结果

　　输入方式八： Hidden
　　例如：<input type="Hidden" name="ID" value="6618">
　　●　type="Hidden"
　　输入方式为隐藏或内定。它不会显示任何输入介面，而是一个内定值随表单一起传给 CGI，列如由 CGI 产生的会员号码，或传入可更改的参数以调整 CGI 而避免修改 CGI 程式码。
　　 ●　name="ID"
　　这文件传输的名称，用以识别之用。
　　●　value="6618"
　　内定值，会以如 ID=6618 形式传给 CGI。
　　例子：（"Hidden" 是不被显示的，所以这处多放了一个 "Submit" 键，表示 Hidden 之内定值会随 submit 键被按而传给 CGI）
原始码 <form action="http://your.isp.com/cgi-local/example.cgi" method="POST">
<input type="Hidden" name="ID" value="6618">
<input type="Submit" value="Submit">
</form>
显示结果

输入方式七： File
　　例如：<input type="File" name="upload" align="BOTTOM" size="20" maxlength="100" accept="text/html">
　　●　input type="File"
　　输入方式为 Image。通常用以传输文件。
　　●　name="upload"
　　这文件传输的名称，用以识别之用。
　　●　align="BOTTOM"
　　可选值：top, middle, bottom, left, right, texttop, baseline, absmiddle。
　　●　size="20"
　　所显示文字盒的长度。
　　●　maxlength="100"
　　可输入字元的上限。
　　●　accept="text/html"
　　所接受的文件类别，有二十六种选择，但可不设定。
　　例子：

始码 <form action="http://your.isp.com/cgi-local/example.cgi" method="POST">
<type="File" name="upload" size="30" maxlength="100" accept="text/html">
</form>
显示结果

　　输入方式八： Hidden
　　例如：<input type="Hidden" name="ID" value="6618">
　　●　type="Hidden"
　　输入方式为隐藏或内定。它不会显示任何输入介面，而是一个内定值随表单一起传给 CGI，列如由 CGI 产生的会员号码，或传入可更改的参数以调整 CGI 而避免修改 CGI 程式码。
　　 ●　name="ID"
　　这文件传输的名称，用以识别之用。
　　●　value="6618"
　　内定值，会以如 ID=6618 形式传给 CGI。
　　例子：（"Hidden" 是不被显示的，所以这处多放了一个 "Submit" 键，表示 Hidden 之内定值会随 submit 键被按而传给 CGI）
原始码 <form action="http://your.isp.com/cgi-local/example.cgi" method="POST">
<input type="Hidden" name="ID" value="6618">
<input type="Submit" value="Submit">
</form>
显示结果

例子一：（普通 POP UP 卷动选单）
原始码 <form action="http://your.isp.com/cgi-local/example.cgi" method="POST"> Where you com from?
<select name="where">
<option value="hk">Hong Kong</option>
<option value="tw" selected>Taiwan</option>
<option value="cn">China</option>
<option value="us">United States</option>
<option value="ca">Canada</option>
</select>
</form>
显示结果
Where you com from?

相关链接

·HTML结构化：实践DIV＋CSS网页布局入门指南  [2006-12-13]
·HTML语言剖析（十五）调色原理  [2006-12-05]
·HTML语言剖析（十四）特殊字符  [2006-12-05]
·HTML语言剖析（十三）其他标记  [2006-12-05]
·HTML语言剖析（十二）多媒体标记  [2006-12-05]
·HTML语言剖析（十一）排版标记  [2006-12-05]
·HTML语言剖析（十）链接标记  [2006-12-05]
·HTML语言剖析（九）图形标记  [2006-12-05]
·HTML语言剖析（八）表单标记  [2006-12-05]
·HTML语言剖析（七）表格标记  [2006-12-05]

热门评论

验证码: 匿名

信息检索

最新下载

金山毒霸2007 正式版-终身升级第
动网论坛PHP RC3版
火车头采集器3.0(2.0正式版)
TQQ TenyQQ 1.7版（挂QQ软件）
美工非常漂亮的交友网站
owerShadow Master操作系统镜像软
Windows 恶意软件删除工具(微软官
烂碟复制badcopy2002正式版
百万格子源码 1.2
韩版潮流站-可爱吧-完整版

最新素材

文章搜索

COPYRIGHT 2005-2006 BY EGZ'DESIGN ALL RIGHTS 程序支持 | 联系我们 | 信息反馈 | 在线留言 |

爱国设计™ 版权所有陕ICP备05002767号

 　　　　

原始码	<form action="http://your.isp.com/cgi-local/example.cgi" method="POST"> <input type="Hidden" name="ID" value="6618"> <input type="Submit" value="Submit"> </form>
显示结果