从HTML语言到网上家园 第六章　表单

　　 要想创造一个交互式的网页，就离不开控件。表单的效率即是用来标识网页中包括控件的局部，表单中的控件用来网页中的输出遏制，实行了用户与效劳器的交互。

　　6.1基础语法

　　 表单的基础语法：　　 〈form　　 action=url　　 method= get | post　　 target= window_name | _blank | _parent | _self | _top〉　　 ……　　 〈/form〉　　 actoin=url url指定了实行表单举措的文献。即使不指定，就实行本文献。　　 method= get | post 设置表单怎样发送数据给效劳器，post表白把表单的数据提交到数据库，get则是表单数据从效劳器获得。　　 target 设置了action实行文献的目的窗口。

例：〈form method="post" action="login.asp" target=_self〉〈p〉用户名：〈input type="text" name="t1" size="16"〉〈/p〉〈p〉口  令：〈input type="password" name="t2" size="16"〉〈/p〉 〈p〉〈input type="submit" value="提交" name="b1"〉    〈input type="reset" value="十足重写" name="b2"〉〈/p〉〈/form〉

　　6.2表单中的常用控件

　　 表单中常用控件有：单列文本框，复选框和单选框，按钮等，那些空间的基础方法：　　 〈input type=# 〉　　 type属性设置了控件的典型，各别的type值代办各别的控件。各别典型的控件却有少许共通的个性：　　 align=left | center | right 设置控件对立于页面大概表格单位格的队齐办法。　　 disabled 用来封闭一个元素，当采用该属性时，控件在页面不行操纵，并表露为灰色。　　 size=n 规则了空间的尺寸。　　 name=name 规则控件的称呼。　　 value=value 指定控件的默许值。　　 在接下来的几节例，咱们将引见各别控件的个性。　　 6.2.1单列文本框和暗号框 　　 在网页中，往往会用到诉求输出诸如用户名和口令之类的方框，这就须要用到单列文本框和暗号框。　　 type=text 设置单列文本框，用来单列文内项输出。　　 type=password 暗号框，不表露用户输出实质，而是以“*”包办。　　 maxlenght属性可用来设置文本框和暗号框中可输出的字符的最大个数。

例：设置输出用户名和口令的文本框，最大长度为16个字符，口令的最大长度为16个字符，相映的html代码及表露功效如次：〈form method="post" action="--webbot-self--"〉〈p〉用户名：〈input type="text" name="username" size="16"〉〈/p〉〈p〉口  令：〈input type="password" name="passwd" size="16"〉〈/p〉 〈p〉〈input type="submit" value="提交" name="b1"〉    〈input type="reset" value="十足重写" name="b2"〉〈/p〉〈/form〉表露功效：

用户名：

口  令：

　　6.2.2复选框和单选框

　　 当某一元素或东西不妨有多个可选值，大概仅是一个大略的布尔型值时，不妨用复选框（type=checkbox）。在提交数据时，采用的每个复选框都爆发一个独立的名字/值对。复选框的默许值是on。　　 差异的，即使表单区中的一组值同声只能有一个灵验，那么不妨采用单选按钮（type=radio）。但选按钮须要一个显式value=属性。　　 证明：同一表单中的一组复选框大概单选框组中都要给出沟通的名字。

例1：一个对于复选框的例子。〈form method="post" action="--webbot-self--"〉 〈p〉探求你想要的商品：〈/p〉 〈p〉〈input type="checkbox" name="chked" value="on"〉衣饰   〈input type="checkbox" name="chked" value="on"〉数码   〈input type="checkbox" name="chked" value="on"〉闲居   〈input type="checkbox" name="chked" value="on"〉手机〈/p〉 〈p〉〈input type="submit" value="探求" name="b1"〉〈/p〉〈/form〉页面功效：

探求你想要的商品：

衣饰   数码   闲居   手机

例2：单选框的运用。〈form method="post" action="--webbot-self--"〉〈p〉按钮典型：〈/p〉 〈p〉〈input type="radio" value="v1" name="r1"〉普遍  〈input type="radio" value="v2" name="r1"〉提交  〈input type="radio" value="v3" checked name="r1"〉重置〈/p〉 〈p〉〈input type="submit" value="决定" name="b1"〉〈/p〉〈/form〉页面功效：

按钮典型：

普遍  提交  重置

　　6.2.3按钮

　　 按照须要，网页中的按钮不妨分为三种典型普遍按钮、重置和提交按钮：　　 type=button 设置普遍按钮。　　 type=reset 定制重置按钮，在按下该按钮时，表单内的控件复位为初始树立的值。　　 type=submit 按下此按钮，提交表单实质。即使按下submit按钮是为了提交窗体，并且这个按钮规则了name属性，那么这个按钮就把名字/值对调配给提交的数据。要不，submit按钮便不把名字/值对调配给提交的数据。

例：〈input type="button" value="按钮" name="butt"〉〈input type="submit" value="提交" name="sub"〉〈input type="reset" value="十足重写" name="reset"〉

　　6.2.4图像按钮

　　 很多情景下，当网页中运用的普遍按钮（type=button | submit | reset）达不到预期的场面功效时，咱们不妨用图像按钮来代替实行submit或reset的功效。　　 图像按钮的基础方法：　　 〈input type="image" name="submit" align="bottom" src=" wp08.gif"〉　　 type=image 单击一个图像段，使得它登时提交窗体。　　 name=submit 设置了按钮要实行的举措典型，是submit大概reset。　　 src＝url 指定图片的根源。

例：〈form method="post" action="--webbot-self--"〉〈p〉用户名：〈input type="text" name="username" size="16"〉〈/p〉〈p〉口  令：〈input type="password" name="passwd" size="16"〉〈/p〉 〈p〉〈input type="image" src="http://www.okasp.com/images/wp08.gif" value="提交" name="submit"〉〈input type="image" value="十足重写" name="reset" src="http://www.okasp.com/images/wp02.gif"〉〈/p〉〈/form〉页面表露：

用户名：

口  令：

　　6.2.5文献输出框

　　 type=file时，控件是一个文献上衣元素，承诺用户供给文献动作输出。当须要翻开一个文献，并将文献上传到效劳器常常用到此控件。

例：文献输出框的一个范例。〈form method="post" action="upload.asp"〉〈p〉上传文献：〈input type="file" name="filedir" size="30"〉〈/p〉〈p〉〈input type="submit" value="提交" name="b1"〉〈input type="reset" value="十足重写" name="b2"〉〈/p〉〈/form〉

上传文献：

　　点击“欣赏…”按钮，就会弹出文献采用对话框供用户采用须要的文献，用户也不妨径直在文本框中输出文献的寄存路途和文献名。

　　6.2.5湮没的控件

　　 当type=hidden时，控件不在网页中表露，但控件的value值同表单一道发送，这个值不妨用来发送存户/效劳器交互效率的状况消息。

例：〈form method="post" action="--webbot-self--"〉〈p〉用户名：〈input type="text" name="t1" size="16"〉〈/p〉〈p〉口  令：〈input type="password" name="t2" size="16"〉〈/p〉 〈p〉〈input type="hidden" name="email" value=unknown@163.com〉〈/p〉 〈p〉〈input type="submit" value="登录" name="b1"〉〈/p〉〈/form〉

用户名：

口  令：

当提交表单数据到效劳器时，email控件的值也会一道提交。

　　6.2.6列表框

　　 列表框用来陈列一组可供采用的实质，点击按钮可表露一切选项。运用列表框不妨俭朴页面空间。下拉列表框的基础方法如次：　　 〈select name=name〉　　 〈option〉……〈/option〉　　 ……　　 〈/select〉　　 〈select〉〈/select〉是列表框的头尾标志，期间包括多个〈option〉标志，用来标识列表框中的选项。　　 〈select multiple〉表白列表中不妨采用多个项。默许情景下，列表只能是单项采用。　　 〈option selected〉用来树立列表的默许选项。即使不指出，第一个项便是默许采用项。　　 〈option value=value〉中value属性指定了该项的默许值。

例：〈select name=catalog id=catalog style=width:155px〉〈option value=" selected〉在一切产物中〈/option〉〈option value="100"〉在一切典籍中〈/option〉〈option value="300"〉在vcd中〈/option〉〈option value="200"〉在cd中〈/option〉〈option value="400"〉在dvd中〈/option〉〈/select〉〈p〉作品题目：〈input type="text" name="topic" size="50"〉〈/p〉〈p〉作品实质：〈textarea rows="5" name="content" cols="48"〉〈/textarea〉〈/p〉〈p〉           〈input type="submit" value="提 交" name="sub"〉〈input type="reset" value="十足重写" name="reset"〉〈/p〉〈/form〉页面表露：

作品题目：

作品实质：