[html语言代码大全]HTML语言剖析(4)

更新时间:2019-09-01 来源:热门资讯 点击:

【www.hzclsc.cn--热门资讯】

表单标记






















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。 例子四:     原始码  设定图片靠右。   显示结果   设定图片靠右。 例子五:     原始码  放大了的图片   显示结果   放大了的图片

本文来源:http://www.hzclsc.cn/news/25777.html

为您推荐

dnf鬼泣新buff换装|dnf鬼泣BUFF换装如何搭配 dnf起源版鬼泣BUFF换装搭配攻略

您的位置:首页 → 网游资讯 → dnf资讯 → dnf鬼泣BUFF换装如何搭配 dnf起源版鬼泣BUFF换装搭配攻略 dnf鬼泣BUFF换装如何搭配 dnf起源版鬼泣BUFF换装搭配攻略时间:201dnf资讯

2021-02-25 18:54:41   dnf鬼泣buff换装95   地下城鬼泣buff换装  

dnf流年鬼泣装备_dnf鬼泣起源版本装备搭配推荐 dnf黑暗君主起源版本加点攻略

2月1日DNF起源版本正式更新了,这次更新全职业平衡性将进行调整,所以这个版本DNF黑暗君主起源版本怎么加点?DNF黑暗君主起源版本用什么装备好?下面小编为大家爱带来了DNF黑暗君主起源版本加点攻略dnf资讯

2021-02-25 18:54:41   dnf鬼泣装备推荐   dnf鬼泣毕业装备  

【dnf黄金雄鹰图腾怎么升级】dnf黄金雄鹰图腾怎么得 黄金雄鹰图腾出现概率介绍

DNF游戏中成功建造传说图腾的小伙伴可以一次性拿到20个图腾精华,而普通的和特殊也才只给到6个,是普通 特殊的3倍还多,难怪这么多的玩家追求黄金雄鹰图腾了,毕竟有了它,组合出传说的概率非常的高。 为dnf资讯

2021-02-25 18:54:41  

[dnf起源剧情]dnf起源版本公会改动一览 dnf起源版本公会有哪些变动

全新的起源版本已经到来,这次改版的改动很大,甚至有些小伙伴都在游戏中迷路了,那么在全新的起源版本中公会有哪些变化呢?下面就让我们一起去了解一下DNF起源版本公会改动吧! DNF起源版本公会改动一览起dnf资讯

2021-02-25 18:54:41  

德特尔兽人族|dnf兽人族的特别宝物礼盒有什么 兽人族的特别宝物礼盒选择建议

兽人族的特别宝物礼盒打开后,可以在两种宝物礼盒中选择一种,远古兽人族的神秘宝物礼盒、兽人族英雄的宝珠礼盒,很多小伙伴不知道怎么选择才好,小编今天带来一篇DNF兽人族的特别宝物礼盒选择建议,希望大家喜dnf资讯

2021-02-25 18:54:41   怪物猎人世界老练的兽人族学者   兽人族永不为奴除非