HTML语言剖析(4) -pc6资讯

您的位置：首页 → 网页设计 → HTML/CSS → HTML语言剖析(4)

HTML语言剖析(4) 时间：2004/11/7 2:39:00来源：本站整理作者：蓝点我要评论(0)

表单标记

INPUT 的种类： Text, Radio,Checkbox, Password, Submit/Reset, Image, File, Hidden, Button。

■ 引子

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

■： ▲Top

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

的参数设定（常用）：
例如：<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。

的参数设定（常用）：
由于其第一个参数 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 等。

例子：
原始码请填入电话号码：显示结果请填入电话号码：

输入方式二： Radio （单一选择）

例如：<input type="Radio" name="gender" value="female" align="MIDDLE" checked>

type="Radio"
输入方式为 Radio，能产生一单一选择，以供点选。

name="gender"
此一 Radio 名称，参考 Text 部分的说明。

value="female"
内定值。每一个 radio 必须及仅有一个 value，通常有同时采用两个或以上同 name 不同 value 的 Radio 输入方式，可让使用使任选其一。

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

checked
设该 Radio 为内定被选。同 name 的各个 Radio 中只能有一个使用，或全不使用这参数。

例子：
原始码请选性别：女性男性你喜欢吗：喜欢不喜欢不肯定显示结果请选性别：女性男性你喜欢吗：喜欢不喜欢不肯定

输入方式三： Checkbox （确认盒）

例如：<input type="Checkbox" name="idol" value="Leon" align="RIGHT" checked>

type="Checkbox"
输入方式为 Checkbox，能产生一确认盒，以供剔选。

name="idol"
此一 Checkbox 名称，参考 Text 部分的说明。

value="Leon"
内定值。每一个 Checkbox 必须及仅有一个 value，当被剔选时这值便会传及 CGI，例如所传字串 idol=Leon 。

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

checked
设该 Checkbox 为内定被选。每个 Checkbox 都是独立的，所以每一个都可使用这参数，不像 Radio。

例子：
原始码你喜欢以下那些明星：黎明酒井法子郑秀文 BonJovi 显示结果你喜欢以下那些明星：黎明酒井法子郑秀文BonJovi

输入方式四： Password （密码输方盒）

例如：<input type="Password" name="pw" value="999" align="MIDDLE" size="5" maxlength="9">

Password 的其他参数和 Text 是完全相同的，请参考 Text 的介绍。
两者作用不同，Password 所输入的字元全以 * 号表示。

例子：
原始码请输入姓名：请输入密码：显示结果请输入姓名：请输入密码：

输入方式五： Submit （传送键）及 Reset （清除键）

这是表单上重要的两个按键，两者所附带的参数相同，但用处不大。

例如：<input type="Submit" name="other_funtion" value="确定" align="MIDDLE">
<input type="Reset" value="清除" align="MIDDLE">

type="Submit"
设定输入方式为 Submit 或 Reset。

name="other_funtion"
Submit 的功能随 name 的不同而不同，须和 CGI 配合。若你只需要普通的传送键，则是其内定，不必用此参数。

value="确定"
这个值不是输给 CGI 的，而是显示在按键上，可以不用，传送键的内定值为 Submit Query，清除键的内定值为 Reset。

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

例子：
原始码显示结果

输入方式六： Image （图片按键）

这通常用以取代 Submit 及 Reset 两个按键，因为由程式产生的按键并不漂亮，这 Image 参数便容许你采用自已制造的按键。

例如：<input type="Image" name="submit" align="BOTTOM" src="ex_icon.gif">

type="Image"
输入方式为 Image。

name="submit"
所要代表的按键，可以是 submit, reset, 或其它。

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

src="ex_icon.gif"
按键图片来源，若此图片文件不与该 html 文件在同一目录下，请加上相对或绝对途径。

例子：
原始码显示结果

输入方式七： 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"
所接受的文件类别，有二十六种选择，但可不设定。

例子：
原始码显示结果

输入方式八： 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）
原始码显示结果

输入方式九： Button

例如：<input type="Button" name="useless" value="Back">

type="Button"
输入方式为一般按键。常配合 Java Script 作为其启动按键。

name="useless"
这文件传输的名称，用处不大。

value="Back"
按键显示名称。

例子：其中 onclick="history.go( -1 );return true; 属 JAVA 事件。
原始码显示结果

■： ▲Top

是卷动选单标记，每一选项皆由所标示，把它当作围堵标记或空标记使用都可以。

的参数设定（常用）：例如：<select name="where" size="6" multiple>

name="where"
这卷动选单的名称，作识别之用，将会传及 CGI。

size="6"
这卷动选单的列数，即其高度，请自行修改。若使用此参数则不会有 Pop Up 效果。

multiple
令这卷动选单容许多重选择。

的参数设定（常用）：例如：<option value="tw" selected>

value="tw"
这选项的值，将会传及 CGI。请自行修改，但不同选项必须有不同的值。

selected
设该选项为内定被选。一个单选卷动选单只能有一项或零可内定被选。

例子一：（普通 POP UP 卷动选单）
原始码 Where you com from? Hong Kong Taiwan China United States Canada 显示结果 Where you com from? Hong KongTaiwanChinaUnited StatesCanada

例子二：（容许多重选择的卷动选单）
原始码 Where you com from? <select name="where" multiple> Hong Kong Taiwan China United States Canada 显示结果 Where you com from? Hong KongTaiwanChinaUnited StatesCanada

例子三：（设定了 Size 的卷动选单）
原始码 Where you com from? <select name="where" size="5"> Hong Kong Taiwan China United States Canada 显示结果 Where you com from? Hong KongTaiwanChinaUnited StatesCanada

■ ： ▲Top

是<span style="color:#ff0000">表单文字区块</span>标记，常用于 bug report, feedback 等需要填写大量资料的用途。

的参数设定（常用）： <br/>例如：<textarea <span style="color:#ff0000">name</span>="comments" <span style="color:#ff0000">cols</span>="40" <span style="color:#ff0000">rows</span>="4" <span style="color:#ff0000">wrap</span>="VIRTUAL">

name="comments"
这文字区块的名称，作识别之用，将会传及 CGI。

cols="40"
这文字区块的宽度，请自行修改。

rows="4"
这文字区块的列数，即其高度，请自行修改。

wrap="VIRTUAL"
设定其折行问题，可选值为： off, physical, virtual。off 表示不使用此属性，physical 时则会强迫刘览器在送资料到 CGI（Web 伺服器端）必须将实№文字中的换行一并送出，设为 virtual 时则送出连续成串的字（除非使用者按了键盘的 RETURN / ENTER）。

例子：
原始码 Give comments: 这是预设的字句，通常留空的，随你喜欢。显示结果 Give comments: 这是预设的字句，通常留空的，随你喜欢。

图形标记

■ ：称图形标记，主要用以插入图片于网页中，至于其它用处如配合影片文件等的播放及影像地图（Image Map 或称一图多连结）则于不会在这节提及，请看【影像地图】及【其他标记】。的一般参数设定：例如 <img src="logo.gif" width=100 height=100 hspace=5 vspace=5 border=2 align="top" alt="Logo of PenPals Garden" lowsrc="pre_logo.gif"> src="logo.gif" 图片来源，接受 .gif, .jpg 及 .png 格式，前两者通行己久，后者由 96 年开始发展，于未来取代前两者。若图片文件与该 html 文件同处一目录则只　写上文件案名称，否则必须加上正确的途径，相对及绝对皆可。 width=100 height=100 设定图片大小，此宽度、及高度一般采用 pixels 作单位。通常只设为图片的真实大小以免失真，若　要改变图片大小最好事先使用图像编辑工具。 hspace=5 vspace=5 设定图片边沿空白，以免文字或其它图片过于贴近。hspace 是设定图片左右的空间，vspace 则是设定图片上下的空间，高度采用 pixels 作单位。 border=2 图片边框厚度。 align="top" 调整图片旁边文字的位置，你可以控制文字出现在图片的偏上方、中间、底端、左右等，可选值：top, middle, bottom, left, right，内定为 botom。Netscape 还支持 texttop, baseline, absmiddle, absbottom， texttop 表示图片和文字依顶线对　， baseline 表示图片对　到目前文字行底线值， absmiddle 表示图片对　到目前文字行绝对中央， absbottom 表示图片对　到目前文字行绝对底部，（绝对底部意指它考虑到比方 y 、g、q 等字的下缘）。 alt="Logo of PenPal Garden" 这是用以描述该图形的文字，若用者使用文字浏览器，由于不支持图片，这些文字更会代替图片而被显示。若于支持图片显示的浏览器，当鼠标移至图片上该些文字亦会显示。 lowsrc="pre_logo.gif" 设定先显示低解像图片，若所加入的是一张很大的图片，下载　时很长，这张低解像图片会先被显示以免浏览失却兴趣，通当是原图片灰阶版本。例子一：原始码普通插入显示结果普通插入例子二：原始码设定上下左右空白位置显示结果设定字画中间对　，边框厚度为 4。例子四：原始码设定图片靠右。显示结果设定图片靠右。例子五：原始码放大了的图片显示结果放大了的图片

文章评论

查看所有0条评论>>

热门文章 没有查询到任何记录。