W3C ¹®¼­¿¡¼­ ÀÔ·Â ÀÛ¾÷(FORM) °è¼Ó Trio ȨÆäÀÌÁö

<FORM></FORM> °è¼Ó

¾Õ¿¡¼­ ´Ù·é Áß¿äÇÑ ¿¤·¹¸àÆ®´Â

¿©±â¼­´Â Áß¿äÇÑ »çÇ× ¸¸ ¼³¸íÇÑ´Ù. FORM Àü¹Ý¿¡ °ü ÇÑ ÀÚ¼¼ÇÑ °ÍÀº HTML ±Ô°ÝÀ» ÂüÁ¶Ç϶ó.


´ÜÃß(BUTTON) ÀÔ·Â: <BUTTON type="submit">, <BUTTON type="reset">

´ÜÃ߸¦ ÀÔ·Â ÇÒ ¶§ »ç¿ëÇÑ´Ù. °¡´ÉÇÑ ¾ÖÆ®¸®ºäÆ®´Â submit, reset ÀÌ´Ù.

´ÜÃß type="submit"´Â ÀÔ·ÂÀÌ ¿Ï·áµÇ¾î ÇØ´ç ¾×¼ÇÀ» ½ÃÀÛÇ϶ó´Â °ÍÀÌ°í, type="submit"´Â ÀÔ·Â »çÇ×À» ÃʱⰪÀ¸·Î ȯ¿øÇ϶ó´Â °ÍÀÌ´Ù. À̰͵éÀº ±× °ÍÀÌ Æ÷ÇԵǾî ÀÖ´Â <FORM></FORM> ¾È¿¡¼­ ¸¸ Àû¿ëµÇ°í ´Ù¸¥ <FORM></FORM>¿¡ ÀÖ´Â °ÍÀº ÇØ´ç µÈÁö ¾Ê´Â´Ù. ¿¹Á¦¸¦ º¸¸é

<FORM  action="mailto:trioweb@hanmail.net" method="post">
¼º: <INPUT type="text" name="firstname" size=10>
¸í: <INPUT type="text" name="lastname" size=20><BR>
<INPUT type="radio" name="sex" value="Male" checked> ³²,
<INPUT type="radio" name="sex" value="Female"> ¿©,
ÀüÀÚ ¿ìÆí: <INPUT type="text" name="email"><BR>
<BUTTON name="submit" value="submit" type="submit">
	<IMG src="../../gif/btsubmit.gif" width=80 alt="¼Û½Å È®ÀÎ">
<BUTTON name="reset" type="reset">
	<IMG src="../../gif/btreset.gif" width=80 alt="ÀçÀÔ·Â">
<BUTTON name="button" value="button" onClick="alert('ÀÌ°ÍÀº ¿¹ºñ ´ÜÃßÀÔ´Ï´Ù.')">
	<IMG src="../../gif/btblank.gif" width=80 alt="¿¹ºñ´ÜÃß">
</FORM>
¼º: ¸í:
³², ¿©, ÀüÀÚ ¿ìÆí:

À̺¥Æ® 󸮶õ ?

<BUTTON>¿¡ type ÀÌ ÁöÁ¤ ¾ÊµÇ¸é ÀÏ¹Ý ´ÜÃß·Î »ç¿ë ÇÒ ¼ö ÀÖ´Â °ÍÀÌ µÈ´Ù. ÀÌ ´ÜÃß¿¡´Â onClick, onMouseOver, onMouseDown µîÀÇ À̺¥Æ® 󸮷Π´Ù¸¥ ±â´ÉÀ» ºÎ¿© ÇÒ ¼ö ÀÖ´Ù.

À̺¥Æ® 󸮶õ ±× ¿ÀºêÁ§Æ®(¿¹¸¦ µé¾î ÀÌ ´ÜÃß)¿¡ ¾î¶² Á¶ÀÛÀ» ÇÏ¿´À» ¶§, Javascript, Visual Basic, C++ µîÀÇ ÇÁ·Î±×·¥À¸·Î ÀÛµ¿ÇÏ°Ô ÇÏ´Â °ÍÀ¸·Î ÀÚ¼¼ÇÑ ¼³¸íÀ» ÂüÁ¶ ÇÒ ¼ö ÀÖ´Ù. ¾î·Á¿î ¾ð¾î¶ó°í °Ì¸ÔÀ» ÇÊ¿ä°¡ ¾ø°í, Javascript·Î ¾ÆÁÖ °£´ÜÇÏ°Ô Ã³¸® ÇÒ ¼ö ÀÖ´Â °ÍµéÀÌ ¸¹ÀÌ ÀÖ´Ù. Javascript ¿¹Á¦¿¡¼­ µû¼­ ¾²¸é µÈ´Ù.

À§ÀÇ ¿¹Á¦¿¡¼­ ±× ¿¹ºñ ´ÜÃß¿¡´Â °æ°í¸¦ º¸³»´Â ½ºÅ©¸³Æ®°¡ ÀÖ¾î onClickÀ¸·Î °æ°í¸¦ º¸³»´Âµ¥ ±× ºÎºÐÀº ¾ÆÁÖ °£´ÜÇÏ°Ô onClick="alert('ÀÌ°ÍÀº ¿¹ºñ ´ÜÃßÀÔ´Ï´Ù.')"ÀÌ´Ù.

¹°·Ð ÀÌ·± À̺¥Æ® 󸮴 ´Ù¸¥ ¿¤·¹¸àÆ®¿¡¼­µµ ³Î¸® »ç¿ë ÇÒ ¼ö ÀÖ´Ù.

HTML ±Ô°ÝÀÇ BUTTON¿¡ ´ëÇÑ ÀÚ¼¼ÇÑ ¼³¸íÀ» ÂüÁ¶Ç϶ó.


¼±ÅÃ: <SELECT><OPTION></SELECT>

<SELECT></SELECT> ű׻çÀÌ¿¡ ¼±Åà Ç׸ñ <OPTION>µéÀÌ µé¾î°¡´Âµ¥ ¼±ÅÃÇ׸ñÀÇ º¹¼öÀ» À§ÇÏ¿© multipleÀ» ÁöÁ¤ÇÏ°í, ÇÑ ¹ø¿¡ º¸ÀÌ´Â Ç׸ñ °¹¼ö´Â size=Á¤¼ö·Î ÁöÁ¤ÇÑ´Ù. ÃÖÃÊ°ªÀ» ÁöÁ¤ÇÏ·Á¸é selected ¿Í value=°ª¸¦ ³Ö¾îÁØ´Ù. ¿¹Á¦¸¦ º¸¸é

<FORM name="formname2" method="post" action="mailto:trioweb@hanmail.net">
¼±Åà »çÇ×<br>
<SELECT multiple size="5" name="compo-select">
  <OPTION selected value="¼±Åà Ç׸ñ-1">¼±Åà Ç׸ñ-1</OPTION>
  <OPTION>¼±Åà Ç׸ñ-2</OPTION>
  <OPTION>¼±Åà Ç׸ñ-3</OPTION>
  <OPTION>¼±Åà Ç׸ñ-4</OPTION>
  <OPTION selected value="¼±Åà Ç׸ñ-5">¼±Åà Ç׸ñ-5</OPTION>
  <OPTION>¼±Åà Ç׸ñ-6</OPTION>
  <OPTION>¼±Åà Ç׸ñ-7</OPTION>
</SELECT><BR>
<INPUT type="submit" value="¼±ÅÿϷá">
<INPUT type="reset" value="´Ù½Ã¼³Á¤">
</FORM>
¼±Åà »çÇ×


º¹¼ö Ç׸ñÀ» ¼±ÅÃÇÏ·Á¸é shift¸¦ ´©¸£¸é¼­ ¸¶¿ì½º¸¦ Ŭ¸¯ÇÏ¸é µÈ´Ù.
¼Û½ÅÀ» Çϱâ À§Çؼ­´Â ¼­¹ö°¡ ÀÖ¾î¾ß µÇ´Âµ¥, ÀÏ´Ü ÀÌ°ú °°Àº ½ÄÀ¸·Î ÀÛ¾÷µÈ´Ù´Â °Í¸¸ ÀÌÇØÇÏ°í, ¶ÇÇÑ ¸Þ¼¼Áö¸¦ À§¿Í °°ÀÌ ÁÖ´Â °ÍÀº Javascript·Î ÀÛ¼º ÇÑ °ÍÀε¥ ÇâÈÄ Javascript¸¦ ¹è¿ì¸é¼­ ÀÌÇØÇϱ⠹ٶõ´Ù.

HTML ±Ô°ÝÀÇ SELECT, OPTION¿¡ ´ëÇÑ ÀÚ¼¼ÇÑ ¼³¸íÀ» ÂüÁ¶Ç϶ó.

¿©·¯ ÁÙÀÇ ÅؽºÆ® ÀÔ·Â: <TEXTAREA></TEXTAREA>

<FORM></FORM> ÅÂ±× ¾È¿¡ <TEXTAREA></TEXTAREA>·Î ÁöÁ¤Çϴµ¥, rows="ÁÙÀÇ ¼ö", cols="Ä÷³ÀÇ ±ÛÀÚ¼ö"¸¦ ÁöÁ¤Çϸç, ÃʱⰪÀ» ÅÂ±× ¾È¿¡ ±â¼úÇÏ¸é µÈ´Ù. <INPUT type="text">)¿Í °ÅÀÇ °°´Ù.

¿¹Á¦¸¦ º¸¸é

<FORM name="formname3" method="post" action="mailto:trioweb@hanmail.net">
ÀÔ·Â Á¦¸ñ<br>
<TEXTAREA name="thetext" rows="5" cols="50">   ÃÖÃÊ ÅؽºÆ®ÀÇ Ã¹Â° ¿­.
   ÃÖÃÊ ÅؽºÆ®ÀÇ µÑ° ¿­ ÃʱⰪ. </TEXTAREA><BR>
<INPUT type="submit" value="ÀԷ¿Ϸá"><INPUT type="reset" value="ÀԷ´ٽÃ">
</FORM>
ÀÔ·Â Á¦¸ñ

HTML ±Ô°ÝÀÇ TEXTAREA¿¡ ´ëÇÑ ÀÚ¼¼ÇÑ ¼³¸íÀ» ÂüÁ¶Ç϶ó.

¿©±â¼­´Â Áß¿äÇÑ »çÇ× ¸¸ ¼³¸íÇÑ´Ù. FORM Àü¹Ý¿¡ °ü ÇÑ ÀÚ¼¼ÇÑ °ÍÀº HTML ±Ô°ÝÀ» ÂüÁ¶Ç϶ó.


HTML¼­·Ð HTML±âº» ¹®ÀÚÇ¥Çö ¹®¼­Àå½Ä ¹®¼­¿¬°á ¹®¼­¸ñ·Ï Ç¥(TABLE) ÀÔ·ÂÀÛ¾÷ âƲ¥±â
ÀÌ Trio ȨÆäÀÌÁö ¹®¼­(http://trio.co.kr/webrefer/httut/htform2.html)´Â ÀÚÀ¯·ÎÀÌ ¿¬°á »ç¿ëÀÌ °¡´ÉÇÔ.