我爱电脑技术论坛 » 网站建设 » 从HTML语言到网上家园 第六章　表单

麦迪 发表于 2008-1-26 00:59

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

要想创建一个交互式的网页，就离不开控件。表单的作用就是用于标识网页中包含控件的部分，表单中的控件用于网页中的输入控制，实现了用户与服务器的交互。[b]　　6.1基本语法[/b]
rUT3Y"FJ` 　　 表单的基本语法：$`|?Tu s)fe
　　 〈FORM;b-psQKv(q[0FJ
　　 ACTION=url9G,b%^2e c |
　　 METHOD= GET | POST
cL(]zh\;P;O5G%b 　　 TARGET= window_name | _blank | _parent | _self | _top〉-D3~G0s)h.[
　　 …… C6RA'bKW
　　 〈/FORM〉$B` i-`0v1@iUq
　　 ACTOIN=url url指定了执行表单动作的文件。如果不指定，就执行本文件。
}E.f-y m _+Hk8f
　　 METHOD= GET | POST 定义表单如何发送数据给服务器，POST表示把表单的数据提交到数据库，GET则是表单数据从服务器获取。
5Rx OHw v.ZO,b 　　 TARGET 定义了ACTION执行文件的目标窗口。
8X4_ y[@:Nb [table=450,#666666][tr][td]例：GaWvq4gK/Z6A;|m:YLz
〈form method="POST" action="login.asp" target=_self〉0Z jo#P)iG:p
〈p〉用户名：〈input type="text" name="T1" size="16"〉〈/p〉T!Bf2_\M0| n/cd
〈p〉口  令：〈input type="password" name="T2" size="16"〉〈/p〉 ?S1f8rD\%Lp
〈p〉〈input type="submit" value="提交" name="B1"〉    〈input type="reset" value="全部重写" name="B2"〉〈/p〉
9Ult6jc}P 〈/form〉[/td][/tr][/table](c&E mXyN?
[b]　　6.2表单中的常用控件[/b]1kNx%_$?]/Zq6S
　　 表单中常用控件有：单行文本框，复选框和单选框，按钮等，这些空间的基本格式：
1uM#dWGTc J-q 　　 〈input type=# 〉.X b_'D"kY
　　 type属性定义了控件的类型，不同的type值代表不同的控件。不同类型的控件却有一些共同的特性：lx9}7R[t3t;W)nn9_
　　 align=left | center | right 定义控件相对于页面或者表格单元格的队齐方式。
rYT!Ze A 　　 Disabled 用来关闭一个元素，当选用该属性时，控件在页面不可操作，并显示为灰色。
d ?bc%_Qi 　　 Size=n 规定了空间的尺寸。
}o[:}(L.GC 　　 Name=name 规定控件的名称。
pO@ X }h 　　 Value=value 指定控件的默认值。(|
}2},qX`
　　 在接下来的几节例，我们将介绍不同控件的特性。z?Kwi GT j2i-YK
　　 6.2.1单行文本框和密码框
4X&F-\D9Ws:a
Y3^ 　　 在网页中，常常会用到要求输入诸如用户名和口令之类的方框，这就需要用到单行文本框和密码框。
"X*om*~3uD^0f 　　 Type=text 定义单行文本框，用于单行文本项输入。
4Y3dg6t(PT6dV Gt 　　 Type=password 密码框，不显示用户输入内容，而是以“*”代替。
?L.i,w2N?P,\ 　　 Maxlenght属性可用于定义文本框和密码框中可输入的字符的最大个数。 2X|y%li"U4Xm9H
[table=450,#666666][tr][td]例：定义输入用户名和口令的文本框，最大长度为16个字符，口令的最大长度为16个字符，相应的html代码及显示效果如下：R t kj D @
〈form method="POST" action="--WEBBOT-SELF--"〉Qp8Ne8W-B:l
〈p〉用户名：〈input type="text" name="username" size="16"〉〈/p〉 _'[)h!kLf&Me
〈p〉口  令：〈input type="password" name="passwd" size="16"〉〈/p〉
1x,T,d vj!n)X%XU 〈p〉〈input type="submit" value="提交" name="B1"〉    〈input type="reset" value="全部重写" name="B2"〉〈/p〉6l,eA7_JW gT
〈/form〉+u`j:q4G%UL
显示效果：
*N Q!G-~ b B-h1pcm 用户名：
2i8xJ#CMB$e 口  令：
4_;y @aK2? Gj1^    
.A#|} nj!l-Z%_ [/td][/tr][/table]C8t Q6|H`|"X
[b]　　6.2.2复选框和单选框[/b]9z2D\,q6B#@N
　　 当某一元素或对象可以有多个可选值，或者仅是一个简单的布尔型值时，可以用复选框（type=checkbox）。在提交数据时，选择的每个复选框都产生一个单独的名字/值对。复选框的默认值是on。W+_(N2S'g+X f
　　 相反的，如果表单区中的一组值同时只能有一个有效，那么可以选用单选按钮（type=radio）。但选按钮需要一个显式VALUE=属性。av#}&CzrXG0w
　　 说明：同一表单中的一组复选框或者单选框组中都要给出相同的名字。5T}mV#g:IeJ
[table=450,#666666][tr][td]例1：一个关于复选框的例子。
Ndo&_OW@ 〈form method="POST" action="--WEBBOT-SELF--"〉
4u5Q1~(u1B4u 〈p〉搜索你想要的商品：〈/p〉 ~&A{`+i4t5Z T
〈p〉〈input type="checkbox" name="chked" value="ON"〉服饰   
+_n'n*M0t5D(QO 〈input type="checkbox" name="chked" value="ON"〉数码   
+D:rG;|%RFm&l&i
L 〈input type="checkbox" name="chked" value="ON"〉家居   c1gK*|`
〈input type="checkbox" name="chked" value="ON"〉手机〈/p〉 $NK*E:Pv'Jv'`
〈p〉〈input type="submit" value="搜索" name="B1"〉〈/p〉#y2?$A8o5n!{
〈/form〉
^w#[/m;h.p F 页面效果： 搜索你想要的商品：+r+tgiyO(I
服饰   数码   家居   手机%D0m2W6h~f H5o
+Ip2eKD@it
[/td][/tr][/table]
Q-}!@"da`^` [table=450,#666666][tr][td]例2：单选框的应用。;hG;yFYr'WK3|AD
〈form method="POST" action="--WEBBOT-SELF--"〉
5Amd6?%I_)J.?-G 〈p〉按钮类型：〈/p〉 'POXm'|
〈p〉〈input type="radio" value="V1" name="R1"〉普通  
#Y VX$?{ 〈input type="radio" value="V2" name="R1"〉提交  IV+R"kJu4]-N%p
〈input type="radio" value="V3" checked name="R1"〉重置〈/p〉 9B-?(_
_:wZc
〈p〉〈input type="submit" value="确定" name="B1"〉〈/p〉
Q z-n j D
R/P 〈/form〉
,[ H+W!G5Cs:p 页面效果： 按钮类型：.B:`
X!Ax9j"?6c
普通   提交   重置
| ir%H,DQ(Z"?
8o#q mlbF [/td][/tr][/table]AlN;ck*[:oEq
[b]　　6.2.3按钮[/b]
%DJe1S0i^ 　　 根据需要，网页中的按钮可以分为三种类型普通按钮、重置和提交按钮：`p:M)r+g,D
　　 type=button 定义普通按钮。

Q/QrT6`X 　　 Type=reset 定制重置按钮，在按下该按钮时，表单内的控件复位为初始设置的值。X ? T
U5lc DF
　　 Type=submit 按下此按钮，提交表单内容。如果按下submit按钮是为了提交窗体，而且这个按钮规定了name属性，那么这个按钮就把名字/值对分配给提交的数据。否则，submit按钮便不把名字/值对分配给提交的数据。
:x*`Y8P,kN:t3v [table=450,#666666][tr][td]例：/ZH'A`B$n!}
〈input type="button" value="按钮" name="butt"〉
3K(LQ(ssI~| 〈input type="submit" value="提交" name="sub"〉"}!Hw?,X(n+u
〈input type="reset" value="全部重写" name="reset"〉[/td][/tr][/table]9?/_"`"l*tdF!To w5ua
[b]　　6.2.4图像按钮[/b],l!@4qkf Py6A-V7[
　　 很多情况下，当网页中使用的普通按钮（type=button | submit | reset）达不到预期的美观效果时，我们可以用图像按钮来替代完成submit或reset的功能。
*oY2]@1{1G.i 　　 图像按钮的基本格式：ZgrzmH\YH!X
　　 〈input type="image" name="submit" align="BOTTOM" src=" wp08.gif"〉5R_#E Rjd;r
　　 type=image 单击一个图像段，使得它立即提交窗体。4^nsX&];n\t
　　 Name=submit 定义了按钮要执行的动作类型，是submit或者reset。Keg)yfQ
　　 Src＝url 指定图片的来源。QPz iT3]7^QB(L
[table=450,#666666][tr][td]例：| ZS%m7D r C/U'K
〈form method="POST" action="--WEBBOT-SELF--"〉
wF3Y*bMv'C
ad| 〈p〉用户名：〈input type="text" name="username" size="16"〉〈/p〉
CflW;a 〈p〉口  令：〈input type="password" name="passwd" size="16"〉〈/p〉
,bnzE1d LpQb3a 〈p〉〈input type="image" src="../images/wp08.gif" value="提交" name="submit"〉K7Q4n%hu+j-f,E
〈input type="image" value="全部重写" name="reset" src="../images/wp02.gif"〉〈/p〉
X(ks/A!~"S.WI4^ 〈/form〉7\8c K0i#r4FP+z
页面显示： 用户名： d`
kLW C#[F5W v
口  令：)A@P~1j.gA4?
[align=left]　　　[img]http://www.it.com.cn/f/edu/049/10/040910html1.gif[/img][/align][/td][/tr][/table]
A%@}y-du [b]　　6.2.5文件输入框[/b]
@ q-hsvCJF;U 　　 type=file时，控件是一个文件上装元素，允许用户提供文件作为输入。当需要打开一个文件，并将文件上传到服务器时常用到此控件。#jkW;w!A7\vI
~
[table=450,#666666][tr][td]例：文件输入框的一个实例。
$JO0\C7[f&m6q7p8co*Zk 〈form method="POST" action="upload.asp"〉lY|
a-s9x
〈p〉上传文件：〈input type="file" name="filedir" size="30"〉〈/p〉
bK;BARQ4e7L 〈p〉〈input type="submit" value="提交" name="B1"〉
`|.Z;T5}5mqB+l+e 〈input type="reset" value="全部重写" name="B2"〉〈/p〉
'U[o"v"chb$j 〈/form〉 上传文件：~2PQ:k0R D6L%sF
  2K:p.Ah8p!g
　　点击“浏览…”按钮，就会弹出文件选择对话框供用户选择需要的文件，用户也可以直接在文本框中输入文件的存放路径和文件名。[/td][/tr][/table]
,@E,t%Po
Y0qr ^V [b]　　6.2.5隐藏的控件[/b]
/tO efF^ g$zA!A 　　 当type=hidden时，控件不在网页中显示，但控件的value值同表单一起发送，这个值可以用来发送客户/服务器交互作用的状态信息。
(J7xd$g}jH { [table=450,#666666][tr][td]例：4zl$Q/\!r]@3Q4GKQ{
〈form method="POST" action="--WEBBOT-SELF--"〉D,u#Fm2A7]1y~
〈p〉用户名：〈input type="text" name="T1" size="16"〉〈/p〉
6I{AM/u~C 〈p〉口  令：〈input type="password" name="T2" size="16"〉〈/p〉 ;Hp:mvm]
〈p〉〈input type="hidden" name="email" value=unknown@163.com〉〈/p〉
4`O@$L CYP%Pl 〈p〉〈input type="submit" value="登录" name="B1"〉〈/p〉4k/kRac2Dr
〈/form〉 用户名：;AbJ1im6W+j{cn}
口  令：   )xSX1lO~-u
$W5Z'Q!{o+IxT
当提交表单数据到服务器时，email控件的值也会一起提交。 [/td][/tr][/table]
A G}c~3V+d}(Ea[*{ [b]　　6.2.6列表框[/b]@pD;QLC#R]-x$uA
　　 列表框用于列举一组可供选择的内容，点击按钮可显示所有选项。使用列表框可以节省页面空间。下拉列表框的基本格式如下：
-?E%F\#[b3_ 　　 〈select name=name〉
Qb Yy0lh&E7ko)s`,x(v 　　 〈option〉……〈/option〉a|XN/\ lc;g/P&E
　　 ……^}3]rPuQtw r Y9M*{
　　 〈/select〉6O |:t0w1v]$|
　　 〈select〉〈/select〉是列表框的头尾标记，其间包含多个〈option〉标记，用于标识列表框中的选项。
l1KQ.n6DBnA^ 　　 〈select multiple〉表示列表中可以选择多个项。默认情况下，列表只能是单项选择。
r2{ {bl]|(j 　　 〈option selected〉用于设置列表的默认选项。如果不指出，第一个项便是默认选择项。K7J0Z't$`_Zn
　　 〈option value=value〉中value属性指定了该项的默认值。
3MH5P-l%\E
v [table=450,#666666][tr][td]例：
:qd_%e9h$v7e"n
t 〈select name=catalog id=catalog style=width:155px〉
`$YTC f@I 〈option value="" selected〉在所有产品中〈/option〉 wtRTwd
〈option value="100"〉在所有图书中〈/option〉
*{e-~R!G 〈option value="300"〉在VCD中〈/option〉UG#d'N3ylE
〈option value="200"〉在CD中〈/option〉j:g!dQ4Nr4Ic }
〈option value="400"〉在DVD中〈/option〉
Tqlg
`[7fW(fI 〈/select〉y N"f(^
O7}{&{,B
[/td][/tr][/table]
3J9W-|3Aj \Ai^&I [b]　　6.2.7文本区域[/b]
)cf4b;P ]r;`"| 　　 单行文本框一次只能输入一行内容，在网页中如果需要一次输入大量文本时，往往需要用到文本区域〈textarea〉。在文本区域中，用户可以键入和编辑文本。文本区域的基本格式是〈textarea〉……〈/textarea〉，常用的属性有：
0Q6n5a(n$L 　　 ALIGN=ABSBOTTOM | ABSMIDDLE | BASELINE | MIDDLE | RIGHT | TEXTTOP | TOP 定义文本区域的对齐方式。"w!K9_-Pv(o8H8F"E
　　 COLS=n 规定文本区域的宽度，单位是字符。
4Cx)A+dO6~/T^&|![ w 　　 ROWS= n 规定文本区域具有的行数高度。"p$c9Ku%kSQ
　　 DISABLED 用来关闭一个元素。这个属性防止文本区接受输入焦点，并使得文本区变成灰色。#cy1}&MKH*I
　　 READONLY 使得文本区内容为只读型，用户不可修改。.n@&|9w9e)`CGE
　　 WRAP=OFF | PHYSICAL | VIRTUAL 指定如何处理文本区域中字换行：OFF表示关闭字回绕，是默认值；PHYSICAL表示显示文本并提供字回绕；VIRTUAL表示显示文本并提供字回绕，但是按输入方式提交。2K ?{W}2z;lz4j;h
　　 说明：文本区域的开始标记和结束标记必须成对出现，位于开始标记和结束标记之间的文本就是文本区域的初始值。
.g|c,} B(X [table=450,#666666][tr][td]例：一个可发表文章的表单的html代码。
/W,?!X?6E-s 〈form name=frmtopic method="POST" action="writeok.asp"〉
J_Dy:W,^e3e 〈p〉文章标题：〈input type="text" name="topic" size="50"〉〈/p〉`)Sqr-k}+w HG
〈p〉文章内容：〈textarea rows="5" name="content" cols="48"〉〈/textarea〉〈/p〉
*B5Ggw*]R~+r4KD 〈p〉      L9rbtGtD
     
O ue]7a0F 〈input type="submit" value="提 交" name="sub"〉〈input type="reset" value="全部重写" name="reset"〉〈/p〉
4l)B&`d4GM9V 〈/form〉
e,tE_!F"N 页面显示： 文章标题：
)LB.qO/a$`1OK4eE 文章内容：^7U5H4HY7?zY
                 
(^4OvzX,H7hz [/td][/tr][/table]

查看完整版本: 从HTML语言到网上家园 第六章　表单