[综合类] 从HTML语言到网上家园 第六章　表单

要想创建一个交互式的网页，就离不开控件。表单的作用就是用于标识网页中包含控件的部分，表单中的控件用于网页中的输入控制，实现了用户与服务器的交互。　　6.1基本语法电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站6 Z: V& {2 c  H' t
　　 表单的基本语法：4 d" p# b* u8 t! Y' _
　　 〈FORM我爱电脑技术社区--打造最好的电脑技术自学交流平台- [5 f4 m/ z% C- Y/ h9 ?: e$ ]( C
　　 ACTION=urlwww.520diannao.com' q' J4 C/ i/ o6 t( ~1 S# t: C/ K
　　 METHOD= GET | POST打造最好的电脑自学交流论坛$ F  W% ]' j( h( ~
　　 TARGET= window_name | _blank | _parent | _self | _top〉1 U# q) p$ a4 c1 t+ h
　　 ……打造最好的电脑自学交流论坛& v8 J: U1 R- I. S: d
　　 〈/FORM〉
/ f7 Y% w5 k4 V- @1 |我爱电脑技术社区--打造最好的电脑技术自学交流平台　　 ACTOIN=url url指定了执行表单动作的文件。如果不指定，就执行本文件。我爱电脑技术社区--打造最好的电脑技术自学交流平台  {) \- x2 B: w. n2 g
　　 METHOD= GET | POST 定义表单如何发送数据给服务器，POST表示把表单的数据提交到数据库，GET则是表单数据从服务器获取。
7 _$ B) @6 K* {% d# I" i; B- }, k打造最好的电脑自学交流论坛　　 TARGET 定义了ACTION执行文件的目标窗口。
# w5 l2 e" J( I% e* L3 }9 }电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站

例： ' v& I8 h; j% Q3 q: W( p/ H〈form method="POST" action="login.asp" target=_self〉 ) z" B5 J& Z# X6 ?7 D3 b$ `〈p〉用户名：〈input type="text" name="T1" size="16"〉〈/p〉 8 w- W, [& |! V# {我爱电脑技术论坛〈p〉口  令：〈input type="password" name="T2" size="16"〉〈/p〉 ! n; Z! D: ?* w, b6 h  ~我爱电脑技术社区--打造最好的电脑技术自学交流平台〈p〉〈input type="submit" value="提交" name="B1"〉    〈input type="reset" value="全部重写" name="B2"〉〈/p〉 : X6 T3 N5 g, {# Q3 b我爱电脑技术社区--打造最好的电脑技术自学交流平台〈/form〉

1 }, _6 u* U( F  k打造最好的电脑自学交流论坛　　6.2表单中的常用控件
# i0 N7 t4 `4 _我爱电脑技术社区--打造最好的电脑技术自学交流平台　　 表单中常用控件有：单行文本框，复选框和单选框，按钮等，这些空间的基本格式：我爱电脑技术论坛4 `% _. J0 C- N) Q: i8 C
　　 〈input type=# 〉我爱电脑技术社区--打造最好的电脑技术自学交流平台7 D  E  h! K6 d
　　 type属性定义了控件的类型，不同的type值代表不同的控件。不同类型的控件却有一些共同的特性：打造最好的电脑自学交流论坛- s4 b2 c6 i9 H# ^
　　 align=left | center | right 定义控件相对于页面或者表格单元格的队齐方式。打造最好的电脑自学交流论坛, l, H  o) x5 t6 R7 O  Q
　　 Disabled 用来关闭一个元素，当选用该属性时，控件在页面不可操作，并显示为灰色。www.520diannao.com  }$ W# T9 K8 M6 P2 o
　　 Size=n 规定了空间的尺寸。
& d: S* R+ g8 o+ O2 Z& {; a我爱电脑技术社区--打造最好的电脑技术自学交流平台　　 Name=name 规定控件的名称。打造最好的电脑自学交流论坛" Y! S% S, ^& s4 m( [3 U7 M
　　 Value=value 指定控件的默认值。
0 \4 K9 V! o. Q' s. ]我爱电脑技术社区--打造最好的电脑技术自学交流平台　　 在接下来的几节例，我们将介绍不同控件的特性。电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站4 G$ k8 H* R9 \& k9 u3 `% k
　　 6.2.1单行文本框和密码框
; b5 ^  V+ v  c! ?: L& _www.520diannao.com　　 在网页中，常常会用到要求输入诸如用户名和口令之类的方框，这就需要用到单行文本框和密码框。
4 D4 X! ^8 ^* G6 l$ x我爱电脑技术社区--打造最好的电脑技术自学交流平台　　 Type=text 定义单行文本框，用于单行文本项输入。www.520diannao.com6 c) ^6 V5 K4 o/ x
　　 Type=password 密码框，不显示用户输入内容，而是以“*”代替。
% W: l% R% }; ]9 `. H我爱电脑技术社区--打造最好的电脑技术自学交流平台　　 Maxlenght属性可用于定义文本框和密码框中可输入的字符的最大个数。
" e6 f4 d" N; S! K% f- v6 C+ W& T我爱电脑技术论坛

例：定义输入用户名和口令的文本框，最大长度为16个字符，口令的最大长度为16个字符，相应的html代码及显示效果如下：: V7 ^. X4 P. ? 〈form method="POST" action="--WEBBOT-SELF--"〉电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站& g: [9 [, t  ~3 m2 i. x! Y 〈p〉用户名：〈input type="text" name="username" size="16"〉〈/p〉我爱电脑技术社区--打造最好的电脑技术自学交流平台8 B( ?- C; B: w 〈p〉口  令：〈input type="password" name="passwd" size="16"〉〈/p〉 : {& X3 ~$ R7 O" u6 h) ]0 W. p 〈p〉〈input type="submit" value="提交" name="B1"〉    〈input type="reset" value="全部重写" name="B2"〉〈/p〉电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站. |  a2 {; C5 `  H 〈/form〉 2 ?% F7 c9 T! _$ i0 a* i7 V我爱电脑技术社区--打造最好的电脑技术自学交流平台显示效果：www.520diannao.com6 d2 [1 G6 M- h) V4 I! d; |' r 用户名： . b- M4 |* \$ C- V2 s  G我爱电脑技术论坛口  令：打造最好的电脑自学交流论坛9 {! h" `; q3 q3 d2 k2 X+ a3 A0 T     , K4 l6 K  M6 B! }  h2 a' r( |. Y我爱电脑技术论坛

我爱电脑技术社区--打造最好的电脑技术自学交流平台  }" X% G- O  X) P7 D
　　6.2.2复选框和单选框
1 @4 N' j7 S% W5 Q) ?$ d. {3 k打造最好的电脑自学交流论坛　　 当某一元素或对象可以有多个可选值，或者仅是一个简单的布尔型值时，可以用复选框（type=checkbox）。在提交数据时，选择的每个复选框都产生一个单独的名字/值对。复选框的默认值是on。电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站# g1 \- Q& [, i, E5 v
　　 相反的，如果表单区中的一组值同时只能有一个有效，那么可以选用单选按钮（type=radio）。但选按钮需要一个显式VALUE=属性。我爱电脑技术论坛! s# U8 Z3 c$ D. z8 a7 W$ f* M
　　 说明：同一表单中的一组复选框或者单选框组中都要给出相同的名字。我爱电脑技术论坛0 d  F: L" l- P4 o& k

例1：一个关于复选框的例子。 5 S1 R8 A8 R9 B; e# L6 `打造最好的电脑自学交流论坛〈form method="POST" action="--WEBBOT-SELF--"〉 我爱电脑技术论坛/ P; i( ]% d. o& j 〈p〉搜索你想要的商品：〈/p〉 电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站+ E! L3 H# a* G6 k9 E' z 〈p〉〈input type="checkbox" name="chked" value="ON"〉服饰   电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站2 j4 P. z$ h) J. J 〈input type="checkbox" name="chked" value="ON"〉数码   我爱电脑技术社区--打造最好的电脑技术自学交流平台9 F, _& h3 x' w/ G7 K7 J 〈input type="checkbox" name="chked" value="ON"〉家居    5 a& g  P# k- n+ x* U! i〈input type="checkbox" name="chked" value="ON"〉手机〈/p〉 我爱电脑技术论坛, {' ^$ [. Y+ P 〈p〉〈input type="submit" value="搜索" name="B1"〉〈/p〉 7 a5 v$ Y5 @& `$ x1 r% `1 h打造最好的电脑自学交流论坛〈/form〉 ; E; [6 i. j' [页面效果： 搜索你想要的商品：我爱电脑技术社区--打造最好的电脑技术自学交流平台% d" |& m$ M/ M/ S2 {/ T 服饰   数码   家居   手机 9 F7 e4 x0 t/ e. ~我爱电脑技术论坛 ! @/ B* H' E: t% q3 e$ ~3 p9 _

9 {3 T8 B$ X- }我爱电脑技术社区--打造最好的电脑技术自学交流平台

例2：单选框的应用。我爱电脑技术论坛' h2 _/ ^) z. q3 R9 r2 D* T) Z 〈form method="POST" action="--WEBBOT-SELF--"〉 * v) J0 f1 u1 Q, r2 J电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站〈p〉按钮类型：〈/p〉 5 V/ Q: {- D" `4 t+ |. l6 N电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站〈p〉〈input type="radio" value="V1" name="R1"〉普通  5 ], L3 W; B$ S# u 〈input type="radio" value="V2" name="R1"〉提交  我爱电脑技术论坛4 o; [5 k. j6 X$ Q1 K* B3 ]" v 〈input type="radio" value="V3" checked name="R1"〉重置〈/p〉 打造最好的电脑自学交流论坛3 W, w2 t8 W7 S" z  g+ Q 〈p〉〈input type="submit" value="确定" name="B1"〉〈/p〉www.520diannao.com% b! b$ v) O# H1 z. q" S, X 〈/form〉 # R* d" d2 ~! Y2 @我爱电脑技术论坛页面效果： 按钮类型：   I: Z: v5 K  h7 ^. [ 普通   提交   重置打造最好的电脑自学交流论坛8 F( w. V: Y2 ?5 x8 H' W" J 我爱电脑技术论坛) \- I' ~. S4 z0 S/ }1 ?

, u' p- g" I& Jwww.520diannao.com　　6.2.3按钮
/ E& C! c4 t, U) l电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站　　 根据需要，网页中的按钮可以分为三种类型普通按钮、重置和提交按钮：www.520diannao.com1 x! _( B* w/ R" G' h
　　 type=button 定义普通按钮。
0 _5 b* ?- K3 W$ z' L' c. C$ q- t　　 Type=reset 定制重置按钮，在按下该按钮时，表单内的控件复位为初始设置的值。
5 k3 P, P2 t' I　　 Type=submit 按下此按钮，提交表单内容。如果按下submit按钮是为了提交窗体，而且这个按钮规定了name属性，那么这个按钮就把名字/值对分配给提交的数据。否则，submit按钮便不把名字/值对分配给提交的数据。
4 b0 F) x" ?; D$ M我爱电脑技术论坛

例：我爱电脑技术论坛- w: L" u) r8 x 〈input type="button" value="按钮" name="butt"〉电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站+ g) Q5 D' A) E' Q 〈input type="submit" value="提交" name="sub"〉 6 s7 ?4 |: a+ p* o% T" s打造最好的电脑自学交流论坛〈input type="reset" value="全部重写" name="reset"〉

www.520diannao.com) Z/ p/ h! `' q
　　6.2.4图像按钮
1 A- h! k: |' N- r5 j  _! Kwww.520diannao.com　　 很多情况下，当网页中使用的普通按钮（type=button | submit | reset）达不到预期的美观效果时，我们可以用图像按钮来替代完成submit或reset的功能。电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站7 [. _1 w' M9 r  `
　　 图像按钮的基本格式：
1 E4 h% X0 m7 e* N- V( o我爱电脑技术论坛　　 〈input type="image" name="submit" align="BOTTOM" src=" wp08.gif"〉电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站% Q. b8 ], k8 G' a" T* {* T
　　 type=image 单击一个图像段，使得它立即提交窗体。
9 Z* w5 s! e2 y* f: w7 _我爱电脑技术社区--打造最好的电脑技术自学交流平台　　 Name=submit 定义了按钮要执行的动作类型，是submit或者reset。打造最好的电脑自学交流论坛! u4 J  E) _9 @9 P( T  _
　　 Src＝url 指定图片的来源。电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站7 [# W8 L7 u7 m: R

例： 3 [1 ~- X0 J1 E5 y0 T5 Q打造最好的电脑自学交流论坛〈form method="POST" action="--WEBBOT-SELF--"〉电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站- A5 v/ R7 ~0 L/ G  G5 ~ 〈p〉用户名：〈input type="text" name="username" size="16"〉〈/p〉我爱电脑技术社区--打造最好的电脑技术自学交流平台4 D5 v! M% x+ `+ X2 g$ R. _ 〈p〉口  令：〈input type="password" name="passwd" size="16"〉〈/p〉 # u; c% O9 N. h# ~. d" ^ 〈p〉〈input type="image" src="../images/wp08.gif" value="提交" name="submit"〉我爱电脑技术论坛/ k7 j4 c2 s4 D' A. H 〈input type="image" value="全部重写" name="reset" src="../images/wp02.gif"〉〈/p〉 5 S$ V2 E( }3 d" T( A+ m打造最好的电脑自学交流论坛〈/form〉我爱电脑技术论坛# F, ~- G+ u: W$ \9 C) v# Z 页面显示： 用户名：www.520diannao.com0 T+ Z7 P9 F, a9 t. W/ e- s2 z 口  令： ; Z, f; `3 c1 `' A  l& S电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站

1 s% z5 A7 s  a$ g4 G& K; S0 A
　　6.2.5文件输入框
! E0 n: z8 x, S- G打造最好的电脑自学交流论坛　　 type=file时，控件是一个文件上装元素，允许用户提供文件作为输入。当需要打开一个文件，并将文件上传到服务器时常用到此控件。www.520diannao.com. B- S6 `' |2 ], d

例：文件输入框的一个实例。* N$ a" n+ [8 O( C, C1 c/ t 〈form method="POST" action="upload.asp"〉 4 @9 K/ t; C. r〈p〉上传文件：〈input type="file" name="filedir" size="30"〉〈/p〉我爱电脑技术论坛9 l0 w- t  W- D( ^ 〈p〉〈input type="submit" value="提交" name="B1"〉www.520diannao.com' p0 g' i) |# \, L! f4 k0 p+ Q 〈input type="reset" value="全部重写" name="B2"〉〈/p〉# e5 a1 f4 J  l( ~3 _) ^5 c 〈/form〉 上传文件： 4 G6 G* e/ C# {9 F% G+ X打造最好的电脑自学交流论坛   ) ]% w8 S+ c" D+ P) W7 x我爱电脑技术社区--打造最好的电脑技术自学交流平台　　点击“浏览…”按钮，就会弹出文件选择对话框供用户选择需要的文件，用户也可以直接在文本框中输入文件的存放路径和文件名。

, u. l% q, Q/ w% ~, Z1 A( O3 C7 D: s
　　6.2.5隐藏的控件电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站4 y* `) m% R( _- N* n
　　 当type=hidden时，控件不在网页中显示，但控件的value值同表单一起发送，这个值可以用来发送客户/服务器交互作用的状态信息。
0 v* |1 a1 k* `/ d, |$ F8 Y5 n我爱电脑技术社区--打造最好的电脑技术自学交流平台

例： $ z# K3 Q' l" [+ s  k2 p+ k我爱电脑技术社区--打造最好的电脑技术自学交流平台〈form method="POST" action="--WEBBOT-SELF--"〉   e8 ^9 t7 i7 }2 u& n2 f0 M  U我爱电脑技术论坛〈p〉用户名：〈input type="text" name="T1" size="16"〉〈/p〉电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站4 S6 m+ f4 y6 ~. _+ Y' p 〈p〉口  令：〈input type="password" name="T2" size="16"〉〈/p〉 . Z" K" T, ^" m: k〈p〉〈input type="hidden" name="email" value=unknown@163.com〉〈/p〉 打造最好的电脑自学交流论坛4 |6 q% x1 P3 H5 i4 s! v* I0 `0 T 〈p〉〈input type="submit" value="登录" name="B1"〉〈/p〉 " ?# W; i' @- Q3 ]我爱电脑技术社区--打造最好的电脑技术自学交流平台〈/form〉 用户名：  e8 n& A" R) [# y# Z 口  令：    - `  h( I" b- [  T, F/ G我爱电脑技术论坛 # x5 c, E* O, q1 h我爱电脑技术论坛当提交表单数据到服务器时，email控件的值也会一起提交。

打造最好的电脑自学交流论坛1 G- @$ v% s- K0 `% r
　　6.2.6列表框
! z' D2 M) b5 m  O( Z我爱电脑技术社区--打造最好的电脑技术自学交流平台　　 列表框用于列举一组可供选择的内容，点击按钮可显示所有选项。使用列表框可以节省页面空间。下拉列表框的基本格式如下：
+ q9 w$ I% z5 v' m3 f4 y　　 〈select name=name〉
9 ?4 W" g5 i" k' Q2 b- A0 rwww.520diannao.com　　 〈option〉……〈/option〉
: b4 G% z" I% f打造最好的电脑自学交流论坛　　 ……我爱电脑技术社区--打造最好的电脑技术自学交流平台) H9 S* ^, F& w. x6 R
　　 〈/select〉我爱电脑技术社区--打造最好的电脑技术自学交流平台% p, H4 u$ j& v
　　 〈select〉〈/select〉是列表框的头尾标记，其间包含多个〈option〉标记，用于标识列表框中的选项。
# b- Y6 l0 d# C8 Z/ p/ t/ {, P9 a- s打造最好的电脑自学交流论坛　　 〈select multiple〉表示列表中可以选择多个项。默认情况下，列表只能是单项选择。
- w% s" U3 L2 o4 l, e! x2 ~　　 〈option selected〉用于设置列表的默认选项。如果不指出，第一个项便是默认选择项。
& X2 V# K# v8 s: y# ]: p2 M! D电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站　　 〈option value=value〉中value属性指定了该项的默认值。www.520diannao.com1 |9 C+ l+ K1 ~# l

例： % Y$ [& I, x1 k% h我爱电脑技术社区--打造最好的电脑技术自学交流平台〈select name=catalog id=catalog style=width:155px〉我爱电脑技术论坛- V- E/ ?/ _( l" D 〈option value="" selected〉在所有产品中〈/option〉 4 @2 G8 V: W) F  j( a% B# Uwww.520diannao.com〈option value="100"〉在所有图书中〈/option〉我爱电脑技术社区--打造最好的电脑技术自学交流平台1 V7 K9 E8 |& J+ T1 G. G6 j  ^ 〈option value="300"〉在VCD中〈/option〉 % Y9 n. n% e9 d电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站〈option value="200"〉在CD中〈/option〉2 ?) O. I0 `0 z; n. Q 〈option value="400"〉在DVD中〈/option〉www.520diannao.com$ ~1 ^. H, u4 |- l0 l7 O6 m! U 〈/select〉电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站& R0 g* {# H3 m3 {0 M: W6 E, m

9 \. }: Z( Q: y! w0 f# _, p. x( a2 w# V& ~我爱电脑技术论坛　　6.2.7文本区域
( R. t% q/ I* {" f# ^7 h9 L5 r　　 单行文本框一次只能输入一行内容，在网页中如果需要一次输入大量文本时，往往需要用到文本区域〈textarea〉。在文本区域中，用户可以键入和编辑文本。文本区域的基本格式是〈textarea〉……〈/textarea〉，常用的属性有：电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站  S) d; U9 M7 _
　　 ALIGN=ABSBOTTOM | ABSMIDDLE | BASELINE | MIDDLE | RIGHT | TEXTTOP | TOP 定义文本区域的对齐方式。
' F. ~2 y) G5 f* P2 k打造最好的电脑自学交流论坛　　 COLS=n 规定文本区域的宽度，单位是字符。www.520diannao.com. M5 n1 s5 `7 J! r4 V. S) q
　　 ROWS= n 规定文本区域具有的行数高度。
* R' L  A0 ?5 G$ x/ l0 J我爱电脑技术论坛　　 DISABLED 用来关闭一个元素。这个属性防止文本区接受输入焦点，并使得文本区变成灰色。
/ i% K2 M4 `( g  T电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站　　 READONLY 使得文本区内容为只读型，用户不可修改。
4 o; Y! f9 D9 swww.520diannao.com　　 WRAP=OFF | PHYSICAL | VIRTUAL 指定如何处理文本区域中字换行：OFF表示关闭字回绕，是默认值；PHYSICAL表示显示文本并提供字回绕；VIRTUAL表示显示文本并提供字回绕，但是按输入方式提交。我爱电脑技术社区--打造最好的电脑技术自学交流平台( ^/ v4 `9 l  [  A
　　 说明：文本区域的开始标记和结束标记必须成对出现，位于开始标记和结束标记之间的文本就是文本区域的初始值。
1 O' ^% J8 W% u3 O0 \, n  H" nwww.520diannao.com

例：一个可发表文章的表单的html代码。 1 g  @! _& J4 C2 a! O! F, \( v: n〈form name=frmtopic method="POST" action="writeok.asp"〉打造最好的电脑自学交流论坛$ J% E/ C, L. u* f6 h6 k( ] 〈p〉文章标题：〈input type="text" name="topic" size="50"〉〈/p〉 % J/ ~2 \$ @1 s. H9 r我爱电脑技术社区--打造最好的电脑技术自学交流平台〈p〉文章内容：〈textarea rows="5" name="content" cols="48"〉〈/textarea〉〈/p〉电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站9 ~0 u# l! ^- l2 @; {3 M( _ 〈p〉      打造最好的电脑自学交流论坛* C0 y& F  G% R' a4 P  H' d" ^       8 K/ G& f  q0 s) B+ K, T8 B电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站〈input type="submit" value="提 交" name="sub"〉〈input type="reset" value="全部重写" name="reset"〉〈/p〉打造最好的电脑自学交流论坛( ^( C8 L$ a% @% y' x1 w: y 〈/form〉打造最好的电脑自学交流论坛5 @3 ?) x9 F$ h" v7 d: x 页面显示： 文章标题： 6 w5 ?$ C1 Y) k/ u3 [; t打造最好的电脑自学交流论坛文章内容： * i6 V# A) t5 U2 F2 `9 t3 {3 `! L" v我爱电脑技术论坛                 0 ?$ N$ `0 B' C5 ]4 q" {, ^/ u