做网页有朋友可能对<label>标识符有一点陌生，这是一个容易被大家所忽略的标识。因为在大家所熟悉的Dreamweave和FrontPage等网页编辑器中是不会出现的。但这个标识看上去好像没什么用处，但如果用它和表单一起来工作就会能做到一些别的标识做不到的事。让我们先来看一下面的例子。
7 M9 v9 W' T2 c9 I; g" A# d! N★一个带热键的Form：（你可以用"Alt+下划线字母"来访问各字段）
) d9 B5 L5 g0 s8 {/ P4 ^. }. E 姓 名（N）： ' r( y) T8 L y# [# h% _- W5 a) r
电子邮件（E）：
* W2 `" F3 }8 J. c& @% ~ 联系电话（P）： 3 @- ^! g& f$ H* V
留 言（S）： ! K" R9 I3 y& }) ~8 q% l2 v
怎么样？不错吧。这主要是通过<Label>标识的两个属性来做到的，一个是FOR，一个是ACCESSKEY。FOR的意思是，这个Lable是为哪个元件服务的？而ACCESSKEY则定义了访问这个元件的热键。比如，我们有一个名字叫Name的单行输入框，我们是这样定义这个元件的：<INPUT TYPE="TEXT" ID="Name" SIZE=30>，那么，我们的<label>可以如此定义：<LABEL FOR="Name" ACCESSKEY="N">姓 名（<U>N</U>）：</LABEL>。大家可以看见，这个<Label>是为那个ID为"Name"元件服务的，而ACESSKEY则定义了，这访问这个元件的热键为"Alt+N"。以下就是上面那个示例的HTML源码：
2 a8 n" `* d6 Z9 G z# T% r<FORM>
5 B w2 y/ b+ R3 n2 z: f% r <LABEL FOR="Namebox" ACCESSKEY="N">姓 名（<U>N</U>）：</LABEL>9 ]' p8 c0 k3 s% [5 F
<INPUT TYPE="TEXT" ID="Namebox" SIZE=30> <br>7 u9 h5 G$ H0 _; J9 }4 j
' P1 l! n4 H" V <LABEL FOR="Emailbox" ACCESSKEY="E">电子邮件（<U>E</U>）：</LABEL>
u% M( d: h- I X; A <INPUT TYPE="TEXT" ID="Emailbox" SIZE=30> <br>
4 B6 p! m9 X, ]
; l5 d6 r% T6 v9 Q: M' F <LABEL FOR="Phonebox" ACCESSKEY="P">联系电话（<U>P</U>）：</LABEL>" b( U9 g. c" F* }' _
<INPUT TYPE="TEXT" ID="Phonebox" SIZE=30> <br>: z3 u" o2 S, V! X* e
<LABEL FOR="areabox" ACCESSKEY="S" >留 言（<U>S</U>）：</LABEL>
; @4 Y* _' \4 n% O, f- u <TEXTAREA ID="areabox" COLS="30" ROWS="3"></TEXTAREA> <br>4 e8 o B/ y* V) n' _1 K3 ]
</FORM> + j" s! ]% ]! J2 n; E3 f# S
( ~5 ?0 b8 b: L( s) ?" s$ b+ k- X$ ^
★可以点击文字选取的多项选择框：4 C% \3 @9 b! ^2 a* X
大家在网上看见的一些复选框，单选钮都是要点那个小元件才能达到选择的目的的，有没有可能我们能通过点击复选框或是单选钮来达到选择这个元件的目的呢？答案是显然的，用<label>标识就可以达到这一目标，被<lable></lable>所包括的字就是可点击的了。下面有一个示例，同样是用了这个标识符。* o8 g+ |# h4 u
经常来这里 偶尔来看看 * D( }0 G0 {9 b. i! N6 j
1 b U1 j0 e6 {8 x4 T
下面是这个示例的HTML源码：
2 y9 {% T! M: {0 C, T9 m<form>! I8 K1 N/ r" \. l$ x- O! _& b, K
<input type="CHECKBOX" id="check1" value="often" name="checkoften">5 s( }& }# f/ ~/ E% h
<label for="check1" >经常来这里</label> 1 X, U9 P& Z; ]6 d4 ]
<input type="CHECKBOX" id="check2" value="seldom" name="checkseldom">
- H1 N7 Z3 U {( ?. x <label for="check2" >偶尔来看看</label> </form>
2 G! X& L& B5 u3 B6 Y2 U' m; H' ~, ]) }% v: P. |5 [6 J
★带热键的多项选择框：
0 b, ^$ ^2 X3 C) Y* e4 c, t7 V6 K
! N7 [) ]6 D. l. n' p* E( U+ \于是，一个带热键的改良型复选框就产生了。
9 P0 B& ~7 k) h, o 经常来这里（H） 偶尔来看看（L） 5 R. L1 Y+ _% H& b7 ^ r6 A
<form>
1 I- [2 x2 Q7 B3 D( r <input type="CHECKBOX" id="check3" value="often" name="checkoften">& A; b. ^& }" \/ a" m
<label for="check3" ACCESSKEY="H">经常来这里（<U>H</U>）</label> 0 U* S, V6 W8 a4 W
<input type="CHECKBOX" id="check4" value="seldom" name="checkseldom">
+ h! ?8 g. L& t: h <label for="check4" ACCESSKEY="L">偶尔来看看（<U>L</U>）</label> </form>
" m4 u9 ^& ?7 t* K" x" k3 C) ]; _: h$ E7 {0 c% J/ I7 c6 h
怎么样？这就是<label>的妙用，它可以用在别的HTML元件上，会有不同的功能哦。 |
发表于 2006-11-9 13:31
|