±íµ¥
Ò» ¸ö HTML ±í µ¥ ÊÇ ÎÄ µµ ÖÐ °ü º¬ ±ê ×¼ ÄÚ ÈÝ, ±ê ×¢ ºÍ ½Ð ×ö ¿Ø¼þ
µÄ ÌØ Êâ Ôª ËØ µÄ ²¿ ·Ö. ¿Ø ¼þ Ïì Ó¦ ²¢ ½Ó ÊÜ Óà »§ Êä Èë. Óà »§ ͨ
³£ ͨ ¹ý Êä Èë ÎÄ ×Ö, Ñ¡ Ôñ ²Ë µ¥ Ìõ Ä¿ µÈ À´ "Íê ³É" ±í µ¥, È» ºó
Ìá ½» ±í µ¥ ÒÔ ¹© ´¦ Àí. Ìá ½» µÄ ±í µ¥ ¿É ÒÔ Í¨ ¹ý µç ×Ó ÓÊ ¼þ ·¢
ËÍ ¸ø ±ð ÈË Ò² ¿É ÒÔ ·¢ ËÍ ¸ø ³Ì ʽ À´ ´¦ Àí.
¿Ø ¼þ ¿É ÒÔ ÊÇ ¸´ Ñ¡ ¿ò, µ¥ Ñ¡ ¿ò, ±ê Ç©, ²Ë µ¥ µÈ. ÿ ¸ö ¿Ø ¼þ
¿É ÒÔ ·Ö Åä Ò» ¸ö Ãû ³Æ. µ± ±í µ¥ ±» Ìá ½» ʱ, Ò» Щ ¿Ø ¼þ (È¡¾öÓÚËüÃǵÄ״̬)
µÄ Ãû ³Æ ºÍ µ± ǰ Öµ Ëæ ±í µ¥ Ò» Æð ·¢ ËÍ. Ìá ½» µÄ Öµ µÄ ×Ô È»
Êô ÐÔ È¡ ¾ö ÓÚ ¿Ø ¼þ (Àý Èç: ÎÄ ±¾ ¿ò µÄ Öµ ÊÇ Êä Èë µÄ ÎÄ ±¾).
×¢ Òâ: Õâ ·Ý Ëµ Ã÷ Êé ÔÚ ±íµ¥ÏÔʾÎÊÌâ
ÖÐ °ü º¬ ÁË ¸ü ¶à µÄ ¹Ø ÓÚ ±í µ¥ µÄ ϸ ½Ú ЊϢ. ¹Ø ÓÚ ¶Ô ±í ¸ñ ÄÚ ÈÝ ±à Âë µÄ ÐŠϢ ÒÑ ¾ ´ò Ëã ¼Ó ÔÚ Õâ ·Ý ²Ý °¸
ÒÔ ºó µÄ °æ ±¾ ÖÐ.
FORM ÔªËØ
<!ELEMENT FORM - - %block -(FORM)>
<!ATTLIST FORM
%attrs; -- %coreattrs, %i18n, %events --
action %URL #REQUIRED -- server-side form handler --
method (GET|POST) GET -- HTTP method used to submit the form --
enctype %ContentType; "application/x-www-form-urlencoded"
onsubmit %Script #IMPLIED -- the form was submitted --
onreset %Script #IMPLIED -- the form was reset --
target CDATA #IMPLIED -- where to render result --
accept-charset CDATA #IMPLIED -- list of supported charsets --
>
¿ª ʼ ±ê ¼Ç: Ðè Òª, ½á Êø ±ê ¼Ç: Ðè Òª
ÌØ ÐÔ ¶¨ Òå
- action = url
- Õâ ¸ö ÌØ ÐÔ Ö¸ ¶¨ Ò» À´ ´¦ Àí Ìá ½» ±í µ¥ µÄ ¸ñ ʽ. Ëü ¿É ÒÔ ÊÇ Ò» ¸ö HTTP URL (Ìá ½» ¸ø ³Ì ʽ)
»ò Ò» ¸ö µç×ÓÓʼþ(MAILTO) URL (ÓÊ
µÝ Õâ ¸ö ±í µ¥).
- method = get|post
- Õâ ¸ö ÌØ ÐÔ Ö¸ Ã÷ ÄÄ ÖÖ HTTP ·½ ·¨ ½« ±» Óà À´ Ìá ½» Ãû
³Æ/ Öµ ¶Ô ¸ø ±í µ¥ ´¦ Àí Õß. ¿É ÄÜ µÄ Öµ Ϊ:
- post: ʹ Óà HTTP POST ·½ ·¨. POST ·½ ·¨ ÔÚ ±í µ¥ µÄ Ö÷ ¸É °ü º¬ Ãû³Æ/Öµ ¶Ô
²¢ ÇÒ ÎÞ Ðè °ü º¬ ÓÚ action
ÌØ ÐÔ µÄ URL ÖÐ.
- get:²» ÔÞ ³É. ʹ Óà HTTP GET ·½ ·¨. GET ·½ ·¨ °Ñ Ãû³Æ/Öµ ¶Ô ¼Ó ÔÚ
action
µÄ URL ºó Ãæ ²¢ ÇÒ °Ñ РµÄ URL ËÍ ÖÁ ·þ Îñ Æ÷. Õâ ÊÇ Íù ǰ ¼æ ÈÝ µÄ ȱ Ê¡ Öµ. Õâ ¸ö Öµ ÓÉ ÓÚ ¹ú
¼Ê »¯ µÄ Ô Òò ²» ÔÞ ³É.
- enctype = cdata
- Õâ ¸ö ÌØ ÐÔ Ö¸ Ã÷ Óà À´ °Ñ ±í µ¥ Ìá ½» ¸ø ·þ Îñ Æ÷ ʱ (µ± method
Öµ Ϊ "post") µÄ »¥ Áª Íø ý Ìå ÐΠʽ (Internet Media Type, ²Î ¼û [MIMETYPES]).
Õâ ¸ö ÌØ ÐÔ µÄ ȱ Ê¡ Öµ ÊÇ "application/x-www-form-urlencoded". Öµ "multipart/form-data"
Ó¦ µ± ±» Óà ÓÚ ·µ »Ø µÄ ÎÄ µµ ÖÐ °ü º¬ Ìá ½» ÎÄ ¼þ ʱ.
- accept-charset = cdata
- Õâ ¸ö ÌØ ¶¨ Ö¸ ¶¨ ÁË Ò» ¸ö ¿É ÒÔ ±» ·þ Îñ Æ÷ ´¦ Àí Õâ ¸ö ±í µ¥ µÄ Êä Èë Êý ¾Ý ʱ ½Ó ÊÜ µÄ ×Ö·û±àÂë
ÁÐ ±í. Õâ ¸ö Öµ ÊÇ ÔÚ [RFC2045]
ÖÐ µÄ ¶¨ Òå µÄ Óà ¿Õ ¸ñ ºÍ/»ò ¶º ºÅ ·Ö ÁÐ µÄ "character" ÁÐ ±í. ·þ Îñ Æ÷ ±Ø Ðë °Ñ Õâ ¸ö ÁÐ ±í ½â ÊÍ
Ϊ ¶À Õ¼ ÁÐ ±í, ¾Í ÊÇ Ëµ ·þ Îñ Æ÷ ±Ø ÄÜ ¹» ½Ó ÊÜ Ã¿ ¸ö Ìõ Ä¿ ÊÕ µ½ ʱ µÄ µ¥ ¶À ×Ö ·û ±à Âë.
Õâ ¸ö ÌØ ÐÔ µÄ ȱ Ê¡ Öµ ÊÇ ±£ Áô ×Ö ´® "UNKNOWN". Óà »§ ´ú Àí Æ÷ ¿É ÒÔ °Ñ ´Ë Öµ ½â Òë ×÷ °ü º¬ ÔÚ
FORM Ôª ËØ
ÖÐ µÄ Óà ÓÚ ´« ËÍ ÎÄ µµ µÄ ±à Âë ·½ ʽ.
- accept = cdata
- Õâ ¸ö ÌØ ÐÔ Ö¸ Ã÷ ÁË Ò» ¸ö ·þ Îñ Æ÷ ´¦ Àí ÄÜ ¹» Õý È· ´¦ Àí Õâ ¸ö ±í µ¥ µÄ Óà ¶º ºÅ ·Ö ÁÐ µÄ MIME
¸ñ ʽ ÁÐ ±í. µ± Ìá ʾ Óà »§ Ñ¡ Ôñ Ò» ¸ö ÎÄ ¼þ ·¢ ËÍ µ½ ·þ Îñ Æ÷ ʱ (ͨ ¹ý INPUT
Ôª ËØ µÄ type="file"),
Óà »§ ´ú Àí Æ÷ ¿É ÒÔ Ê¹ Óà Õâ ЊϢ À´ ¹ý ÂË µô ²» Ò» Ö µÄ ÎÄ ¼þ.
ÔÚ Ëü ´¦ ¶¨ Òå µÄ ÌØ ÐÔ
- id, class
(¹ã·ºµÄÎĵµ±êʶ·û)
- lang (ÓïÑÔÐÅÏ¢),
dir (ÎÄ×Ö·½Ïò)
- style (ÄÚ²ã·ç¸ñÖ»ÐíÐÅÏ¢)
- title (ÔªËØ±êÌâ)
- target
(Ä¿±ê¿ò¼ÜÐÅÏ¢)
- onsubmit,
onreset,
(ÄÚ²¿Ê¼þ)
- onclick,
ondblclick,
onmousedown,
onmouseup,
onmouseover,
onmousemove,
onmouseout,
onkeypress,
onkeydown,
onkeyup
(ÄÚ²¿Ê¼þ)
FORM Ôª ËØ ×÷ Ϊ ¿Ø ¼þ
µÄ ÈÝ Æ÷. Ëü Ö¸ ¶¨ ÁË:
- ±í µ¥ µÄ ½ç Ãæ (ͨ ¹ý Ôª ËØ ÄÚ ÈÝ ¸ø ³ö).
- ½« Óà À´ ´¦ Àí Íê ³É ºÍ Ìá ½» ±í µ¥ µÄ ³Ì ʽ (action
ÌØ ÐÔ). Ϊ ÁË Ê¹ Óà Ëü ÃÇ ÊÕ µ½ µÄ ³Ì ʽ ±Ø Ðë ÄÜ ¹» ÆÊ Îö Ãû³Æ/Öµ ¶Ô.
- Óà »§ Êý ¾Ý ͨ ¹ý ÄÄ ÖÖ ·½ ʽ ËÍ µ½ ·þ Îñ Æ÷ (method
ÌØ ÐÔ).
- Ϊ ÁË ´¦ Àí Õâ ¸ö ±í µ¥ ×Ö ·û ±à Âë ·½ ʽ ±Ø Ðë ÄÜ ¹» ±» ·þ Îñ Æ÷ ½Ó ÊÜ (accept-charset
ÌØ ÐÔ). Óà »§ ´ú Àí Æ÷ ¿É ÒÔ ½¨ Òé Óà »§ µÄ accept-charset
ÌØ ÐÔ Öµ ºÍ/»ò ÓÐ ·À Ö¹ Óà »§ Êä Èë ²» ÈÏ Ê¶ µÄ ×Ö ·û µÄ ÄÜ Á¦.
Ò» ¸ö ±í µ¥ ¿É ÒÔ °ü º¬ ÎÄ ×Ö ºÍ ±ê ×¢ (¶Î Âä, ÁÐ ±í µÈ µÈ) ¾Í Ïó
ÁРʾ ÓÚ Ï µÄ ¿Ø ¼þ ÄÇ Ñù.
ÔÚ FORM Ôª ËØ ÖÐ ÈÎ
ºÎ ÌØ ÐÔ µÄ name ÌØ ÐÔ ÓРЧ ·¶ Χ ÊÇ FORM
Ôª ËØ.
ÏÂ Ãæ µÄ Àý ³Ì Ö¸ ¶¨ ÁË Ìá ½» µÄ ±í µ¥ ½« ±»
"adduser" ³Ì ʽ ´¦ Àí. Õâ ¸ö ±í µ¥ ½« ͨ ¹ý HTTP POST ·½ ·¨ ·¢ ËÍ
µ½ ³Ì ʽ.
<FORM action="http://somesite.com/prog/adduser" method="post">
...form contents...
</FORM>
ÏÂ Ãæ µÄ Àý ³Ì Õ¹ ʾ ÁË Èç ºÎ °Ñ Ò» ¸ö Ìá ½» ±í µ¥ ·¢ ËÍ µ½ Ò» ¸ö
µç ×Ó ÓÊ ¼þ µØ Ö·.
<FORM action="mailto:Kligor.T@gee.whiz.com" method="post">
...form contents...
</FORM>
¿Ø¼þ
ÏÂ Ãæ µÄ ¿Ø ¼þ Ôª ËØ ͨ ³£ ³ö ÏÖ ÓÚ Ò» ¸ö FORM
Ôª ËØ Éù Ã÷ ÖÐ. È» ¶ø, Õâ Щ Ôª ËØ µ± Óà À´ ½¨ Á¢ Óà »§ ½Ó ¿Ú ʱ Ò² ¿É ÒÔ ³ö ÏÖ ÔÚ FORM
Ôª ËØ Éù Ã÷ Íâ. Õâ ½« ÔÚ Ëµ Ã÷ Êé ÖÐ ÉÔ ºó ÌÖ ÂÛ, ÔÚ ÄÚ²¿Ê¼þ
ÕÂ ½Ú ÖÐ.
¿Ø¼þ±êÇ©
ij Щ ±í µ¥ ¿Ø ¼þ ×Ô ¶¯ Áª ϵ ±ê Ç© (ͨ ¹ý INPUT
ºÍ BUTTON ½¨ Á¢
µÄ °´ Å¥) È» ¶ø ´ó ¶à Êý ²» Õâ Ñù (ͨ ¹ý INPUT
ºÍ TEXTAREA
µÄ ÎÄ ±¾ Óò, ͨ ¹ý INPUT
½¨ Á¢ µÄ ¸´ Ñ¡ ¿ò ºÍ µ¥ Ñ¡ ¿ò ºÍ Óà SELECT
½¨ Á¢ µÄ Ôª ËØ).
¶Ô ÓÚ ÄÇ Ð© º¬ ÓÐ °µ ʽ ±ê Ç© µÄ ¿Ø ¼þ, Óà »§ ´ú Àí Æ÷ Ó¦ µ± °Ñ
value ÌØ ÐÔ Öµ ×÷ Ϊ ±ê Ç© ×Ö ´®.
¶Ô ÓÚ ÄÇ Ð© û ÓÐ °µ ʽ ±ê Ç© µÄ ¿Ø ¼þ, ×÷ Õß ±Ø Ðë ÔÚ ¿Ø ¼þ Ôª
ËØ ¶¨ Òå µÄ Ç° »ò ºó Ìá ¹© ±ê Ç©. ¾Ù Àý ˵ Ã÷ Èç ÏÂ.
INPUT ÔªËØ
<!ENTITY % InputType
"(TEXT | PASSWORD | CHECKBOX |
RADIO | SUBMIT | RESET |
FILE | HIDDEN | IMAGE | BUTTON)"
>
<!-- HSPACE and VSPACE missing due to lack of widespread support -->
<!ELEMENT INPUT - O EMPTY>
<!ATTLIST INPUT
%attrs; -- %coreattrs, %i18n, %events --
type %InputType TEXT -- what kind of widget is needed --
name CDATA #IMPLIED -- required for all but submit & reset --
value CDATA #IMPLIED -- required for radio and checkboxes --
checked (checked) #IMPLIED -- for radio buttons and check boxes --
disabled (disabled) #IMPLIED -- control is unavailable in this context --
readonly (readonly) #IMPLIED -- for text and passwd --
size CDATA #IMPLIED -- specific to each type of field --
maxlength NUMBER #IMPLIED -- max chars for text fields --
src %URL #IMPLIED -- for fields with images --
alt CDATA #IMPLIED -- description for text only browsers --
usemap %URL #IMPLIED -- use client-side image map --
align %IAlign #IMPLIED -- vertical or horizontal alignment --
tabindex NUMBER #IMPLIED -- position in tabbing order --
onfocus %Script #IMPLIED -- the element got the focus --
onblur %Script #IMPLIED -- the element lost the focus --
onselect %Script #IMPLIED -- some text was selected --
onchange %Script #IMPLIED -- the element value was changed --
accept CDATA #IMPLIED -- list of MIME types for file upload --
>
¿ª ʼ ±ê Ç©: Ðè Òª, ½á Êø ±ê Ç©: ½û Ö¹
ÌØ ÐÔ ¶¨ Òå
- type = text|password|checkbox|radio|submit|reset|file|hidden|image|button
- Õâ ¸ö ÌØ ÐÔ Ö¸ ¶¨ ÁË Òª ½¨ Á¢ µÄ Êä Èë ¿Ø ¼þ. ÎÒ ÃÇ ÔÚ
ºó Ãæ ÌÖ ÂÛ ÊäÈë¿Ø¼þ¸ñʽ . Õâ ¸ö
ÌØ ÐÔ µÄ ȱ Ê¡ Öµ ÊÇ "text".
- name = cdata
- Õâ ¸ö ÌØ ÐÔ Îª ¿Ø ¼þ Ìá ¹© Ò» ¸ö Ãû ³Æ. Õâ ¸ö Ãû ³Æ ½«
Óë ¿Ø ¼þ µÄ µ± ǰ Öµ ³É ¶Ô Èç ¹û Ôª ËØ Öµ Óë ±í µ¥ Ò» ͬ Ìá
½» µÄ »°.
- value = cdata
- Õâ ¸ö ÌØ ÐÔ Ö¸ ¶¨ ÁË ¿Ø ¼þ µÄ ³õ ʼ Öµ. Ëü ÊÇ ¿É Ñ¡ µÄ
³ý ·Ç ¿Ø ¼þ ÐΠʽ ÊÇ "radio" (Òë Õß:¼´ µ¥ Ñ¡ ¿ò).
- size = cdata
- Õâ ¸ö ÌØ ÐÔ ¸æ Ëß Óà »§ ´ú Àí Æ÷ ¿Ø ¼þ µÄ ³õ ʼ ¿í ¶È.
Õâ ¸ö ¿í ¶È Óà Ïñ ËØ ¸ø ³ö, ³ý ·Ç "text" ºÍ "password" ¿Ø
¼þ ¸ñ ʽ ÊÇ (Õû Êý µÄ) ×Ö ·û Êý Ä¿.
- maxlength = integer
- µ± ¿Ø ¼þ ¸ñ ʽ Ϊ "text" »ò "password" ʱ, Õâ ¸ö ÌØ ÐÔ Ö¸ ¶¨ µÄ ¿É ÒÔ Êä Èë µÄ ×Ö ·û µÄ ×î
´ó Á¿. Õâ ¸ö Êý Öµ ¿É ÒÔ ³¬ ¹ý Ö¸ ¶¨ µÄ size,
Õâ ¸ö Çé ¿ö Ï Óà »§ ´ú Àí Æ÷ ¾Í µ± Ìá ¹© Ò» ¸ö ¹ö ¶¯ ½á ¹¹. Õâ ¸ö ÌØ ÐÔ µÄ ȱ Ê¡ Öµ ÊÇ ¶Ô Êý Á¿ û ÓÐ ÏÞ
ÖÆ µÄ.
- checked
- µ± ¿Ø ¼þ ¸ñ ʽ Ϊ "radio" (µ¥ Ñ¡ ¿ò) ʱ, Õâ ¸ö ²¼ ¶û Öµ
Ö¸ ¶¨ ÁË µ¥ Ñ¡ ¿ò ±» Ñ¡ ÖÐ. Õâ ¸ö ÌØ ÐÔ ±Ø Ðë ±» Æä Ëü µÄ
¿Ø ¼þ ¸ñ ʽ ºö ÂÔ.
- src = url
- µ± ¿Ø ¼þ ¸ñ ʽ Ϊ "image" ʱ, Õâ ¸ö ÌØ ÐÔ Ö¸ ¶¨ µÄ Óà À´
×° ÊΠͼ °¸ ʽ Ìá ½» °´ Å¥ µÄ ͼ °¸ λ ÖÃ.
ÔÚ Ëü ´¦ ¶¨ Òå µÄ ÌØ ÐÔ
- id, class
(¹ã·ºµÄÎĵµ±êʶ·û)
- lang (ÓïÑÔÐÅÏ¢),
dir (ÎÄ×Ö·½Ïò)
- title (ÔªËØ±êÌâ)
- style (ÄÚ²ã·ç¸ñÖ»ÐíÐÅÏ¢)
- alt (ÂÖÌæÎÄ×Ö)
- align
(¶ÔÆë·½Ê½)
- accept
(·þÎñÆ÷µÄºÏ·¨µÄ MIME ¸ñʽ)
- readonly
(Ö»¶ÁÊäÈë¿Ø¼þ)
- disabled
(¿Ø¼þ½ûÖ¹ÊäÈë)
- tabindex
(ÖÆ±í¼üµ¼º½)
- usemap
(¿Í»§¶ËͼÏñÓ³Ïñ)
- onfocus,
onblur,
onselect,
onchange
(ÄÚ²¿Ê¼þ)
- onclick,
ondblclick,
onmousedown,
onmouseup,
onmouseover,
onmousemove,
onmouseout,
onkeypress,
onkeydown,
onkeyup
(ÄÚ²¿Ê¼þ)
ͨ ¹ý INPUT
Ôª ËØ ¶¨ Òå µÄ ¿Ø ¼þ µÄ ×Ô È» Êô ÐÔ È¡ ¾ö ÓÚ type
ÌØ ÐÔ µÄ Öµ.
ÊäÈë¸ñʽ
INPUT Ôª ËØ µÄ type
ÌØ ÐÔ ¶¨ Òå ÁË ÄÄ ÖÖ ¿Ø ¼þ ½« ±» ½¨ Á¢.
- text
- Õâ ¸ö ¸ñ ʽ ½¨ Á¢ Ò» ¸ö µ¥ ÐÐ ÎÄ ±¾ ¿ò. Õâ ¸ö ͨ ¹ý ÎÄ ±¾ ¿ò
¿ò Ìá ½» µÄ Öµ ÊÇ Êä Èë µÄ ÎÄ ×Ö.
- password
- Èç ͬ "text", µ« Õâ ¸ö ¿Ø ¼þ µÄ Êä Èë ÎÄ ×Ö Í¨ À´ Ò» ÖÖ Òþ
²Ø ×Ö ·û µÄ ·½ ʽ À´ äÖ È¾ (Èç Ò» ϵ ÁÐ ÐÇ ºÅ). Õâ ¸ö ¿Ø ¼þ ÓÃ
ÓÚ ´ó С д Ïà ¹Ø µÄ Èç ÃÜ Âë µÄ Êä Èë. Õâ ¸ö ͨ ¹ý ÃÜ Âë ¿Ø ¼þ
Ìá ½» µÄ Öµ ÊÇ Êä Èë µÄ ÎÄ ×Ö (²¢ ·Ç äÖ È¾ µÄ ¶« Î÷).
- checkbox
- Ò» ¸ö ¸´ Ñ¡ ¿ò ÓÐ Ò» ¸ö ´ò¿ª/¹Ø±Õ ¿ª ¹Ø. µ± ¿ª ¹Ø ´ò ¿ª ʱ,
¸´ Ñ¡ ¿ò µÄ Öµ ÊÇ "active". µ± ¿ª ¹Ø ¹Ø ±Õ ʱ, Õâ ¸ö Öµ ÊÇ Ôò
û ÓÐ ¼¤ »î. ¸´ Ñ¡ ¿ò µÄ Öµ Ö» ÓÐ ÔÚ ¸´ Ñ¡ ¿ò ±» Ñ¡ ÖРʱ Ìá ½».
Êý ¸ö ÔÚ Í¬ Ò» ¸ö ±í µ¥ ÖÐ µÄ ¸´ Ñ¡ ¿ò ¿É ÒÔ Ê¹ Óà ͬ Ò» ¸ö Ãû
³Æ. ÔÚ Ìá ½» ʱ, ÿ Ò» ¸ö "´ò ¿ª" µÄ ¾ß ÓÐ Ïà ͬ Ãû ³Æ µÄ ¸´ Ñ¡
¿ò ʹ Óà Ïà ͬ µÄ Ãû ³Æ ×é ¼þ Ìá ½» Ò» ¸ö Ãû³Æ/Öµ ¶Ô. Õâ ÔÊ Ðí
Óà »§ ´ú Àí Æ÷ ¶Ô ¸ø ¶¨ µÄ Êô ÐÔ Ñ¡ Ôñ ³¬ ¹ý Ò» ¸ö µÄ Öµ.
- radio
- Ò» ¸ö µ¥ Ñ¡ ¿ò ÊÇ Ò» ¸ö ´ò¿ª/¹Ø±Õ ¿ª ¹Ø. µ± Õâ ¸ö ¿ª ¹Ø ´ò
¿ª ʱ, Õâ ¸ö µ¥ Ñ¡ ¿ò µÄ Öµ ÊÇ "active". µ± ¿ª ¹Ø ¹Ø ±Õ ʱ, Õâ
¸ö Öµ Ôò û ÓÐ ¼¤ ¼â. µ¥ Ñ¡ ¿ò µÄ Öµ Ö» ÓÐ ÔÚ ¿ª ¹Ø ´ò ¿ª ʱ Ìá
½».
Êý ¸ö ÔÚ Í¬ Ò» ¸ö ±í µ¥ µÄ µ¥ Ñ¡ ¿ò ¿É ÒÔ ÓÐ Ò» ¸ö Ãû ³Æ. È»
¶ø, Ëü Щ °´ Å¥ ÖÐ ÔÚ Í¬ Ò» ¸ö ʱ ¿Ì Ö» ÓÐ Ò» ¸ö ¿É ÒÔ ±» "´ò
¿ª". ÔÚ Ä³ ¸ö Éè ¶¨ Ϊ "´ò ¿ª" µÄ ʱ ºò, Ëù ÓÐ Ïà ¹Ø µÄ °´ Å¥
¶¼ ÊÇ "¹Ø ±Õ". Òò ´Ë, ¶Ô ÓÚ Ïà ¹Ø µ¥ Ñ¡ °´ Å¥, Ö» ÓÐ Ò» ¸ö Ãû³Æ/Öµ
¶Ô ±» Ìá ½».
- submit
- ½¨ Á¢ Ò» ¸ö Ìá ½» °´ Å¥. µ± Õâ ¸ö °´ Å¥ ±» Óà »§ ¼¤ »î ʱ, ±í µ¥ ±» Ìá ½» µ½ ÔÚ È« ¾Ö FORM
Ôª ËØ µÄ action
Ö¸ ¶¨ µÄ λ ÖÃ.
Ò» ¸ö ±í µ¥ ¿É ÒÔ °ü º¬ Ò» ¸ö ÒÔ ÉÏ µÄ Ìá ½» °´ Å¥. Ö» ÓÐ Ò»
¸ö ¼¤ »î µÄ Ãû³Æ/Öµ ¶Ô Óë ±í µ¥ Ò» Æð ±» Ìá ½».
- image
- ½¨ Á¢ Ò» ¸ö ͼ Ïñ »¯ µÄ submit °´ Å¥. src
ÌØ ÐÔ µÄ Öµ Ö¸ ¶¨ ÁË ½« ÐÞ ÊÎ °´ Å¥ µÄ ͼ Ïñ µÄ URL. ij Щ Óà »§ ¿É ÄÜ ÎÞ ·¨ ¿´ µ½ Õâ Щ ͼ Ïñ. ÎÒ ÃÇ Ç¿ ÁÒ
½¨ Òé ͨ ¹ý Ìá ¹© alt
ÌØ ÐÔ Öµ À´ Ìá ¹© Ò» ¸ö ͼ Ïñ µÄ ÂÖ Ìæ ÎÄ ×Ö.
µ± Ò» ¸ö ¶¨ λ ×° Öà ÔÚ Í¼ Ïñ ÉÏ µ¥ »÷ µÄ ʱ ºò, ±í µ¥ ±» Ìá
½» ²¢ ÇÒ Î» Öà ±» ´« ËÍ µ½ ·þ Îñ Æ÷. x Öµ ÊÇ ´Ó ͼ Ïñ µÄ ×ó Ãæ
¿ª ʼ µÄ ÒÔ Ïñ ËØ Ϊ µ¥ λ µÄ ³ß ´ç, ¶ø y Öµ ÊÇ ´Ó ͼ Ïñ µÄ ¶¥
¶Ë ¿ª ʼ µÄ ÒÔ Ïñ ËØ Ϊ µ¥ λ µÄ ³ß ´ç. Õâ Ìá ½» µÄ Êý Öµ °ü º¬
name.x=x-value ºÍ name.y=y-value ʱ,
Õâ Àï µÄ "name" ÊÇ name ÌØ ÐÔ Öµ, ¶ø x-value
ºÍ y-value ÊÇ x ºÍ y ×ø ±ê ¸÷ ×Ô µÄ Öµ.
Èç ¹û ·þ Îñ Æ÷ ¸ù ¾Ý µ¥ »÷ µÄ λ Öà ²É Óà ²» ͬ µÄ ¶Ô ´ý, ʹ
Óà ·Ç ͼ °¸ »¯ ä¯ ÀÀ Æ÷ µÄ Óà »§ ½« ʧ È¥ ÓÅ ÊÆ. ÓÉ ÓÚ Õâ ¸ö Ô
Òò, ½¨ Òé Äã ¿¼ ÂÇ ÂÖ Ìæ ; ¾¶:
- ʹ Óà ¶à ¸ö Ìá ½» °´ Å¥ (ÿ ¸ö ¶¼ ÓÐ Æä ×Ô Éí µÄ Í¼ Ïñ) À´
´ú Ìæ Ò» ¸ö ¼ò µ¥ µÄ ͼ °¸ Ìá ½» °´ Å¥. Äã ¿É ÒÔ Ê¹ Óà ·ç ¸ñ
Ò³ À´ ¿Ø ÖÆ Õâ Щ °´ Å¥ µÄ λ ÖÃ.
- Óë ½Å ±¾ ¹² ͬ ʹ Óà һ ¸ö ¿Í»§¶ËͼÏñÓ³Ïñ.
µ± "type=image"
ʱ Ò» ¸ö ¿É ÄÜ µÄ ¹¦ ÄÜ À© Õ¹ ½« °Ñ usemap
ÌØ ÐÔ ¼Ó µ½ INPUT
Óà ×÷ ¿Í »§ ¶Ë ͼ Ïñ Ó³ Ïñ . ¶Ô Ó¦ ÓÚ µ¥ »÷ λ Öà µÄ AREA
Ôª ËØ ½« ÓÐ Öú ÓÚ °Ñ Öµ ´« µ½ ·þ Îñ Æ÷. Ϊ ÁË ±Ü Ãâ Ðë Òª ÐÞ ¸Ä ·þ Îñ Æ÷ ½Å ±¾ µÄ ±Ø Òª, Ëü ¿É ±» ÊÊ µ± µØ À©
Õ¹ AREA À´ Ìá ¹©
x ºÍ y Öµ À´ Óë INPUT
Ôª ËØ ͬ ʱ ʹ ÓÃ.
- reset
- ½¨ Á¢ Ò» ¸ö ¸´ λ °´ Å¥ (ÎÒ ¾ ³£ Óà "ÖØ Ìî" À´ ±ê ʶ Õâ ¸ö
°´ Å¥). µ± Õâ ¸ö °´ Ť ±» Óà »§ ¼¤ »î ʱ, ±í µ¥ ÖÐ µÄ Ëù ÓÐ ¿Ø
¼þ ±» ÖØ Éè Ϊ ͨ ¹ý Ëü ÃÇ µÄ value Ö¸ ¶¨ µÄ ³õ ʼ Öµ.
¸´ λ °´ Å¥ µÄ Ãû³Æ/Öµ ²» Óë ±í µ¥ Ò» Æð Ìá ½».
- button
- ½¨ Á¢ µÄ °´ Å¥ û ÓРȱ Ê¡ ÐРΪ. °´ Ť ÐРΪ ͨ ¹ý Áª ϵ ¿Í
»§ ¶Ë °´ Å¥ Ê ¼þ À´ ¶¨ Òå (Èç µ¥ »÷ °´ Å¥). value ÌØ
ÐÔ µÄ Öµ ±» Óà ×÷ °´ Å¥ µÄ ±ê Ç©.
Àý Èç, Ï ÁÐ µÄ Éù Ã÷ µ± °´ Å¥ ±» ¼¤ »î ʱ Òý Æð ±» ½Ð ×ö µÄ
verify
µÄ º¯ Êý ±» Ö´ ÐÐ. Õâ ¸ö ½Å ±¾ ÊÇ
SCRIPT
Ôª ËØ ¶¨ Òå µÄ.
<INPUT type="button" value="Click Me" onclick="verify()">
Çë ²Î ¼û ÄÚ²¿Ê¼þ ÕÂ
½Ú »ñ µÃ ¸ü ¶à µÄ ¹ØÓÚ ½Å ±¾ ºÍ Ê ¼þ µÄ ЊϢ.
- hidden
- ½¨ Á¢ Ò» ¸ö ²» ±» Óà »§ ´ú Àí Æ÷ äÖ È¾ µÄ Ôª ËØ. È» ¶ø, Ôª
ËØ µÄ Ãû ³Æ ºÍ Öµ »¹ ÊÇ Óë ±í µ¥ Ò» Æð Ìá ½».
Õâ ¸ö ¿Ø ¼þ ¸ñ ʽ ͨ ³£ ±» Óà À´ ±£ ´æ ¿Í»§¶Ë/·þÎñÆ÷ Ö® ¼ä µÄ
¿É ÄÜ ±» HTTP ¶ª ʧ µÄ ½» »» ЊϢ.
INPUT ¿Ø ¼þ µÄ
hidden ¸ñ ʽ ÓÐ Æä ×Ô Éí µÄ Óë ±í µ¥ Ò» Æð ´« ËÍ µÄ Öµ. ¹² ͬ °ü º¬ ÓÚ ÖÐ µÄ Ò² ²» ±» äÖ È¾ Òò
Ϊ ·ç ¸ñ ЊϢ µÄ Ô Òò. Ï ÁÐ µÄ ¿Ø ¼þ, µ± È» ²» ±» Óà »§ ´ú Àí Æ÷ äÖ È¾, ½« Óë ±í µ¥ Ò» Æð Ìá ½» Ëü ÃÇ µÄ Öµ.
<INPUT type="password" style="display:none"
name="invisible-password"
value="mypassword">
- file
- ÏÔ ²» Óà »§ Ò» ¸ö ÎÄ ¼þ Ãû ³Æ. µ± Õâ ¸ö ±í µ¥ ±» ¼¤ »î ʱ,
ÎÄ ¼þ ¿Ø ¼þ Èç ͬ Æä Ëü Óà »§ Êä Èë Ò» °ã ±» Ìá ½» µ½ ·þ Îñ
Æ÷.
Óà »§ ´ú Àí Æ÷ ¾Í µ± °Ñ Õâ Щ ÎÄ ¼þ ѹ Ëõ ·â ×° Ϊ Ò» ¸ö MIME multipart ÎÄ µµ (²Î ¼û [RFC2045]).
Õâ ¸ö ½á ¹¹ °Ñ ÿ ¸ö ÎÄ ¼þ ÒÔ Ò» ÖÖ MIME multipart µÄ ¸ñ ʽ ѹ Ëõ ·â ×° °Ñ Õû Ìå ´« ËÍ ¸ø HTTP. ÿ
¸ö Ö÷ ¸É ²¿ ·Ö ¿É ÒÔ ±» ±ê Ç© Ϊ Ò» ¸ö Áª ϵ ÓÚ "Content-Type" µÄ ¸ñ ʽ, °ü À¨ Èç ¹û Ðè Òª Ò» ¸ö "charset"
²Î Êý À´ Ö¸ ¶¨ ×Ö ·û ±à Âë.
ÏÂ Ãæ µÄ Àý ³Ì HTML Ƭ ¶Ï ¶¨ Òå ÁË Ò» ¸ö ¼ò µ¥ ±í µ¥ ÔÊ Ðí Óà »§ Êä Èë Ãû,ÐÕ, µç
×Ó ÓÊ ¼þ µØ ÆðÂë, ÒÔ ¼° ÐÔ ±ð. µ± Ìá ½» °´ Å¥ ±» ¼¤ »î ʱ, Õâ ¸ö ±í µ¥ ±» ËÍ µ½ ÒÔ
action
Ö¸ ¶¨ µÄ ³Ì ʽ..
<FORM action="http://somesite.com/prog/adduser" method="post">
<P>
First name: <INPUT type="text" name="firstname"><BR>
Last name: <INPUT type="text" name="lastname"><BR>
email: <INPUT type="text" name="email"><BR>
<INPUT type="radio" name="sex" value="Male"> Male<BR>
<INPUT type="radio" name="sex" value="Female"> Female<BR>
<INPUT type="submit" value="Send"> <INPUT type="reset">
</FORM>
Õâ ¸ö ±í µ¥ »á ±» Èç Ï äÖ È¾:
ÔÚ
LABEL
Ôª ËØ µÄ ²¿ ·Ö, ÎÒ ÃÇ ¾ö ¶¨ ±ê ×¢ ±ê Ç© Ϊ "First name".
ÏÂ Ãæ µÄ ÁÐ ³Ì Õ¹ ʾ ÁË Ò» ¸ö Óà »§ Ö¸ ¶¨ ÎÄ
¼þ µÄ ÄÚ ÈÝ Èç ºÎ Óë ±í µ¥ Ò» Æð ±» Ìá ½». Õâ ¸ö Àý ³Ì »ù ÓÚ
[RFC1867]
µÄ Àý ³Ì.
ÔÚ ´Ë Àý ÖÐ, Óà »§ ±» Ìá ʾ Êä Èë ½« ÓÚ ±í µ¥ Ò» Æð Ìá ½» µÄ Ò» ¸ö ÎÄ ¼þ ºÍ Ò» ´® ÎÄ ¼þ Ãû ÁÐ ±í. ͨ ¹ý Ö¸
¶¨ enctype
Öµ Ϊ "multipart/form-data", ÿ ¸ö ÎÄ ¼þ µÄ ÄÚ ÈÝ ¾ù ÔÚ ´æ ·Å ÓÚ Ò» ¸ö multipart ÎÄ µµ µÄ µ¥
¶À µÄ ²¿ ·Ö ÖÐ.
<FORM action="http://server.dom/cgi/handle"
enctype="multipart/form-data"
method="post">
What is your name? <INPUT type="text" name="name_of_sender">
What files are you sending? <INPUT type="file" name="name_of_files">
</FORM>
Çë ²Î ÔÄ
[RFC1867]
À´ »ñ µÃ ¸ü ¶à µÄ ¹Ø ÓÚ ÎÄ ¼þ Ìá ½» µÄ ЊϢ.
ISINDEX ÔªËØ
ISINDEX ÊÇ ²» ÔÞ ³É µÄ. Óà »§ Ó¦ µ± ʹ Óà INPUT
Ôª ËØ À´ ´ú Ìæ Ëü.
<!ELEMENT ISINDEX - O EMPTY>
<!ATTLIST ISINDEX
%coreattrs; -- id, class, style, title --
%i18n; -- lang, dir --
prompt CDATA #IMPLIED -- prompt message -->
¿ª ʼ ±ê ¼Ç: Ðè Òª, ½á Êø ±ê ¼Ç: ½û Ö¹
ÌØ ÐÔ ¶¨ Òå
- prompt = cdata
- ²» ÔÞ ³É. Õâ ¸ö ÌØ ÐÔ Ö¸ ¶¨ ÁË Êä Èë Óò µÄ Ìá ʾ ×Ö
·û ´®.
ISINDEX
Ôª ËØ ʹ µÃ Óà »§ ´ú Àí Æ÷ Ìá ʾ Óà »§ Êä Èë Ò» ¸ö ¼ò µ¥ µÄ ÐÐ (ÔÊ Ðí ÈÎ Òâ Êý Á¿ µÄ ×Ö ·û). Óà »§ ´ú Àí Æ÷ »á ʹ
ÓÃ
prompt ÌØ ÐÔ
×÷ Ϊ Ìá ʾ µÄ ±ê Ìâ.
²» ÔÞ
³É Àý ³Ì:
ÏÂ Ãæ µÄ
ISINDEX
Éù Ã÷:
<ISINDEX prompt="Enter your search phrase: ">
µÈ ͬ ÓÚ ÏÂ Ãæ µÄ
INPUT
Éù ʱ:
<FORM action="..." method="post">
Enter your search phrase: <INPUT type="text">
</FORM>
ISINDEX µÄ Óï Òå ÎÊ Ìâ. Ä¿ ǰ, Ö» ÓÐ µ± ±à Âë ÎÄ µ± µÄ »ù
URL ÊÇ Ò» ¸ö HTTP URL ʱ ISINDEX
ÓÐ Æä Íê ÉÆ ¶¨ Òå µÄ Óï Òå. ÔÚ Êµ ¼ù ÖÐ, ÓÉ ÓÚ Ã» ÓÐ Æä Ëü µÄ ¿É Óà ÓÚ URL ½á ¹¹ µÄ ²» ͬ ×Ö ·û ¼¯, Êä Èë ×Ö ´®
ÊÜ Latin-1 µÄ ÏÞ ÖÆ .
BUTTON ÔªËØ
<!ELEMENT BUTTON - -
(%inline | %blocklevel)* -(A | %formctrl | FORM | ISINDEX | FIELDSET)>
<!ATTLIST BUTTON
%attrs; -- %coreattrs, %i18n, %events --
name CDATA #IMPLIED -- for scripting/forms as submit button --
value CDATA #IMPLIED -- gets passed to server when submitted --
type (submit|reset) #IMPLIED -- for use as form submit/reset button --
disabled (disabled) #IMPLIED -- control is unavailable in this context --
tabindex NUMBER #IMPLIED -- position in tabbing order --
onfocus %Script #IMPLIED -- the element got the focus --
onblur %Script #IMPLIED -- the element lost the focus --
>
¿ª ʼ ±ê ¼Ç: Ðè Òª, ½á Êø ±ê ¼Ç: Ðè Òª
ÌØ ÐÔ ¶¨ Òå
- name = cdata
- Õâ ¸ö ÌØ ÐÔ Îª °´ Å¥ ·Ö Åä Ò» ¸ö Ãû ³Æ.
- value = cdata
- Õâ ¸ö ÌØ ÐÔ Îª °´ Å¥ ·Ö Åä Ò» ¸ö Öµ.
- type = button|submit|reset
- Õâ ¸ö ÌØ ÐÔ Éù Ã÷ ÁË °´ Å¥ ÐΠʽ. µ± Õâ ¸ö ÌØ ÐÔ Ã» ÓÐ
±» Éè ¶¨ ʱ, Õâ ¸ö °´ Å¥ ÐРΪ ÊÇ Î´ ¶¨ Òå µÄ . ¿É ÄÜ µÄ Öµ
Ϊ:
- button: ½¨ Á¢ Ò» ¸ö ´ò Ëã ¼¤ ·¢ ½Å ±¾ µÄ °´
Å¥.
- submit: ½¨ Á¢ Ò» ¸ö Ìá ½» Õû ·Ý ±í µ¥ µÄ °´
Å¥. Õâ ÊÇ È± Ê¡ Öµ.
- reset: ½¨ Á¢ Ò» ¸ö ¸´ λ Õû ·Ý ±í µ¥ µÄ °´ Å¥.
ÔÚ Ëü ´¦ ¶¨ Òå µÄ ÌØ ÐÔ
- disabled
(¿Ø¼þ½ûÖ¹ÊäÈë)
- tabindex
(ÖÆ±í¼üµ¼º½)
- usemap
(¿Í»§¶ËͼÏñÓ³Ïñ)
- onfocus,
onblur
(ÄÚ²¿Ê¼þ)
- onclick,
ondblclick,
onmousedown,
onmouseup,
onmouseover,
onmousemove,
onmouseout,
onkeypress,
onkeydown,
onkeyup
(ÄÚ²¿Ê¼þ)
Ò» ¸ö ¸ñ ʽ Ϊ "sbumint" µÄ
BUTTON
Ôª ËØ Óë Ò» ¸ö ¸ñ ʽ Ϊ "submit" µÄ
INPUT
Ôª ËØ Ïà µ± ½ü ËÆ. Ëü ÃÇ Á½ Õß ¶¼ Òý Æð ±í µ¥ µÄ Ìá ½», µ«
BUTTON
Ôª ËØ ÔÊ Ðí ¸ü ·á ¸» µÄ Õ¹ ÏÖ ¿É ÄÜ ÐÔ.
Ò» ¸ö ¸ñ ʽ Ϊ "submit" ÇÒ ÄÚ ÈÝ Îª Ò» ÕŠͼ Ïñ (Èç IMG
Ôª ËØ) µÄ BUTTON
Ôª ËØ ·Ç ³£ ½ü ËÆ ÓÚ Ò» ¸ö ¸ñ ʽ Ϊ "image" µÄ INPUT
Ôª ËØ. Á½ Õß ¶¼ Òý Æð ±í µ¥ µÄ Ìá ½», µ« Ëü ÃÇ µÄ ±í ÏÖ ²» ͬ. ÔÚ Õâ ÖÖ ÉÏ Ï ÎÄ ÖÐ, Ò» ¸ö INPUT
Ôª ËØ ±» ´ò Ëã ×÷ Ϊ Ò» ¸ö "flat" ͼ Ïñ äÖ È¾, ¶ø Ò» ¸ö BUTTON
±» ´ò Ëã ×÷ Ϊ Ò» ¸ö °´ Å¥ äÖ È¾ (Àý Èç µ± µ¥ »÷ ʱ µÄ »º ¶¯ ºÍ ÉÏ/Ï Òõ Ó°).
ÏÂ Ãæ µÄ Àý ³Ì ͨ ¹ý
BUTTON
°´ Å¥ ʵ Àý ´ú Ìæ ½¨ Á¢ Ìá ½» ºÍ ¸´ λ °´ Å¥ µÄ
INPUT
Ôª ËØ À´ À© Õ¹ ÁË Ç° Àý. Õâ ¸ö °´ Å¥ ͨ ¹ý
IMG
Ôª ËØ À´ °ü º¬ ͼ Ïñ.
<FORM action="http://somesite.com/prog/adduser" method="post">
<P>
First name: <INPUT type="text" name="firstname"><BR>
Last name: <INPUT type="text" name="lastname"><BR>
email: <INPUT type="text" name="email"><BR>
<INPUT type="radio" name="sex" value="Male"> Male<BR>
<INPUT type="radio" name="sex" value="Female"> Female<BR>
<BUTTON name="submit" value="submit" type="submit">
Send<IMG src="/icons/wow.gif" alt="wow"></BUTTON>
<BUTTON name="reset" type="reset">
Reset<IMG src="/icons/oops.gif" alt="oops"></BUTTON>
</FORM>
Èç ¹û Ò» ¸ö
BUTTON
Óë
IMG Ôª ËØ Ò» Æð ʹ
ÓÃ. ÎÒ ÃÇ ½¨ Òé ²É ÓÃ
IMG
Ôª ËØ µÄ
alt ÌØ ÐÔ À´
Ìá ¹© Ò» ¸ö Ãè Êö ¸ø ¿´ ²» µ½ Õâ ¸ö ͼ Ïñ µÄ Óà »§.
°Ñ Ò» ¸ö ͼ Ïñ Ó³ Ïñ Óë Ò» ¸ö ×÷ Ϊ BUTTON
Ôª ËØ ÄÚ ÈÝ µÄ IMG
Áª ϵ Æð À´ ÊÇ ·Ç ·¨ µÄ.
·Ç ·¨ Àý
³Ì:
ÏÂ Ãæ µÄ ²» ÈÏ Îª ÊÇ ºÏ ·¨ µÄ HTML
<BUTTON>
<IMG src="foo.gif" usemap="...">
</BUTTON>
Ò» ¸ö ¸ñ ʽ Ϊ "reset" µÄ BUTTON
Ôª ËØ Óë Ò» ¸ö ¸ñ ʽ Ϊ "reset" µÄ INPUT
Ôª ËØ Ïà µ± ½ü ËÆ. Á½ ÖÖ Çé ¿ö ¶¼ ¿Ø ÖÆ ÖØ Р»ñ µÃ ³õ ʼ Öµ, µ« BUTTON
Ôª ËØ Ô¼ Ðí ¸ü ·á ¸» µÄ Õ¹ ÏÖ.
BUTTON Ôª ËØ Ò²
ÄÜ ¹» Óë ½Å ±¾ ¹² ͬ ʹ ÓÃ, ÔÚ Õâ ÖÖ Çé ¿ö Ï Ëü µÄ type
Ó¦ µ± Ϊ "button". µ± Õâ Ñù µÄ Ò» ¸ö °´ Å¥ ±» ¼¤ »î ʱ, Ò» ¸ö ¿Í »§ ¶Ë ½Å ±¾ ±» ÔË ÐÐ. ÎÒ ÃÇ ÔÚ Õâ ¸ö ˵ Ã÷
Êé µÄ ºó Ãæ µÄ ÄÚ²¿Ê¼þ Õ ½Ú ÌÖ ÂÛ BUTTON
µÄ ʹ ÓÃ.
SELECT ºÍOPTION
ÔªËØ
<!ELEMENT SELECT - - (OPTION+)>
<!ATTLIST SELECT
%attrs; -- %coreattrs, %i18n, %events --
name CDATA #REQUIRED -- field name --
size NUMBER #IMPLIED -- rows visible --
multiple (multiple) #IMPLIED -- default is single selection --
disabled (disabled) #IMPLIED -- control is unavailable in this context --
tabindex NUMBER #IMPLIED -- position in tabbing order --
onfocus %Script #IMPLIED -- the element got the focus --
onblur %Script #IMPLIED -- the element lost the focus --
onselect %Script #IMPLIED -- some text was selected --
onchange %Script #IMPLIED -- the element value was changed --
>
¿ª ʼ ±ê ¼Ç: Ðè Òª, ½á Êø ±ê ¼Ç: Ðè Òª
SELECT ÌØ ÐÔ ¶¨ Òå
- name = cdata
- Õâ ¸ö ÌØ ÐÔ Îª Ôª ËØ ·Ö Åä Ò» ¸ö Ãû ³Æ. Õâ ¸ö Ãû ³Æ ½«
ÔÚ ±í µ¥ ±» Ìá ½» ʱ Óë Ñ¡ ¶¨ µÄ Öµ ³É ¶Ô.
- size = integer
- Õâ ¸ö ÌØ ÐÔ Ö¸ ¶¨ ±» Óà À´ ´ú Àí Æ÷ äÖ È¾ µÄ ºá ÐÐ µÄ Êý
Ä¿. ºá ÐÐ µÄ Êý Ä¿ ¿É ÒÔ Ð¡ ÓÚ ¿É ÄÜ µÄ Ñ¡ Ôñ µÄ Êý Ä¿. Õâ
Õâ ÖÖ Çé ¿ö ÏÂ, Óà »§ ´ú Àí »á Ìá ¹© Ò» ¸ö ¹ö ¶¯ »ú ¹¹ ÒÔ
±ã ´¦ Àí Ëù ÓÐ ¿É ÄÜ µÄ Ñ¡ Ôñ.
- multiple
- µ± Éè ¶¨ µÄ ʱ ºò, Õâ ¸ö ²¼ ¶û Öµ ÔÊ Ðí ¶à Ñ¡ Ïî. ¶ø ÔÚ Ã» ÓÐ Éè ¶¨ ʱ, SELECT
Ôª ËØ Ö» ÔÊ Ðí µ¥ ¸ö Ñ¡ Ôñ. µä ÐÍ µØ, ¿É ÊÓ Óà »§ ´ú Àí Æ÷ ÒÔ ÁÐ ±í ¿ò äÖ È¾ ¶à Ñ¡ Ôª ËØ, ¶ø ÒÔ Ï À ¿ò
äÖ È¾ µ¥ Ñ¡ Ôª ËØ.
SELECT Ôª ËØ ½¨
Á¢ Ò» ¸ö ¿É ±» ¿É »§ Ñ¡ Ôñ µÄ Ñ¡ Ïî Àý ±í. ÿ ¸ö
SELECT
Ôª ËØ ±Ø Ðë °ü º¬ Ò» ¸ö Ñ¡ Ôñ. ÿ ¸ö Ñ¡ Ôñ ͨ ¹ý Ò» ¸ö
OPTION
Ôª ËØ ʵ Àý À´ Ö¸ ¶¨.
<!ELEMENT OPTION - O (#PCDATA)*>
<!ATTLIST OPTION
%attrs; -- %coreattrs, %i18n, %events --
selected (selected) #IMPLIED
disabled (disabled) #IMPLIED -- control is unavailable in this context --
value CDATA #IMPLIED -- defaults to element content --
>
¿ª ʼ ±ê ¼Ç: Ðè Òª, ½á Êø ±ê ¼Ç: ¿É Ñ¡
OPTION ÌØ ÐÔ ¶¨ Òå
- selected
- µ± Éè ¶¨ ʱ, Õâ ¸ö ²¼ ¶û ÌØ ÐÔ Ö¸ ¶¨ ÁË Õâ ¸ö Ñ¡ Ïî ÊÇ Ñ¡
¶¨ µÄ (³õ ʼ »ò ͨ ¹ý Óà »§).
- value = cdata
- Õâ ¸ö ÌØ ÐÔ Ö¸ ¶¨ ÁË Èç ¹û Õâ ¸ö Ñ¡ Ôñ ±» Ñ¡ ÖÐ ºó Óë ±í µ¥ Ìá ½» ʱ Ìá ½» µÄ Öµ. Õâ ¸ö Öµ Óë ·Ö Åä ¸ø
SELECT Ôª
ËØ µÄ namee Åä ¶Ô. Èç ¹û Õâ ¸ö ÌØ ÐÔ Ã» ÓÐ Éè ¶¨, ȱ Ê¡ Ìá ½» Öµ Ϊ OPTION
Ôª ËØ µÄ ÄÚ ÈÝ.
ÔÚ Ëü ´¦ ¶¨ Òå µÄ ÌØ ÐÔ
- id, class
(¹ã·ºµÄÎĵµ±êʶ·û)
- lang (ÓïÑÔÐÅÏ¢),
dir (ÎÄ×Ö·½Ïò)
- title (ÔªËØ±êÌâ)
- style (ÄÚ²ã·ç¸ñÖ»ÐíÐÅÏ¢)
- disabled
(¿Ø¼þ½ûÖ¹ÊäÈë)
- tabindex
(ÖÆ±í¼üµ¼º½)
- onfocus,
onblur,
onchange
(ÄÚ²¿Ê¼þ)
- onclick,
ondblclick,
onmousedown,
onmouseup,
onmouseover,
onmousemove,
onmouseout,
onkeypress,
onkeydown,
onkeyup
(ÄÚ²¿Ê¼þ)
ÓÃ »§ Ó¦ µ± °Ñ
OPTION
Ôª ËØ µÄ ÄÚ ÈÝ Óà À´ ÏÔ Ê¾ Ñ¡ Ôñ Ïî.
ÔÚ ´Ë Àý ÖÐ, ÎÒ ÃÇ ½¨ Á¢ Ò» ¸ö Ï À ¿ò ÔÊ Ðí Óà »§ À´ Ñ¡ Ôñ Æß ¸ö Èí ¼þ ×é ¼þ À´
°² ×°. µÚ Ò» ºÍ µÚ ¶þ ¸ö ×é ¼þ ³õ ʼ ±» Ñ¡ ÖÐ µ« Ò² ¿É ÒÔ ±» Óà »§ È¡ Ïû. Ê£ Ï µÄ ×é ¼þ ÔÚ ³õ ʼ ÖРû ÓÐ ±»
Ñ¡ ÖÐ.
size
ÌØ ÐÔ Ê¹ µÃ Ï À ¿ò ÏÔ Ê¾ 4 ¸ö ºá ÐÐ ¶ø Óà »§ Òª ÔÚ 7 ¸ö Ñ¡ Ïî ÖÐ Ñ¡ Ôñ. Æä Ëü µÄ Ñ¡ Ïî ¿É ÒÔ Í¨ ¹ý ¹ö ¶¯ »ú
ÖÆ À´ ʵ ÏÖ.
SELECT ºó
¸ú Ìá Ìá ½» Óë ¸´ λ °´ Å¥.
<FORM action="http://somesite.com/prog/component-select" method="post">
<SELECT multiple size="4" name="component-select">
<OPTION selected value="Component_1_a">Component_1</OPTION>
<OPTION selected value="Component_1_b">Component_2</OPTION>
<OPTION>Component_3</OPTION>
<OPTION>Component_4</OPTION>
<OPTION>Component_5</OPTION>
<OPTION>Component_6</OPTION>
<OPTION>Component_7</OPTION>
</SELECT>
<INPUT type="submit" value="Send"><INPUT type="reset">
</FORM>
µ± ±í µ¥ ±» Ìá ¹© ʱ, ÿ ¸ö Ñ¡ Ôñ Ïî Ä¿ ½« Óë "component-select" Ãû ³Æ ³É ¶Ô ²¢ Ìá ½». Ìá ½» µÄ ÿ ¸ö
OPTION
µÄ Öµ Ôò ÊÇ Ëü µÄ ·ç ÈÝ, ³ý ·Ç ÔÚ ÄÄ Àï ʹ Óà ÁË
value ÌØ ÐÔ À´ ¸² ¸Ç Ëü (Õâ Àï µÄ Ç° Á½ ¸ö ×é ¼þ).
TEXTAREA ÔªËØ
<!ELEMENT TEXTAREA - - (#PCDATA)*>
<!ATTLIST TEXTAREA
%attrs; -- %coreattrs, %i18n, %events --
name CDATA #REQUIRED
rows NUMBER #REQUIRED
cols NUMBER #REQUIRED
disabled (disabled) #IMPLIED -- control is unavailable in this context --
readonly (readonly) #IMPLIED
tabindex NUMBER #IMPLIED -- position in tabbing order --
onfocus %Script #IMPLIED -- the element got the focus --
onblur %Script #IMPLIED -- the element lost the focus --
onselect %Script #IMPLIED -- some text was selected --
onchange %Script #IMPLIED -- the element value was changed --
>
¿ª ʼ ±ê ¼Ç: Ðè Òª, ½á Êø ±ê ¼Ç: Ðè Òª
ÌØ ÐÔ ¶¨ Òå
- name = cdata
- Õâ ¸ö ÌØ ÐÔ °Ñ Ò» ¸ö Ãû ³Æ ·Ö Åä ¸ø Ôª ËØ. Õâ ¸ö Ãû ³Æ ½«
ÔÚ Ôª ËØ ±» Ìá ½» µ½ ·þ Îñ Æ÷ ʱ Óë Æä ÄÚ ÈÝ ³É ¶Ô.
- rows = integer
- Ö¸ ¶¨ ¿É ¼û µÄ ÎÄ ×Ö ÐÐ µÄ Êý Ä¿. Óà »§ Ó¦ µ± ÄÜ ¹» Êä Èë
³¬ ¹ý Õâ ¸ö Êý Á¿ µÄ ÐÐ, Ëù ÒÔ Óà »§ ´ú Àí Æ÷ Ó¦ µ± Ìá ¹© ij
Щ µ± ÄÚ ÈÝ ³¬ ¹ý ¿É ÊÓ Çø Óò ʱ ÔÚ textarea ÖÐ ¹ö ¶¯ ÄÚ ÈÝ
µÄ ·½ ·¨.
- cols = integer
- Ö¸ ¶¨ ¿É ÊÓ ×Ö ·û ¿í ¶È. Óà »§ µÄ Êä Èë Ó¦ µ± ÄÜ ¹» ±È Ö®
¸ü ³¤, Ëù ÒÔ Óà »§ ´ú Àí Æ÷ Ó¦ µ± ÔÚ Æä ÄÚ ÈÝ ³¬ ¹ý ¿É ÊÓ Çø
Óò ʱ Ìá ¹© ij Щ ¹ö ¶¯ textarea Óò ÄÚ ÈÝ µÄ ·½ ·¨. Óà »§ ´ú
Àí Æ÷ ¿É ÒÔ ¶Ô ¿É ÊÓ ÎÄ ×Ö ½ø ÐÐ ÕÛ ÐÐ À´ ±£ ³Ö ³¤ Ãû ¶ø ÎÞ
Ðè ¹ö ¶¯.
ÔÚ Ëü ´¦ ¶¨ Òå µÄ ÌØ ÐÔ
- id, class
<<<<<<< forms.src (¹ã·ºµÄÎĵµ±êʶ·û)
- lang (ÓïÑÔÐÅÏ¢),
dir (ÎÄ×Ö·½Ïò)
- title (ÔªËØ±êÌâ)
- style (ÄÚ²ã·ç¸ñÖ»ÐíÐÅÏ¢)
- readonly
(read-only input controls)
- disabled
(¿Ø¼þ½ûÖ¹ÊäÈë)
- tabindex
(ÖÆ±í¼üµ¼º½)
- onfocus,
onblur,
onselect,
onchange
(ÄÚ²¿Ê¼þ)
- onclick,
ondblclick,
onmousedown,
onmouseup,
onmouseover,
onmousemove,
onmouseout,
onkeypress,
onkeydown,
onkeyup
(ÄÚ²¿Ê¼þ)
TEXTAREA
Ôª ËØ ½¨ Á¢ Ò» ¸ö ¶à ÐÐ ÎÄ ±¾ Êä Èë ¿Ø ¼þ (Ïà ¶Ô ÓÚ µ¥ ÐÐ
INPUT
¿Ø ¼þ). Õâ ¸ö Ôª ËØ µÄ ÄÚ ÈÝ Ìá ¹© ¿Ø ¼þ Õ¹ ÏÖ µÄ ³õ ʼ ÎÄ ±¾.
Õâ ¸ö Àý ³Ì ½¨ Á¢ Ò» ¸ö
TEXTAREA
¿Ø ¼þ °ü º¬ 20 ÐÐ ºÍ 80 ÁÐ ²¢ ÇÒ ÓÐ Á½ ÐÐ ³õ ʼ ÎÄ ×Ö.
TEXTAREA
ºó ¸ú Ìá ½» ºÍ ¸´ λ °´ Å¥.
<FORM action="http://somesite.com/prog/text-read" method="post">
<TEXTAREA rows="20" cols="80">
First line of initial text.
Second line of initial text.
</TEXTAREA>
<INPUT type="submit" value="Send"><INPUT type="reset">
</FORM>
Éè ÖÃ
readonly
ÌØ ÐÔ ÔÊ Ðí ×÷ Õß ÔÚ
TEXTAREA
ÏÔ Ê¾ ²» ¿É ÐÞ ¸Ä µÄ ÎÄ ±¾. Õâ ²» ͬ ÓÚ ÔÚ ÎÄ µµ ÖРʹ Óà ±ê ×¼ ±ê ×¢ ÎÄ ±¾ Òò Ϊ
TEXTAREA
µÄ Öµ Óë ±í µ¥ Ò» Æð ±» Ìá ½».
µ± Ìá ½» Óò ÄÚ ÈÝ Ê± ½¨ Òé Óà »§ ´ú Àí Æ÷ ×ñ ÕÕ CR, LF (ASCII 10
½ø ÖÆ 13, 10) ÐÐ ½á Êø ×¼ Ôò. Ìá ½» Êý ¾Ý µÄ ×Ö ·û ¼¯ Ó¦ µ± Ϊ ISO
Latin-1, ³ý ·Ç ·þ Æ÷ Æ÷ Ô¤ ÏÈ Ö¸ ¶¨ ¿É ÒÔ Ö§ ³Ö ÂÖ Ìæ µÄ ×Ö ·û ¼¯.
LABEL ÔªËØ
<!ELEMENT LABEL - - (%inline)* -(LABEL) -- field label text -->
<!ATTLIST LABEL
%attrs; -- %coreattrs, %i18n, %events --
for IDREF #IMPLIED -- matches field ID value --
disabled (disabled) #IMPLIED -- control is unavailable in this context --
accesskey CDATA #IMPLIED -- accessibility key character --
onfocus %Script #IMPLIED -- the element got the focus --
onblur %Script #IMPLIED -- the element lost the focus --
>
¿ª ʼ ±ê ¼Ç: Ðè Òª, ½á Êø ±ê ¼Ç: Ðè Òª
ÌØ ÐÔ ¶¨ Òå
- for = control-name
- Õâ ¸ö ÌØ ÐÔ ÏÔ Ê½ µØ °Ñ ¶¨ Òå µÄ ±ê Ç© Áª ϵ µ½ Áí Ò» ¸ö ¿Ø ¼þ. Õâ ¸ö ÌØ ÐÔ µÄ Öµ ±Ø Ðë ÊÇ ÔÚ Í¬ Ò»
¸ö ÎÄ µµ ÖÐ µÄ ij Щ id
ÌØ ÐÔ µÄ Öµ. µ± Õâ ¸ö ÌØ ÐÔ ²» ´æ ÔÚ Ê±, ±ê Ç© ¶¨ Òå Óë Ëü µÄ ÄÚ ÈÝ ÓÐ ¹Ø.
ÔÚ Ëü ´¦ ¶¨ Òå µÄ ÌØ ÐÔ
- id, class
(¹ã·ºµÄÎĵµ±êʶ·û)
- lang (ÓïÑÔÐÅÏ¢),
dir (ÎÄ×Ö·½Ïò)
- title (ÔªËØ±êÌâ)
- style (ÄÚ²ã·ç¸ñÖ»ÐíÐÅÏ¢)
- disabled
(¿Ø¼þ½ûÖ¹ÊäÈë)
- accesskey
(Èȼü)
- tabindex
(ÖÆ±í¼üµ¼º½)
- onclick,onfocus,
onblur
(ÄÚ²¿Ê¼þ)
- onclick,
ondblclick,
onmousedown,
onmouseup,
onmouseover,
onmousemove,
onmouseout,
onkeypress,
onkeydown,
onkeyup
(ÄÚ²¿Ê¼þ)
LABEL
Ôª ËØ ¿É ÒÔ ±» Óà À´ ½Ó Á¬ ЊϢ µ½ Æä Ëü µÄ ¿Ø ¼þ Ôª ËØ (ÅÅ ³ý Æä Ëü
LABEL
Ôª ËØ). ±ê Ç© ¿É ÒÔ ±» Óà »§ ´ú Àí Æ÷ ÒÔ Êý ¸ö ·½ ·¨ äÖ È¾ (Èç ¿É ÊÓ µÄ, ±» Óï µ¥ »ú ¹¹ ¶Á ³ö, µÈ µÈ)
µ± Ò» ¸ö LABEL
Ôª ËØ µÃ µ½ ½¹ µã ʱ, Ëü °Ñ ½¹ µã ´« ËÍ µ½ Óë Ö® Ïà ¹Ø µÄ ¿Ø ¼þ. ²é ¼û ÏÂ Ãæ µÄ access keys
Õ ½Ú Àý ³Ì.
Ϊ ÁË ÏÔ Ê½ µØ °Ñ Ò» ¸ö ±ê Ç© Áª ϵ µ½ ¿Ø ¼þ, ²Î ¼û LABEL
µÄ for ÌØ ÐÔ.
Õâ ¸ö Àý ³Ì ½¨ Á¢ Ò» ¸ö ±í ¸ñ À´ ¶Ô Æë Á½ ¸ö
INPUT
¿Ø ¼þ ÒÔ ¼° Ïà Ó¦ µÄ ¹Ø Áª ±ê Ç©. ÿ ¸ö ±ê Ç© µ½ ÏÔ Ê½ µØ Áª ½Ó µ½ Ò» ¸ö
INPUT
Ôª ËØ.
<FORM action="..." method="post">
<TABLE>
<TR>
<TD><LABEL for="fname">First Name</LABEL>
<TD><INPUT type="text" name="firstname" id="fname">
<TR>
<TD><LABEL for="lname">Last Name</LABEL>
<TD><INPUT type="text" name="lastname" id="lname">
</TABLE>
<FORM>
Õâ ¸ö Àý ³Ì ÒÔ °ü º¬
LABEL
Ôª ËØ À© Õ¹ ÁË Ç° Àý. ×¢ Òâ
LABEL
Ôª ËØ ͨ ¹ý
id ÌØ ÐÔ Óë
INPUT
Ôª ËØ Áª ½Ó.
<FORM action="http://somesite.com/prog/adduser" method="post">
<P>
<LABEL for="firstname">First name: </LABEL><INPUT
type="text" id="firstname"><BR>
<LABEL for="lastname">Last name: </LABEL><INPUT
type="text" id="lastname"><BR>
<LABEL for="email"email: </LABEL><INPUT
type="text" id="email"><BR>
<INPUT type="radio" name="sex" value="Male"> Male<BR>
<INPUT type="radio" name="sex" value="Female"> Female<BR>
<INPUT type="submit" value="Send"> <INPUT type="reset">
</FORM>
Ò» ¸ö ÒÔ ÉÏ µÄ
LABEL
¿É ÒÔ Í¨ ¹ý
for ÌØ
ÐÔ ½¨ Á¢ ¶à ²Î ÕÕ ±» Áª ½Ó µ½ ͬ Ò» ¸ö ¿Ø ¼þ.
Ϊ ÁË Òþ ʽ µØ °Ñ Ò» ¸ö ±ê Ç© Áª ϵ µ½ Áí Ò» ¸ö ¿Ø ¼þ, À´ ¿Ø ÖÆ LABEL
µÄ ÄÚ ÈÝ. Õâ ÖÖ Çé ¿ö ÏÂ, LABEL
Ö» ¿É ÒÔ °ü º¬ Ò» ¸ö Æä Ëü ¿Ø ¼þ Ôª ËØ. ±ê Ç© ±¾ Éí ¿É ÒÔ ÔÚ Áª ϵ ¿Ø ¼þ µÄ ǰ Ãæ »ò ºó Ãæ.
ÔÚ ´Ë Àý ÖÐ, ÎÒ ÃÇ Òþ ʽ µØ °Ñ Á½ ¸ö ±ê Ç© Áª ϵ µ½ Á½ ¸ö
INPUT
Ôª ËØ. ×¢ Òâ Òþ ʽ ·½ ·¨ ×è Ö¹ ÎÒ ÃÇ ÔÚ ±í ¸ñ ÖÐ »® ·Ö ±ê Ç© ºÍ Óë Ö® Ïà ¹Ø µÄ ¿Ø ¼þ (²Î ¼û ǰ Àý).
<FORM action="..." method="post">
<LABEL>
First Name
<INPUT type="text" name="firstname">
</LABEL>
<LABEL>
<INPUT type="text" name="lastname">
Last Name
</LABEL>
</FORM>
FIELDSET ºÍLEGEND
ÔªËØ
<!--
#PCDATA is to solve the mixed content problem,
per specification only whitespace is allowed there!
-->
<!ELEMENT FIELDSET - - (#PCDATA,LEGEND,%block)>
<!ATTLIST FIELDSET
%attrs; -- %coreattrs, %i18n, %events --
>
<!ELEMENT LEGEND - - (%inline;)+>
<!ENTITY % LAlign "(top|bottom|left|right)">
<!ATTLIST LEGEND -- fieldset legend --
%attrs; -- %coreattrs, %i18n, %events --
align %LAlign; #IMPLIED -- relative to fieldset --
accesskey CDATA #IMPLIED -- accessibility key character --
>
¿ª ʼ ±ê ¼Ç: Ðè Òª, ½á Êø ±ê ¼Ç: Ðè Òª
LEGEND ÌØ ÐÔ ¶¨ Òå
align = top|bottom|left|right
Õâ ¸ö ÌØ ÐÔ Ö¸ ¶¨ ÁË ±ê Ç© Ïà ¶Ô ÓÚ Óò Éè Öà µÄ ¶Ô Æë λ
ÖÃ. ¿É ÄÜ µÄ Öµ Ϊ:
- top: ±ê Ç© ÔÚ Óò Éè ¶¨ µÄ ÉÏ ¶Ë. Õâ ÊÇ È± Ê¡ Öµ.
- bottom: ±ê Ç© ÔÚ Óò Éè ¶¨ µÄ Ï ¶Ë.
- left: ±ê Ç© ÔÚ Óò Éè ¶¨ µÄ ×ó ¶Ë.
- right: ±ê Ç© ÔÚ Óò Éè ¶¨ µÄ ÓÒ ¶Ë.
ÔÚ Ëü ´¦ ¶¨ Òå µÄ ÌØ ÐÔ
- id, class
(¹ã·ºµÄÎĵµ±êʶ·û)
- lang (ÓïÑÔÐÅÏ¢),
dir (ÎÄ×Ö·½Ïò)
- title
(ÔªËØ±êÌâ)
- style
(ÄÚ²ã·ç¸ñÖ»ÐíÐÅÏ¢)
- accesskey
(Èȼü)
- align
(alignment)
- onclick,
ondblclick,
onmousedown,
onmouseup,
onmouseover,
onmousemove,
onmouseout,
onkeypress,
onkeydown,
onkeyup
(ÄÚ²¿Ê¼þ)
FIELDSET
Ôª ËØ ±í µ¥ Éè ¼Æ Õß ¼¼ Êõ ÐÔ ¶Ô °Ñ ¿Ø ¼þ ³É ×é. ³É ×é ¿Ø ¼þ ʹ Óà »§ ¸ü ÈÝ Ò× Ã÷ °× Ëü ÃÇ µÄ Òâ ͼ ͬ ʱ Ò² ¿É
ÒÔ °ï Öú ¿É ÊÓ Óà »§ ´ú Àí Æ÷ ºÍ Ãæ Ïò Óï Òô µÄ Óï Òô µ¼ º½ Óà »§ ´ú Àí Æ÷. Õâ Щ Ôª ËØ µÄ ÊÊ µ± ʹ Óà ʹ µÃ ÓÐ
²Ð ¼² µÄ ÈË ÃÇ ¸ü Ò× ÓÚ ²Ù ×÷.
LEGEND Ôª
ËØ ÔÊ Ðí Éè ¼Æ Õß Îª Ò» ¸ö FIELDSET
·Ö Åä Ò» ¸ö ±ê Ç©. µ± FIELDSET
±» äÖ È¾ Ϊ ²» ¿É ÊÓ Ê± Ëü Ìá ¸ß ÁË ´¦ Àí ÄÜ Á¦. µ± äÖ È¾ Ϊ ¿É ÊÓ Ê±, Éè ¶¨ LEGEND
Ôª ËØ µÄ align
ÌØ ÐÔ ¿É ÒÔ Ê¹ Ö® ¶Ô Æë ÓÚ FIELDSET.
ÔÚ ´Ë Àý ³Ì ÖÐ, ÎÒ ÃÇ ½¨ Á¢ Ò» ÖÖ ½« ÔÚ Ò½ Éú °ì ¹« ÊÒ Ìî д
µÄ ±í µ¥. Ëü ±» ·Ö ³É Èý ²¿ ·Ö: ¸ö ÈË ÐŠϢ, ²¡ Ê· ºÍ Ä¿ ǰ
²¡ Àú. ÿ ¸ö ²¿ ·Ö °ü º¬ ¶Ô Êä Èë ÊÊ µ± µÄ ЊϢ µÄ ¿Ø ÖÆ.
<FORM action="..." method="post">
<FIELDSET>
<LEGEND align="top">Personal Information</LEGEND>
Last Name: <INPUT name="personal_lastname" type="text" tabindex="1">
First Name: <INPUT name="personal_firstname" type="text" tabindex="2">
Address: <INPUT name="personal_address" type="text" tabindex="3">
...more personal information...
</FIELDSET>
<FIELDSET>
<LEGEND align="top">Medical History</LEGEND>
<INPUT name="history_illness"
type="checkbox"
value="Smallpox" tabindex="20"> Smallpox</INPUT>
<INPUT name="history_illness"
type="checkbox"
value="Mumps" tabindex="21"> Mumps</INPUT>
<INPUT name="history_illness"
type="checkbox"
value="Dizziness" tabindex="22"> Dizziness</INPUT>
<INPUT name="history_illness"
type="checkbox"
value="Sneezing" tabindex="23"> Sneezing</INPUT>
...more medical history...
</FIELDSET>
<FIELDSET>
<LEGEND align="top">Current Medication</LEGEND>
Are you currently taking any medication?
<INPUT name="medication_now"
type="radio"
value="Yes" tabindex="35">Yes</INPUT>
<INPUT name="medication_now"
type="radio"
value="No" tabindex="35">No</INPUT>
If you are currently taking medication, please indicate
it in the space below:
<TEXTAREA name="current_medication"
rows="20" cols="50"
tabindex="40">
</TEXTAREA>
</FIELDSET>
</FORM>
×¢ Òâ ÔÚ ´Ë Àý ÖÐ, ÎÒ ÃÇ ¿É ÒÔ Í¨ ¹ý ÔÚ Ã¿ ¸ö ÔÚ
FIELDSET
ÖÐ ¶Ô Æë Ôª ËØ (ͨ ¹ý ·ç ¸ñ Ò³), ¼Ó Èë ½Å ±¾ ( ¾Í ÊÇ Ëµ, Ö» ÓÐ µ± Ëû »ò Ëý ´ò ¿ª "current medication"
ÎÄ ±¾ Çø Óò ±í ʾ »¹ ÔÚ Óà ҩ ÖÐ) µÈ µÈ À´ Ìá ¸ß ±í µ¥ µÄ Õ¹ ÏÖ.
¸øÒ»¸öÔªËØ½¹µã
ÔÚ HTML »î ¶¯ Ôª ËØ ±Ø Ðë ÓÉ ÓÚ Óà »§ µÄ ´ò Ëã µÄ ÈÎ Îñ ¶ø µÃ µ½ µÃ µ½
½¹ µã. Àý
Èç, Óà »§ ±Ø Ðë ¼¤ »î Ò» ¸ö ÓÉ
A
Ôª ËØ Ö¸ ¶¨ µÄ Á´ ½Ó À´ ×· Ëæ Ö¸ ¶¨ µÄ Á´ ½Ó. Àà ËÆ µÄ, Óà »§ ´ú Àí Æ÷ Ϊ Êä Èë ÎÄ ×Ö ¶ø ¸ø Ò» ¸ö
TEXTAREA
¸³ ÓÚ ½¹ µã.
ÓÐ Êý ¸ö ·½ ·¨ °Ñ ½¹ µã ¸³ ÓÚ Ò» ¸ö Ôª ËØ:
- ͨ ¹ý ¶¨ λ Éè ±¸ Ö¸ ¶¨ Ôª ËØ.
- ´Ó Ò» ¸ö Ôª ËØ ͨ ¹ý ¼ü ÅÌ µ¼ º½ µ½ Ï һ ¸ö. ÎÄ µµ ×÷ Õß
¿É ÒÔ ¶¨ Òå Ò» ¸ö ÖÆ ±í ¼ü ´Î Ðò À´ Ö¸ ¶¨ Óà »§ ͨ ¹ý
¼ü ÅÌ À´ µ¼ º½ (ÖÆ±í¼üµ¼º½)
µÄ »° ÄÄ ¸ö Ôª ËØ µÃ µ½ ½¹ µã. Ò» µ© Ñ¡ ÖÐ, Ò» ¸ö Ôª ËØ ¿É ÒÔ
±» Æä Ëü µÄ ¼ü ˳ Ðò À´ ¼¤ »î.
- ͨ ¹ý Ò» ϵ ÁÐ ¼ü Ê ¼þ À´ Ñ¡ Ôñ Ò» ¸ö Ôª ËØ ±» ³Æ Ϊ Ò»
¸ö Èȼü (ÓРʱ Ò² ½Ð ×ö "¼ü
ÅÌ ÈÈ ¼ü" »ò "¼ü ÅÌ ¼Ó ËÙ").
ÖÆ±í¼üµ¼º½
ÌØ ÐÔ ¶¨ Òå
- tabindex = integer
- Õâ ¸ö ÌØ ÐÔ Ö¸ ¶¨ ÁË µ± ǰ Ôª ËØ ÔÚ µ± ǰ ÎÄ µµ ÖÆ ±í
¼ü ´Î Ðò ÖÐ µÄ λ ÖÃ. Õâ ¸ö Öµ ¿É ÒÔ ÊÇ Õý µÄ »ò ¸º µÄ Õû
Êý.
ÖÆ ±í ¼ü ´Î Ðò Ö¸ ¶¨ Á˵± Óà »§ ͨ ¹ý ¼ü ÅÌ µ¼ º½ ʱ ÄÄ ¸ö Ôª
ËØ ½« µÃ µ½ ½¹ µã. ÖÆ ±í ¼ü ´Î Ðò ¿É ÒÔ ÔÚ Æä Ëü Ƕ Ì× Ôª ËØ ÖÐ
¼ä °ü º¬ Ôª ËØ.
Ó¦ µ± ±» Óà »§ ´ú Àí Æ÷ µ¼ º½ »ñ µÃ ½¹ µã µÄ Ôª ËØ ¸ù ¾Ý ÏÂ
ÁÐ Ô Ôò:
- ÄÇ Ð© Ìá ¹© tabindex
ÌØ ¶¨ ºÍ Ö¸ ¶¨ Õý Êý Öµ µÄ Ôª ËØ Ê× ÏÈ ±» µ¼ º½. µ¼ º½ ´Ó ¾ß ÓÐ ×î µÍ tabindex
Öµ µÄ Ôª ËØ Ïò ¾ß ÓÐ ×î ¸ß Öµ µÄ ½ø ÐÐ. Öµ ÎÞ Ðè °´ ´Î Ðò Ò² ÄÜ ÒÔ ÈÎ ºÎ µÄ ÌØ ¶¨ Öµ ¿ª ʼ. ¾ß ÓÐ ±ê Ö¾
ÐÔ µÄ tabindex
Ôª ËØ ÔÚ Ëü ÃÇ ÏÔ Ê¾ µÄ ÎÄ µµ ÖÐ °´ ´Î Ðò ±» µ¼ º½.
- ÄÇ Ð© û ÓÐ ¶¨ Òå tabindex
ÌØ ÐÔ »ò ²» Ìá ¹© Íù Ï µ¼ º½ µÄ Ôª ËØ. Õâ Щ Ôª ËØ ÒÔ Ëü ÃÇ ÔÚ ÎÄ µµ ÖÐ µÄ ÏÔ Ê¾ ´Î Ðò ±» µ¼ º½.
- ÄÇ Ð© Ìá ¹© tabindex
Öµ ºÍ ·Ö Åä ÁË µ¼ º½ Öµ µÄ Ôª ËØ ²» ²Î Óë ÖÆ ±í ¼ü µ¼ º½.
- disabled µÄ Ôª ËØ ²» ²Î ¼û ÖÆ ¼Ó
¼ü µ¼ º½.
ÏÂ Ãæ µÄ Ôª ËØ Ö§ ³Ö
tabindex
ÌØ ÐÔ:
A,
AREA,
OBJECT,
INPUT,
SELECT,
TEXTAREA
ºÍ
BUTTON.
ÔÚ ´Ë Àý ÖÐ, ÖÆ ±í ¼ü ´Î Ðò Ϊ
BUTTON,
È» ºó ÊÇ
INPUT
Ôª ËØ(×¢ Òâ"field1" ºÍ °´ Å¥ ¹² Ïí ¹² Ò» ¸ö ¼ü ±í ¼ü Ë÷ Òý, µ« "field1" ³ö ÏÖ ÓÚ ÎÄ µµ µÄ ºó ²¿),
×î ºó ÊÇ ÓÉ
A Ôª ËØ ½¨
Á¢ µÄ Á´ ½Ó.
<HTML>
<BODY>
...some text...
Click to go to the
<A tabindex="10" href="http://www.w3.org/">W3C Website.</A>
...some more...
<BUTTON type="button" name="get-database"
tabindex="1" onclick="get-database">
Click me to receive the current database.
</BUTTON>
...some more...
<FORM action="..." method="post">
<INPUT tabindex="1" type="text" name="field1">
<INPUT tabindex="2" type="text" name="field2">
<INPUT tabindex="3" type="submit" name="submit">
</FORM>
</BODY>
</HTML>
ÖÆ ±í ¼ü. ÔÚ Óà »§ µÄ ¶¨ Òå ÖÐ µÄ ʵ
¼Ê µÄ ¼ü ´Î Ðò Òý Æð ÖÆ ±í ¼ü µ¼ º½ »ò Ôª ËØ µÄ ¼¤ »î (Àý Èç "tab"
¼ü Óà À´ µ¼ º½ ¶ø "enter" Ôò Óë ¼¤ »î Ñ¡ ¶¨ Ôª ËØ Ïà ¹Ø).
Óà »§ ´ú Àí Æ÷ Ò² ¿É ÒÔ ¶¨ Òå Ò» ¸ö ¼ü ´Î Ðò À´ Ïà ·´ µÄ
µ¼ º½ ÖÆ ±í ¼ü ´Î Ðò. µ± µ½ ´ï ÖÆ ±í ¼ü ´Î Ðò µÄ ×î ºó ( »ò
¿ª ʼ ʱ), Óà »§ ´ú Àí Æ÷ »á ÈÆ ת µ½ ¿ª ʼ (»ò ½á β).
Èȼü
ÌØ ÐÔ ¶¨ Òåaccesskey = cdata
- Õâ ¸ö ÌØ ÐÔ ·Ö Åä Ò» ¸ö ÈÈ ¼ü ¸ø Ò» ¸ö Ôª ËØ. Ò» ¸ö ÈÈ
¼ü ÊÇ À´ ×Ô ÓÚ Óà »§ ´ú Àí Æ÷ µ± ǰ ×Ö ·û ¼¯ µÄ µ¥ ¸ö ×Ö
·û. Óà »§ ´ú Àí Æ÷ Ó¦ µ± °Ñ Õâ ¸ö ÌØ ÐÔ ×÷ Ϊ ´ó С д ÎÞ
¹Ø À´ ¶Ô ´ý.
°´ ¶¯ Ö¸ ¶¨ ¸ø Ôª ËØ µÄ ´¦ Àí Öµ Ôò ¸³ ÓÚ ´Ë Ôª ËØ ½¹ µã. µ± Ôª ËØ ½Ó µ½ ½¹ µã ʱ ¸ù ¾Ý Ôª ËØ
¼¤ »î Æä Ó¦ µ± µÄ ·½ ʽ. ͨ ¹ý
A
¶¨ Òå µÄ Á´ ½Ó ͨ ³£ ±» Óà »§ ´ú Àí Æ÷ ¸ú Ëæ, ¼¤ »î µ¥ ÏÈ Å¥ Ôò ¸Ä ±ä Öµ, ÓÐ ½¹ µã µÄ ÎÄ ±¾ Óò Ôò ÔÊ Ðí Óà »§
Êä Èë, µÈ µÈ.
Õâ ÁÐ µÄ Ôª ËØ Ö§ ³Ö accesskey
ÌØ ÐÔ: LABEL,
A, CAPTION
ºÍ LEGEND.
Õâ ¸ö Àý ³Ì Ö¸ ¶¨ ÈÈ ¼ü "U" ¸ø Ò» ¸ö Áª ϵ ÓÚ
INPUT
¿Ø ¼þ µÄ ±ê Ç©. ¼ü Èë ÈÈ ¼ü Ôò °Ñ ½¹ µã ·¢ ËÍ µ½ ±ê Ç© ²¢ ÒÀ ´Î ¸ø Óè Ïà ¹Ø µÄ ¿Ø ¼þ. È» ºó Óà »§ ¿É ÒÔ
INPUT
Çø Óò ÖÐ Êä Èë ÎÄ ×Ö.
<FORM action="..." method="post">
<LABEL for="user" accesskey="U">
User Name
</LABEL>
<INPUT type="text" name="user">
</FORM>
ÔÚ ´Ë Àý ÖÐ, ÎÒ ÃÇ Îª Ò» ¸ö ͨ ¹ý
A
Ôª ËØ ¶¨ Òå µÄ Á´ ½Ó ·Ö Åä Ò» ¸ö ÈÈ ¼ü. ¼ü Èë ´Ë ¼ü ¿É ÒÔ °Ñ Óà »§ ´ø µ½ Áí Ò» ¸ö ÎÄ µµ, ÔÚ ´Ë Àý ÖÐ ÊÇ Ò» ¸ö
Ä¿ ¼ ±í ¸ñ.
<A accesskey="C"
href="http://somplace.com/specification/contents.html">
Table of Contents</A>
ÈÈ ¼ü µÄ ʵ ÏÖ È¡ ¾ö ÓÚ Ï ²ã ϵ ͳ. Àý Èç, ÔÚ ÔË ÐÐ MS Windows
µÄ »ú ¹¹ ÉÏ, ij ÈË Í¨ ³£ ¼ü Ï "alt" ¼ü ×÷ Ϊ ¶î Íâ µÄ ÈÈ ¼ü. ÔÚ
Apple ϵ ͳ ÖÐ, ij ÈË Í¨ ³£ °´ Ï "cmd" ¼ü ×÷ Ϊ ¶î Íâ µÄ ÈÈ ¼ü.
¶Ô ÓÚ ÈÈ ¼ü µÄ ´¦ Àí È¡ ¾ö ÓÚ Óà »§ ´ú Àí Æ÷. ÎÒ ÃÇ ½¨ Òé ÓÃ
»§ ÔÚ ±ê Ç© ÖÐ °ü º¬ ÈÈ ¼ü »ò Ö¸ Ã÷ Ìá ¹© µÄ ÈÈ ¼ü. Óà »§ ´ú Àí
Æ÷ »á ÒÔ Ò» ÖÖ Ç¿ µ÷ µÄ Çø ±ð ÓÚ Æä Ëü ×Ö ·û µÄ ·½ ʽ À´ äÖ È¾
ÈÈ ¼ü µÄ ½Ç É« (Àý Èç Ï »® Ïß).
½ûÖ¹ºÍÖ»¶ÁÔªËØ
ÄÄ Àï µÄ Óà »§ Êä Èë ¶Ô ÉÏ Ï ÎÄ À´ ˵ ÊÇ ²» Ï£ Íû µÄ »ò ²» Ïà
¸É, ÄÜ ¹» ½û Ö¹ Ò» ¸ö Ôª ËØ »ò ÒÔ Ö» ¶Á ·½ ʽ äÖ È¾ Ò» ¸ö Ôª ËØ
ÊÇ ÖØ Òª µÄ. Àý Èç, ij ÈË ¿É ÄÜ Ï£ Íû ½û Ö¹ Ò» ¸ö ±í µ¥ µÄ Ìá ½»
°´ Å¥ Ö± µ½ ij Щ Ðè Òª µÄ Êý ¾Ý ±» Êä Èë. Àà Àà ËÆ µÄ, Ò» ¸ö ×÷
Õß ¿É ÄÜ Ï£ Íû °ü º¬ Ò» Ìõ Ö» ¶Á ÎÄ ×Ö ²¢ ±Ø Ðë ÄÜ ¹» ×÷ Ϊ Ò» ¸ö
Öµ Óë ±í µ¥ Ò» Æð ±» Ìá ½». ÏÂ Ãæ µÄ Õ ½Ú Ãè Êö ÁË ½û Ö¹ µÄ ºÍ
Ö» ¶Á µÄ Ôª ËØ.
½ûÖ¹ÔªËØ
ÌØ ÐÔ ¶¨ Òå
- disabled
- µ± Ϊ Ò» ¸ö ±í µ¥ Ôª ËØ Éè ¶¨ ʱ, Õâ ¸ö ²¼ ¶û ÌØ ÐÔ ½û
Ö¹ ¿Ø ¼þ ±» ÓÃ »§ Êä Èë.
µ± Éè ¶¨ ʱ, the disabled
ÌØ ÐÔ ¾ß ÓÐ Ï ÁÐ ¶Ô Ôª ËØ µÄ Ó° Ïì:
- ½û Ö¹ µÄ Ôª ËØ ²» ½Ó ÊÕ ½¹ µã.
- ½û Ö¹ µÄ Ôª ËØ ÔÚ ÖÆ ±í ¼ü µ¼ º½ ÖÐ ±» ºö ÂÔ.
- ½û Ö¹ µÄ ¿Ø ¼þ µÄ Öµ ²» Óë ±í µ¥ Ò» Æð ±» Ìá ½».
Ï ÁÐ µÄ Ôª ËØ Ö§ ³Ö disabled
ÌØ ÐÔ: INPUT,
TEXTAREA,
SELECT, OPTION,
OBJECT,
LABEL ºÍ BUTTON.
½û Ö¹ Ôª ËØ Èç ºÎ ±» äÖ È¾ È¡ ¾ö ÓÚ Óà »§ ´ú Àí Æ÷. Àý Èç,
ij Щ Óà »§ ´ú Àí Æ÷ ͨ ¹ý "gray out" À´ ½û Ö¹ Ï À ¿ò Ìõ
Ä¿, °´ Å¥ ±ê Ç© µÈ µÈ.
ÔÚ ´Ë Àý ÖÐ, ½û Ö¹ µÄ
INPUT
Ôª ËØ ÎÞ ·¨ ÊÕ µ½ Óà »§ Êä Èë ²¢ ÇÒ Öµ ²» Óë ±í µ¥ ±» Ìá ½».
<INPUT disabled name="fred" value="stone">
×¢ Òâ: Ψ Ò» ÄÜ ¹» ¶¯ ̬ ÐÞ ¸Ä disabled
ÌØ ÐÔ µÄ Öµ µÄ ·½ ·¨ ÊÇ Í¨ ¹ý Ò» ¶Î ½Å ±¾.
Ö»¶ÁÔªËØ
ÌØ ÐÔ ¶¨ Òå
- readonly
- µ± Ϊ ±í µ¥ ¿Ø ¼þ Éè ¶¨ ʱ, Õâ ¸ö ²¼ ¶û ÌØ ÐÔ ½û Ö¹ ¿Ø
¼þ µÄ ¸Ä ±ä.
readonly ÌØ
ÐÔ Ö¸ ¶¨ Ôª ËØ ÊÇ ·ñ ¿É ÒÔ ±» Óà »§ ÐÞ ¸Ä.
µ± Éè ¶¨ ʱ, readonly
ÌØ ÐÔ ¶Ô Ò» ¸ö Ôª ËØ ÓÐ Ï ÁÐ µÄ Ó° Ïì:
- Ö» ¶Á Ôª ËØ »ñ µÃ ½¹ µã µ« ²» ÄÜ ±» Óà »§ ÐÞ ¸Ä.
- Ö» ¶Á Ôª ËØ °ü À¨ ÖÆ ±í ¼ü µ¼ º½.
- Ö» ¶Á Ôª ËØ µÄ Öµ Óë ±í µ¥ Ò» Æð ±» Ìá ½».
ÏÂ Ãæ µÄ Ôª ËØ Ö§ ³Ö
readonly
ÌØ ÐÔ:
INPUT,
TEXT,
PASSWORD ºÍ
TEXTAREA.
Ö» ¶Á Ôª ËØ Èç ºÎ ±» äÖ È¾ È¡ ¾ö ÓÚ Óà »§ ´ú Àí Æ÷.
×¢ Òâ: ¶¯ ̬ ÐÞ ¸Ä readonly
ÌØ ÐÔ µÄ Öµ µÄ Ψ Ò» ·½ ·¨ ÊÇ Í¨ ¹ý Ò» ¶Î ½Å ±¾.
±íµ¥Ìá½»
ÄĸöÔªËØÖµ ±» Ìá½»ÁË
²¢ ·Ç Ëù ÓÐ Ôª ËØ ºÍ Ëü ÃÇ µÄ Öµ Óë ±í µ¥ ±»
Ìá ½». Ò» Ö ÐÔ Óà »§ ´ú Àí Æ÷ Ó¦ µ±
²» Ìá ½»:
Last Update:
29-7-1997