W3C17 Æû(form)Trio ȨÆäÀÌÁö
¸ñÂ÷
  1. ÆûÀÇ ¼Ò°³
  2. Á¦¾î(Control)
    1. Á¦¾î ŸÀÔ(type)
  3. FORM ¿¤·¹¸àÆ®
  4. INPUT ¿¤·¹¸àÆ®
    1. INPUT·Î »ý¼ºµÇ´Â Á¦¾îŸÀÔ
    2. INPUT Á¦¾î¸¦ °®´Â ¿¹Á¦
  5. BUTTON ¿¤·¹¸àÆ®
  6. SELECT, OPTGROUP, OPTION ¿¤·¹¸àÆ®
    1. »çÀü ¼±Åà µÈ(pre-selected) ¼±Åà »çÇ×
  7. TEXTAREA ¿¤·¹¸àÆ®
  8. ISINDEX ¿¤·¹¸àÆ®
  9. ¶óº§(label)
    1. LABEL ¿¤·¹¸àÆ®
  10. Æû¿¡ ±¸Á¶ Ãß°¡: FIELDSET, LEGEND ¿¤·¹¸àÆ®
  11. ¿¤·¹¸àÆ®¿¡ ÃÊÁ¡(focus) ÁÖ¼®
    1. ÅÇ¿¡ ÀÇÇÑ Ç×ÇØ(tabbing navigation)
    2. Á¢¼ÓÅ°(access key)
  12. ºÒÈ°¼º°ú Àбâ Àü¿ë Á¦¾î
    1. ºÒÈ°¼º(disabled) Á¦¾î
    2. Àбâ Àü¿ë(read-only) Á¦¾î
  13. Æû ¼Û½Å(submission)
    1. Æû ¼Û½Å ¹æ¹ý(method)
    2. ¼º°ø(successful) Á¦¾î
    3. Æû µ¥ÀÌÅÍ Ã³¸®(processing)
    4. Æû ÄÁÅÙÆ® ŸÀÔ

17 Æû(form)ÀÇ ¼Ò°³

HTML ÆûÀº ÀÏ¹Ý ³»¿ë, ÀÛ¼º(markup), Á¦¾î(control)¶ó°í ºÒ¸®¿ì´Â Ư¼ö ¿¤·¹¸àÆ®(checkboxes, radio buttons, menus, µî)¿Í À̵é Á¦¾îÀÇ ¶óº§(label)À» Æ÷ÇÔÇÏ´Â ¹®¼­ÀÇ ÀÏ ºÎºÐÀÌ´Ù. »ç¿ëÀÚ´Â ÀϹÝÀûÀ¸·Î, ó¸®(process)¸¦ À§ÇÏ¿©, ÅؽºÆ® ¼±Åà ¸Þ´º Ç׸ñ¸¦ ÀÔ·ÂÇÏ´Â µîÀ¸·Î Á¦¾î(control)¸¦ º¯°æÇÏ¿© ÆûÀ» ¿Ï¼º("complete")ÇÏ¿©, À¥¼­¹ö³ª ¸ÞÀϼ­¹ö µî ´ë¸®ÀÚ(agent)¿¡°Ô ÆûÀ» ¼Û½Å(submit)ÇÑ´Ù.

¶óº§, ·¹µð¿À¹öÆ°(radio button)¿Í ´©¸§´ÜÃß(push button: reset, submit µî)¸¦ Æ÷ÇÔÇÏ´Â ÆûÀÇ ¿¹Á¦¸¦ º¸¸é:

<FORM action="http://somesite.com/prog/adduser" method="post">
 <LABEL for="firstname">¼º: </LABEL>
   <INPUT type="text" id="firstname" size=4>
 <LABEL for="lastname">¸í: </LABEL>
   <INPUT type="text" id="lastname" size=10>
 <INPUT type="radio" name="sex" value="Male"> ³²,
 <INPUT type="radio" name="sex" value="Female"> ¿©<BR>
 <LABEL for="email">ÀüÀÚ¿ìÆí: </LABEL>
   <INPUT type="text" id="email">
 <INPUT  disabled type="submit" value="¿Ï·á">
 <INPUT type="reset" value="Àç¼³Á¤">
</FORM>

±ÍÇÏÀÇ ºÎ¶ó¿ìÀú·Î(½ÇÁ¦ ÀÛµ¿Àº ¾ÊÇÔ):

³², ¿©

ÁÖ¼®: ÀÌ ±Ô°Ý¿¡´Â Ãß°¡ÀûÀÎ »ó¼¼ Æû¿¡ ´ëÇÑ ÁÖ¼®ÀÌ Æ÷ÇԵǾî ÀÖ´Ù.

17.2 Á¦¾î(control)

»ç¿ëÀÚ´Â Æû(form)À» À̸§Áö¿öÁø Á¦¾î(control)·Î ÀÛ¿ë½ÃŲ´Ù.

Á¦¾îÀÇ Á¦¾î À̸§(control name)Àº name ¾ÖÆ®¸®ºäÆ®·Î ÁÖ¾îÁø´Ù. FORM ¿¤·¹¸àÆ® ¾È¿¡¼­ name ¾ÖÆ®¸®ºäÆ®ÀÇ Á¦¾îÇÏ´Â ¹üÀ§´Â FORM ¿¤·¹¸àÆ® ³»ºÎÀÌ´Ù.

°¢ Á¦¾î(control)´Â ÃÖÃÊ°ª°ú ÇöÀç°ª µÎ°¡Áö¸¦ ´Ù °¡Áö°í ÀÖÀ¸¸ç, µÑ ´Ù ¹®ÀÚ¿­ÀÌ´Ù. ÃÖÃÊ°ª°ú Á¦¾î¿¡ ÀÇÇÏ¿© ÁÖ¾îÁö´Â °¡´ÉÇÑ °ª¿¡ ´ëÇؼ­´Â °¢ Á¦¾îÀÇ Á¤ÀǸ¦ ÂüÁ¶Ç϶ó. ÀϹÝÀûÀ¸·Î, Á¦¾îÀÇ "ÃÖÃÊ°ª"Àº Á¦¾î ¿¤·¹¸àÆ®ÀÇ value ¾ÖÆ®¸®ºäÆ®·Î ÁöÁ¤ µÉ ¼ö ÀÖ´Ù. ±×·¯³ª, TEXTAREA ¿¤·¹¸àÆ®ÀÇ ÃÖÃÊ°ªÀº ±× ³»¿ëÀ¸·Î ÁÖ¾îÁö°í, Æû(form)¿¡ ÀÖ´Â OBJECT ¿¤·¹¸àÆ®ÀÇ ÃÖÃÊ°ªÀº ¿ÀºêÁ§Æ®ÀÇ Àû¿ë(ÀÌ ±Ô°ÝÀÇ ¹üÀ§ ¹ÛÀÓ)¿¡ ÀÇÇÏ¿© °áÁ¤µÈ´Ù.

Á¦¾îÀÇ "ÇöÀç°ª"(current value)Àº ÃÖÃÊ°ª¿¡ ¸ÕÀú ÀÔ·Â µÈ °ÍÀÌ´Ù. ±×·¯¹Ç·Î, Á¦¾îÀÇ ÇöÀç°ªÀº »ç¿ëÀÚÀÇ ÀԷ°ú ½ºÅ©¸³Æ®(script)¸¦ ÅëÇÏ¿© ¼öÁ¤ µÉ ¼ö ÀÖ´Ù.

Á¦¾î(control)ÀÇ ÃÖÃÊ°ªÀº º¯°æµÇÁö ¾Ê´Â´Ù. ±×·¡¼­ ÆûÀÌ Àç¼³Á¤(reset)µÇ¸é, °¢ Á¦¾îÀÇ ÇöÀç°ªÀº ÃÖÃÊ°ªÀ¸·Î Àç¼³Á¤µÈ´Ù. ¸¸ÀÏ Á¦¾î°¡ ÃÖÃÊ°ªÀ» °¡Áö°í ÀÖÁö ¾Ê¾ÒÀ¸¸é, ÆûÀ» Àç¼³Á¤ÇßÀ» ¶§ÀÇ È¿°ú´Â Á¤ÀǵÇÁö ¾Ê¾Ò´Ù.

ÆûÀÌ Ã³¸®¸¦ À§ÇÏ¿© ¼Û½Å(submit)µÇ¸é, ¸î°³ÀÇ Á¦¾îµéÀº ±×µéÀÇ À̸§°ú ÇöÀç°ªÀÇ Â¦À» °®°í, ÆûÀÇ À̵é ¦µé°ú °°ÀÌ ¼Û½ÅµÈ´Ù. À̸§°ú °ªÀÇ Â¦ÀÌ ¼Û½Å µÈ Á¦¾î¸¦ ¼º°øÀû Á¦¾î(successful control)¶óÇÑ´Ù.

17.2.1 Á¦¾î(control) ŸÀÔ(type)

HTML¿¡¼­ ´ÙÀ½ Á¦¾î ŸÀÔµéÀ» ¾Æ·¡¿Í °°ÀÌ Á¤ÀÇÇÑ´Ù.

button(´ÜÃß)
Á¦ÀÛÀÚ´Â ´ÙÀ½ÀÇ ¼¼°¡Áö ´ÜÃß(button) ŸÀÔÀ» ¸¸µé ¼ö ÀÖ´Ù.

Á¦ÀÛÀÚ´Â BUTTON ¿¤·¹¸àÆ® ¶Ç´Â INPUT ¿¤·¹¸àÆ®·Î ´ÜÃß(button)¸¦ ¸¸µç´Ù. ´ÜÃß Å¸ÀÔÀÇ ¼¼ºÎ»çÇ×À» À§ÇÏ¿© ÀÌ ¿¤·¹¸àÆ®µéÀÇ Á¤ÀǸ¦ ÂüÁ¶Ç϶ó.

ÁÖ¼®: Á¦ÀÛÀÚ´Â BUTTON ¿¤·¹¸àÆ®°¡ INPUT ¿¤·¹¸àÆ®º¸´Ù ´õ dzºÎÇÑ Ç¥Çö ´É·ÂÀ» Á¦°øÇÑ´Ù´Â Á¡À» ÁÖ½ÃÇ϶ó.

checkbox(üũ¹Ú½º)
üũ¹Ú½º¿Í ·¹µð¿À ´ÜÃß(radio button)´Â »ç¿ëÀÚ¿¡ ÀÇÇÏ¿© ¼±Åà µÉ ¼ö ÀÖ´Â on/off ½ºÀ§Ä¡ÀÌ´Ù. Á¦¾î ¿¤·¹¸àÆ®ÀÇ selected ¾ÖÆ®¸®ºäÆ®°¡ ¼±ÅÃµÇ¸é ½ºÀ§Ä¡°¡ "on"ÀÌ µÈ´Ù. Æû(form)ÀÌ ¼Û½Å µÉ ¶§, "on" µÈ üũ¹Ú½º Á¦¾î ¸¸ ¼º°øÀû(successful)ÀÌ µÈ´Ù.

ÇÑ ÆûÀÇ ¿©·¯ ýũ¹Ú½ºµéÀº °°Àº Á¦¾î À̸§À» °®À» ¼ö ÀÖ´Ù. ±×·¡¼­ ¿¹¸¦ µé¾î, üũ¹Ú½º¿¡¼­ »ç¿ëÀÚ´Â °°Àº Ư¼ºÀÇ ¿©·¯°³ÀÇ °ªÀ» ¼±Åà ÇÒ ¼ö ÀÖ´Ù. üũ¹Ú½º Á¦¾î¸¦ ¸¸µé±â À§ÇÏ¿© INPUT ¿¤·¹¸àÆ®°¡ »ç¿ëµÈ´Ù.

radio button(·¹µð¿À ´ÜÃß)
·¹µð¿À ´ÜÃß´Â ¿©·¯°³ÀÇ °°Àº Á¦¾î À̸§À» °®À» ¶§, ¼­·Î ¹èŸÀûÀ̶ó´Â °Í ÀÌ¿Ü¿¡´Â üũ¹Ú½º¿Í °°´Ù. Çϳª°¡ "on"À¸·Î µÇ¸é, °°Àº À̸§À» °¡Áø ´Ù¸¥ ¸ðµç ½ºÀ§Ä¡´Â "off"°¡ µÈ´Ù. ·¹µð¿À ´ÜÃß Á¦¾î¸¦ ¸¸µé±â À§ÇÏ¿© INPUT ¿¤·¹¸àÆ®°¡ »ç¿ëµÈ´Ù.
°°Àº Á¦¾î À̸§ÀÇ ·¹µð¿À ´ÜÃß¿¡ ÃÖÃÊ ¾Æ¹« °Íµµ "on"À¸·Î ¼³Á¤µÇÁö ¾Ê¾ÒÀ¸¸é, »ç¿ëµµ±¸°¡ ¾î¶² Á¦¾î¸¦ "on"À¸·Î ¼±Åà ÇÒ °ÍÀΰ¡´Â Á¤ÀǵÇÁö ¾Ê¾Ò´Ù. ÁÖ¼®. ÀÌ °æ¿ì ÇöÀçÀÇ Àû¿ëÀº ¼­·Î ´Ù¸¥µ¥, ÇöÀçÀÇ ±Ô°ÝÀº ±× °ÍÀ» ÁöÁ¤ÇÑ RFC 1866([RFC1866] 8.1.2.4 Ç×)°ú ´Ù¸¥µ¥ ´ÙÀ½°ú °°ÀÌ ±â¼úµÇ¾î ÀÖ´Ù:
Ç×»ó ·¹µð¿À ´ÜÃßµé Áß¿¡ ²À ÇÑ°³ ¸¸ ¼±ÅÃ(checked)µÈ´Ù. <INPUT> ¿¤·¹¸àÆ®ÀÇ ·¹µð¿À ´ÜÃßµé Áß¿¡ ¾Æ¹« °Íµµ `CHECKED'·Î ÁöÁ¤µÇÁö ¾Ê¾ÒÀ¸¸é, »ç¿ëµµ±¸´Â ±× Áß Á¦ÀÏ ¸ÕÀú ·¹µð¿À ´ÜÃ߸¦ óÀ½¿¡ ¼±ÅÃÇÏ¿©¾ß ÇÑ´Ù.

»ç¿ëµµ±¸¿¡ µû¶ó ´Ù¸£¹Ç·Î ÀÛ¼ºÀÚ´Â È®½ÇÈ÷ ±× ·¹µð¿À ´ÜÃß Áß ÇÑ°³¸¦ ÃÖÃÊ¿¡ "on"À¸·Î ¼³Á¤ÇÏ¿©¾ß ÇÑ´Ù.

menu(¸Þ´º)
¸Þ´º´Â »ç¿ëÀÚ¿¡°Ô ¾î´À°ÍÀ» ¼±Åà ÇÒ °ÍÀΰ¡ÀÇ ¼±ÅÃÀ» Á¦°øÇÑ´Ù. SELECT ¿¤·¹¸àÆ®´Â OPTGROUP°ú OPTION ¿¤·¹¸àÆ®¿Í °áÇÕÇÏ¿© ¸Þ´º¸¦ »ý¼ºÇÑ´Ù.
ÅؽºÆ® ÀÔ·Â(text input)
Á¦ÀÛÀÚ´Â »ç¿ëÀÚÀÇ ÅؽºÆ®¸¦ ÀÔ·ÂÀ» À§ÇÏ¿© µÎ Á¾·ùÀÇ Á¦¾î¸¦ ¸¸µé ¼ö ÀÖ´Ù. INPUT ¿¤·¹¸àÆ®´Â ÇÑ ¿­(line)ÀÇ ÀÔ·Â Á¦¾î¸¦ ¸¸µé°í, TEXTAREA ¿¤·¹¸àÆ®´Â ¿©·¯ ¿­ÀÇ ÀÔ·Â Á¦¾î¸¦ ¸¸µç´Ù. µÎ °æ¿ì ´Ù ÀÔ·Â µÈ ÅؽºÆ®´Â Á¦¾îÀÇ ÇöÀç°ªÀ̵ȴÙ.
È­ÀÏ ¼±ÅÃ(file select)
ÀÌ Á¦¾î ŸÀÔÀº ÀÌµé ³»¿ëÀÌ Æû(form)°ú ÇÔ²² ¼Û½Å(submit) µÉ ¼ö ÀÖµµ·Ï »ç¿ëÀÚ°¡ È­ÀÏÀ» ¼±ÅÃÇÏ°ÔÇÑ´Ù. È­ÀÏ ¼±Åà Á¦¾î¸¦ ¸¸µé±â À§ÇÏ¿© INPUT ¿¤·¹¸àÆ®°¡ »ç¿ëµÈ´Ù.
°¨Ãß±â Á¦¾î(hidden control)
Á¦ÀÛÀڴ ǥÇöµÇÁö ¾Ê°í °ªÀ» Æû(form)°ú ÇÔ²² ¼Û½Å(submit) ÇÒ ¼ö ÀÖ´Â Á¦¾î¸¦ »ý¼º ÇÒ ¼ö ÀÖ´Ù. Á¦ÀÛÀÚ°¡ ÀϹÝÀûÀ¸·Î ÀÌ Á¦¾î ŸÀÔÀ» Ŭ¶óÀ̾ðÆ®¿Í ¼­¹ö »çÀÌÀÇ ±³È¯ µ¿¾È Á¤º¸¸¦ ÀúÀåÇϴµ¥ »ç¿ëÇÑ´Ù. Ç¥Çö ¾ø´Â HTTP ÀÇ Æ¯¼º ¶§¹®¿¡, ÀÌ ±³È¯Àº ±×·¸Áö ¾ÊÀ¸¸é ¼Õ½Ç µÉ ¼ö ÀÖ´Ù[RFC2068 ÂüÁ¶). °¨Ãß±â Á¦¾î¸¦ ¸¸µé±â À§ÇÏ¿© INPUT ¿¤·¹¸àÆ®°¡ »ç¿ëµÈ´Ù.
¿ÀºêÁ§Æ® Á¦¾î(object control)
Á¦ÀÛÀÚ´Â Æû ¾È¿¡ ´Ù¸¥ Á¦¾îµé°ú ÇÔ²² ¼Û½Å(submit)µÇ´Â ¿¬°á °ª °°Àº ÀϹÝÀûÀÎ ¿ÀºêÁ§Æ®¸¦ »ðÀÔ ÇÒ ¼ö ÀÖ´Ù. ¿ÀºêÁ§Æ® Á¦¾î¸¦ ¸¸µé±â À§ÇÏ¿© OBJECT ¿¤·¹¸àÆ®°¡ »ç¿ëµÈ´Ù.

Á¦¾îµé¸¦ ¸¸µé±â À§ÇÏ¿© »ç¿ëµÇ´Â ¿¤·¹¸àÆ®µéÀº ÀϹÝÀûÀ¸·Î FORM ¿¤·¹¸àÆ® ¾È¿¡ À§Ä¡ÇÑ´Ù. ±×·¯³ª »ç¿ëÀÚ ÀÎÅÍÆäÀ̽º(interface)¸¦ ¸¸µé±â À§ÇÏ¿© »ç¿ë µÉ ¶§, FORM ¿¤·¹¸àÆ® ¼±¾ð ¹Û¿¡µµ À§Ä¡ ÇÒ ¼ö ÀÖ´Ù. ÀÌ´Â º»ÁúÀû À̺¥Æ®(intrinsic event)¿¡¼­ ´Ù·ç¾ú´Ù. Æû(form) ¹ÛÀÇ Á¦¾î´Â ¼º°øÀûÀÎ Á¦¾î°¡ µÉ ¼ö ¾øÀ½¿¡ ÁÖÀÇÇ϶ó.

17.3 FORM ¿¤·¹¸àÆ®(element)

<!ELEMENT FORM - - (%block; | SCRIPT)+ -(FORM) -- Åë½ÅÇÏ´Â(interactive) Æû -->
<!ATTLIST FORM
 %attrs;                              -- %coreattrs, %i18n, %events --
 action      %URI;          #REQUIRED -- ¼­¹ö(server-side) Æû Ãë±ÞÀÚ(handler) --
 method      (GET | POST)   GET  -- ÆûÀ» ¼Û½ÅÇϴµ¥ »ç¿ëµÇ´Â HTTP ¹æ¹ý(method)--
 enctype     %ContentType;  "application/x-www-form-urlencoded"
 accept      %ContentTypes; #IMPLIED 
	-- È­ÀÏ ¾÷·Îµå(upload)¸¦ À§ÇÑ MIME ŸÀÔ ¸ñ·Ï--
 name        CDATA          #IMPLIED -- ½ºÅ©¸³ÆÃ(scripting)À» À§ÇÑ ÆûÀÇ À̸§ --
 onsubmit    %Script;       #IMPLIED -- ÆûÀÌ ¼Û½ÅµÇ¾ú´Ù --
 onreset     %Script;       #IMPLIED -- ÆûÀÌ Àç¼³Á¤µÇ¾ú´Ù --
 accept-charset %Charsets;  #IMPLIED -- Áö¿ø ±ÛÀÚ ¼¼Æ® ¸ñ·Ï --
>

½ÃÀÛű×: ÇÊ¿ä ÇÔ, Á¾·áű×: ÇÊ¿ä ÇÔ

¾ÖÆ®¸®ºäÆ®ÀÇ Á¤ÀÇ

action = uri [´ë¼Ò¹®ÀÚ Å¸ÀÔ ÂüÁ¶: CT]
ÀÌ ¾ÖÆ®¸®ºäÆ®´Â Æû(form) ó¸® ´ë¸®ÀÚ(agent)¸¦ ÁöÁ¤ÇÑ´Ù. HTTP URI ÀÌ¿ÜÀÇ ´Ù¸¥ °ª¿¡ ´ëÇÑ »ç¿ëµµ±¸ÀÇ Ã³¸®¿¡ ´ëÇÑ Á¤ÀÇ´Â µÇ¾îÀÖÁö ¾Ê´Ù.
method = get | post [´ë¼Ò¹®ÀÚ ±¸º° ¾øÀÌ: CI]
ÀÌ ¾ÖÆ®¸®ºäÆ®´Â Æû µ¥ÀÌÅÍ ¼¼Æ®¸¦ ¼Û½ÅÇϴµ¥ ¾î¶² HTTP ¹æ¹ýÀ» »ç¿ë ÇÒ °ÍÀΰ¡¸¦ ÁöÁ¤ÇÑ´Ù. °¡´É ÇÑ °ªÀº ´ë¼Ò¹®ÀÚ ±¸º° ¾øÀÌ "get"(µðÆúÆ®)°ú "post"ÀÌ´Ù. ¿ë¹ý¿¡ ´ëÇÑ Á¤º¸´Â Æû ¼Û½ÅÀ» ÂüÁ¶Ç϶ó.
enctype = content-type [´ë¼Ò¹®ÀÚ ±¸º° ¾øÀÌ: CI]
ÀÌ ¾ÖÆ®¸®ºäÆ®´Â methodÀÇ °ªÀÌ "post"ÀÏ ¶§, ÆûÀ» ¼­¹ö¿¡ ¼Û½ÅÇϴµ¥ »ç¿ëµÇ´Â ÄÁÅÙÆ® ŸÀÔ(content type)À» ÁöÁ¤ÇÑ´Ù. ÀÌ ¾ÖÆ®¸®ºäÆ®ÀÇ µðÆúÆ® °ªÀº "application/x-www-form-urlencoded"ÀÌ´Ù. °ª "multipart/form-data"´Â INPUT ¿¤·¹¸àÆ®, type="file"°ú °áÇÕÇÏ¿© »ç¿ëÇÏ¿©¾ß ÇÑ´Ù.
accept-charset = charset list [´ë¼Ò¹®ÀÚ ±¸º° ¾øÀÌ: CI]
ÀÌ ¾ÖÆ®¸®ºäÆ®´Â ÀÌ ÆûÀ» ó¸®Çϴµ¥ ¼­¹ö°¡ ¹Þ¾Æ¾ß ÇÏ´Â ÀÔ·Â µ¥ÀÌÅÍÀÇ ±ÛÀÚ ¿£ÄÚµù ¸ñ·ÏÀ» ÁöÁ¤ÇÑ´Ù. ±× °ªÀº °ø°£°ú/¶Ç´Â Äĸ¶·Î ºÐ¸®µÇ´Â charset °ªµéÀÇ ¸ñ·ÏÀÌ´Ù. »ç¿ëÀÚ´Â ÀÌ ¸ñ·ÏÀ» ¹èŸÀû-¶Ç´Â(exclusive-or) ¸ñ·ÏÀ¸·Î Çؼ®ÇÏ¿©¾ß ÇÑ´Ù. ¸»ÇÏÀÚ¸é ¼­¹ö´Â ¹Þ´Â °³º° ÀÔ·Â(entity: ¿£Æ¼Æ¼) ±ÛÀÚ¿¡ µû¶ó¸¦ ±ÛÀÚ ¿£ÄÚµùÀ» ÇÒ ¼ö ÀÖ¾î¾ß ÇÑ´Ù.

ÀÌ ¾ÖÆ®¸®ºäÆ®ÀÇ µðÆúÆ® °ªÀº ¿¹¾à µÈ ¹®ÀÚ¿­ "UNKNOWN"ÀÌ´Ù. »ç¿ëµµ±¸´Â ÀÌ °ªÀ» FORM ¿¤·¹¸àÆ®¸¦ Æ÷ÇÔÇÏ´Â ¹®¼­¸¦ ¼Û½ÅÇϴµ¥ »ç¿ë µÈ ±ÛÀÚ ¿£ÄÚµùÀ¸·Î Çؼ® ÇÒ ¼ö ÀÖ´Ù.

accept = content-type-list [´ë¼Ò¹®ÀÚ ±¸º° ¾øÀÌ: CI]
ÀÌ ¾ÖÆ®¸®ºäÆ®´Â ¼­¹öÀÇ ÀÌ Æû 󸮰¡ ¹Ù¸£°Ô µÇµµ·Ï ÇÏ´Â Äĸ¶·Î ºÐ¸® µÈ ÄÁÅÙÆ® ŸÀÔ(content type)ÀÇ ¸ñ·ÏÀ» ÁöÁ¤ÇÑ´Ù. »ç¿ëµµ±¸´Â »ç¿ëÀÚ°¡ ¼­¹ö¿¡ º¸³¾ È­ÀÏÀ» ¼±Åà ÇßÀ» ¶§, ±Ô°Ý¿¡ ¸ÂÁö ¾Ê´Â È­ÀϵéÀ» ¼Ô¾Æ ³»±â À§ÇÏ¿© ÀÌ Á¤º¸¸¦ »ç¿ë ÇÒ ¼ö ÀÖ´Ù(type="file"ÀÏ ¶§ INPUT ¿¤·¹¸àÆ® ÂüÁ¶).
name = cdata [´ë¼Ò¹®ÀÚ ±¸º° ¾øÀÌ: CI]
ÀÌ ¾ÖÆ®¸®ºäÆ®´Â ¿¤·¹¸àÆ®¿¡ À̸§À» ÁÖ¾î ½ºÅ¸ÀϽ¬Æ®³ª ½ºÅ©¸³Æ®¿¡¼­ ÂüÁ¶ ÇÒ ¼ö ÀÖ°Ô ÇÑ´Ù. ÁÖ¼®. ÀÌ ¾ÖÆ®¸®ºäÆ®´Â °ú°Å ¹öÀüÀÇ ±Ô°Ý ºÎÇÕ¼ºÀ» À§ÇÏ¿© Æ÷ÇÔÇϾú´Ù. »õ·Î¿î Àû¿ëÀº ¿¤·¹¸àÆ®¸¦ ÀνÄÇϱâ À§ÇÏ¿© id ¾ÖÆ®¸®ºäÆ®¸¦ »ç¿ëÇÏ¿©¾ß ÇÑ´Ù.
´Ù¸¥ °÷¿¡¼­ Á¤ÀÇ µÈ ¾ÖÆ®¸®ºäÆ®

FORM ¿¤·¹¸àÆ®´Â Á¦¾î(control)¸¦ ´ã´Â ¿ë±â·Î ÀÛ¿ëÇÑ´Ù. ÀÌ°ÍÀÌ ´ÙÀ½À» ÁöÁ¤ÇÑ´Ù.

ÆûÀº Æû Á¦¾î ¿Ü¿¡ ÅؽºÆ®¿Í ¹®´Ü, ¸ñ·Ï µîÀÇ ÀÛ¼º ºÎºÐÀ» Æ÷ÇÔ ÇÒ ¼ö ÀÖ´Ù.

´ÙÀ½ ¿¹Á¦´Â ¼Û½Å(submi)µÇ¸é ÇÁ·Î±×·¥ "adduser"¿¡ ÀÇÇÏ¿© 󸮵Ǵ ÆûÀ» º¸¿©ÁØ´Ù. ÀÌ ÆûÀº HTTP "post" ¹æ¹ýÀ» »ç¿ëÇÏ¿© º¸³»Áø´Ù.

<FORM action="http://somesite.com/prog/adduser" method="post">
 ... Æû(form)ÀÇ ³»¿ë ...
</FORM>

»ç¿ëµµ±¸µéÀÌ ¼­¹öµéÀ» À§ÇÏ¿© ¾î¶»°Ô Æû µ¥ÀÌÅ͸¦ ÁغñÇØ¾ß Çϸç, ¾î¶»°Ô ¹ÝÀÀÇØ¾ß Çϴ°¡¿¡ ´ëÇÑ Á¤º¸´Â ÆûÀÇ ¼Û½ÅÀ» ÂüÁ¶Ç϶ó.

ÁÖ¼®: ¼­¹öµéÀÇ ¹ÞÀº Æû µ¥ÀÌÅÍÀÇ Ã³¸®¿¡ ´ë ÇÑ Ãß°¡Àû »çÇ×Àº ÀÌ ±Ô°ÝÀÇ ¹üÀ§¸¦ ¹ù¾î³­´Ù.

17.4 INPUT ¿¤·¹¸àÆ®(element)

<!ENTITY % InputType "(TEXT | PASSWORD | CHECKBOX | RADIO | SUBMIT | RESET |
	FILE | HIDDEN | IMAGE | BUTTON)"
>
<!-- ¼Û½Å(submit)°ú Àç¼³Á¤(reset) ¿ÜÀÇ
	¸ðµç ¾ÖÆ®¸®ºäÆ®¿¡´Â À̸§(name)ÀÌ ÇÊ¿äÇÏ´Ù -->
<!ELEMENT INPUT - O EMPTY              -- Æû Á¦¾î(form control) -->
<!ATTLIST INPUT
 %attrs;                              -- %coreattrs, %i18n, %events --
 type        %InputType;    TEXT      -- ÀÔ·ÂÀÇ Á¾·ù --
 name        CDATA          #IMPLIED  -- ÆûÀÇ ÀÏ ºÎºÐÀ¸·Î ¼Û½Å(submit) µÊ --
 value       CDATA          #IMPLIED  -- ·¹µð¿À(radio) ´ÜÃß¿Í Ã¼Å© ¹Ú½º¿¡ ÇÊ¿ä--
 checked     (checked)      #IMPLIED  -- ·¹µð¿À ´ÜÃß¿Í Ã¼Å© ¹Ú½º¿¡ ÇÊ¿ä --
 disabled    (disabled)     #IMPLIED  -- ÀÌ ³»¿ëÀ» ºÒÈ°¼ºÈ­ --
 readonly    (readonly)     #IMPLIED  -- ÅؽºÆ®¿Í ¾ÏÈ£¿¡ »ç¿ë --
 size        CDATA          #IMPLIED  -- °¢ ÇʵåÀÇ Å¸ÀÔ ÁöÁ¤ --
 maxlength   NUMBER         #IMPLIED  -- ÅؽºÆ®ÀÇ ÃÖ´ë ±ÛÀÚ ¼ö --
 src         %URI;          #IMPLIED  -- À̹ÌÁö¸¦ °®´Â ÇʵåÀ» À§ÇÏ¿© --
 alt         CDATA          #IMPLIED  -- ªÀº ¼³¸í --
 usemap      %URI;          #IMPLIED  -- »ç¿ëÀÚÃø(client-side) À̹ÌÁö¸Ê --
 ismap       (ismap)        #IMPLIED  -- ¼­¹öÃø(server-side) À̹ÌÁö¸Ê¿¡ »ç¿ë --
 tabindex    NUMBER         #IMPLIED  -- ÅÇ À§Ä¡ ¼øÀ§¿¡¼­ÀÇ À§Ä¡ --
 accesskey   %Character;    #IMPLIED  -- Á¢¼ÓÅ° ±ÛÀÚ --
 onfocus     %Script;       #IMPLIED  -- ¿¤·¹¸àÆ®(element)¿¡ ÃÊÁ¡(focus) ¸ÂÃã --
 onblur      %Script;       #IMPLIED  -- ¿¤·¹¸àÆ®¿¡ ÃÊÁ¡ ÇØÁ¦ --
 onselect    %Script;       #IMPLIED  -- ÅؽºÆ®°¡ ¼±ÅõǾú½¿ --
 onchange    %Script;       #IMPLIED  -- ¿¤·¹¸àÆ®ÀÇ °ªÀÌ º¯°æµÇ¾ú½¿ --
 accept      %ContentTypes; #IMPLIED  -- È­ÀÏ ·Îµå¸¦ À§ÇÑ MIME ŸÀÔ ¸ñ·Ï --
>

½ÃÀÛű×: ÇÊ¿ä ÇÔ, Á¾·áű×: »ç¿ë ±ÝÁö

¾ÖÆ®¸®ºäÆ®ÀÇ Á¤ÀÇ

type = text | password | checkbox | radio | submit | reset | file | hidden | image | button [´ë¼Ò¹®ÀÚ ±¸º° ¾øÀÌ: CI]
ÀÌ ¾ÖÆ®¸®ºäÆ®´Â »ý¼ºµÇ´Â Á¦¾î ŸÀÔ(control type)À» ÁöÁ¤ÇÑ´Ù. µðÆúÆ® °ªÀº "text"ÀÌ´Ù.
name = cdata [´ë¼Ò¹®ÀÚ ±¸º° ¾øÀÌ: CI]
ÀÌ ¾ÖÆ®¸®ºäÆ®´Â Á¦¾î À̸§(control name)À» ÁöÁ¤ÇÑ´Ù.
value = cdata [´ë¼ÒºÐÀÚ ¾ÖÆ®¸®ºäÆ® ÂüÁ¶: CA]
ÀÌ ¾ÖÆ®¸®ºäÆ®´Â Á¦¾îÀÇ ÃÖÃÊ°ªÀ» ÁöÁ¤ÇÑ´Ù. type ¾ÖÆ®¸®ºäÆ®ÀÇ °ªÀÌ "radio"³ª "checkbox" ÀÎ °æ¿ì¸¦ Á¦¿ÜÇÏ°í´Â ¼±ÅÃÀûÀÌ´Ù.
size = cdata [´ë¼Ò¹®ÀÚ Á߸³: CN]
ÀÌ ¾ÖÆ®¸®ºäÆ®´Â »ç¿ëµµ±¸¿¡°Ô Á¦¾îÀÇ ÃÖÃÊ ³Êºñ¸¦ ¾Ë·ÁÁØ´Ù. ÀÌ ³Êºñ´Â type ¾ÖÆ®¸®ºäÆ®ÀÇ °ªÀÌ "text" ¶Ç´Â "password" ÀÏ °æ¿ì ±× °ªÀº ±ÛÀÚÀÇ °¹¼ö¸¦ ³ªÅ¸³»´Â Á¤¼ö·Î Ç¥½ÃÇÏ°í, À̸¦ Á¦¿ÜÇÏ°í´Â Çȼ¿(pixel)·Î ÁÖ¾îÁø´Ù.
maxlength = number [´ë¼Ò¹®ÀÚ Á߸³: CN]
type ¾ÖÆ®¸®ºäÆ®ÀÇ °ªÀÌ "text" ¶Ç´Â "password"À̸é, »ç¿ëÀÚ°¡ ÀÔ·Â ÇÒ ¼ö ÀÖ´Â ÃÖ´ë ±ÛÀÚ¼ö¸¦ ÁöÁ¤ÇÑ´Ù. ÀÌ ¼öÄ¡´Â ÁöÁ¤ µÈ size¸¦ ÃÊ°ú ÇÒ ¼ö Àִµ¥, ÀÌ °æ¿ì »ç¿ëµµ±¸´Â È­¸é ±¼¸®±â(scroll) ±â´ÉÀ» Á¦°øÇÏ¿©¾ß ÇÑ´Ù. µðÆúÆ® °ªÀº ¹«ÇÑÀÇ ¼öÀÌ´Ù.
checked [´ë¼Ò¹®ÀÚ ±¸º° ¾øÀÌ: CI]
type ¾ÖÆ®¸®ºäÆ®´Â °ª "radio" ¶Ç´Â "checkbox"¸¦ °¡Áö¸é, ÀÌ ºÒ¸°(boolean) ¾ÖÆ®¸®ºäÆ®´Â ±× ´ÜÃß°¡ on µÈ °ÍÀ»ÁöÁ¤ÇÑ´Ù. »ç¿ëµµ±¸´Â ´Ù¸¥ ŸÀÔ¿¡¼­´Â ÀÌ ¾ÖÆ®¸®ºäÆ®¸¦ ¹«½ÃÇÏ¿©¾ß ÇÑ´Ù.
src = uri [´ë¼Ò¹®ÀÚ Å¸ÀÔ ÂüÁ¶: CT]
type ¾ÖÆ®¸®ºäÆ® ±× °ªÀÌ "image"À̸é, ÀÌ ¾ÖÆ®¸®ºäÆ®´Â ¼Û½Å(submit) ´ÜÃ߸¦ ±×·¡ÇÈÀ¸·Î Á¤½ÄÇϴµ¥ »ç¿ëµÇ´Â À̹ÌÁö È­ÀÏÀÇ À§Ä¡¸¦ ÁöÁ¤ÇÑ´Ù.
´Ù¸¥ °÷¿¡¼­ Á¤ÀÇ µÈ ¾ÖÆ®¸®ºäÆ®

17.4.1 INPUT·Î »ý¼ºµÇ´Â Á¦¾î(control) ŸÀÔ(type)

INPUT ¿¤·¹¸àÆ® ÀÇÇÏ¿© Á¤ÀÇ µÈ Á¦¾î ŸÀÔÀº type ¾ÖÆ®¸®ºäÆ®ÀÇ °ª¿¡ µû¶ó ´Ù¸£´Ù.

text
ÇÑ ¿­ÀÇ ÅؽºÆ® ÀÔ·Â Á¦¾î(control).
password
"text"¿Í °°À¸³ª, ÀÔ·Â ÅؽºÆ®´Â ****¿Í °°ÀÌ °¨Ãß¾îÁø ÇüÅ·ΠǥÇöµÈ´Ù. ÀÌ Á¦¾î ŸÀÔÀº ¾ÏÈ£¿Í °°Àº ¿¹¹ÎÇÑ ÀԷ¿¡ ÀÚÁÖ »ç¿ëµÈ´Ù. ÇöÀç°ªÀº »ç¿ëÀÚ¿¡ ÀÇÇÏ¿© ÀÔ·Â µÈ ÅؽºÆ®ÀÇ °ªÀÌÀ¸·Î »ç¿ëµµ±¸¿¡ ÀÇÇÏ¿© Ç¥ÇöµÇÁö ¾Ê´Â´Ù.
ÁÖ¼®: ¼³°èÀÚ´Â ÀÌ ±â´ÉÀÌ ¾àÇÑ º¸¾È ¸¸À» Á¦°øÇÑ´Ù´Â °ÍÀ» ¸í½ÉÇؾßÇÑ´Ù. ¾ÏÈ£´Â »ç¿ëµµ±¸¿¡ ÀÇÇÏ¿© ÀÏ¹Ý »ç¿ëÀÚ¿¡°Ô´Â °¡·ÁÁöÁö¸¸ ¼­º¸¿¡´Â ¸íÈ®ÇÑ ÅؽºÆ®·Î ¼Û½ÅµÇ¾î ³×Æ®¿ö±×(network)ÀÇ ³·Àº ¼öÁØ Á¢±Ù Çã°¡¸¦ ¹ÞÀº »ç¶÷µéÀÌ ´Ù ÀÐÀ» ¼ö ÀÖ´Ù.
checkbox
üũ¹Ú½º(checkbox)¸¦ ¸¸µç´Ù.
radio
·¹µð¿À ´ÜÃß(radio button)¸¦ ¸¸µç´Ù.
submit
¼Û½Å ´ÜÃß(submit button)¸¦ ¸¸µç´Ù.
image
±×·¡ÇÈ ¼Û½Å ´ÜÃß(submit button)¸¦ ¸¸µç´Ù. src ¾ÖÆ®¸®ºäÆ®ÀÇ °ªÀº ´ÜÃ߸¦ Àå½Ä ÇÒ À̹ÌÁöÀÇ URI¸¦ ÁöÁ¤ÇÑ´Ù. Á¢¼Ó¼º ¶§¹®¿¡, Á¦ÀÛÀÚ´Â alt ¾ÖÆ®¸®ºäÆ®¸¦ ÅëÇÏ¿©, À̹ÌÁö¸¦ À§ ÇÑ ´ëü ÅؽºÆ®¸¦ Á¦°øÇÏ¿©¾ß ÇÑ´Ù.

À̹ÌÁö À§¸¦ Ŭ¸¯Çϸé, Æû(form)Àº ¼Û½ÅµÇ°í Ŭ¸¯ÇÑ ÁÂÇ¥(coordinates)°¡ ¼­¹ö¿¡ Àü´ÞµÈ´Ù. x °ªÀº ¿ÞÂÊ ¸¶ÁøÀ¸·Î ºÎÅÍ À̹ÌÁöÀÇ ¿ÞÂÊ ³¡ ±îÁöÀÇ Çȼ¿(pixel) ¼ö ÀÌ°í, y °ªÀº À§ÂÊ ¸¶ÁøÀ¸·Î ºÎÅÍ À̹ÌÁöÀÇ À§ÂÊ ³¡ ±îÁöÀÇ Çȼ¿ ¼ö ÀÌ´Ù. ¼Û½Å(submit) µÈ µ¥ÀÌÅÍ´Â name.x=x-value¿Í name.y=y-valueÀÇ °ªÀÌ µÉ ¼ö Àִµ¥, ¿©±â¼­ "name"Àº name ¾ÖÆ®¸®ºäÆ®ÀÇ °ªÀÌ°í, x-value¿Í y-value´Â x¿Í yÀÇ °¢ ÁÂÇ¥°ªÀÌ´Ù.

¸¸ÀÏ ¼­¹ö°¡ Ŭ¸¯ ÇÑ À§Ä¡¿¡ µû¶ó ¼­·Î ´Ù¸¥ ÀÛµ¿µéÀ» ÇÏ´Â °ÍÀ̸é, ºñ ±×¶óÇÈ(non-graphic) ºê¶ó¿ìÀú »ç¿ëÀÚ´Â ºÒÀÌÀÍÀ» ¹ÞÀ» °ÍÀÌ´Ù. ±×·¡¼­, Á¦ÀÛÀÚ´Â ´ÙÀ½ÀÇ ´ëü ¹æ½ÄÀ» °í·ÁÇÏ¿©¾ß ÇÒ °ÍÀÌ´Ù.

  • ÇϳªÀÇ ±×·¡ÇÈ ¼Û½Å ´ÜÃß ´ë½Å¿¡, °¢ °¢ º°µµÀÇ À̹ÌÁö¸¦ »ç¿ëÇÏ´Â º¹¼ö ¼Û½Å ´ÜÃßÀÇ »ç¿ë. Á¦ÀÛÀÚ´Â ÀÌ ´ÜÃßµéÀÇ À§Ä¡¸¦ Á¦¾îÇϱâ À§ÇÏ¿© ½ºÅ¸ÀϽ¬Æ®(style sheet)¸¦ »ç¿ë ÇÒ ¼ö ÀÖ´Ù.
  • »ç¿ëÀÚÃø À̹ÌÁö¸ÊÀ» ½ºÅ©¸³Æ®(script)¿Í ÇÔ²² »ç¿ë.
reset
Àç¼³Á¤ ´ÜÃß(reset button)¸¦ ¸¸µç´Ù.
button
´©¸§´ÜÃß(push button)¸¦ ¸¸µç´Ù. »ç¿ëµµ±¸´Â value ¾ÖÆ®¸®ºäÆ® °ªÀ» ±× ´ÜÃßÀÇ ¶óº§(label)·Î »ç¿ëÇÏ¿©¾ß ÇÑ´Ù.
hidden
°¨Ãß¾î Áø Á¦¾î(hidden control)¸¦ ¸¸µç´Ù.
file
È­ÀÏ ¼±Åà Á¦¾î(file select control)¸¦ ¸¸µç´Ù. »ç¿ëµµ±¸´Â value ¾ÖÆ®¸®ºäÆ® °ªÀ» Ãʱâ È­ÀÏ À̸§À¸·Î »ç¿ëµÈ´Ù.

17.4.2 INPUT Á¦¾î(control)¸¦ °®´Â ¿¹Á¦

´ÙÀ½ ¿¹Á¦ HTML ºÎºÐÀº »ç¿ëÀÚ°¡ ¼º, ¸í, ÀüÀÚ ¿ìÆí ÁÖ¼Ò, ¼ºº°À» ÀÔ·Â ÇÒ ¼ö ÀÖ´Â °£´ÜÇÑ Æû¸¦ Á¤ÀÇÇÑ´Ù. ¼Û½Å(submit) ´ÜÃß°¡ È°¼ºÈ­µÇ¸é, ÆûÀº 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">
 </P>
</FORM>

ÀÌ ÆûÀÇ Ç¥ÇöÀº ´ÙÀ½°ú °°À» °ÍÀÌ´Ù.

Æû Ç¥Çö ¿¹Á¦.

LABEL ¿¤·¹¸àÆ®¿¡¼­, "First name"¿Í °°Àº ¶óº§À» ÁÖ´Â °ÍÀ» ´Ù·ð´Ù.

´ÙÀ½ ¿¹Á¦´Â,"onclick" À̺¥Æ®(event)·Î Javascript ±â´É À̸§(function name) verify()°¡ ¼±ÅõȴÙ.

<HEAD>
 <META http-equiv="Content-Script-Type" content="text/Javascript">
</HEAD>
<BODY>
 <FORM action="..." method="post">
   <P>
   <INPUT type="button" value="ÀÛµ¿" onclick="verify()">
 </FORM>
</BODY>

½ºÅ©¸³Æ®¿Í À̺¥Æ®¿¡ ´ë ÇÑ Ãß°¡ Á¤º¸´Â º»ÁúÀû À̺¥Æ®À» ÂüÁ¶Ç϶ó.

´ÙÀ½ ¿¹Á¦´Â »ç¿ëÀÚ ÁöÁ¤ È­ÀÏÀÇ ³»¿ëÀÌ ¾î¶»°Ô Æû°ú ÇÔ²² ¼Û½ÅµÇ´Â°¡¸¦ º¸¿© ÁØ´Ù. »ç¿ëÀÚ¿¡°Ô Æû°ú ÇÔ²² ¼Û½Å µÉ À̸§°ú È­ÀÏ¸í ¸ñ·ÏÀ» ¼±ÅÃÇÒ ¼ö ÀÖ°Ô ÇÁ·ÒÇÁÆ®(prompted)°¡ Ç¥½ÃµÈ´Ù. enctype °ªÀ» "multipart/form-data"·Î ÁöÁ¤ÇϹǷμ­, °¢ È­ÀÏÀÇ ³»¿ëÀº º¹ÇÕ ¹®¼­ÀÇ ºÐ¸® µÈ Ç׸ñÀ¸·Î ¼Û½ÅµÇµµ·Ï ¹­ÀÌ°Ô µÉ °ÍÀÌ´Ù.

<FORM action="http://server.dom/cgi/handle" enctype="multipart/form-data"
	method="post">
 <P>¼º¸íÀº? <INPUT type="text" name="name_of_sender">
 º¸³¾ È­ÀϸíÀº? <INPUT type="file" name="name_of_files"></P>
</FORM>

17.5 BUTTON ¿¤·¹¸àÆ®(element)

<!ELEMENT BUTTON - -
    (%flow;)* -(A | %formctrl; | FORM | FIELDSET)   -- ´©¸§´ÜÃß(push button) -->
<!ATTLIST BUTTON
 %attrs;                              -- %coreattrs, %i18n, %events --
 name        CDATA          #IMPLIED
 value       CDATA          #IMPLIED  -- ¼Û½Å(submit)À¸·Î ¼­¹ö·Î º¸³»Áü --
 type        (button | submit | reset) submit -- Æû ´ÜÃß·Î »ç¿ë --
 disabled    (disabled)     #IMPLIED  -- ÀÌ ³»¿ëÀ» ºÒÈ°¼ºÈ­ --
 tabindex    NUMBER         #IMPLIED  -- ÅÇ À§Ä¡ ¼øÀ§¿¡¼­ÀÇ À§Ä¡ --
 accesskey   %Character;    #IMPLIED  -- Á¢¼ÓÅ° ±ÛÀÚ --
 onfocus     %Script;       #IMPLIED  -- ¿¤·¹¸àÆ®(element)¿¡ ÃÊÁ¡(focus) ¸ÂÃã --
 onblur      %Script;       #IMPLIED  -- ¿¤·¹¸àÆ®¿¡ ÃÊÁ¡ ÇØÁ¦ --
>

½ÃÀÛű×: ÇÊ¿ä ÇÔ, Á¾·áű×: ÇÊ¿ä ÇÔ

¾ÖÆ®¸®ºäÆ®ÀÇ Á¤ÀÇ

name = cdata [´ë¼Ò¹®ÀÚ ±¸º° ¾øÀÌ: CI]
ÀÌ ¾ÖÆ®¸®ºäÆ®´Â Á¦¾î À̸§(control name)À» ÁöÁ¤ÇÑ´Ù.
value = cdata [´ë¼Ò¹®ÀÚ ±¸º°: CS]
ÀÌ ¾ÖÆ®¸®ºäÆ®´Â ´ÜÃßÀÇ ÃʱⰪÀ» ÁöÁ¤ÇÑ´Ù.
type = submit|button|reset [´ë¼Ò¹®ÀÚ ±¸º° ¾øÀÌ: CI]
ÀÌ ¾ÖÆ®¸®ºäÆ®´Â ´ÜÃßÀÇ Å¸ÀÔÀ» ¼±¾ðÇϸç, °¡´ÉÇÑ °ªÀº:
´Ù¸¥ °÷¿¡¼­ Á¤ÀÇ µÈ ¾ÖÆ®¸®ºäÆ®

BUTTON ¿¤·¹¸àÆ® ±â´É¿¡ ÀÇÇÏ¿© ¸¸µé¾îÁø ´ÜÃß(button)´Â INPUT ¿¤·¹¸àÆ®¿¡ ÀÇÇÏ¿© ¸¸µé¾îÁø ´ÜÃß¿Í °°À¸³ª, ´õ dzºÎÇÑ Ç¥ÇöÀÇ °¡´É¼ºÀ» Á¦°øÇÑ´Ù. BUTTON ¿¤·¹¸àÆ®´Â ³»¿ëÀ» °¡Áú ¼ö ÀÖ´Ù. ¿¹¸¦ µé¾î, À̹ÌÁö ±â´ÉÀ» °®´Â BUTTON ¿¤·¹¸àÆ®´Â typeÀÌ "image"·Î ¼³Á¤ µÈ INPUT ¿¤·¹¸àÆ®¿Í °°°Å³ª À¯»çÇϳª, BUTTON ¿¤·¹¸àÆ®´Â ³»¿ëÀ» °¡Áú ¼ö ÀÖ´Ù.

º¸´Â »ç¿ëµµ±¸´Â INPUT ´ÜÃ߸¦ ´Ü¼øÇÑ À̹ÌÁö·Î Ç¥Çö ÇÒ ¼ö ÀÖÁö ¸¸, BUTTON ´ÜÃ߸¦ Ŭ¸¯ÇÏ¿´À» ¶§, ¿Ã¶ó°¡±â/³»·Á°¡±â¿Í ÇØÁ¦ÀÇ ¸ð¾çÀ¸·Î Ç¥Çö ÇÒ ¼ö ÀÖ´Ù.

´ÙÀ½ ¿¹Á¦´Â À§ ¿¹Á¦ÀÇ submit¿Í reset ´ÜÃß¿¡ INPUT ´ë½Å BUTTON ´ÜÃ߸¦ »ç¿ëÇÏ¿´´Ù. ÀÌ ´ÜÃßµéÀº IMG ¿¤·¹¸àÆ®ÀÇ ¹æ½ÄÀ¸·Î À̹ÌÁö¸¦ Æ÷ÇÔÇÑ´Ù.

<FORM action="http://somesite.com/prog/adduser" method="post">
 <P>
   ¼º: <INPUT type="text" name="firstname"><BR>
   ¸í: <INPUT type="text" name="lastname"><BR>
   ÀüÀÚ ¿ìÆí: <INPUT type="text" name="email"><BR>
   <INPUT type="radio" name="sex" value="Male"> ³²<BR>
   <INPUT type="radio" name="sex" value="Female"> ¿©<BR>
   <BUTTON name="submit" value="submit" type="submit">
     ¼Û½Å<IMG src="/icons/wow.gif" alt="wow"></BUTTON>
   <BUTTON name="reset" type="reset">
     Àç¼³Á¤<IMG src="/icons/oops.gif" alt="oops"></BUTTON>
 </P>
</FORM>

Á¦ÀÛÀÚ´Â IMG ¿¤·¹¸àÆ®¿¡ ´ëü ÅؽºÆ®¸¦ Á¦°øÇÏ¿©¾ß ÇÔÀ» »ó±â½ÃŲ´Ù.

BUTTON ¿¤·¹¸àÆ®ÀÇ ³»¿ëÀ¸·Î ³ªÅ¸³ª´Â IMG¸¦ À̹ÌÁö¸Ê°ú ¿¬°ü½ÃÅ°´Â °ÍÀº Ʋ¸° °ÍÀÌ´Ù.

Ʋ¸° ¿¹Á¦:
´ÙÀ½Àº Ʋ¸° HTMLÀÌ´Ù.

<BUTTON>
 <IMG src="foo.gif" usemap="...">
</BUTTON>

17.6 SELECT, OPTGROUP, OPTION ¿¤·¹¸àÆ®(element)

<!ELEMENT SELECT - - (OPTGROUP | OPTION)+ -- ¼±Åà »çÇ× ¼±ÅÃÀÚ(selector) -->
<!ATTLIST SELECT
 %attrs;                              -- %coreattrs, %i18n, %events --
 name        CDATA          #IMPLIED  -- Çʵå¸í(field name) --
 size        NUMBER         #IMPLIED  -- º¸ÀÌ´Â ¿­(row) --
 multiple    (multiple)     #IMPLIED  -- µðÆúÆ®´Â ´ÜÀÏ ¼±Åà --
 disabled    (disabled)     #IMPLIED  -- ÀÌ ³»¿ëÀ» ºÒÈ°¼ºÈ­ --
 tabindex    NUMBER         #IMPLIED  -- ÅÇ À§Ä¡ ¼øÀ§¿¡¼­ÀÇ À§Ä¡ --
 onfocus     %Script;       #IMPLIED  -- ¿¤·¹¸àÆ®(element)¿¡ ÃÊÁ¡(focus) ¸ÂÃã --
 onblur      %Script;       #IMPLIED  -- ¿¤·¹¸àÆ®¿¡ ÃÊÁ¡ ÇØÁ¦ --
 onchange    %Script;       #IMPLIED  -- ¿¤·¹¸àÆ® °ªÀÌ º¯°æµÇ¾ú½¿ --
>

½ÃÀÛű×: ÇÊ¿ä ÇÔ, Á¾·áű×: ÇÊ¿ä ÇÔ

SELECT ¾ÖÆ®¸®ºäÆ®(attribute) Á¤ÀÇ

name = cdata [´ë¼Ò¹®ÀÚ ±¸º° ¾øÀÌ: CI]
ÀÌ ¾ÖÆ®¸®ºäÆ®´Â Á¦¾î À̸§(control name)À» ¼³Á¤ÇÑ´Ù.
size = number [´ë¼Ò¹®ÀÚ Á߸³: CN]
¸¸ÀÏ SELECT ¿¤·¹¸àÆ®°¡ ±¼¸®´Â(scroll) ¸ñ·Ï »óÀÚ¿¡ ÀÖÀ¸¸é, ÀÌ ¾ÖÆ®¸®ºäÆ®´Â µ¿½Ã¿¡ º¸ÀÌ´Â ¸ñ·Ï¿¡ ÀÖ´Â ¿­(row)ÀÇ ¼ö¸¦ ÁöÁ¤ÇÑ´Ù. º¸´Â(visual) »ç¿ëµµ±¸Àº SELECT ¿¤·¹¸àÆ®¸¦ ¸ñ·Ï »óÀÚ(list box)·Î Ç¥Çö ÇÒ ÇÊ¿ä´Â ¾ø°í, µå·Ó´Ù¿î(drop-down) ¸Þ´º¿Í °°Àº ´Ù¸¥ ±â´ÉÀ» »ç¿ë ÇÒ ¼ö ÀÖ´Ù.
multiple [´ë¼Ò¹®ÀÚ ±¸º° ¾øÀÌ: CI]
¸¸ÀÏ ¼³Á¤µÇ¸é, ÀÌ ºÒ¸°(boolean) ¾ÖÆ®¸®ºäÆ®´Â º¹¼ö ¼±ÅÃÀ» Çã¿ëÇÏ°í, ¼³Á¤µÇÁö ¾ÊÀ¸¸é, SELECT ¿¤·¹¸àÆ®´Â ´ÜÀÏ ¼±Åà ¸¸À» Çã¿ëÇÑ´Ù.
´Ù¸¥ °÷¿¡¼­ Á¤ÀÇ µÈ ¾ÖÆ®¸®ºäÆ®

SELECT ¿¤·¹¸àÆ®´Â ¸Þ´º(menu)¸¦ ¸¸µç´Ù. ¸Þ´ºÀÇ °¢ ¼±ÅÃÀº OPTION ¿¤·¹¸àÆ®·Î ³ªÅ¸³­´Ù. SELECT ¿¤·¹¸àÆ®´Â ÃÖ¼Ò ÇÑ°³ÀÇ OPTION ¿¤·¹¸àÆ®¸¦ °¡Á®¾ßÇÑ´Ù.

OPTGROUP ¿¤·¹¸àÆ®´Â Á¦ÀÛÀÚ¿¡°Ô ¼±ÅÃÀÇ ³í¸®Àû ±¸·ìÁö¿òÀ» Çã¿ëÇÑ´Ù. ÀÌ´Â »ç¿ëÀÚ°¡ ±ä ¼±Åà »çÇ× ¸ñ·ÏÀ¸·Î ºÎÅÍ ¼±ÅÃÇØ¾ß µÉ ¶§, ±ä ¼±Åà »çÇ×ÀÇ ´ÜÀÏ ¸ñ·Ïº¸´Ù, °ü°è µÈ ¼±ÅõéÀ» ±¸·ìÁö¿ì´Â °ÍÀÌ ÆľÇÇÏ°í ±â¾ïÇϱ⠿ëÀÌÇÏ¿© ƯÈ÷ À¯¿ëÇÏ´Ù. HTML 4¿¡¼­, ¸ðµç OPTGROUP ¿¤·¹¸àÆ®´Â Á÷Á¢ SELECT ¿¤·¹¸àÆ® ¾È¿¡¼­ Á¤ÀÇÇÏ¿©¾ß ÇÑ´Ù. ¸»ÇÏÀÚ¸é ±¸·ìÀº ³×½ºÆ®(nest)µÇÁö ¸»¾Æ¾ßÇÑ´Ù.

17.6.1 »çÀü ¼±Åà µÈ(pre-selected) ¼±Åà »çÇ×

»çÀü ¼±Åà µÈ °ÍÀÌ ¾ø°Å³ª ¿©·¯°³°¡ µÉ ¼ö ÀÖ´Ù. »ç¿ëµµ±¸´Â ¾î´À ¼±ÅÃÀÌ »çÀü ¼±Åà µÈ °ÍÀÎÁö ´ÙÀ½°ú °°ÀÌ ÆǺ°ÇÑ´Ù.

<!ELEMENT OPTGROUP - - (OPTION)+ -- ¼±Åà »çÇ× ±¸·ì -->
<!ATTLIST OPTGROUP
 %attrs;                              -- %coreattrs, %i18n, %events --
 disabled    (disabled)     #IMPLIED  -- ÀÌ ³»¿ëÀ» ºÒÈ°¼ºÈ­ --
 label       %Text;         #REQUIRED -- ¸Þ´º °èÅë(hierarchical)¿¡ »ç¿ë --
>

½ÃÀÛű×: ÇÊ¿ä ÇÔ, Á¾·áű×: ÇÊ¿ä ÇÔ

OPTGROUP ¾ÖÆ®¸®ºäÆ®(attribute) Á¤ÀÇ

label = text [´ë¼Ò¹®ÀÚ ±¸º°: CS]
ÀÌ ¾ÖÆ®¸®ºäÆ®´Â ¼±Åà »çÇ× ±¸·ìÀÇ ¶óº§(label)Àº ÁöÁ¤ÇÑ´Ù.
´Ù¸¥ °÷¿¡¼­ Á¤ÀÇ µÈ ¾ÖÆ®¸®ºäÆ®

ÁÖ¼®: ÇâÈÄ HTMLÀÇ ¹öÀüÀº ±¸·ìÀÇ ³×½ºÆ®(nest)¸¦ Çã¿ëÇÏ´Â ±¸·ìÁö¿ì±â°¡ äÅà µÉ °ÍÀ» ¿¹°íÇÏ°í ÀÖ´Ù. ¸»ÇÏÀÚ¸é OPTGROUP ¿¤·¹¸àÆ®°¡ ³×½ºÆ® µÉ ¼ö ÀÖ´Ù´Â °ÍÀÌ´Ù. ÀÌ´Â Á¦ÀÛÀÚ¿¡°Ô ¼±Åà °èÅë(hierarchy)ÀÇ Ç¥ÇöÀ» dzºÎÇÏ°Ô ÇÒ °ÍÀÌ´Ù.

<!ELEMENT OPTION - O (#PCDATA)        -- ¼±Åà ÇÒ ¼ö ÀÖ´Â Ç׸ñ -->
<!ATTLIST OPTION
 %attrs;                              -- %coreattrs, %i18n, %events --
 selected    (selected)     #IMPLIED
 disabled    (disabled)     #IMPLIED  -- ÀÌ ³»¿ëÀ» ºÒÈ°¼ºÈ­ --
 label       %Text;         #IMPLIED  -- ¸Þ´º °èÅë(hierarchical)¿¡ »ç¿ë --
 value       CDATA          #IMPLIED  -- ¿¤·¹¸àÆ® ³»¿ëÀÇ µðÆúÆ® Á¦°ø --
>

½ÃÀÛű×: ÇÊ¿ä ÇÔ, Á¾·áű×: ¼±ÅÃÀû

¼±Åà »çÇ× ¾ÖÆ®¸®ºäÆ®(attribute) Á¤ÀÇ

selected [´ë¼Ò¹®ÀÚ ±¸º° ¾øÀÌ: CI]
¼³Á¤µÇ¸é, ÀÌ ºÒ¸°(boolean) ¾ÖÆ®¸®ºäÆ®´Â ÀÌ ¼±Åà »çÇ× »çÀü ¼±Åà µÈ °ÍÀÓÀ» ÁöÁ¤ÇÑ´Ù.
value = cdata [´ë¼Ò¹®ÀÚ ±¸º°: CS]
ÀÌ ¾ÖÆ®¸®ºäÆ®´Â Á¦¾î(control)ÀÇ ÃʱⰪÀ» ÁöÁ¤ÇÑ´Ù. ¸¸ÀÏ ÀÌ ¾ÖÆ®¸®ºäÆ®°¡ ¼³Á¤µÇÁö ¾Ê¾ÒÀ¸¸é, ÃÖÃÊ°ªÀº OPTION ¿¤·¹¸àÆ®ÀÇ ³»¿ëÀ¸·Î ¼³Á¤µÈ´Ù.
label = text [´ë¼Ò¹®ÀÚ ±¸º°: CS]
ÀÌ ¾ÖÆ®¸®ºäÆ®´Â Á¦ÀÛÀÚ°¡ ¼±Åà »çÇ×À» OPTION ¿¤·¹¸àÆ®ÀÇ ³»¿ë ´ë½Å ªÀº ¶óº§(label)·Î ÁöÁ¤ ÇÒ ¼ö ÀÖ°Ô ÇÑ´Ù. ÁöÁ¤µÇ¸é, »ç¿ëµµ±¸´Â OPTION ¿¤·¹¸àÆ®ÀÇ Á¦¾î »ç¿ë ´ë½Å ÀÌ ¾ÖÆ®¸®ºäÆ®ÀÇ °ªÀ» ¼±Åà »çÇ× ¶óº§·Î »ç¿ëÇÏ¿©¾ß ÇÑ´Ù.
´Ù¸¥ °÷¿¡¼­ Á¤ÀÇ µÈ ¾ÖÆ®¸®ºäÆ®

¸Þ´º ¼±ÅÃÀ» Ç¥Çö ÇÒ ¶§, »ç¿ëµµ±¸´Â OPTION ¿¤·¹¸àÆ®ÀÇ label ¾ÖÆ®¸®ºäÆ®ÀÇ °ªÀ» ±× ¼±ÅÃÀ¸·Î »ç¿ëÇÏ¿©¾ß ÇÏ°í, ¸¸ÀÏ ÁöÁ¤µÇÁö ¾Ê¾ÒÀ¸¸é, OPTION ¿¤·¹¸àÆ®ÀÇ ³»¿ëÀ» »ç¿ëÇÏ¿©¾ß ÇÑ´Ù.

OPTGROUP ¿¤·¹¸àÆ®ÀÇ label ¾ÖÆ®¸®ºäÆ®´Â ¼±Åà ±¸·ìÀÇ ¶óº§À» ÁöÁ¤ÇÑ´Ù.

¾Æ·¡ ¿¹Á¦¿¡¼­, »ç¿ëÀÚ°¡ 7°¡Áö ¼ÒÇÁÆ®¿þ¾î Ç׸ñÀ¸·Î ºÎÅÍ ¼³Á¤À» ¼±ÅÃÀ» ÇÒ ¼ö ÀÖ´Â ¸Þ´º¸¦ ¸¸µé¾ú´Ù. ù¹ø°¿Í µÎ¹ø° Ç׸ñÀº »çÀü ¼±Åà µÈ Ç׸ñÀ̳ª »ç¿ëÀÚ°¡ ¼±ÅÃÀ» ÇØÁ¦ ÇÒ ¼ö ÀÖ´Ù. ³ª¸ÓÁö Ç׸ñµéÀº ¹Ì¸® ¼±ÅõÇÁö ¾Ê´Ù. size ¾ÖÆ®¸®ºäÆ®´Â »ç¿ëÀÚ°¡ 7°¡Áö ¼±Åà »çÇ×µé Áß¿¡¼­ ¼±Åà ÇÒ ¼ö ÀÖ½¿¿¡µµ ºÒ±¸ÇÏ°í, ¸Þ´º°¡ 4 ¿­(row) ¸¸À» °®µµ·Ï ÁöÁ¤ÇÏ¿´´Ù. ´Ù¸¥ ¼±Åà »çÇ×µéÀº ±¼¸®±â(scroll) ±â´ÉÀ» ÅëÇÏ¿© ¼±Åà ÇÒ ¼ö ÀÖ´Ù.

SELECT ´ÙÀ½¿¡ ¼Û½Å(submit)°ú Àç¼³Á¤(reset) ´ÜÃß°¡ ÀÖ´Ù.

<FORM action="http://somesite.com/prog/component-select" method="post">
 <P>
 <SELECT multiple size="4" name="component-select">
   <SELECT selected value="Component_1_a">Component_1</SELECT>
   <SELECT selected value="Component_1_b">Component_2</SELECT>
   <SELECT>Component_3</SELECT>
   <SELECT>Component_4</SELECT>
   <SELECT>Component_5</SELECT>
   <SELECT>Component_6</SELECT>
   <SELECT>Component_7</SELECT>
 </SELECT>
 <INPUT type="submit" value="¼±ÅÿϷá"><INPUT type="reset" value="Àç¼³Á¤">
 </P>
</FORM>

±ÍÇÏÀÇ ºÎ¶ó¿ìÀú·Î(½ÇÁ¦ ÀÛµ¿Àº ¾ÊÇÔ):

¼±Åà µÈ Ç׸ñ ¸¸ÀÌ Á¦¾î À̸§ "component-select"¸¦ »ç¿ëÇÏ¿©, ¼º°øÀû(successful)À̵ȴÙ. ¾Æ¹« option µµ ¼±ÅõÇÁö ¾Ê¾ÒÀ¸¸é, ±× Á¦¾î´Â ¼º°øÀûÀÌ ¾Æ´Ï¸ç ÆûÀ» ¼Û½Å(submit)ÇÏ¿´À» ¶§ ¼­¹ö¿¡ À̸§À̳ª °ªÀÌ Àü´ÞµÇÁö ¾Ê´Â´Ù. value ¾ÖÆ®¸®ºäÆ®°¡ ¼³Á¤µÇ¸é, Á¦¾îÀÇ ÃÖÃÊ°ªÀ» °áÁ¤Çϸç, ±×·¸Áö ¾ÊÀ¸¸é Á¦¾î´Â ±× ¿¤·¹¸àÆ®ÀÇ ³»¿ë(contents)ÀÌ µÈ´Ù´Â Á¡¿¡ À¯ÀÇÇ϶ó.

´ÙÀ½ ¿¹Á¦´Â ¼±Åà »çÇ×ÀÇ ±¸·ìÀ» À§ÇÏ¿© OPTGROUP ¿¤·¹¸àÆ®¸¦ »ç¿ëÇÏ¿´´Ù.

<FORM action="http://somesite.com/prog/someprog" method="post">
 <P>
 <SELECT name="ComOS">
   <OPTGROUP label="PortMaster 3">
     <SELECT label="3.7.1" value="pm3_3.7.1">PortMaster 3 with ComOS 3.7.1
     <SELECT label="3.7" value="pm3_3.7">PortMaster 3 with ComOS 3.7
     <SELECT label="3.5" value="pm3_3.5">PortMaster 3 with ComOS 3.5
   </OPTGROUP>
   <OPTGROUP label="PortMaster 2">
     <SELECT label="3.7" value="pm2_3.7">PortMaster 2 with ComOS 3.7
     <SELECT label="3.5" value="pm2_3.5">PortMaster 2 with ComOS 3.5
   </OPTGROUP>
   <OPTGROUP label="IRX">
     <SELECT label="3.7R" value="IRX_3.7R">IRX with ComOS 3.7R
     <SELECT label="3.5R" value="IRX_3.5R">IRX with ComOS 3.5R
 </OPTGROUP>
 </SELECT>
</FORM>

±¸·ìÇÎ(grouping)Àº ´ÙÀ½°ú °°ÀÌ Ç¥ÇöµÈ´Ù.

 PortMaster 3
     3.7.1
     3.7
     3.5
 PortMaster 2
     3.7
     3.5
 IRX
     3.7R
     3.5R

º¸´Â(visual) »ç¿ëµµ±¸´Â »ç¿ëÀÚ°¡ ¼±Åà »çÇ× ±¸·ìÀ¸·Î ºÎÅÍ °èÅë(hierarchical) ¸Þ´º ¶Ç´Â ¼±Åà »çÇ×ÀÇ ±¸Á¶¸¦ ¹Ý¿µÇÏ´Â ±â´ÉÀ» ÅëÇÏ¿© ¼±Åà ÇÒ ¼ö ÀÖ°Ô ÇÑ´Ù.

±×·¡ÇÈ »ç¿ëµµ±¸´Â ´ÙÀ½°ú °°ÀÌ Ç¥Çö ÇÒ °ÍÀÌ´Ù.

°¡´ÉÇÑ OPTGROUPÀÇ Ç¥Çö

ÀÌ À̹ÌÁö´Â Ä«½ºÄÉÀ̵ù(cascading) ¸Þ´º·Î Ç¥Çö µÈ SELECT ¿¤·¹¸àÆ®¸¦ º¸¿©ÁØ´Ù. ¸Þ´ºÀÇ ¸Ç À§ ¶óº§(label)Àº ÇöÀç ¼±ÅÃµÈ °ª (PortMaster 3, 3.7.1)ÀÌ´Ù. »ç¿ëÀÚ´Â µÎ Ä«½ºÄÉÀ̵ù(cascading) ¸Þ´º¸¦ ¿­Áö ¾Ê¾Ò°í, »õ °ª (PortMaster 2, 3.7)À» ¾ÆÁ÷ ¼±ÅÃÇÏÁö ¾Ê¾Ò´Ù. °¢ Ä«½ºÄÉÀ̵ù ¸Þ´º´Â OPTGROUP ¶Ç´Â OPTION ¿¤·¹¸àÆ®ÀÇ ¶óº§À» µð½ºÇ÷¹ÀÌÇÑ´Ù.

17.7 TEXTAREA ¿¤·¹¸àÆ®(element)

<!ELEMENT TEXTAREA - - (#PCDATA)   -- ¿©·¯ ¿­(multi-line) ÅؽºÆ® Çʵå(field) -->
<!ATTLIST TEXTAREA
 %attrs;                              -- %coreattrs, %i18n, %events --
 name        CDATA          #IMPLIED
 rows        NUMBER         #REQUIRED
 cols        NUMBER         #REQUIRED
 disabled    (disabled)     #IMPLIED  -- ÀÌ ³»¿ëÀ» ºÒÈ°¼ºÈ­ --
 readonly    (readonly)     #IMPLIED
 tabindex    NUMBER         #IMPLIED  -- ÅÇ À§Ä¡ ¼øÀ§¿¡¼­ÀÇ À§Ä¡--
 accesskey   %Character;    #IMPLIED  -- Á¢¼ÓÅ° ±ÛÀÚ --
 onfocus     %Script;       #IMPLIED  -- ¿¤·¹¸àÆ®(element)¿¡ ÃÊÁ¡(focus) ¸ÂÃã --
 onblur      %Script;       #IMPLIED  -- ¿¤·¹¸àÆ®¿¡ ÃÊÁ¡ ÇØÁ¦ --
 onselect    %Script;       #IMPLIED  -- ÀϺΠÅؽºÆ®°¡ ¼±Åà µÊ --
 onchange    %Script;       #IMPLIED  -- ¿¤·¹¸àÆ®ÀÇ °ªÀÌ º¯°æµÇ¾ú½¿ --
>

½ÃÀÛű×: ÇÊ¿ä ÇÔ, Á¾·áű×: ÇÊ¿ä ÇÔ

¾ÖÆ®¸®ºäÆ®ÀÇ Á¤ÀÇ

name = cdata [´ë¼Ò¹®ÀÚ ±¸º° ¾øÀÌ: CI]
ÀÌ ¾ÖÆ®¸®ºäÆ®´Â Á¦¾î À̸§(control name)À» ÁöÁ¤ÇÑ´Ù.
rows = number [´ë¼Ò¹®ÀÚ Á߸³: CN]
ÀÌ ¾ÖÆ®¸®ºäÆ®´Â º¸ÀÌ´Â ÅؽºÆ®ÀÇ ¿­(line) ¼ö¸¦ ÁöÁ¤ÇÑ´Ù. »ç¿ëÀÚ´Â ÀÌ ¿­ ¼öº¸´Ù ´õ ¸¹Àº ¿­¿¡ ÀÔ·Â ½Ãų ¼ö ÀÖ¾î¾ß ÇÑ´Ù. »ç¿ëµµ±¸´Â ³»¿ëÀÌ º¸ÀÌ´Â Áö¿ªÀ» ÃÊ°úÇÏ¿´À» ¶§, Á¦¾îÀÇ ³»¿ëÀ» ±¼¸®´Â(scroll) ¼ö´ÜÀ» Á¦°øÇÏ¿©¾ß ÇÑ´Ù.
cols = number [´ë¼Ò¹®ÀÚ Á߸³: CN]
ÀÌ ¾ÖÆ®¸®ºäÆ®´Â º¸ÀÌ´Â ÅؽºÆ® ¿­ÀÇ º¸Åë ÀÔ·Â ³Êºñ ±ÛÀÚÀÇ °¹¼ö¸¦ ÁöÁ¤ÇÑ´Ù. »ç¿ëÀÚ´Â ÀÌ ±ÛÀÚ °¹¼öº¸´Ù ´õ ¸¹Àº ±ÛÀÚ¸¦ ¿­ÀÇ ÅؽºÆ®¸¦ ÀÔ·Â ½Ãų ¼ö ÀÖ¾î¾ß ÇÑ´Ù. ±×·¹¼­ »ç¿ëµµ±¸´Â ³»¿ëÀÌ º¸ÀÌ´Â Áö¿ªÀ» ÃÊ°úÇÏ¿´À» ¶§, Á¦¾îÀÇ ³»¿ëÀ» ±¼¸®´Â(scroll) ¾î¶² ¼ö´ÜÀ» Á¦°øÇÏ¿©¾ß ÇÑ´Ù. »ç¿ëµµ±¸´Â ±¼¸± ÇÊ¿ä ¾øÀÌ, ±ä ¿­µéÀ» º¼ ¼ö ÀÖ°Ô, º¸ÀÌ´Â ÅؽºÆ® ¿­µéÀÇ ÀÚµ¿ ÁٹٲÞÀ» ÇÒ ¼ö ÀÖ´Ù.
´Ù¸¥ °÷¿¡¼­ Á¤ÀÇ µÈ ¾ÖÆ®¸®ºäÆ®

TEXTAREA ¿¤·¹¸àÆ®Àº ¿©·¯ ¿­ ÅؽºÆ® ÀÔ·Â Á¦¾î¸¦ ¸¸µç´Ù. »ç¿ëµµ±¸´Â Á¦¾îÀÇ ÃÖÃÊ°ªÀ¸·Î ÀÌ ¿¤·¹¸àÆ®ÀÇ ³»¿ëÀ» »ç¿ëÇÏ°í, ÃÖÃÊ ÅؽºÆ®¸¦ Ç¥ÇöÇÏ¿©¾ß ÇÑ´Ù.

ÀÌ ¿¹Á¦´Â µÎ ¿­ÀÇ ÃÖÃÊ ÅؽºÆ®¸¦ Æ÷ÇÔÇÏ´Â 5¿­(row)¿¡ 60 Ä÷³(column)À» °®´Â TEXTAREA Á¦¾î¸¦ ¸¸µç´Ù. TEXTAREA ´ÙÀ½¿¡ ¼Û½Å(submit)°ú Àç¼³Á¤(reset) ´ÜÃß°¡ ¿Â´Ù.

<FORM action="http://somesite.com/prog/text-read" method="post">
 <P>
 <TEXTAREA name="thetext" rows="5" cols="60">
   ÃÖÃÊ ÅؽºÆ®ÀÇ Ã¹Â° ¿­.
   ÃÖÃÊ ÅؽºÆ®ÀÇ µÑ° ¿­ ÃʱⰪ.
 </TEXTAREA>
 <INPUT type="submit" value="ÀԷ¿Ϸá"><INPUT type="reset" value="Àç¼³Á¤">
 </P>
</FORM>

±ÍÇÏÀÇ ºÎ¶ó¿ìÀú·Î(½ÇÁ¦ ÀÛµ¿Àº ¾ÊÇÔ):

readonly(Àбâ Àü¿ë) ¾ÖÆ®¸®ºäÆ®¸¦ ¼³Á¤ ÇÔÀ¸·Î¼­ Á¦ÀÛÀÚ´Â TEXTAREA ¾È¿¡ ¼öÁ¤ µÉ ¼ö ¾ø´Â ÅؽºÆ®¸¦ Ç¥½Ã ÇÒ ¼ö ÀÖ´Ù. TEXTAREAÀÇ °ªÀÌ Æû°í ÇÔ²² ¼Û½ÅµÇ±â ¶§¹®¿¡ ¹®¼­ ÀÛ¼ºÇϴ ǥÁØ ÅؽºÆ®ÀÇ »ç¿ëÇÏ´Â °Í°ú ´Ù¸£´Ù.

17.8 ISINDEX ¿¤·¹¸àµå(element)

ISINDEX´Â ºÒ·®ÇÑ °ÍÀÌ´Ù. ÀÌ ¿¤·¹¸àµå´Â ÇÑ ¿­ ÅؽºÆ® ÀÔ·Â Á¦¾î¸¦ ¸¸µç´Ù. Á¦ÀÛÀÚ´Â ÅؽºÆ® ÀÔ·Â Á¦¾î¸¦ ¸¸µé±â À§ÇÏ¿© INPUT¸¦ »ç¿ëÇÑ´Ù.

°ø½ÄÀûÀÎ Á¤ÀÇ´Â º¯ÀÌ DTD¸¦ ÂüÁ¶Ç϶ó.

¾ÖÆ®¸®ºäÆ®ÀÇ Á¤ÀÇ

prompt = text [´ë¼Ò¹®ÀÚ ±¸º°: CS]
ºÒ·®ÇÑ °ÍÀÌ´Ù. ÀÌ ¾ÖÆ®¸®ºäÆ®´Â ÀÔ·ÂÄ­¿¡ Ä¿¼­¸¦ °¡Á®´Ù ³õÀ» ¹®ÀÚ¿­ÀÇ ÀÚ¸®(prompt)¸¦ ÁöÁ¤ÇÑ´Ù.
´Ù¸¥ °÷¿¡¼­ Á¤ÀÇ µÈ ¾ÖÆ®¸®ºäÆ®

ISINDEX ¿¤·¹¸àÆ®´Â ±ÛÀÚ °¹¼ö¿¡ °ü°è ¾øÀÌ ÇÑ ¿­(line) ÅؽºÆ® ÀÔ·Â Á¦¾î¸¦ ¸¸µç´Ù. »ç¿ëµµ±¸´Â prompt ¾ÖÆ®¸®ºäÆ®ÀÇ °ªÀ» ÇÁ·ÒÇÁÆ®ÀÇ Á¦¸ñÀ¸·Î »ç¿ë ÇÒ ¼ö ÀÖ´Ù.

ºÒ·®ÇÑ ¿¹Á¦:
´ÙÀ½¿¡ ISINDEX¸¦ ¼±¾ðÇÏ¿´´Ù.

<ISINDEX prompt="°Ë»ö ¹®±¸¸¦ ÀÔ·ÂÇϽÿÀ: ">

INPUT·Î ´ÙÀ½°ú °°ÀÌ ÇÒ ¼ö ÀÖ´Ù.

<FORM action="..." method="post">
 <P>°Ë»ö ¹®±¸¸¦ ÀÔ·ÂÇϽÿÀ: <INPUT type="text"></P>
</FORM>

ISINDEXÀÇ ÀǹÌ. ÇöÀç ISINDEXÀÇ Àǹ̴ ÷ºÎ µÈ ¹®¼­ÀÇ ±âÁØ URIÀÌ HTTP URI ÀÏ ¶§¿¡ ¸¸ Á¦´ë·Î Á¤ÀǵȴÙ. ½ÇÁ¦·Î´Â ´Ù¸¥ ±ÛÀÚ ¼¼Æ®·Î ÁöÁ¤ ÇÑ URI´Â ±â´ÉÀ» °®Áö ¾ÊÀ¸¹Ç·Î ¹®ÀÚ¿­ ÀÔ·ÂÀº Latin-1À¸·Î Á¦ÇѵǾîÀÖ´Ù.

17.9 ¶óº§(label)

ÅؽºÆ® Çʵå(text field), üũ¹Ú½º(checkbox), ·¹µð¿À ´ÜÃß(radio button), ¸Þ´º(menu) µî ´ëºÎºÐÀº °®Áö ¾ÊÁö¸¸, ÀϺΠÆû(form) Á¦¾î(control)´Â ÀÚµ¿ÀûÀ¸·Î ´ÜÃß¿Í ¿¬°ü µÈ ¶óº§À» °®´Â´Ù.

¾Ï½ÃÀû ¶óº§À» °®´Â Á¦¾î¿¡¼­, »ç¿ëµµ±¸´Â value ¾ÖÆ®¸®ºäÆ® °ªÀ» ¶óº§ ¹®ÀÚ¿­·Î »ç¿ëÇÏ¿©¾ß ÇÑ´Ù.

LABEL ¿¤·¹¸àÆ®´Â ¾Ï½ÃÀû ¶óº§¸¦ °¡Áö°í ÀÖÁö ¾Ê´Â Á¦¾îÀÇ ¶óº§À» ÁöÁ¤Çϱâ À§ÇÏ¿© »ç¿ëµÈ´Ù.

17.9.1 LABEL ¿¤·¹¸àÆ®(element)

<!ELEMENT LABEL - - (%inline;)* -(LABEL) -- Æû ÇÊµå ¶óº§ ÅؽºÆ® -->
<!ATTLIST LABEL
 %attrs;                              -- %coreattrs, %i18n, %events --
 for         IDREF          #IMPLIED  -- Çʵå ID °ª°ú ¸ÂÃã --
 accesskey   %Character;    #IMPLIED  -- Á¢¼ÓÅ° ±ÛÀÚ --
 onfocus     %Script;       #IMPLIED  -- ¿¤·¹¸àÆ®(element)¿¡ ÃÊÁ¡(focus) ¸ÂÃã --
 onblur      %Script;       #IMPLIED  -- ¿¤·¹¸àÆ®¿¡ ÃÊÁ¡ ÇØÁ¦ --
>

½ÃÀÛű×: ÇÊ¿ä ÇÔ, Á¾·áű×: ÇÊ¿ä ÇÔ

¾ÖÆ®¸®ºäÆ®ÀÇ Á¤ÀÇ

for = idref [´ë¼Ò¹®ÀÚ ±¸º°: CS]
ÀÌ ¾ÖÆ®¸®ºäÆ®´Â ´Ù¸¥ Á¦¾î·Î Á¤ÀÇ µÈ ¶óº§°ú Á¤È®ÇÏ°Ô ¿¬°ü½ÃŲ´Ù. ÀÌ°ÍÀÌ ÀÖÀ¸¸é, ÀÌ ¾ÖÆ®¸®ºäÆ®ÀÇ °ªÀº °°Àº ¹®¼­¿¡¼­ ´Ù¸¥ Á¦¾î id ¾ÖÆ®¸®ºäÆ®ÀÇ °ª°ú °°¾Æ¾ßÇÑ´Ù. ¾øÀ¸¸é, Á¤ÀÇ µÈ ¶óº§Àº ¿¤·¹¸àÆ®ÀÇ ³»¿ë°ú ¿¬°üµÈ´Ù.
´Ù¸¥ °÷¿¡¼­ Á¤ÀÇ µÈ ¾ÖÆ®¸®ºäÆ®

LABEL ¿¤·¹¸àÆ®´Â Á¦¾î(control)¿¡ Á¤º¸¸¦ ÷ºÎÇϴµ¥ »ç¿ë µÉ ¼ö ÀÖ´Ù. °¢ LABEL ¿¤·¹¸àÆ®´Â Á¤È®ÇÏ°Ô ÇϳªÀÇ Æû Á¦¾î¿Í ¿¬°üµÈ´Ù.

for ¾ÖÆ®¸®ºäÆ®´Â ´Ù¸¥ ¸í½ÃÀû Á¦¾î(control)ÀÇ ¶óº§°ú ¿¬°üÇÑ´Ù. for ¾ÖÆ®¸®ºäÆ®ÀÇ °ªÀº ¿¬°ü µÈ Á¦¾î ¿¤·¹¸àÆ®ÀÇ id ¾ÖÆ®¸®ºäÆ®ÀÇ °ª°ú °°¾Æ¾ßÇÑ´Ù. ÇÑ°³ ÀÌ»óÀÇ LABELÀÌ for ¾ÖÆ®¸®ºäÆ®¸¦ ÅëÇÏ¿© º¹¼ö ÂüÁ¶·Î »ý¼º µÈ °°Àº Á¦¾î¿¡ ¿¬°ü µÉ ¼ö ÀÖ´Ù.

ÀÌ ¿¹Á¦´Â µÎ°³ÀÇ Á¤·Ä µÈ ÅؽºÆ® ÀÔ·Â Á¦¾îµé°ú ±×µé¿¡ ¿¬°ü µÈ ¶óº§µéÀ» °®´Â Ç¥(table)¸¦ ¸¸µç´Ù. °¢ ¶óº§Àº Á¤È®ÇÏ°Ô ÇϳªÀÇ ÅؽºÆ® ÀԷ°ú ¿¬°üµÈ´Ù.

<FORM action="..." method="post">
 <TABLE>
   <TR>
     <TD><LABEL for="fname">À̸§ </LABEL>
     <TD><INPUT type="text" name="firstname" id="fname">
   <TR>
     <TD><LABEL for="lname">¼º </LABEL>
     <TD><INPUT type="text" name="lastname" id="lname">
 </TABLE>
</FORM>

ÀÌ ¿¹Á¦´Â À§ÀÇ ¿¹Á¦¿¡ LABEL ¿¤·¹¸àÆ®¸¦ Æ÷ÇÔ ÇÑ °ÍÀÌ´Ù.

<FORM action="http://somesite.com/prog/adduser" method="post">
 <P>
   <LABEL for="firstname">À̸§: </LABEL>
     <INPUT type="text" id="firstname"><BR>
   <LABEL for="lastname">¼º: </LABEL>
     <INPUT type="text" id="lastname"><BR>
   <LABEL for="email">ÀüÀÚ ¿ìÆí: </LABEL>
     <INPUT type="text" id="email"><BR>
   <INPUT type="radio" name="sex" value="Male"> ³²<BR>
   <INPUT type="radio" name="sex" value="Female"> ¿©<BR>
   <INPUT type="submit" value="Send"> <INPUT type="reset">
 </P>
</FORM>

´Ù¸¥ Á¦¾î(control)¿Í ¾Ï½ÃÀûÀ¸·Î ¶óº§¿¡ ¿¬°ü ½ÃÅ°±â À§Çؼ­, Á¦¾î ¿¤·¹¸àÆ®´Â LABEL ¿¤·¹¸àÆ®ÀÇ ³»¿ë ¾È¿¡ ÀÖ¾î¾ß ÇÑ´Ù. ÀÌ·± °æ¿ì, LABELÀº ÇϳªÀÇ Á¦¾î ¿¤·¹¸àÆ®¸¦ Æ÷ÇÔ ÇÒ ¼ö ÀÖ´Ù. ¶óº§ ÀÚü´Â ¿¬°ü µÈ Á¦¾îÀÇ ¾ÕÀ̳ª µÚ¿¡ À§Ä¡ ÇÒ ¼ö ÀÖ´Ù.

ÀÌ ¿¹Á¦¿¡¼­, µÎ°³ÀÇ ¶óº§À» µÎ°³ÀÇ ÅؽºÆ® ÀÔ·Â Á¦¾î¿¡ ¾Ï½ÃÀûÀ¸·Î ¿¬°ü½ÃÄ×´Ù.

<FORM action="..." method="post">
 <P>
 <LABEL> À̸§
   <INPUT type="text" name="firstname">
 </LABEL>
 <LABEL>
   <INPUT type="text" name="lastname"> ¼º
 </LABEL>
 </P>
</FORM>

ÀÌ ±â¼úÀº ¶óº§ÀÌ ÇÑ Ä­(cell)¿¡ ÀÖ°í, ¿¬°üµÈ Á¦¾î°¡ ´Ù¸¥ Ä­¿¡ Àִ ǥ(that)°¡ ¹èÄ¡(layout)¿¡¼­, »ç¿ë µÉ ¶§´Â »ç¿ë µÉ ¼ö ¾øÀ½¿¡ ÁÖÀÇÇ϶ó.

LABEL ¿¤·¹¸àÆ®°¡ focus(ÃÊÁ¡À» °®°Ô)µÇ¸é, ÀÌ´Â ÃÊÁ¡(focus)À» ¿¬°ü µÈ Á¦¾î¿¡ ¿Å±â°ÔµÈ´Ù. ¾Æ·¡ Á¢¼ÓÅ°(access key)ÀÇ ¿¹¸¦ ÂüÁ¶Ç϶ó.

¶óº§Àº º¸´Â ºê¶ó¿ìÀú, À½¼º ÇÕ¼º ÀåÄ¡¿¡¼­ Àд °æ¿ì µî »ç¿ëµµ±¸¿¡ µû¶ó ´Ù¸£°Ô Ç¥Çö µÉ ¼ö ÀÖ´Ù.

17.10 Æû¿¡ ±¸Á¶ Ãß°¡: FIELDSET¿Í LEGEND ¿¤·¹¸àÆ®

<!-- #PCDATA È¥ÇÕ ³»¿ë ¹®Á¦¸¦ ÇØ°áÇϱâ À§ ÇÑ °ÍÀ¸·Î,
	ÀÌ ±Ô°Ý¿¡´Â ±× °÷¿¡ °ø°£ ¸¸ Çã¿ë ÇÔ! -->
<!ELEMENT FIELDSET - - (#PCDATA,LEGEND,(%flow;)*) -- Æû Á¦¾î ±¸·ì -->
<!ATTLIST FIELDSET
 %attrs;                              -- %coreattrs, %i18n, %events --
>

<!ELEMENT LEGEND - - (%inline;)*       -- ÇÊµå ¼¼Æ®(fieldset) ¹ü·Ê(legend) -->
<!ENTITY % LAlign "(top | bottom | left | right)">

<!ATTLIST LEGEND
 %attrs;                              -- %coreattrs, %i18n, %events --
 accesskey   %Character;    #IMPLIED  -- Á¢¼ÓÅ° ±ÛÀÚ --
>

½ÃÀÛű×: ÇÊ¿ä ÇÔ, Á¾·áű×: ÇÊ¿ä ÇÔ

LEGEND ¾ÖÆ®¸®ºäÆ®(attribute) Á¤ÀÇ

align = top | bottom | left | right [´ë¼Ò¹®ÀÚ ±¸º° ¾øÀÌ: CI]
ºÒ·®ÇÑ °ÍÀÌ´Ù. ÀÌ ¾ÖÆ®¸®ºäÆ®´Â ¹ü·Ê(legend)ÀÇ ÇÊµå ¼¼Æ®(fieldset)¿¡ ´ë ÇÑ À§Ä¡¸¦ ÁöÁ¤Çϸç, °¡´ÉÇÑ °ªÀº:
  • top: ¹ü·Ê°¡ Çʵ弼ƮÀÇ À§ÂÊ¿¡ À§Ä¡ ÇÔ. µðÆúÆ® °ª ÀÓ.
  • bottom: ¹ü·Ê°¡ Çʵ弼ƮÀÇ ¾Æ·¡ÂÊ¿¡ À§Ä¡ ÇÔ.
  • left: ¹ü·Ê°¡ Çʵ弼ƮÀÇ À§ÂÊ¿¡ À§Ä¡ ÇÔ.
  • right: ¹ü·Ê°¡ Çʵ弼ƮÀÇ ¾Æ·¡ÂÊ¿¡ À§Ä¡ ÇÔ.
´Ù¸¥ °÷¿¡¼­ Á¤ÀÇ µÈ ¾ÖÆ®¸®ºäÆ®

FIELDSET ¿¤·¹¸àÆ®´Â Á¦ÀÛÀÚ°¡ Á¦¾îµé°ú ¶óº§µéÀ» ±¸·ì Áö¿ï ¼ö ÀÖ°Ô ÇÑ´Ù. Á¦¾î(control)µéÀÇ ±¸·ì Áö¿ì±â´Â º¸´Â »ç¿ëµµ±¸¿¡¼­ Ç×ÇØ ÅÇ(navigation tabbing) ¼³Á¤°ú À½¼º(speech-oriented) »ç¿ëµµ±¸¿¡¼­ À½¼º Ç×Çظ¦ µ¿½Ã¿¡ Áö¿øÇϹǷÎ, »ç¿ëÀÚ°¡ ±×µéÀÇ ¸ñÀûÀ» ÀÌÇØÇϱâ ÆíÇÏ°Ô ÇØ ÁØ´Ù. ÀÌ ¿¤·¹¸àÆ®ÀÇ »ç¿ëÀº ¹®¼­¿¡ ´õ ½±°Ô Á¢±ÙÇϱâ À§ ÇÑ °ÍÀÌ´Ù.

LEGEND ¿¤·¹¸àÆ®´Â Á¦ÀÛÀÚ°¡ FIELDSETÀÇ Á¦¸ñ(caption)À» ÁöÁ¤ ÇÒ ¼ö ÀÖ°Ô ÇÑ´Ù. ¹ü·Ê(legend)´Â FIELDSET°¡ º¸ÀÌÁö ¾Ê´Â Ç¥ÇöÀ» ÇÒ ¶§ Á¢¼Ó¼ºÀ» Çâ»ó½ÃŲ´Ù.

¿¹Á¦¿¡¼­, ÀÇ»çÀÇ »ç¹«½Ç¿¡¼­ ä¿ï ÆûÀ» ¸¸µé¾ú´Ù. ÀÌ´Â °³ÀÎ Á¤º¸, ÀÇ·á ±â·Ï, ÇöÀçÀÇ Åõ¾àµî ¼¼ Ç׸ñµé·Î ³ª´©¾î, °¢ Ç׸ñÀº ÀûÁ¤ÇÑ Á¤º¸¸¦ ÀÔ·Â ÇÒ ¼ö ÀÖµµ·Ï Á¦¾î¸¦ °®´Â´Ù.

<FORM action="..." method="post">
 <P>
 <FIELDSET>
   <LEGEND>°³ÀÎ Á¤º¸</LEGEND>
     À̸§: <INPUT name="personal_lastname" type="text" tabindex="1">
     ¼º: <INPUT name="personal_firstname" type="text" tabindex="2">
     ÁÖ¼Ò: <INPUT name="personal_address" type="text" tabindex="3">
     ... °³ÀÎ Á¤º¸ °è¼Ó ...
 </FIELDSET>
 <FIELDSET>
   <LEGEND>ÀÇ·á ±â·Ï</LEGEND>
     <INPUT name="history_illness" type="checkbox" value="Smallpox"
		tabindex="20"> Smallpox
     <INPUT name="history_illness" type="checkbox" value="Mumps"
		tabindex="21"> Mumps
     <INPUT name="history_illness" type="checkbox" value="Dizziness"
		tabindex="22"> Dizziness
     <INPUT name="history_illness" type="checkbox" value="Sneezing"
		tabindex="23"> Sneezing
     ... ÀÇ·á ±â·Ï °è¼Ó ...
 </FIELDSET>
 <FIELDSET>
   <LEGEND>ÇöÀç Åõ¾à</LEGEND>
   ÇöÀç ¾î¶² ¾àÀ» µå½Ê´Ï±î?
     <INPUT name="medication_now" type="radio" value="Yes" tabindex="35">³×
     <INPUT name="medication_now" type="radio" value="No" tabindex="35">¾Æ´Ï¿À
   ¸¸ÀÏ ÇöÀç ¾àÀ» µå½Ã¸é ¾Æ·¡ Àû¾î ÁֽʽÿÀ:
     <TEXTAREA name="current_medication"   rows="20" cols="50"  tabindex="40">
     </TEXTAREA>
 </FIELDSET>
</FORM>

ÀÌ ¿¹Á¦¿¡¼­, °¢ FIELDSET ¾È¿¡¼­ ¿¤·¹¸àÆ®¸¦ ½ºÅ¸ÀϽ¬Æ®·Î Á¤·ÄÇÏ°í, »ö»ó°ú ÆùÆ® Á¤º¸, »ç¿ëÀÚ°¡ ÇöÀç Åõ¾àÀ» ÀÔ·ÂÇϸé, ÆûÀÇ º¸´Â Ç¥Çö Çâ»ó½Ãų ¼ö ÀÖ´Ù.

17.11 ¿¤·¹¸àÆ®¿¡ ÃÊÁ¡(focus) ³õ±â

HTML ¹®¼­¿¡¼­, ¿¤·¹¸àÆ®´Â È°¼ºÈ­µÇ°í ÀÓ¹«¸¦ ¼öÇàÇϱâ À§ÇÏ¿©, »ç¿ëÀÚ´Â ÃÊÁ¡(focus)À» ¹Þ¾Æ¾ßÇÑ´Ù. ¿¹¸¦ µé¾î, ÁöÁ¤ µÈ ¿¬°á·Î °¡±â À§ÇÏ¿© »ç¿ëÀÚ´Â A ¿¤·¹¸àÆ®·Î ¿¬°áÀ» È°¼ºÈ­ ½ÃÄѾßÇÑ´Ù. ¸¶Âù°¡Áö·Î, ÅؽºÆ®¸¦ ÀԷ½ÃÅ°±â À§ÇÏ¿© TEXTAREA¿¡ »ç¿ëÀÚ´Â ÃÊÁ¡À» ÁÖ¾î¾ßÇÑ´Ù.

¿¤·¹¸àÆ®¿¡ ÃÊÁ¡À» ÁÖ¼® À§Çؼ­ ¸î°¡Áö ¹æ¹ýÀÌ »ç¿ëµÈ´Ù.

17.11.1 ÅÇ¿¡ ÀÇÇÑ Ç×ÇØ(tabbing navigation)

¾ÖÆ®¸®ºäÆ®ÀÇ Á¤ÀÇ

tabindex = number [´ë¼Ò¹®ÀÚ Á߸³: CN]
ÀÌ ¾ÖÆ®¸®ºäÆ®´Â ÇöÀç ¹®¼­ÀÇ ÅÜ ¼ø¼­(tabbing order)¿¡¼­ÀÇ ÇöÀç ¿¤·¹¸àÆ®ÀÇ À§Ä¡À» ÁöÁ¤Çϸç, ±× °ªÀº 0°ú 32767 »çÀÌÀÇ ¼ýÄ¡ À̾î¾ßÇÑ´Ù. »ç¿ëµµ±¸´Â ¾Õ¿¡³ª¿À´Â 0µéÀ» ¹«½ÃÇÏ¿©¾ß ÇÑ´Ù.

ÅÇ ¼ø¼­(tabbing order)´Â »ç¿ëÀÚ°¡ Å°º¸µå·Î Ç×ÇØ ÇÒ ¶§, ¾î¶² ¿¤·¹¸àÆ®°¡ ÃÊÁ¡(focus)À» ¹ÞÀ» °ÍÀΰ¡ ÇÏ´Â ¼ø¼­¸¦ ÁöÁ¤ÇÑ´Ù. ÅÇ ¼ø¼­´Â ¿¤·¹¸àÆ® ¼Ó¿¡ ´Ù¸¥ ¿¤·¹¸àÆ®¸¦ ³×½ºÆ®(nest)·Î Æ÷ÇÔ ÇÒ ¼ö ÀÖ´Ù.

ÃÊÁ¡À» ¹ÞÀº ¿¤·¹¸àÆ®´Â »ç¿ëµµ±¸¿¡ ÀÇÇÏ¿© ´ÙÀ½ ±ÔÄ¢À» µû¶ó Ç×ÇØ(navigate)ÇÑ´Ù.

  1. tabindex ¾ÖÆ®¸®ºäÆ®¸¦ Áö¿øÇÏ´Â ¿¤·¹¸àÆ®µé°ú ¾ç¼ö·Î ÁöÁ¤ µÈ °ÍÀ¸·Î ¸ÕÀú Ç×ÇØÇÑ´Ù. Ç×ÇØ´Â °¡Àå ³·Àº tabindex °ªÀ» °®´Â ¿¤·¹¸àÆ®·Î ºÎÅÍ ³ôÀº °ªÀ» °®´Â ¿¤·¹¸àÆ®·Î ÁøÇàµÈ´Ù. ±× °ªÀº ¼ø¼­ÀûÀ¸·Î µÉ ÇÊ¿ä°¡ ¾ø°í ¾î¶² ƯÁ¤ ÇÑ ¼öÄ¡·Î ½ÃÀÛ µÉ ÇÊ¿äµµ ¾ø´Ù. °°Àº tabindex °ªÀ» °®´Â ¿¤·¹¸àÆ®¿¡¼­´Â ±× ¹®Àå¿¡¼­ ¸ÕÀú ³ª¿Â ¼ø¼­·Î Ç×ÇØÇÑ´Ù.
  2. tabindex ¾ÖÆ®¸®ºäÆ®°¡ Áö¿øµÇÁö ¾Ê°Å³ª Áö¿øµÇ³ª ±× °ªÀÌ "0"À¸·Î ¼³Á¤ µÈ ¿¤·¹¸àÆ®µéÀº ±× ´ÙÀ½À¸·Î Ç×ÇØÇÑ´Ù. ÀÌ ¿¤·¹¸àÆ®µéÀº ¹®Àå¿¡¼­ ±ÛÀÚ°¡ ³ª¿Â ¼ø¼­·Î Ç×ÇØÇÑ´Ù.
  3. ÁßÁö(disabled) µÈ ¿¤·¹¸àÆ®´Â ÅÜ ¼ø¼­¿¡ Âü¿©ÇÏÁö ¾Ê´Â´Ù.

A, AREA, BUTTON, INPUT, OBJECT, SELECT, TEXTAREA ¿¤·¹¸àÆ®´Â tabindex ¾ÖÆ®¸®ºäÆ®¸¦ Áö¿øÇÑ´Ù.

ÀÌ ¿¹Á¦¿¡¼­, ÅÜ ¼ø¼­´Â "field1"°ú ´ÜÃß°¡ °°Àº tabindexÀ» »ç¿ëÇÏÁö¸¸, "field1"°¡ ¹®ÀåÀÇ µÚ¿¡ ³ª¿À¹Ç·Î BUTTON, INPUT ¿¤·¹¸àÆ® ¼øÀÌ´Ù. ¸¶Áö¸·À¸·Î A ¿¤·¹¸àÆ®¿¡ ÀÇÇÏ¿© »ý¼º µÈ ¿¬°áÀÌ µÈ´Ù.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
 <TITLE>Æû(form)À» °®´Â ¹®¼­</TITLE>
</HEAD>
<BODY>
 ... ´Ù¸¥ ÅؽºÆ® ...
 <P><A tabindex="10" href="http://www.w3.org/">W3C Web site</A>·Î °¡¶ó.
 ... ´Ù¸¥ ÅؽºÆ® ...
 <BUTTON type="button" name="get-database" tabindex="1" 
	onclick="get-database">ÇöÀç  µ¥ÀÌÅͺ£À̽º(database)¿¡¼­ ¾ò¾î¶ó.
 </BUTTON>
 ... ´Ù¸¥ ÅؽºÆ® ...
 <FORM action="..." method="post">
   <P>
   <INPUT tabindex="1" type="text" name="field1">
   <INPUT tabindex="2" type="text" name="field2">
   <INPUT tabindex="3" type="submit" name="submit">
   </P>
 </FORM>
</BODY>
</HTML>

ÅÇ Å°(tabbing key). ÅÇ¿¡ ÀÇÇÑ Ç×ÇØ(tabbing navigation)¸¦ ÁøÇà½ÃÅ°°í, ¿¤·¹¸àÆ®ÀÇ È°¼ºÈ­¸¦ ½ÃÅ°´Â, ½ÇÁ¦ Å° ¼ø¼­(key sequence)´Â, ¿¹¸¦ µé¾î, "tab" Å°°¡ Ç×ÇØ¿¡ »ç¿ëµÇ´Â°¡¿Í "enter" Å°°¡ ¼±Åà µÈ °ÍÀ» È°¼ºÈ­(activate) ½ÃÅ°´Âµ¥ »ç¿ëµÇ´Â°¡, ÇÏ´Â »ç¿ëµµ±¸ÀDZ¸¼º¿¡ µû¶ó ´Ù¸£´Ù.

»ç¿ëµµ±¸´Â ÅÜ ¼ø¼­(tabbing order)¸¦ ²¨²Ù·Î Ç×ÇØÇϵµ·Ï Å°(key) ¼ø¼­¸¦ Á¤ÀÇ ÇÒ ¼öµµ ÀÖ´Ù. ÅÜ ¼ø¼­ÀÇ ³¡À̳ª ½ÃÀÛ¿¡ µµ´ÞÇϸé, »ç¿ëµµ±¸´Â ½ÃÀÛÀ̳ª ³¡À¸·Î ¼øȯ½Ãų ¼ö ÀÖ´Ù.

17.11.2 Á¢¼ÓÅ°(access key)

¾ÖÆ®¸®ºäÆ®ÀÇ Á¤ÀÇ

accesskey = ±ÛÀÚ [´ë¼Ò¹®ÀÚ Á߸³: CN]
ÀÌ ¾ÖÆ®¸®ºäÆ®´Â ¿¤·¹¸àÆ®¿¡ Á¢¼ÓÅ°¸¦ ÁöÁ¤ÇÑ´Ù. Á¢¼ÓÅ°´Â ¹®¼­ ±ÛÀÚ ¼¼Æ®ÀÇ ÇÑ ±ÛÀÚÀÌ´Ù.
ÁÖÀÇ: Á¦ÀÛÀÚ´Â Á¢¼ÓÅ°¸¦ ÁöÁ¤ ÇÒ ¶§ ¿¹»ó »ç¿ëÀÚÀÇ ÀÔ·Â ¹æ¹ý(method)À» °í·ÁÇÏ¿©¾ß ÇÑ´Ù.

¿¤·¹¸àÆ®¿¡ ÁöÁ¤ µÈ Á¢¼ÓÅ°(accesskey)¸¦ ´©¸£¸é, ±× ¿¤·¹¸àÆ®¿¡ ÃÊÁ¡(focus)ÀÌ ÁÖ¾îÁø´Ù. ¿¤·¹¸àÆ®°¡ ÃÊÁ¡À» ¹Þ¾ÒÀ» ¶§ÀÇ ÀÛ¿ëÀº ¿¤·¹¸àÆ®¿¡ µû¶ó ´Ù¸£´Ù. ¿¹¸¦ µé¾î, A ¿¤·¹¸àÆ®¿¡ ÀÇÇÏ¿© ÁöÁ¤ µÈ ¿¬°á(link)À» »ç¿ëÀÚ°¡ È°¼ºÈ­(activate) ½ÃÅ°¸é, »ç¿ëµµ±¸´Â ÀϹÝÀûÀ¸·Î ¿¬°á½ÃŲ´Ù. »ç¿ëÀÚ°¡ ·¹µð¿À ´ÜÃß(radio button)¸¦ È°¼ºÈ­ ½ÃÅ°¸é, »ç¿ëµµ±¸´Â ·¹µð¿À ´ÜÃßÀÇ °ªÀ» º¯°æ½ÃÅ°°í, ÅؽºÆ® Çʵ带 È°¼ºÈ­ ½ÃÅ°¸é, ÀÔ·ÂÀ» Çã¿ëÇÑ´Ù.

A, AREA, BUTTON, INPUT, LABEL, LEGEND, TEXTAREA ¿¤·¹¸àÆ®´Â accesskey ¾ÖÆ®¸®ºäÆ®¸¦ Áö¿øÇÑ´Ù.

ÀÌ ¿¹Á¦´Â INPUT Á¦¾î(control)¿¡ ¿¬°ü µÈ ¶óº§(label)¿¡ Á¢¼ÓÅ°(access key) "U"¸¦ ¼³Á¤ÇÑ´Ù. Á¢¼ÓÅ°¸¦ ÂïÀ¸¸é, ¶óº§¿¡ ÃÊÁ¡¿À°í, ¿¬°ü Á¦¾î¿¡ ÁÖ¾îÁø´Ù. ±×·¯¸é INPUT Áö¿ª¿¡ ÅؽºÆ®¸¦ ÀÔ·Â ÇÒ ¼ö ÀÖ°Ô µÈ´Ù.

<FORM action="..." method="post">
 <P>
 <LABEL for="fuser" accesskey="U"> »ç¿ëÀÚ</LABEL>
 <INPUT type="text" name="user" id="fuser">
 </P>
</FORM>

ÀÌ ¿¹Á¦¿¡¼­, Á¢¼ÓÅ°(access key)°¡ A ¿¤·¹¸àÆ®¿¡ ÀÇÇÏ¿© ÁöÁ¤ µÈ ¿¬°á(link)·Î µÇµµ·Ï Á¤ÀÇÇÏ¿´´Ù. Á¢¼ÓÅ°¸¦ ÂïÀ¸¸é »ç¿ëÀÚ¸¦ ´Ù¸¥ ¹®¼­(ÀÌ ¿¹Á¦¿¡¼­´Â ¸ñÂ÷·Î)·Î ¿¬°á ÇÒ °ÍÀÌ´Ù.

 <A accesskey="C" rel="contents"
	href="http://someplace.com/specification/contents.html">¸ñÂ÷</A>

Á¢¼ÓÅ°(access key)ÀÇ ÀÛµ¿Àº ±ò·ÁÀÖ´Â ½Ã½ºÅÛ¿¡ µû¶ó ´Ù¸£´Ù. ¿¹¸¦ µé¾î MS Windows¿¡¼­ ÀÛµ¿ÇÏ´Â ±â°è¿¡¼­, ÀϹÝÀûÀ¸·Î Á¢¼ÓÅ°¸¦ "alt" Å°(key)¿Í ÇÔ²² ´­·¯¾ß ÇÏ°í, Apple ½Ã½ºÅÛ¿¡¼­´Â ÀϹÝÀûÀ¸·Î Á¢¼ÓÅ°¸¦ "cmd" Å°¿Í ÇÔ²² ´­·¯¾ßÇÑ´Ù.

Á¢¼ÓÅ°ÀÇ Ç¥ÇöÀº »ç¿ëµµ±¸¿¡ µû¶ó ´Ù¸£´Ù. Á¦ÀÛÀÚ°¡ ¶óº§(label) ÅؽºÆ® ¶Ç´Â ¾îµðµç Á¢¼ÓÅ°°¡ Àû¿ëµÇ´Â °÷¿¡´Â Á¢¼ÓÅ°¸¦ Æ÷ÇÔ½Ãų °ÍÀ» ÃßõÇÑ´Ù. »ç¿ëµµ±¸´Â ±× ÀÓ¹«¸¦ °­Á¶ÇÏ°í, ´Ù¸¥ ±ÛÀÚµé°ú ±¸º°µÇµµ·Ï(¿¹¸¦ µé¾î ¹Ø ÁÙÀ» ±ß´Â µî) Á¢¼ÓÅ°ÀÇ °ªÀ» Ç¥ÇöÇÏ¿©¾ß ÇÑ´Ù.

17.12 ºÒÈ°¼º(disabled)°ú Àбâ Àü¿ë(read-only) Á¦¾î

»ç¿ëÀÚ ÀÔ·ÂÀÌ ¹Ù¶÷Á÷ÇÏÁö ¾Ê°Å³ª ÇÊ¿ä ¾øÀ» ¶§, Á¦¾î¸¦ ºÒÈ°¼º ½ÃÅ°°Å³ª Àбâ Àü¿ëÀ¸·Î ÇÏ´Â °ÍÀÌ Áß¿äÇÑ´Ù. ¿¹¸¦ µé¾î, ÇÊ¿äÇÑ µ¥ÀÌÅ͸¦ ÀԷ½ÃÅ°±â Àü¿¡´Â ÆûÀÇ ¼Û½Å(submit) ´ÜÃ߸¦ ºÒÈ°¼ºÈ­ Çϱ⸦ ¿ø ÇÒ ¼ö ÀÖ´Ù. ºñ½ÁÇÏ°Ô, Á¦ÀÛÀÚ°¡ Æû°ú ÇÔ²² ¼Û½ÅµÇ¾î¾ß ÇÒ °ªÀ» Àбâ Àü¿ë ÅؽºÆ®·Î Æ÷ÇÔ ½ÃÅ°±â¸¦ ¿ø ÇÒ ¼ö ÀÖ´Ù. ´ÙÀ½ Ç׸ñµéÀº ºÒÈ°¼º°ú Àбâ Àü¿ë Á¦¾î¸¦ ¼³¸íÇÑ´Ù.

17.12.1 ºÒÈ°¼º(disable) Á¦¾î(control)

¾ÖÆ®¸®ºäÆ®ÀÇ Á¤ÀÇ

disabled [´ë¼Ò¹®ÀÚ ±¸º° ¾øÀÌ: CI]
Æû(form) Á¦¾î¿¡ ¼³Á¤µÇ¸é, ÀÌ ºÒ¸°(boolean) ¾ÖÆ®¸®ºäÆ®´Â »ç¿ëÀÚ ÀÔ·Â Á¦¾î¸¦ ºÒ°¡´ÉÇÏ°Ô ÇÑ´Ù.

¼³Á¤µÇ¸é, disabled ¾ÖÆ®¸®ºäÆ®´Â ¿¤·¹¸àÆ®¿¡ ´ÙÀ½ È¿°ú¸¦ ÁØ´Ù.

BUTTON INPUT, OPTGROUP, OPTION, SELECT, TEXTAREA ¿¤·¹¸àÆ®´Â disabled ¾ÖÆ®¸®ºäÆ®¸¦ Áö¿øÇÑ´Ù.

ÀÌ ¾ÖÆ®¸®ºäÆ®´Â Àü´ÞµÇÁö ¸¸, Áö¿ª ¼±¾ðÀ¸·Î Àü´Þ µÈ °ªÀ» µ¤¾î ¾º¿ï(override) ¼ö ÀÖ´Ù.

ºÒÈ°¼º µÈ ¿¤·¹¸àÆ®ÀÇ Ç¥Çö ¹æ¹ýÀº »ç¿ëµµ±¸¿¡ µû¶ó ´Ù¸£´Ù. ¿¹¸¦ µé¾î, ÀϺΠ»ç¿ëµµ±¸¿¡¼­´Â ºÒÈ°¼º µÈ ¸Þ´º Ç׸ñ, ´ÜÃßÀÇ ¶óº§ µîÀ» È帮°Ô Ç¥ÇöÇÑ´Ù.

ÀÌ ¿¹Á¦¿¡¼­, INPUT ¿¤·¹¸àÆ®´Â ºÒÈ°¼ºµÇ¾ú´Ù. ±×·¯¹Ç·Î, »ç¿ëÀÚÀÇ ÀÔ·ÂÀ» ¹ÞÀ» ¼ö ¾ø°í, ±× °ªÀ» Æû°ú ÇÔ²² ¼Û½Å µÉ ¼ö ¾ø´Ù.

<INPUT disabled name="fred" value="stone">

ÁÖ¼®: disabled ¾ÖÆ®¸®ºäÆ®ÀÇ °ªÀ» ź·Â¼ºÀÖ°Ô ¼öÁ¤ÇÏ·Á¸é ½º±×¸³Æ®(script)¸¦ »ç¿ëÇÏ´Â ¹æ¹ý »ÓÀÌ´Ù.

17.12.2 Àбâ Àü¿ë(read-only) Á¦¾î(control)

¾ÖÆ®¸®ºäÆ®ÀÇ Á¤ÀÇ

readonly [´ë¼Ò¹®ÀÚ ±¸º° ¾øÀÌ: CI]
ÀÌ Æû Á¦¾îÀ» ¼³Á¤Çϸé, ÀÌ ºÒ¸°(boolean) ¾ÖÆ®¸®ºäÆ®´Â ±× Á¦¾îÀÇ º¯°æÀ» ±ÝÁöÇÑ´Ù.

readonly ¾ÖÆ®¸®ºäÆ®´Â Á¦¾î°¡ »ç¿ëÀÚ¿¡ ÀÇÇÏ¿© ¼öÁ¤ µÉ ¼ö Àִ°¡¸¦ ÁöÁ¤ÇÑ´Ù.

¼³Á¤ µÈ¸é, readonly ¾ÖÆ®¸®ºäÆ®´Â ¿¤·¹¸àÆ®¿¡ ´ÙÀ½ È¿°ú¸¦ °®´Â´Ù.

INPUT, TEXTAREA´Â readonly ¾ÖÆ®¸®ºäÆ®¸¦ Áö¿øÇÑ´Ù.

¾î¶»°Ô Àбâ Àü¿ë ¿¤·¹¸àÆ®°¡ Ç¥ÇöµÇ´Â ¹æ¹ýÀº »ç¿ëµµ±¸¿¡ µû¶ó ´Ù¸£´Ù.

ÁÖ¼®: readonly ¾ÖÆ®¸®ºäÆ®ÀÇ °ªÀ» ź·Â¼ºÀÖ°Ô ¼öÁ¤ÇÏ·Á¸é ½º±×¸³Æ®(script)¸¦ »ç¿ëÇÏ´Â ¹æ¹ý »ÓÀÌ´Ù.

17.13 ÆûÀÇ ¼Û½Å

ÀÌ Ç׸ñµé »ç¿ëµµ±¸ Æû µ¥ÀÌÅÍÀÇ Ã³¸® ´ë¸®ÀÚ(agent)¿¡°Ô ¼Û½Å ¹æ¹ýÀ» ¼³¸íÇÑ´Ù.

17.13.1 ÆûÀÇ ¼Û½Å(submit) ¹æ¹ý

FORM ¿¤·¹¸àÆ®ÀÇ method(¹æ¹ý) ¾ÖÆ®¸®ºäÆ®´Â Æû(form)À» ó¸® ´ë¸®ÀÚ¿¡°Ô º¸³»´Âµ¥ »ç¿ëµÇ´Â HTTP ¹æ¹ý(method)À» ÁöÁ¤ÇÑ´Ù. ÀÌ ¾ÖÆ®¸®ºäÆ®´Â ´ÙÀ½ µÎ°¡Áö °ªÀ» °¡Áú ¼ö ÀÖ´Ù.

"get" ¹æ¹ýÀº ÆûÀÌ ´Ù¸¥ È¿°ú(side-effects)¸¦ À¯¹ß½ÃÅ°Áö ¾ÊÀ» ¶§¿¡ »ç¿ëÇÏ¿©¾ß ÇÑ´Ù. ¸¹Àº µ¥ÀÌÅͺ£À̽º(database) °Ë»öµéÀº º¸ÀÌ´Â ´Ù¸¥ È¿°ú(side-effect)°¡ ¾øÀÌ ÀÌ»óÀûÀÎ "get" ¹æ¹ýÀÌ Àû¿ëµÈ´Ù.

¿¹¸¦ µé¾î, ¸¸ÀÏ ÆûÀÌ µ¥ÀÌÅͺ£À̽º¸¦ ¼öÁ¤Çϰųª, ¼­ºñ½º¿¡ µî·Ï(subscription)ÇÏ´Â µî, ¼­ºñ½º°¡ ´Ù¸¥ È¿°ú¸¦ À¯¹ßÇÏ´Â ÆûÀÇ Ã³¸®¸¦ ÇÑ´Ù¸é, "post" ¹æ¹ýÀÌ »ç¿ëµÇ¾î¾ß ÇÑ´Ù.

ÁÖ¼®: "get" ¹æ¹ýÀº Æû µ¥ÀÌÅÍ ¼¼Æ®ÀÇ °ªÀ» ASCII ±ÛÀÚ·Î Á¦ÇÑÇÑ´Ù. enctype="multipart/form-data"¿Í ÇÔ²² »ç¿ëÇÏ´Â "post" ¹æ¹ý ¸¸ÀÌ Àüü [ISO10646] ±ÛÀÚ ¼¼Æ®¸¦ Ä¿¹öÇϵµ·Ï ÁöÁ¤µÇ¾ú´Ù.

17.13.2 ¼º°øÀû Á¦¾î

¼º°øÀû Á¦¾î(successful control)´Â À¯È¿ÇÑ ¼Û½Å(submit)ÀÌ´Ù. ¸ðµç ¼º°øÀû Á¦¾î´Â ¼Û½ÅµÇ´Â Æû µ¥ÀÌÅÍ ¼¼Æ®(form data set)ÀÇ ºÎºÐÀ¸·Î ±× Á¦¾î À̸§°ú ±× ÇöÀç°ªÀÇ Â¦À» °®´Â´Ù. ¼º°øÀû Á¦¾î´Â FORM ¿¤·¹¸àÆ® ¾È¿¡¼­ Á¤Àǵǰí Á¦¾î À̸§À» °¡Á®¾ßÇÑ´Ù.

±×·¯³ª:

¸¸ÀÏ ÆûÀÌ ¼Û½ÅµÇ´Âµ¥ Á¦¾î°¡ ÇöÀç°ªÀ» °¡Áö°í ÀÖÁö ¾ÊÀ¸¸é, »ç¿ëµµ±¸´Â ¼º°øÀû Á¦¾î·Î ó¸®ÇÏÁö ¸»¾Æ¾ßÇÑ´Ù.

¶Ç ÇÑ »ç¿ëµµ±¸´Â ´ÙÀ½°ú °°Àº °æ¿ì¿¡ ¼º°øÀû Á¦¾î·Î °£ÁÖÇÏÁö ¸»¾Æ¾ßÇÑ´Ù.

°¨ÃçÁø Á¦¾î(hidden control)¿Í ½ºÅ¸ÀϽ¬Æ®(style sheet) ¼³Á¤ ¶§¹®¿¡ Ç¥ÇöµÇÁö ¾ÊÀº Á¦¾î´Â ¼º°øÀûÀÌ µÉ ¼ö ÀÖ´Ù. ¿¹¸¦ µé¾î:

<FORM action="..." method="post">
 <P>
 <INPUT type="password" style="display:none"
	name="invisible-password" value="mypassword">
</FORM>

ÀÌ´Â °ªÀÌ À̸§ "invisible-password"¿Í ¦À̵Ǿî Æû°ú ÇÔ²² ¼Û½Å(submit)µÈ´Ù.

17.13.3 Æû µ¥ÀÌÅÍÀÇ Ã³¸®

¼Û½Å ´ÜÃß(submit button)¸¦ È°¼ºÈ­ ÇÏ´Â µîÀ¸·Î »ç¿ëÀÚ°¡ ÆûÀ» ¼Û½ÅÇϸé, »ç¿ëµµ±¸´Â ´ÙÀ½°ú °°ÀÌ Ã³¸®ÇÑ´Ù.

ÀÏ´Ü°è: ¼º°øÀû Á¦¾î(successful control)¸¦ ÀνÄÇÑ´Ù.

ÀÌ´Ü°è: Æû µ¥ÀÌÅÍ ¼¼Æ®¸¦ ¸¸µë

Æû µ¥ÀÌÅÍ ¼¼Æ®(form data set)´Â ¼º°øÀû Á¦¾î·Î ºÎÅÍ Á¦¾î À̸§(control-name)°ú ÇöÀç°ª(current-value) ¦µé·Î ±¸¼º µÈ ÀÏ·ÃÀÇ µ¥ÀÌÅÍÀÌ´Ù.

»ï´Ü°è: Æû µ¥ÀÌÅÍ ¼¼Æ®¸¦ ¿£ÄÚµù

Æû µ¥ÀÌÅÍ ¼¼Æ®´Â FORM ¿¤·¹¸àÆ®ÀÇ enctype ¾ÖÆ®¸®ºäÆ®¿¡¼­ ÁöÁ¤ µÈ ÄÁÅÙÆ® ŸÀÔ(content type)¿¡ ÀÇÇÏ¿© ¿£ÄÚµùµÈ´Ù.

»ç´Ü°è: ¿£ÄÚµù µÈ Æû µ¥ÀÌÅÍ ¼¼Æ®ÀÇ ¼Û½Å

ÃÖÁ¾ÀûÀ¸·Î, ¿£ÄÚµù µÈ µ¥ÀÌÅÍ´Â action ¾ÖÆ®¸®ºäÆ®·Î ÁöÁ¤ µÈ ó¸® ´ë¸®ÀÚ(processing agent)¿¡°Ô method ¾ÖÆ®¸®ºäÆ®¿¡ ÀÇÇÏ¿© ÁöÁ¤ µÈ ÇÁ·ÎÅäÄÝ(protocol)¸¦ »ç¿ëÇÏ¿© º¸³»Áø´Ù.

ÀÌ ±Ô°ÝÀº Æû¿¡ »ç¿ë µÉ ¼ö ÀÖ´Â ¸ðµç À¯È¿ÇÑ ¼Û½Å ¹æ¹ýµéÀ̳ª ÄÁÅÙÆ® ŸÀÔµéÀ» ±ÔÁ¤ÇÏÁö ¾Ê¾Ò´Ù. ±×·¯³ª, HTML 4 »ç¿ëµµ±¸´Â ´ÙÀ½ °æ¿ìµéÀÇ Ã³¸® ¹æ¹ýÀ» Áö¿øÇÏ¿©¾ß ÇÑ´Ù.

action ¶Ç´Â methodÀÇ ´Ù¸¥ °ª¿¡¼­´Â, ÀÛµ¿ÀÌ ÁöÁ¤µÇ¾î ÀÖÁö ¾Ê¾Ò´Ù.

»ç¿ëµµ±¸´Â HTTP "get"°ú "post" ÀÌÀü(transaction)ÀÇ ¼Û½ÅÀ» Ç¥ÇöÇÏ¿©¾ß ÇÑ´Ù.

17.13.4 ÆûÀÇ ÄÁÅÙÆ® ŸÀÔ(content type)

FORM ¿¤·¹¸àÆ®ÀÇ enctype ¾ÖÆ®¸®ºäÆ®´Â ¼­¹ö¿¡ ¼Û½ÅÀ» À§Çϸç Æû µ¥ÀÌÅÍ ¼¼Æ®(form data set)ÀÇ ¿£Äڵ忡 »ç¿ë µÈ ÄÁÅÙÆ® ŸÀÔ(content type)À» ÁöÁ¤ÇÑ´Ù. »ç¿ëµµ±¸´Â ¾Æ·¡ ¸ñ·ÏÀÇ ÄÁÅÙÆ® ŸÀÔÀ» Áö¿øÇÏ¿©¾ß ÇÑ´Ù. ´Ù¸¥ ÄÁÅÙÆ® ŸÀÔµéÀÇ ÀÛµ¿ÀÌ ÁöÁ¤µÇ¾î ÀÖÁö ¾Ê´Ù.

URI ¾ÖÆ®¸®ºäÆ® °ª¿¡¼­ ¾ÚÆÛ»÷µå("&") ¿¡½ºÄÉÀÌÇÎ(escaping)µµ Âü°íÇ϶ó.

ÄÁÅÙÆ® ŸÀÔ "application/x-www-form-urlencoded"

ÀÌ´Â ÄÁÅÙÆ® ŸÀÔ(content type)ÀÇ µðÆúÆ® °ªÀÌ´Ù. ÀÌ ÄÁÅÙÆ® ŸÀÔÀ¸·Î ¼Û½ÅµÇ´Â ÆûÀº ´ÙÀ½°ú °°ÀÌ ¿£ÄÚµùµÇ¾î¾ß ÇÑ´Ù.

  1. Á¦¾î À̸§(Control name)µé°ú °ªµéÀÌ ¾Æ½ºÅ° °ªÀ¸·Î(escaped(µÈ´Ù. °ø°£ ±ÛÀÚµéÀº `+'À¸·Î ´ëüµÇ°í, ±× ÈÄ [RFC1738] Ç׸ñ 2.2¿¡ ¼³¸í µÈ ¹Ù¿Í °°ÀÌ ¿¹¾à(reserved) ±ÛÀÚµéÀÌ ¾Æ½ºÅ° °ªÀ¸·Î(escaped) µÈ´Ù. ºñ ¾ËÆĺª(Non-alpha) ±ÛÀÚµéÀº ÆÛ¼¾Æ® ±âÈ£¿Í ÇØ´ç ±ÛÀÚÀÇ ASCII Äڵ忡 ÇØ´çÇÏ´Â µÎ°³ÀÇ 16Áø¼ö·Î µÈ `%HH'·Î µÈ´Ù. ÁٹٲÞ(line break)Àº "CR LF"('%0D%0A')·Î µÈ´Ù.
  2. Á¦¾î À̸§°ú °ªÀº ¹®¼­¿¡ ³ªÅ¸³ª´Â ¼ø¼­¿¡ µû¶ó ¸ñ·ÏÈ­µÈ´Ù. À̸§Àº ±× °ª°ú `='·Î ºÐ¸®µÇ°í, Á¦¾î À̸§°ú °ªÀÇ Â¦Àº ¼­·Î `&'·Î ºÐ¸®µÈ´Ù.

ÄÁÅÙÆ® ŸÀÔ "multipart/form-data"

ÁÖ¼®: °ú°Å ¹öÀü ºÎÇÕ¼º ¹®Á¦, "multipart/form-data"¿Í ±âŸ ÄÁÅÙÆ® ŸÀÔ(content type)µé°úÀÇ °ü°è, ¼º´É ¹®Á¦ µîÀ» Æ÷ÇÔÇÏ¿©, È­ÀÏ ¾÷·Îµå(upload)¿¡ ´ë ÇÑ Ãß°¡ÀûÀÎ Á¤º¸´Â [RFC2388]À» ÂüÁ¶Ç϶ó.

ºÎ·ÏÀÇ ÆûÀÇ º¸¾È ¹®Á¦¸¦ ÂüÁ¶Ç϶ó.

ÄÁÅÙÆ® ŸÀÔ "application/x-www-form-urlencoded"´Â ¸¹Àº ¾çÀÇ ÀÌÁø¼ö(binary) µ¥ÀÌÅÍ ¶Ç´Â ºñ¾Æ½ºÅ°(non-ASCII) ±ÛÀÚ¸¦ Æ÷ÇÔÇÏ´Â ÅؽºÆ®¿¡¼­´Â È¿°úÀûÀÌ ¾Æ´Ï´Ù. È­ÀÏ, ºñ¾Æ½ºÅ° µ¥ÀÌÅÍ, ÀÌÁø¼ö µ¥ÀÌÅÍÀ» Æ÷ÇÔÇÏ´Â ÆûÀÇ ¼Û½Å(submit)¿¡´Â ÄÁÅÙÆ® ŸÀÔ(content type) "multipart/form-data"°¡ »ç¿ëµÇ¾î¾ß ÇÑ´Ù.

ÀÌÁø(binary) "multipart/form-data"´Â [RFC2045]¿¡ ¼Ò°³ µÈ ¸ðµç º¹¼ö MIME µ¥ÀÌÅÍ È帧ÀÇ ±ÔÄ¢À» µû¸¥´Ù. "multipart/form-data" Á¤ÀÇ´Â [IANA] ¸®Áö½ºÆ®¸®(registry)¿¡ ÀÖ´Ù.

"multipart/form-data" ¸Þ¼¼Áö´Â ¼º°øÀû Á¦¾î ºÎºÐµéÀÇ ¿¬¼ÓÀ» Æ÷ÇÔÇÏ¿© ³ªÅ¸³½´Ù. °¢ ºÎºÐµéÀº ¹®¼­¿¡ ³ªÅ¸³ª´Â Á¦¾î¿Í »óÀÀÇÏ´Â °°Àº ¼ø¼­¿¡µû¶ó, ó¸® ´ë¸®ÀÚ(processing agent)¿¡°Ô º¸³» Áø´Ù. ºÎºÐÀÇ ±¸È¹Àº ¾î¶² µ¥ÀÌÅÍ¿¡µµ ³ªÅ¸³ªÁö ¾Ê¾Æ¾ß Çϸç, ±× ¹æ¹ýÀº ÀÌ ±Ô°ÝÀÇ ¹ýÀ§ ¹ÛÀÌ´Ù.

¸ðµç º¹¼ö MIME ŸÀÔµé°ú °°ÀÌ, °¢ ºÎºÐÀº µðÆúÆ®°¡ "text/plain"ÀÎ ¼±ÅÃÀû "Content-Type" Çì´õ(header)¸¦ °®´Â´Ù. »ç¿ëµµ±¸´Â "charset" ÆĶó¸ÞÅÍ(parameter)¿¡ ÀÇÇÏ¿© ÀÌ·ç¾îÁö´Â "Content-Type" Çì´õ¸¦ Á¦°øÇÏ¿©¾ß ÇÑ´Ù.

°¢ ºÎºÐÀº ´ÙÀ½À» Æ÷ÇÔ ÇÒ °ÍÀÌ´Ù.

  1. °ªÀÌ "form-data" ÀÎ "Content-Disposition" Çì´õ.
  2. ÇØ´ç Á¦¾îÀÇ Á¦¾î À̸§À» ÁöÁ¤ÇÏ´Â name ¾ÖÆ®¸®ºäÆ®. ¿ø·¡ ºñ¾Æ½ºÆ¼(non-ASCII) ±ÛÀÚ ¼¼Æ®·Î ¿£ÄÚµå µÈ Á¦¾î À̸§Àº [RFC2045]¿¡ ¼Ò°³ µÈ ¹æ¹ý¿¡ µû¸¥´Ù.

±×·¡¼­, Á¦¾î À̸§ "mycontrol" ÀÎ ¿¹Á¦¿¡¼­, ÇØ´ç ºÎºÐÀÌ ÁöÁ¤µÇ¾ú´Ù.

 Content-Disposition: form-data; name="mycontrol"

¸ðµç MIME ¼Û½Å¿¡¼­¿Í °°ÀÌ, "CR LF"(`%0D%0A')°¡ µ¥ÀÌÅÍÀÇ ¿­(line)À» ±¸º°Çϱâ À§ÇÏ¿© »ç¿ëµÈ´Ù.

°¢ ºÎºÐÀº ¿£ÄÚµå µÉ ¼ö ÀÖ°í, ¸¸ÀÏ ±× ºÎºÐÀÇ °ªÀÌ µðÆúÆ® ¿£ÄÚµù (7BIT)°ú ÀÏÄ¡ÇÏÁö ¾ÊÀ¸¸é[RFC2045 Ç׸ñ 6 ÂüÁ¶], "Content-Transfer-Encoding" Çì´õ(header)°¡ Á¦°øµÇ¾î¾ß ÇÑ´Ù.

¸¸ÀÏ ±× È­ÀÏ ³»¿ëµéÀÌ Æû°ú ÇÔ²² ¼Û½ÅµÇ¸é, ±× È­ÀÏ ÀÔ·ÂÀº ÀûÁ¤ÇÑ ÄÁÅÙÆ® ŸÀÔÀ¸·Î ÁöÁ¤µÇ¾î¾ßÇÑ´Ù(¿¹¸¦ µé¾î, "application/octet-stream"). ¸¸ÀÏ ´ÜÀÏ Æû ¿£Æ®¸®ÀÇ °á°ú·Î º¹¼ö(multiple) È­ÀϵéÀÌ µ¹¾Æ¿Â´Ù¸é, ±× °ÍµéÀº "multipart/form-data" ¾È¿¡ ±ò·Á ÀÖ´Â(embedded) "multipart/mixed"·Î µ¹¾Æ¿Í¾ßÇÑ´Ù.

»ç¿ëµµ±¸´Â °¢ ¼Û½Å(submit) È­ÀÏÀÇ È­ÀÏ À̸§ Á¦°øÀ» ½ÃµµÇÏ¿©¾ß ÇÑ´Ù. ±× È­ÀÏ À̸§Àº 'Content-Disposition: form-data' Çì´õÀÇ "filename" ÆĶó¸ÞÅÍ·Î, ¶Ç´Â, º¹¼ö(multiple) È­ÀÏÀÇ °æ¿ì, ºÎºÐÀÇ 'Content-Disposition: file' Çì´õ ¾ÈÀÇ "filename" ÆĶó¸ÞÅÍ·Î ÁöÁ¤ µÉ ¼ö ÀÖ´Ù. ¸¸ÀÏ »ç¿ëÀÚÀÇ ¿î¿µ ü°è¿¡¼­ ±× È­ÀÏ À̸§ÀÌ US-ASCII°¡ ¾Æ´Ï¸é, ±× È­ÀÏ À̸§Àº ´ë·«ÀûÀ¸·Î µÇ°Å³ª ¶Ç´Â [RFC2045]ÀÇ ¹æ¹ýÀ» »ç¿ëÇÏ¿© ¿£Äڵ尡 µÉ ¼ö ÀÖ´Ù. ÀÌ°ÍÀº, ¿¹¸¦ µé¾î, ¾÷·Îµå µÈ È­ÀÏÀÌ ¼­·Î ÂüÁ¶(¿¹¸¦ µé¾î, TeX È­ÀÏ°ú ±×ÀÇ ".sty" º¸Á¶ ½ºÅ¸ÀÏ ±âÀç)¸¦ Æ÷ÇÔ ÇÒ °æ¿ì¿¡ Æí¸®ÇÏ´Ù.

¿¹Á¦´Â "multipart/form-data" ¿£ÄÚµùÀ» ¼³¸íÇÑ´Ù. ´ÙÀ½ÀÇ ÆûÀ» °¡Á¤ÇÏÀÚ.

<FORM action="http://server.dom/cgi/handle" enctype="multipart/form-data"
	method="post">
 <P>
 ¼º¸íÀº? <INPUT type="text" name="submit-name"><BR>
 º¸³¾ È­ÀÏÀº? <INPUT type="file" name="files"><BR>
 <INPUT type="submit" value="Send"> <INPUT type="reset">
</FORM>

¸¸ÀÏ »ç¿ëÀÚ°¡ "Larry"¸¦ ÅؽºÆ® ÀÔ·ÂÇÏ°í "file1.txt" È­ÀÏÀ» ¼±ÅÃÇϸé, »ç¿ëµµ±¸´Â ´ÙÀ½ µ¥ÀÌÅ͸¦ µÇµ¹·Á º¸³¾ °ÍÀÌ´Ù.

  Content-Type: multipart/form-data; boundary=AaB03x

  --AaB03x
  Content-Disposition: form-data; name="submit-name"
  Larry
  --AaB03x
  Content-Disposition: form-data; name="files"; filename="file1.txt"
  Content-Type: text/plain
  ...  file1.txtÀÇ ³»¿ë ...
  --AaB03x--

¸¸ÀÏ »ç¿ëÀÚ°¡ µÎ¹ø° À̹ÌÁö È­ÀÏ "file2.gif"À» ¼±ÅÃÇÏ¿´´Ù¸é, »ç¿ëµµ±¸´Â ´ÙÀ½°ú °°Àº ºÎºÐµéÀ» Çü¼º ÇÒ °ÍÀÌ´Ù.

 Content-Type: multipart/form-data; boundary=AaB03x

 --AaB03x
  Content-Disposition: form-data; name="submit-name"
  Larry
  --AaB03x
  Content-Disposition: form-data; name="files"
  Content-Type: multipart/mixed; boundary=BbC04y
  --BbC04y
  Content-Disposition: attachment; filename="file1.txt"
  Content-Type: text/plain
  ... file1.txtÀÇ ³»¿ë ...
  --BbC04y
  Content-Disposition: attachment; filename="file2.gif"
  Content-Type: image/gif
  Content-Transfer-Encoding: binary
  ... file2.gifÀÇ ³»¿ë ...
  --BbC04y--
  --AaB03x--

ÀÌ Trio ȨÆäÀÌÁö ¹®¼­(http://trio.co.kr/webrefer/html/interact/forms.html)´Â ÀÚÀ¯·ÎÀÌ ¿¬°á »ç¿ëÀÌ °¡´ÉÇÔ.