HTML ÎÄµµÖÐµÄ±íµ¥

¿Ø ¼þ ¿É ÒÔ ÊÇ ¸´ Ñ¡ ¿ò, µ¥ Ñ¡ ¿ò, ±ê Ç©, ²Ë µ¥ µÈ. Ã¿ ¸ö ¿Ø ¼þ ¿É ÒÔ ·Ö Åä Ò» ¸ö Ãû ³Æ. µ± ±í µ¥ ±» Ìá ½» Ê±, Ò» Ð© ¿Ø ¼þ (È¡¾öÓÚËüÃÇµÄ×´Ì¬) µÄ Ãû ³Æ ºÍ µ± Ç° Öµ Ëæ ±í µ¥ Ò» Æð ·¢ ËÍ. Ìá ½» µÄ Öµ µÄ ×Ô È» Êô ÐÔ È¡ ¾ö ÓÚ ¿Ø ¼þ (Àý Èç: ÎÄ ±¾ ¿ò µÄ Öµ ÊÇ Êä Èë µÄ ÎÄ ±¾).

FORM ÔªËØ

ÔÚ 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>

¿Ø¼þ

¿Ø¼þ±êÇ©
Ä³ Ð© ±í µ¥ ¿Ø ¼þ ×Ô ¶¯ Áª Ïµ ±ê Ç© (Í¨ ¹ý INPUT ºÍ BUTTON ½¨ Á¢ µÄ °´ Å¥) È» ¶ø ´ó ¶à Êý ²» Õâ Ñù (Í¨ ¹ý INPUT ºÍ TEXTAREA µÄ ÎÄ ±¾ Óò, Í¨ ¹ý INPUT ½¨ Á¢ µÄ ¸´ Ñ¡ ¿ò ºÍ µ¥ Ñ¡ ¿ò ºÍ ÓÃ SELECT ½¨ Á¢ µÄ Ôª ËØ).

¶Ô ÓÚ ÄÇ Ð© º¬ ÓÐ °µ Ê½ ±ê Ç© µÄ ¿Ø ¼þ, ÓÃ »§ ´ú Àí Æ÷ Ó¦ µ± °Ñ value ÌØ ÐÔ Öµ ×÷ Îª ±ê Ç© ×Ö ´®.

¶Ô ÓÚ ÄÇ Ð© Ã» ÓÐ °µ Ê½ ±ê Ç© µÄ ¿Ø ¼þ, ×÷ Õß ±Ø Ðë ÔÚ ¿Ø ¼þ Ôª ËØ ¶¨ Òå µÄ Ç° »ò ºó Ìá ¹© ±ê Ç©. ¾Ù Àý Ëµ Ã÷ Èç ÏÂ.

INPUT ÔªËØ

ÊäÈë¸ñÊ½

 <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>

Õâ ¸ö ±í µ¥ »á ±» Èç ÏÂ äÖ È¾:

An example form rendering.

ÔÚ 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 ÔªËØ

BUTTON ÔªËØ

Ò» ¸ö ¸ñ Ê½ Îª "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 Ôª ËØ Ò² ÄÜ ¹» Óë ½Å ±¾ ¹² Í¬ Ê¹ ÓÃ, ÔÚ Õâ ÖÖ Çé ¿ö ÏÂ Ëü µÄ type Ó¦ µ± Îª "button". µ± Õâ Ñù µÄ Ò» ¸ö °´ Å¥ ±» ¼¤ »î Ê±, Ò» ¸ö ¿Í »§ ¶Ë ½Å ±¾ ±» ÔË ÐÐ. ÎÒ ÃÇ ÔÚ Õâ ¸ö Ëµ Ã÷ Êé µÄ ºó Ãæ µÄ ÄÚ²¿ÊÂ¼þ ÕÂ ½Ú ÌÖ ÂÛ BUTTON µÄ Ê¹ ÓÃ.

SELECT ºÍ OPTION ÔªËØ

ÓÃ »§ Ó¦ µ± °Ñ 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 ÔªËØ

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 ÔªËØ

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 ÌØ ÐÔ »ò ²» Ìá ¹© Íù ÏÂ µ¼ º½ µÄ Ôª ËØ. Õâ Ð© Ôª ËØ ÒÔ Ëü ÃÇ ÔÚ ÎÄ µµ ÖÐ µÄ ÏÔ Ê¾ ´Î Ðò ±» µ¼ º½.
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 µÄ »ú ¹¹ ÉÏ, Ä³ ÈË Í¨ ³£ ¼ü ÏÂ "alt" ¼ü ×÷ Îª ¶î Íâ µÄ ÈÈ ¼ü. ÔÚ Apple Ïµ Í³ ÖÐ, Ä³ ÈË Í¨ ³£ °´ ÏÂ "cmd" ¼ü ×÷ Îª ¶î Íâ µÄ ÈÈ ¼ü.

¶Ô ÓÚ ÈÈ ¼ü µÄ ´¦ Àí È¡ ¾ö ÓÚ ÓÃ »§ ´ú Àí Æ÷. ÎÒ ÃÇ ½¨ Òé ÓÃ »§ ÔÚ ±ê Ç© ÖÐ °ü º¬ ÈÈ ¼ü »ò Ö¸ Ã÷ Ìá ¹© µÄ ÈÈ ¼ü. ÓÃ »§ ´ú Àí Æ÷ »á ÒÔ Ò» ÖÖ Ç¿ µ÷ µÄ Çø ±ð ÓÚ Æä Ëü ×Ö ·û µÄ ·½ Ê½ À´ äÖ È¾ ÈÈ ¼ü µÄ ½Ç É« (Àý Èç ÏÂ »® Ïß).

½ûÖ¹ºÍÖ»¶ÁÔªËØ

ÄÄ Àï µÄ ÓÃ »§ Êä Èë ¶Ô ÉÏ ÏÂ ÎÄ À´ Ëµ ÊÇ ²» Ï£ Íû µÄ »ò ²» Ïà ¸É, ÄÜ ¹» ½û Ö¹ Ò» ¸ö Ôª ËØ »ò ÒÔ Ö» ¶Á ·½ Ê½ äÖ È¾ Ò» ¸ö Ôª ËØ ÊÇ ÖØ Òª µÄ. Àý Èç, Ä³ ÈË ¿É ÄÜ Ï£ Íû ½û Ö¹ Ò» ¸ö ±í µ¥ µÄ Ìá ½» °´ Å¥ Ö± µ½ Ä³ Ð© Ðè Òª µÄ Êý ¾Ý ±» Êä Èë. Àà Àà ËÆ µÄ, Ò» ¸ö ×÷ Õß ¿É ÄÜ Ï£ Íû °ü º¬ Ò» Ìõ Ö» ¶Á ÎÄ ×Ö ²¢ ±Ø Ðë ÄÜ ¹» ×÷ Îª Ò» ¸ö Öµ Óë ±í µ¥ Ò» Æð ±» Ìá ½». ÏÂ Ãæ µÄ ÕÂ ½Ú Ãè Êö ÁË ½û Ö¹ µÄ ºÍ Ö» ¶Á µÄ Ôª ËØ.

½ûÖ¹ÔªËØ

ÌØ ÐÔ ¶¨ Òå

disabled: µ± Îª Ò» ¸ö ±í µ¥ Ôª ËØ Éè ¶¨ Ê±, Õâ ¸ö ²¼ ¶û ÌØ ÐÔ ½û Ö¹ ¿Ø ¼þ ±» ÓÃ »§ Êä Èë.

Ö»¶ÁÔªËØ

ÌØ ÐÔ ¶¨ Òå

readonly: µ± Îª ±í µ¥ ¿Ø ¼þ Éè ¶¨ Ê±, Õâ ¸ö ²¼ ¶û ÌØ ÐÔ ½û Ö¹ ¿Ø ¼þ µÄ ¸Ä ±ä.

readonly ÌØ ÐÔ Ö¸ ¶¨ Ôª ËØ ÊÇ ·ñ ¿É ÒÔ ±» ÓÃ »§ ÐÞ ¸Ä.

µ± Éè ¶¨ Ê±, readonly ÌØ ÐÔ ¶Ô Ò» ¸ö Ôª ËØ ÓÐ ÏÂ ÁÐ µÄ Ó° Ïì:

Ö» ¶Á Ôª ËØ »ñ µÃ ½¹ µã µ« ²» ÄÜ ±» ÓÃ »§ ÐÞ ¸Ä.
Ö» ¶Á Ôª ËØ °ü À¨ ÖÆ ±í ¼ü µ¼ º½.
Ö» ¶Á Ôª ËØ µÄ Öµ Óë ±í µ¥ Ò» Æð ±» Ìá ½».

ÏÂ Ãæ µÄ Ôª ËØ Ö§ ³Ö readonly ÌØ ÐÔ: INPUT, TEXT, PASSWORD ºÍ TEXTAREA.

Ö» ¶Á Ôª ËØ Èç ºÎ ±» äÖ È¾ È¡ ¾ö ÓÚ ÓÃ »§ ´ú Àí Æ÷.

×¢ Òâ: ¶¯ Ì¬ ÐÞ ¸Ä readonly ÌØ ÐÔ µÄ Öµ µÄ Î¨ Ò» ·½ ·¨ ÊÇ Í¨ ¹ý Ò» ¶Î ½Å ±¾.

±íµ¥

`FORM` ÔªËØ

¿Ø¼þ

`INPUT` ÔªËØ

ÊäÈë¸ñÊ½

`ISINDEX` ÔªËØ

`BUTTON` ÔªËØ

`SELECT` ºÍ `OPTION` ÔªËØ

`TEXTAREA` ÔªËØ

`LABEL` ÔªËØ

`FIELDSET` ºÍ `LEGEND` ÔªËØ

¸øÒ»¸öÔªËØ½¹µã

ÖÆ±í¼üµ¼º½

ÈÈ¼ü

½ûÖ¹ºÍÖ»¶ÁÔªËØ

½ûÖ¹ÔªËØ

Ö»¶ÁÔªËØ

±íµ¥Ìá½»

ÄÄ¸öÔªËØÖµ ±» Ìá½»ÁË

±íµ¥

FORM ÔªËØ

¿Ø¼þ

INPUT ÔªËØ

ÊäÈë¸ñÊ½

ISINDEX ÔªËØ

BUTTON ÔªËØ

SELECT ºÍ OPTION ÔªËØ

TEXTAREA ÔªËØ

LABEL ÔªËØ

FIELDSET ºÍ LEGEND ÔªËØ

¸øÒ»¸öÔªËØ½¹µã

ÖÆ±í¼üµ¼º½

ÈÈ¼ü

½ûÖ¹ºÍÖ»¶ÁÔªËØ

½ûÖ¹ÔªËØ

Ö»¶ÁÔªËØ

±íµ¥Ìá½»

ÄÄ¸öÔªËØÖµ ±» Ìá½»ÁË

`FORM` ÔªËØ

`INPUT` ÔªËØ

`ISINDEX` ÔªËØ

`BUTTON` ÔªËØ

`SELECT` ºÍ `OPTION` ÔªËØ

`TEXTAREA` ÔªËØ

`LABEL` ÔªËØ

`FIELDSET` ºÍ `LEGEND` ÔªËØ