表单

表单标记-目录

表单的用处很多，在网上无处不见，当然是配合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>的参数设定（常用）：
※  例：<formaction ="http://localhost/example.asp" method ="POST">

►   action ="http://localhost/example.asp"
表单通常是与动态网页设计语言配合使用的，参数action便是用以指明该动态语言页面的位置，这样此表单所填的资料才能正确传给动态页面或者数据库作处理。可设定此参数为 ACTION="mailto: [e-mail] "那样该表单所填的资料将会寄至此电邮地址（红色部分）。

►   method ="POST"
传送资料给数据库或者动态网页的的方式，可选值为 POST ,GET。请注意POST允许传送大量资料，但GET则只接受低于1K的资料，所以你若看过别人的表单原代码的话，你会发现申请表单用的是POST而搜索用的是GET。

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

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

1.   Text（单行文本字段）

※  例：<inputtype="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（单选）

※  例:<inputtype="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（复选按钮）

※  例：<inputtype="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（密码框）

※ 例：<inputtype="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"
按键显示名称。

n  <SELECT> <OPTION>：

<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）。