表单标记-目录
表单的用处很多,在网上无处不见,当然是配合ASP,JSP,ASP 使用为佳,所以使用或学习动态网页的话,表单设计是必需的,表单的标记不多,但其参数变化很多。一份表单的基本架构是:在<FORM>标记的包围下加上一种或多个的表单输入方式及一个或多个的按键。
表单有三个基本组成部分:
► 表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。
► 表单域:包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
► 表单按钮:包括提交按钮、复位按钮和一般按钮;用于将数据传送到服务器上的CGI脚本或者取消输入,还可以用表单按钮来控制其他定义了处理脚本的处理工作。
<FORM> <INPUT>
INPUT 的种类: Text ,Radio , Checkbox ,Password ,Submit/Reset ,Image , File , Hidden , Button 。
<SELECT><OPTION>
<TEXTAREA>
n <FORM> <INPUT> :
<form>称为表单标记,用以宣告此为表单模式,属于一个容器标记,表示其它表单标记需要在它的包围中才有效,<INPUT>便是其中的一个,用以设定各种输入资料的方法。它是一个空标记。
<form>的参数设定(常用):
※ 例:<form action ="http://localhost/example.asp" method ="POST">
► action ="http://localhost/example.asp"
表单通常是与动态网页设计语言配合使用的,参数action便是用以指明该动态语言页面的位置,这样此表单所填的资料才能正确传给动态页面或者数据库作处理。可设定此参数为 ACTION="mailto: your@email.com " 那样该表单所填的资料将会寄至此电邮地址(红色部分)。
► method ="POST"
传送资料给数据库或者动态网页的的方式,可选值为 POST , GET。请注意POST允许传送大量资料,但GET则只接受低于1K的资料,所以你若看过别人的表单原代码的话,你会发现申请表单用的是POST而搜索用的是GET。
<INPUT>的参数设定(常用):
由于其第一个参数type己有很多的选择,而不同的选择表示出不同的输入方式,且其它参数亦因此而异,故以下将独立介绍不同输入方式及其它参数设定。
► type ="Text"
可选值为 Text , Radio ,Checkbox , Password , Submit/Reset , Image, File , Hidden, Button 。
※ 例:<input type="Text" name="age" value="20" align="MIDDLE"
size="2" maxlength="255"disabled>
► type="Text"
输入方式为 Text,能产生一单行文本字段,上限为255字符。
► name="age"
此一单行文本字段名称,这是最重要的一个,方便动态网页辨认由表单传来的资料,可随便命名,但通常动态页面及数据库中都有指定名称,若转用其它名称便需要修改该动态页面和数据库字段了,名称可为空白或者特别符号的英文或数字,有大小写的分别,可以写成 Your_Age,若有访客于此表单此一文本字段填入40的话,那传给动态页面的值字串便是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"
此一单行文本字段可输入字符的上限,为方便编排资料或避免错输入等,宜设定上限,例如输入电话或QQ号码可设为 9,年龄为2等。
► disabled:不发生作用
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 中只能有一个使用,或全不使用这参数。
3. Checkbox(复选按钮)
※ 例:<input type="Checkbox" name="idol" value="Leon" align="RIGHT" checked>
► type="Checkbox"
输入方式为 Checkbox,能产生一复选按钮,以供复选。
► name="idol"
此一 Checkbox 名称, 参考Text部分的说明 。
► value="Leon"
默认值。每一个Checkbox 有切只有一个 value,当被选择时这值便会传给动态页面,例如所传字串 idol=Leon 。
► align="RIGHT"
可选值:top, middle, bottom,left, right, texttop, baseline, absmiddle。
► checked
设该Checkbox 为默认被选。每个Checkbox都是独立的,所以每一个都可使用这参数,不像Radio。
4. Password (密码框)
※ 例:<input type="Password" name="pw" value="999" align="MIDDLE" size="5" maxlength="9">
► Password的其他参数和 Text 是完全相同的, 请参考 Text 的介绍。
两者作用不同,Password 所输入的字元全以 * 号表示。
5. 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 的不同而不同,须和动态语言配合。若只需要普通的提交键,则是其默认,不必用此参数。
► value="确定"
这个值不是输给动态语言的,而是显示在按键上,可以不用,传送键的内定值为Submit Query ,重写键的默认值为 Reset 。
► align="MIDDLE"
可选值:top, middle, bottom,left, right, texttop, baseline, absmiddle。
6. 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="new017.gif"
按键图片来源,若此图片文件不与该html 文件在同一目录下,请加上相对或绝对路径。
7. File
※ 例:<input type="File" name ="upload" align ="BOTTOM" size="20" maxlength ="100" accept ="text/html">
► inputtype ="File"
输入方式为 Image。通常用以传输文件。
► name="upload"
这文件传输的名称,用以识别之用。
► align="BOTTOM"
可选值:top, middle, bottom,left, right, texttop, baseline, absmiddle。
► size="20"
所显示文本字段的长度。
► maxlength="100"
可输入字符的上限。
► accept="text/html"
所接受的文件类别,有二十六种选择,但可不设定。
8. Hidden
※ 例:<input type ="Hidden" name="ID" value ="6618">
► type="Hidden"
输入方式为隐藏或默认。它不会显示任何输入介面,而是一个默认值随表单一起传给ASP,列如由ASP产生的会员号码,或传入可更改的参数以调整ASP而避免修改ASP原代码。
► name="ID"
这文件传输的名称,用以识别之用。
► value="6618"
内定值,会以如 ID=6618 形式传给 ASP。
9. Button
<input type ="Button" name="useless" value ="Back">
► type="Button"
输入方式为一般按键。常配合 Java Script作为其启动按键。
► name="useless"
这文件传输的名称,用处不大。
► value="Back"
按键显示名称。
<SELECT>是 列表选单 标记,每一选项皆由<OPTION> 所标示,把它当作围堵标记或空标记使用都可以。
<SELECT> 的参数设定(常用):
※ 例:<selectname ="where" size ="6" multiple >
► name="where"
这列表选择项的名称,作识别之用,将会传及 ASP。
► size="6"
这列表选择项的列数,即其高度,请自行修改。若使用此参数则不会有 Pop Up 效 果。
► multiple
令这列表选择项容许多重选择。
<OPTION>的参数设定(常用):
※ 例:<option value ="tw" selected>
► value="tw"
这选项的值,将会传及 ASP。请自行修改,但不同选项必须有不同的值。
► selected
设该选项为内定被选。一个单选列表选择项只能有一项或零可默认被选。
n <TEXTAREA> :
<TEXTAREA>是 表单文字区块 标记,常用于 bug report,feedback 等需要填写大量资料的用 途。
<TEXTAREA>的参数设定(常用):
※ 例:<textarea name ="comments" cols="40" rows ="4" wrap ="virtual">
► name="comments"
这文字区块的名称,作识别之用,将会传及 ASP。
► cols="40"
这文字区块的宽度,单位是单个字符宽度。
► rows="4"
这文字区块的列数,即其高度,单位是单个字符宽度。
► wrap="VIRTUAL"
设定其折行问题,可选值为: off , physical ,virtual 。off 表示不使用此属性,physical 时则会强迫刘览器在送资料到 ASP(Web 服务器端)必须将实№文字中的换行一并送出,设为 virtual 时则送出连续成串的字(除非使用者按了键盘的RETURN / ENTER)。