FORM (3)


SUBMIT, RESET

SELECT (1)

SELECT (2)

FILE

LABLE



1. SUBMIT, RESET


<INPUT type="submit" value="¹öư ¸í"> <INPUT type="reset" value="¹öư ¸í">


  1. submit´Â ÀԷ â¿¡ µî·ÏµÈ ³»¿ëµéÀ» ¼­¹ö·Î Àü¼Û½Ãų ¶§ »ç¿ëÇÏ´Â ¹öưÀ̸ç, value´Â ¹öư¿¡ ³ªÅ¸³ª´Â ÅØ½ºÆ®¸¦ ¸»ÇÕ´Ï´Ù.
  2. reset´Â ÀԷ â¿¡ µî·ÏµÈ ³»¿ëµéÀ» Ãʱ⠼³Á¤»óÅ·Πµ¹¸®´Â ±â´ÉÀ» ÇÕ´Ï´Ù. Áï, ¾Æ¹«°Íµµ ÀûÇô ÀÖÁö ¾ÊÀº »óÅ·Π¸¸µé¾î ¹ö¸®´Â °æ¿ì¸¦ ¸»ÇÕ´Ï´Ù.
  3. ±âÁ¸ÀÇ Àü¼Û, Ãë¼Ò¹öưÀÌ ¸¶À½¿¡ µéÁö ¾Ê¾Æ ±×·¡ÇÈÀ¸·Î ¹öưÀ» ´ëüÇÒ ¼öµµ ÀÖ½À´Ï´Ù. Áï (input type="image" src="À̹ÌÁö °æ·Î¸í") ÀÌ·¸°Ô ÇÏ½Ã¸é µÇ°Ú½À´Ï´Ù.


<input type="submit" value="Àü¼ÛÇϱâ"> <input type="reset" value="´Ù½Ã¾²±â"> <input type="image" src="À̹ÌÁö °æ·Î¸í">



¹öưũ±â°¡ ´Ù¸¦ ¶§

¹öưÀ» ¸¸µé¸é ±ÛÀÚÀÇ ¼ýÀÚ¿¡ µû¶ó¼­ ¹öưÀÇ Å©±â°¡ ´Þ¶óÁý´Ï´Ù. ¿¹¸¦ µé¸é ok¶ó´Â ¹öư°ú cancelÀ̶ó´Â ¹öưÀ» ¸¸µé¶§ ¹öưÀÇ Å©±â¸¦ ¶È°°ÀÌ ÇÏ´Â ¹æ¹ýÀº ¾Æ·¡¿Í °°½À´Ï´Ù. Áï ¿øÇϽô ũ±â¸¸Å­ ¶ç¾î¾²±â¸¦ ÇØÁÖ½Ã¸é µË´Ï´Ù.(value="(¶ç¾î¾²±â)ok")


<input type="submit" value="ok"> <input type="reset" value="cancel">

<input type="submit" value=" ok"> <input type="reset" value="cancel">



2. SELECT (1)


<SELECT name="´ëÇ¥¸Þ´º"> <OPTION="¸Þ´º">Ç׸ñ...</SELECT>


  1. ÀÌ SELECT´Â ¸ñ·Ï»óÀÚ, ȤÀº ¸®½ºÆ® ¹Ú½º¶ó°íµµ ÇÕ´Ï´Ù.
  2. À̰͵µ RADIO¹öưó·³ ¿©·¯ Ç׸ñ Áß Çϳª¸¸ ¼±ÅÃÇØ¾ß ÇÏ´Â °æ¿ì¿¡ »ç¿ëÇÕ´Ï´Ù.
  3. ¶óµð¿À¹öư°ú ´Ù¸¥ Á¡Àº ¿©·¯ Ç׸ñÀ» ÇÑ È­¸é¿¡ ¸ðµÎ º¸¿©ÁÖ´Â °ÍÀÌ ¾Æ´Ï¶ó ¸®½ºÆ® Çü½ÄÀ¸·Î ÆîÃÄÁø °÷¿¡¼­ ÇÑ °¡Áö¸¦ Ŭ¸¯ÇÑ´Ù´Â °ÍÀÔ´Ï´Ù. ÁÖ·Î »ýÀÏÀ̳ª Á÷¾÷°ú °°ÀÌ ¾î¶² ¹üÀ§¸¦ ¹þ¾î³ªÁö ¾Ê°Å³ª ±× ¹üÀ§¸¦ Á¦ÇÑÇØ¾ß ÇÒ Çʿ䰡 ÀÖÀ» °æ¿ì¿¡ »ç¿ëÇÕ´Ï´Ù.
  4. SELECTÅÂ±× ¾È¿¡ OPTION ű׷Π½ÇÁ¦ Ç׸ñÀ» ÀÛ¼ºÇϰí ÀÖ½À´Ï´Ù. À̰ÍÀº ¸¶Ä¡ ¸®½ºÆ® °ü·Ã ű׿¡¼­ »ç¿ëµÈ ÇüÅÂ¿Í ºñ½ÁÇÕ´Ï´Ù.
  5. (OPTION)ű×ÀÇ ³¡ ű×ÀÎ (/OPTION)ű״ »ý·« °¡´ÉÇÏ°í ¶Ç »ý·«ÇÏ´Â °ÍÀ» ±ÇÀåÇϰí ÀÖ½À´Ï´Ù.
  6. ÀÌ OPTION Áß¿¡¼­ °¡Àå ¸ÕÀú ÀÛ¼ºµÈ Ç׸ñÀÌ ±âº»À¸·Î º¸¿©ÁöÁö¸¸, "SELECTED"¶ó´Â ¼Ó¼ºÀ» ½á¼­ ¾î¶² Ç׸ñÀ» ±âº»À¸·Î Ç¥½ÃÇÒ ¼öµµ ÀÖ½À´Ï´Ù.


<P>´ç½ÅÀº ÀÌ »çÀÌÆ®¿¡ ¸î ¹ø ¹æ¹® Çϳª¿ä?</P> <SELECT name="visit"> <OPTION value="one">1ȸ <OPTION value="two-five" selected>2ȸ-5ȸ <OPTION value="six-ten">6-10ȸ <OPTION value="ten more">10ȸ ÀÌ»ó

´ç½ÅÀº ÀÌ »çÀÌÆ®¿¡ ¸î ¹ø ¹æ¹® Çϳª¿ä?




µå·Ó´Ù¿î ¸Þ´º¸¦ ±æ°Ô ÇÏ°í ½ÍÀ» ¶§

µå·Ó´Ù¿î ¸Þ´º¸¦ ÇÑ ÁٷΠǥ½ÃÇϱ⠺¸´Ù´Â Á» ´õ ±æ°ÔÇÏ°í ½ÍÀ» ¶§´Â SELECTÀÇ ¿É¼ÇÀ¸·Î SIZE¸¦ »ç¿ëÇÏ¸é µË´Ï´Ù. Áï (SELECT name="¹æ¹®È½¼ö" size=3)ÀÌ·¸°Ô ÇÏ½Ã¸é µË´Ï´Ù.
À̰ÍÀº ¿©·¯ °³ÀÇ Ç׸ñÀ» º¸¿©ÁÖÁö¸¸ multiple¼Ó¼ºÀ» »ç¿ëÇßÀ» ¶§¿Í °°ÀÌ ¿©·¯ Ç׸ñÀ» ¼±ÅÃÇÒ ¼ö´Â ¾ø½À´Ï´Ù.


<P>´ç½ÅÀº ÀÌ »çÀÌÆ®¿¡ ¸î ¹ø ¹æ¹® Çϳª¿ä?</P> <SELECT name="visit" size=3> <OPTION value="one">1ȸ <OPTION value="two-five" selected>2ȸ-5ȸ <OPTION value="six-ten">6-10ȸ <OPTION value="ten more">10ȸ ÀÌ»ó

´ç½ÅÀº ÀÌ »çÀÌÆ®¿¡ ¸î ¹ø ¹æ¹® Çϳª¿ä?




3. SELECT (2)


<SELECT name="´ëÇ¥¸Þ´º" size="º¸¿©Áú Ç׸ñ°³¼ö" multiple> <OPTION="¸Þ´º">Ç׸ñ...</SELECT>


  1. À̹ø¿¡ ¼³¸íµå¸± SELECT´Â "´ÙÁß¼±Åà ¸Þ´º"ÀÔ´Ï´Ù.
  2. ´ÙÁß ¼±Åø޴º¶õ Ç×»ó Çϳª¸¸ ¼±ÅõǴ µå·Ó´Ù¿î(dropdown)¸Þ´º¿Í´Â ´Þ¸® Çѹø¿¡ ¿©·¯ °³¾¿ ¼±ÅÃÀÌ °¡´ÉÇÑ ¸Þ´º¸¦ ¸»ÇÕ´Ï´Ù.
  3. ¸®½ºÆ® ¹Ú½ºÀÇ Ç׸ñÀ» ¿©·¯ °³ µ¿½Ã¿¡ ¼±ÅÃÇϱâ À§Çؼ­´Â SELECTű׿¡ multiple ¼Ó¼ºÀ» ÀÔ·ÂÇÏ¸é µË´Ï´Ù.
  4. ´ÙÁß ¼±ÅÃÀ» ÇÒ °æ¿ì¿¡´Â "Ctrl"À» ´©¸¥ »óÅ¿¡¼­´Â °¢ Ç׸ñÀ» Çϳª¾¿ ¼±ÅÃÇÒ ¼ö ÀÖ°í, "Shift"¸¦ ´©¸£°í ¼±ÅÃÇÏ¸é ¿©·¯ Ç׸ñÀ» ¼±ÅÃÇÒ ¼ö ÀÖ½À´Ï´Ù.
  5. ¿©·¯ °³ÀÇ ¸®½ºÆ®¸¦ º¸¿©ÁÖ´Â °³¼ö´Â ºê¶ó¿ìÀú¸¶´Ù ´Ù¸¥µ¥ Exploler¿¡¼­´Â ¸®½ºÆ®°¡ 10°³ ÀÌ»óÀÌ µÇ¸é ½ºÅ©·Ñ¹Ù°¡ »ý¼ºµË´Ï´Ù. ³Ý½ºÄÉÀÌÇÁ¿¡¼­´Â ¾à 20±îÁö¸¸ º¸¿©ÁÖ°í ½ºÅ©·Ñ¹Ù°¡ »ý¼ºµË´Ï´Ù.
  6. ÀÌ multipleÀÌ »ç¿ëµÈ ¸®½ºÆ®¹Ú½º¿¡¼­µµ "selected" ¼Ó¼ºÀ» »ç¿ëÇÒ ¼ö ÀÖ½À´Ï´Ù.


<p>´ç½ÅÀÌ °¡Àå ÀÚÁÖ °¡´Â °Ë»ö¿£ÁøÀº?</p> <select name="search" size="6" multiple> <option value="search1">¾ßÈÄ (http://www.yahoo.co.kr) <option value="search2">¿¥ÆÄ½º(http://www.empas.com) <option value="search3">³×À̹ö(http://www.naver.com) <option value="search4">¶óÀÌÄÚ½º(http://www.lycos.co.kr) <option value="search5">½É¸¶´Ï(http://www.simmani.com selected) <option value="search6">Çѹ̸£(http://www.hanmir.co.kr) </select>

´ç½ÅÀÌ °¡Àå ÀÚÁÖ °¡´Â °Ë»ö¿£ÁøÀº?





4. FILE


<INPUT type="file" name="À̸§" size="Å©±â">


  1. ÆÄÀÏÀ» ¾÷·ÎµåÇÏ´Â ÀԷ¾ç½ÄÀ¸·Î ÄÄÇ»ÅÍ¿¡ ÀúÀåµÈ ÆÄÀÏÀ» ¼±ÅÃÇÒ ¶§ »ç¿ëÇÕ´Ï´Ù.
  2. À̰ÍÀº »ç¿ëÀÚ°¡ ºê¶ó¿ìÀú¿¡¼­ ƯÁ¤ ÆÄÀÏÀ» ¼­¹ö·Î ¾÷·ÎµåÇÒ ¼ö ÀÖµµ·Ï ÇØÁÝ´Ï´Ù. ÀÌ ÀÔ·Â ¾ç½ÄÀ» »ç¿ëÇÏ¸é ºê¶ó¿ìÀú¿¡ ÆÄÀÏÀ̸§ÀÌ µé¾î°¥ ¼ö ÀÖ´Â Çʵå Çϳª¿Í ½Ã½ºÅÛ µð·ºÅ丮¸¦ °Ë»öÇØÁÖ´Â ¹öưÇϳª°¡ »ý±â°Ô µË´Ï´Ù.
  3. ÀÌ ÆÄÀÏ ÀÔ·Â ¾ç½ÄÀ» ÀÌ¿ëÇÏ·Á¸é FORM Á¤ÀÇ ºÎºÐÀÌ (FORM ENCTYPE="multipart/form-data" ACTION="url" METHOD="post")¿Í °°Àº Çü½ÄÀ¸·Î µÇ¾î ÀÖ¾î¾ß ÇÕ´Ï´Ù. Encoding TypeÀÌ ¹Ýµå½Ã mutipart/form-data·Î ¼³Á¤µÇ¾î¾ß Çϸç, METHOD ¼Ó¼ºµµ POST¸¦ »ç¿ëÇÏ¿©¾ß ÇÕ´Ï´Ù. ±×¸®°í ´ç¿¬È÷ ¼­¹öÃø¿¡´Â ÆÄÀÏÀ» ¹Þ¾Æ ÀúÀåÇÏ´Â CGI ½ºÅ©¸³Æ®°¡ ÀÖ¾î¾ß ÇÕ´Ï´Ù.
  4. ÀÌ ¾ç½ÄÀº ÀϹÝÀûÀ¸·Î ÀÚ·á½Ç¿¡¼­ ¸¹ÀÌ »ç¿ëÇÕ´Ï´Ù.


÷ºÎ : <input type="file" name="attach" size="20">
÷ºÎ :



5. LABEL



  1. LABELű״ ÀͽºÇ÷η¯ Àü¿ëÀ¸·Î Æû¿¡ »ç¿ëµÈ ÀÔ·Â ¿ä¼Ò¸¦ ¹­¾îÁÖ´Â ¿ªÇÒÀ» ÇÕ´Ï´Ù.
  2. Áï, üũ ¹Ú½ºÀÇ °æ¿ì ³×¸ð·Î Ç¥½ÃµÈ üũ ºÎºÐÀ» Á¤È®È÷ Ŭ¸¯ÇØ¾ß Ã¼Å© Ç¥½Ã°¡ µÇÁö¸¸, ÀÌ LABEL¼Ó¼ºÀ» »ç¿ëÇØ¼­ üũ¹Ú½ºÀÇ Á¤º¸¸¦ Ç¥½ÃÇÏ´Â ºÎºÐ°ú üũ¹Ú½º¸¦ ¹­À¸¸é ¹­Àº ºÎºÐ "¾î´À °÷À» Ŭ¸¯Çصµ" °°Àº üũ°¡ µË´Ï´Ù.
  3. ÀÔ·Â ¾ç½Ä°ú ¾ç½ÄÀÇ Á¤º¸¸¦ ¹­±â À§Çؼ­ FOR ¼Ó¼ºÀÌ Á¸ÀçÇϴµ¥ LABELű×ÀÇ FOR ¼Ó¼º¿¡ ÀÔ·ÂµÈ ¼Ó¼º°ª°ú ¹­ÀÎ ÀÔ·Â ¿ä¼ÒÀÇ ID ¼Ó¼ºÀÇ ¼Ó¼º°ªÀÌ ÀÏÄ¡ÇØ¾ß ÇÕ´Ï´Ù. ÀÌ ¼Ó¼º¿¡¼­ ÁÖÀÇÇÒ °ÍÀº LABEL Çϳª¿Í ¹­ÀÏ ÀÔ·Â ¿ä¼Ò´Â Çϳª¸¸ °¡´ÉÇÏ´Ù´Â °ÍÀÔ´Ï´Ù.
  4. ÀÌ·¸°Ô ¾ç½Ä°ú Á¤º¸¸¦ ¹­±â À§Çؼ­´Â ´ÙÀ½°ú °°Àº µÎ °¡Áö ¹æ¹ýÀÌ ÀÖ½À´Ï´Ù. ¶óµð¿À ¹öưÀ¸·Î ¿¹¸¦ µé¾î º¸°Ú½À´Ï´Ù.
1. ·¹À̺í°ú ÀԷ¾ç½ÄÀ» (LABEL)°ú (/LABEL) »çÀÌ¿¡ ¸ðµÎ ³õ±â

<LABEL FOR="MALE">³²<INPUT TYPE="radio" NAME="SEX" ID="MALE"></LABEL>
2. ·¹ÀÌºí ºÎºÐ¸¸ ³õ±â

<LABEL FOR="FEMALE">¿©</LABEL> <INPUT TYPE="radio" NAME="SEX" ID="FEMALE">


³² ¿© ºÎºÐÀ» Çѹø Ŭ¸¯Çϼż­ Â÷ÀÌÁ¡À» ´À²¸º¸¼¼¿ä.


¡Ø Âü°í ¢Ñ LABEL in W3C HTML 4.0 Recommendation