ȸ¿ø°¡ÀԡžÆÀ̵ð/ºñ¹øã±â
ȨÀ¸·Î

Æû °ü·Ã °´Ã¼µé
16³â Àü

1. Æû °ü·Ã °´Ã¼ °³¿ä

Æû °ü·Ã °´Ã¼µéÀº ÀÚ¹Ù½ºÅ©¸³Æ®ÀÇ new ¿¬»êÀÚ¸¦ ÀÌ¿ëÇÏ¿© »ý¼ºÇÒ ¼ö ¾ø´Ù. ¿ÀÁ÷ HTML ÆäÀÌÁö¸¦ Æ÷µåÇÒ ¶§ HTML, ű׸¦ º¸°í ºê¶ó¿ìÀú°¡ ÀÚµ¿À¸·Î »ý¼ºÇÑ´Ù.

Æû ¹®¼­´Â <form>....</form> ű׷μ­ Á¤ÀÇÇϸç Ç×»ó <body> ÅÂ±× ³»¿¡ Á¸ÀçÇØ¾ß ÇÑ´Ù. 

(Ç¥) Æû °ü·Ã °´Ã¼µéÀÇ °³¿ä

°´Ã¼ ¼³ ¸í
 Form <form> ű׿¡ ÀÇÇØ ÀÚµ¿ »ý¼º
 Text <input type="text" > ű׿¡ ÀÇÇØ ÀÚµ¿ »ý¼º.
 Textarea <textarea>ű׿¡ ÀÇÇØ ÀÚµ¿ »ý¼º.
 Password <input type="password" > ű׿¡ ÀÇÇØ ÀÚµ¿ »ý¼º.
 FileUpload <input type="file" > ű׿¡ ÀÇÇØ ÀÚµ¿ »ý¼º.
 Radio <input type="radio" > ű׿¡ ÀÇÇØ ÀÚµ¿ »ý¼º.
 Checkbox <input type="checkbox" > ű׿¡ ÀÇÇØ ÀÚµ¿ »ý¼º.
 Button <input type="button" > ű׿¡ ÀÇÇØ ÀÚµ¿ »ý¼º.
 Submit <input type="submit" > ű׿¡ ÀÇÇØ ÀÚµ¿ »ý¼º.
 Reset <input type="reset" > ű׿¡ ÀÇÇØ ÀÚµ¿ »ý¼º.
 Select <select> ű׿¡ ÀÇÇØ ÀÚµ¿ »ý¼º.

ÀÌ °´Ã¼µé Áß Form °´Ã¼¸¦ Á¦¿ÜÇÏ°í ³ª¸ÓÁö´Â ¸ðµÎ form À̶ó´Â ÇÁ·ÎÆÛƼ¸¦ °¡Áø´Ù. ÀÌ ÇÁ·ÎÆÛƼ´Â »óÀ§ °´Ã¼ÀÎ Form °´Ã¼¿¡ ´ëÇÑ ·¹ÆÛ·±½ºÀÌ´Ù.

(¿¹)

<form name="f">
<input type="text" name="t">
<input type="button" name="b" value="OK"  onClick="this.form.t.value='¹öÆ°ÀÌ ´­·ÁÁ³½À´Ï´Ù.'">
<form>
  • this´Â Button °´Ã¼ bÀÚ½ÅÀ» ÀǹÌÇÔ.
  • this.formÀº °´Ã¼ b°¡ ¼ÓÇØÀÖ´Â Æû, f¸¦ ÀǹÌÇÔ.
  • this.form.t´Â Text°´Ã¼ÀÎ t¸¦ ÀǹÌÇÔ. ¾î¶² °´Ã¼ÀÇ ÇÏÀ§°´Ã¼´Â ¸¶Ä¡ ÀÚ½ÅÀÇ ÇÁ·ÎÆÛƼó·³ Á¢±Ù °¡´ÉÇÔ.
  • this.form.t.value´Â Text°´Ã¼ tÀÇ value ÇÁ·ÎÆÛƼ·Î¼­ ÅؽºÆ® â¿¡ Ãâ·ÂµÈ ½ºÆ®¸µÀ» ÀǹÌÇÔ.
  • this.form.t.value='¹öÆ°ÀÌ ´­·ÁÁ³½À´Ï´Ù.'¸¦ ½ÇÇàÇÑ °æ°ú Text â¿¡´Â "¹öÆ°ÀÌ ´­·ÁÁ³½À´Ï´Ù."°¡ Ãâ·ÂµÈ´Ù.

¡¡

¡¡

2. Form °´Ã¼

<form> ű×ÀÇ ¼Ó¼ºÀ» ¹Ý¿µÇϸç Æû µ¥ÀÌÅÍ Àü¼Û ¹× ¸®¼ÂÀ» À§ÇÑ ¸Þ¼Òµå¸¦ °¡Áö´Â ÀÚ¹Ù½ºÅ©¸³Æ® °´Ã¼ÀÌ´Ù.

Æû¿¡ Á¸ÀçÇÏ´Â ¸ðµç Æû ¿ä¼Òµé¿¡ ´ëÇÑ ·¹ÆÛ·±½º´Â elements ¹è¿­¿¡ Á¸ÀçÇϸç Æû ¿ä¼ÒÀÇ °³¼ö´Â length ÇÁ·ÎÆÛƼ¿¡ Á¸ÀçÇÑ´Ù. ±×·¯¹Ç·Î ÀÌ µÎ ÇÁ·ÎÆÛƼ¸¦ ÀÌ¿ëÇÏ¿© ÆûÀÇ ¸ðµç ¿ä¼Ò °´Ã¼µéÀ» ¾×¼¼½ºÇÒ ¼ö ÀÖ´Ù.

(Ç¥) FormÀÇ ÇÁ·ÎÆÛƼ ¹× ¸Þ¼Òµå

ÇÁ·ÎÆÛƼ ¼³ ¸í
 action ACTION ¼Ó¼ºÀ» ¹Ý¿µ
 elements Æû ³»ÀÇ ¸ðµç Æû ¿ä¼Ò °´Ã¼µéÀÇ ¹è¿­
 encoding ENCTYPE ¼Ó¼ºÀ» ¹Ý¿µ
 length Æû ³»ÀÇ Æû ¿ä¼Ò °´Ã¼µéÀÇ °³¼ö·Î¼­ elements ¹è¿­ÀÇ Å©±â¸¦ ÀǹÌ
 method METHOD ¼Ó¼ºÀ» ¹Ý¿µ
 name NAME ¼Ó¼ºÀ» ¹Ý¿µ
 target TARGET ¼Ó¼ºÀ» ¹Ý¿µ

¡¡

¸Þ¼Òµå ¼³ ¸í
 handleEvent(Event °´Ã¼) ÆĶó¹ÌÅÍ·Î ÁöÁ¤µÈ À̺¥Æ®ÀÇ À̺¥Æ® Çڵ鷯¸¦ È£ÃâÇÑ´Ù.
 reset ÆûÀÇ reset ¹öÆ°ÀÌ Å¬¸¯µÈ °Íó·³ ÇൿÇÏ´Â ÇÔ¼ö. Æû ³»ÀÇ °´Ã¼µéÀÇ °ªÀ» ÃʱâÈ­ÇÑ´Ù.
 submit ÆûÀÇ submit ¹öÆ°ÀÌ Å¬¸¯µÈ °Íó·³ ÇൿÇÏ´Â ÇÔ¼ö. Æû µ¥ÀÌÅ͸¦ ¼­¹ö·Î Àü¼ÛÇÑ´Ù. ³»ºÎÀûÀ¸·Î onSubmit Çڵ鷯 È£ÃâÇÔ.

¡¡

<form> ű×ÀÇ ¹®¹ý

<form

action = "serverURL"
enctype = "encodingType"
method = "GET" ¶Ç´Â "POST"
name = "formName"
target = "windowName">

.........
<form>

  • action - ÆûÀÇ µ¥ÀÌÅ͸¦ ó¸®ÇÒ ASP³ª CGI ÆÄÀÏÀ» ÁöÁ¤ÇÏ´Â URL.
  • enctype - ÆûÀÇ µ¥ÀÌÅÍ Àü¼Û ½Ã ¾Ïȣȭ ¹æ¹ý ÁöÁ¤.
  • method - ÆûÀÇ µ¥ÀÌÅ͸¦ Àü¼ÛÇÏ´Â ¹æ½Ä ÁöÁ¤.
  • name -  ÆûÀÇ À̸§, ÀÚ¹Ù½ºÅ©¸³Æ®¿¡¼­ »ç¿ë.
  • target - ASP³ª CGI¿¡ ÀÇÇÏ¿© Àü¼ÛµÇ´Â µ¥ÀÌÅ͸¦ Ãâ·ÂÇÒ À©µµ¿ì ÁöÁ¤.

°¡Àå ÈçÈ÷ »ç¿ëµÇ´Â ¼Ó¼ºÀÌ name, action, methodÀÌ´Ù. 

  • nameÀº ÀÚ¹Ù½ºÅ©¸³Æ®¿¡¼­ ÇϳªÀÇ °´Ã¼·Î ÀνÄÇÒ ¶§ »ç¿ëÇÏ´Â º¯¼ö°¡ µÇ°í, 
  • actionÀº ¼­¹ö°¡ ÀÔ·ÂµÈ µ¥ÀÌÅ͸¦ ¹Þ¾Æ¼­ ó¸®ÇÒ ÇÁ·Î±×·¥À» ÁöÁ¤ÇÏ´Â °ÍÀÌ´Ù. µû¶ó¼­ ÀÌ ¼Ó¼ºÀÌ Á¤ÀǵÇÁö ¾ÊÀ¸¸é, ¾Æ¹«¸® Áß¿äÇÑ µ¥ÀÌÅ͸¦ ÀÔ·Â ¹Þ¾Æµµ ¼Ò¿ëÀÌ ¾ø°Ô µÈ´Ù. 
  • method´Â ÀÔ·ÂµÈ µ¥ÀÌÅ͸¦ ¼­¹öÃø¿¡ Àü´ÞÇÏ´Â ¹æ½ÄÀÌ´Ù. 

FormÀÇ À̺¥Æ® Çڵ鷯

onReset, onSubmit

¡¡

¡¡

3. Text, Password °´Ã¼

ÀÌ µÎ °´Ã¼µéÀº °¢°¢ text¿Í password ŸÀÔÀÇ <input> ű׸¦ ¹Ý¿µÇÏ´Â °´Ã¼µé·Î¼­ ÇÑ Á٠¥¸® ÅؽºÆ® âÀÌ´Ù. 

Text, PasswordÀÇ ÇÁ·ÎÆÛƼ ¹× ¸Þ¼Òµå

ÇÁ·ÎÆÛƼ ¼³ ¸í
 defaultValue <input> ű׿¡ ÁÖ¾îÁø Ãʱâ VALUE ¼Ó¼º °ªÀ» ¹Ý¿µÇϸç ÀбâÀü¿ë Çʵå.
 form »óÀ§ °´Ã¼ÀÎ Form °´Ã¼¿¡ ´ëÇÑ ·¹ÆÛ·±½º.
 name NAME ¼Ó¼ºÀ» ¹Ý¿µ.
 type TYPE ¼Ó¼ºÀ» ¹Ý¿µ. Text °´Ã¼ÀÇ °æ¿ì "text"À̸ç Password °´Ã¼ÀÇ °æ¿ì´Â "password"
 value Ãʱ⠰ªÀº VALUE ¼Ó¼º °ªÀ¸·Î ÁÖ¾îÁöÁö¸¸ »ç¿ëÀÚ°¡ ÀÔ·ÂÇÑ ÅؽºÆ®°¡ Áï½Ã ¹Ý¿µµÈ´Ù.

¡¡

¸Þ¼Òµå ¼³ ¸í
 blur() Æ÷Ä¿½º¸¦ ÇØÁ¦ÇÑ´Ù.
 focus() Æ÷Ä¿½º¸¦ ÁØ´Ù.
 handleEvent(Event °´Ã¼) ÆĶó¹ÌÅÍ·Î ÁöÁ¤µÈ À̺¥Æ®ÀÇ À̺¥Æ® Çڵ鷯¸¦ È£ÃâÇÑ´Ù.
 select() ÀԷ â¿¡ Á¸ÀçÇÏ´Â ÅؽºÆ®¸¦ "¼±Åà »óÅÂ"·Î ¸¸µç´Ù.

defaultValue¿Í valueÀÇ Â÷ÀÌÁ¡

<input type="text" name="id" value="2000523-">

À̶§ defaultValue¿Í value´Â Ãʱ⿡ "2000523-"ÀÇ ½ºÆ®¸µ °ªÀ» °¡Áö¸ç, »ç¿ëÀÚ°¡ ÀÔ·Ââ¿¡ "2000523-88888"À» ÀÔ·ÂÇϸé defaultValue´Â ¿©ÀüÈ÷ "2000523-"ÀÇ °ªÀ» °¡ÁöÁö¸¸ value´Â "2000523-88888" ½ºÆ®¸µ °ªÀ» °¡Áö°Ô µÈ´Ù.

Password °´Ã¼ÀÇ ÀԷ âÀº '*' ¹®ÀÚ·Î Ãâ·ÂµÇÁö¸¸ ³»ºÎÀûÀÎ defaultValue¿Í value°ªÀº ½ÇÁ¦ ÀÔ·ÂµÈ ½ºÆ®¸µÀ» °¡Áø´Ù.

Text, PasswordÀÇ À̺¥Æ® Çڵ鷯

onBlur, onChange, onFocus, onSelect

¡¡

¡¡

4. Textarea °´Ã¼

Textarea °´Ã¼´Â <textarea> ű×ÀÇ ¼Ó¼ºÀ» ¹Ý¿µÇÏ´Â ÀÚ¹Ù½ºÅ©¸³Æ® °´Ã¼·Î¼­ Text °´Ã¼¿Í ¸Å¿ì À¯»çÇÏ´Ù. typeÀÇ °ªÀÌ "textarea"ÀÎ Á¡À» Á¦¿ÜÇϸé ÇÁ·ÎÆÛƼ¿Í ¸Þ¼Òµå´Â Text°´Ã¼¿Í µ¿ÀÏÇÏ´Ù.

TextareaÀÇ À̺¥Æ® Çڵ鷯

onBlur, onChange, onFocus, onKeyDown, onKeyPress, onKeyUp, onSelect

¡¡

¡¡

5. FileUpload °´Ã¼

FileUpload °´Ã¼´Â »ç¿ëÀÚÀÇ local ÄÄÇ»ÅÍ »ó¿¡ ÀÖ´Â ÆÄÀÏÀ» À¥ ¼­¹ö ÄÄÇ»ÅÍ·Î ¾÷·Îµå(upload)ÇϱâÀ§ÇØ Á¦°øµÈ °´Ã¼ÀÌ´Ù. <form> ű×ÀÇ  enctype¼Ó¼ºÀº º¸Åë »ý·«µÇ´Âµ¥ µðÆúÆ® °ªÀº ´ÙÀ½°ú °°´Ù.

 "application/x-www-form-urlencoded"

enctype ¼Ó¼ºÀº POST ¹æ½ÄÀ» »ç¿ëÇÒ ¶§¸¸ Àǹ̸¦ °¡Áø´Ù. ÆûÀÌ Àü¼ÛµÉ ¶§ <form> ű×ÀÇ enctype¼Ó¼º¿¡ µû¶ó FileUpload °´Ã¼ÀÇ Àü¼ÛµÇ´Â ³»¿ëÀÌ ´Þ¶óÁø´Ù. enctypeÀ» µðÆúÆ®·Î ¼³Á¤ÇÏ°Ô µÇ¸é FileUpload °´Ã¼ÀÇ °ªÀÌ ¼­¹ö·Î Àü´ÞµÉ ¶§ »ç¿ëÀÚ°¡ local ÄÄÇ»ÅÍ¿¡¼­ ¼±ÅÃÇÑ ÆÄÀÏ À̸§¸¸ÀÌ Àü´ÞµÈ´Ù.

FileUpload °´Ã¼¿¡¼­ »ç¿ëÀÚ°¡ ¼±ÅÃÇÑ local ÆÄÀÏÀÇ ³»¿ëÀ» À¥ ¼­¹ö·Î ¾÷·ÎµåÇϱâ À§Çؼ­´Â enctype ¼Ó¼ºÀ» ´ÙÀ½°ú °°ÀÌ ÁöÁ¤ÇØ¾ß ÇÑ´Ù.

 "multipart/form-data"

FileUpload °´Ã¼ÀÇ ÇÁ·ÎÆÛƼ¿Í ¸Þ¼Òµå´Â Text °´Ã¼¿Í µ¿ÀÏÇÑ Àǹ̸¦ °¡Áø´Ù. FileUpload °´Ã¼ÀÇ value ÇÁ·ÎÆÛƼ´Â FileUpload °´Ã¼¿¡¼­ »ç¿ëÀÚ°¡ ¼±ÅÃÇÑ ÆÄÀÏÀÇ °æ·Î¸í Á¤º¸¿¡ ÇØ´çÇÑ´Ù.

FileUploadÀÇ À̺¥Æ® Çڵ鷯

onBlur, onChange, onFocus

¡¡

¡¡

6. Button, Submit, Reset °´Ã¼

ÀÌ ¼¼ °´Ã¼µéÀº ¸ðµÎ ¹öÆ°ÀÇ ¸ð¾çÀ» °¡Áö¸ç, ¸Þ¼Òµå Áß blur, focus, click µîÀÌ ½ÇÇàµÇ¸é ³»ºÎÀûÀ¸·Î´Â À̺¥Æ®°¡ ¹ß»ýÇÑ °Í °ú °°Àº È¿°ú°¡ ³ªÅ¸³­´Ù. Áï ÇØ´çÇÏ´Â À̺¥Æ®ÀÇ Çڵ鷯 Áï onBlur, onFocus, onClickÀÌ È£ÃâµÈ´Ù. ÀÌ ¸Þ¼ÒµåµéÀº ÀÌ ¸Þ¼Òµå¸¦ °¡Áø ¸ðµç ÀÚ¹Ù½ºÅ©¸³Æ® °´Ã¼¿¡ ÀÖ¾î µ¿ÀÏÇÑ Àǹ̸¦ °¡Áø´Ù.

(Ç¥) Button, Submit, ResetÀÇ ÇÁ·ÎÆÛƼ ¹× ¸Þ¼Òµå

ÇÁ·ÎÆÛƼ ¼³ ¸í
 form »óÀ§ °´Ã¼ÀÎ Form °´Ã¼¿¡ ´ëÇÑ ·¹ÆÛ·±½º.
 name NAME ¼Ó¼ºÀ» ¹Ý¿µ.
 type TYPE ¼Ó¼ºÀ» ¹Ý¿µ. Text °´Ã¼ÀÇ °æ¿ì "text"À̸ç Password °´Ã¼ÀÇ °æ¿ì´Â "password"
 value Ãʱ⠰ªÀº VALUE ¼Ó¼º ¹Ý¿µ.

¡¡

¸Þ¼Òµå ¼³ ¸í
 blur() Æ÷Ä¿½º¸¦ ÇØÁ¦ÇÑ´Ù.
 focus() Æ÷Ä¿½º¸¦ ÁØ´Ù.
 handleEvent(Event °´Ã¼) ÆĶó¹ÌÅÍ·Î ÁöÁ¤µÈ À̺¥Æ®ÀÇ À̺¥Æ® Çڵ鷯¸¦ È£ÃâÇÑ´Ù.
 click() ¹öÆ°¿¡ ¸¶¿ì½º Ŭ¸¯µÈ °Íó·³ ½ÇÇàµÈ´Ù.

ButtonÀÇ À̺¥Æ® Çڵ鷯

onBlur, onClick, onFocus, onMouseDown, onMouseUp

Submit°ú ResetÀÇ À̺¥Æ® Çڵ鷯

onBlur, onClick, onFocus

¡¡

¡¡

7. Radio, Checkbox °´Ã¼

Radio¿Í Checkbox °´Ã¼´Â °¢°¢ radio¿Í checkbox ŸÀÔÀÇ <input> ű׸¦ ¹Ý¿µÇÑ °´Ã¼µéÀÌ´Ù. µ¿ÀÏÇÑ ±×·ì ³»ÀÇ Radio ¹öÆ°µéÀº ¸ðµÎ °°Àº À̸§À» °¡Áö°í ÀÖÀ¸¹Ç·Î ÀÚ¹Ù½ºÅ©¸³Æ® Äڵ忡¼­ °¢ Radio ¹öÆ° °´Ã¼¿¡ Á¢±ÙÇÒ ¼ö ÀÖ´Â ¹æ¹ýÀÌ ÇÊ¿äÇÏ´Ù.

# Radio °´Ã¼ÀÇ °æ¿ì

<html>
<head></head>
<body>
<form name="korea">
<input type="radio" name="city" value="s">Seoul
<input type="radio" name="city" value="p">Pusan
<input type="radio" name="city" value="c">Chonju
</form>
</body>
</html>

HTML ¼Òµå¿¡´Â À̸§ÀÌ cityÀÎ 3°³ÀÇ radio °´Ã¼°¡ ÇϳªÀÇ ±×·ìÀ¸·Î Á¸ÀçÇÑ´Ù. ÀÌµé °¢ Radio °´Ã¼µéÀº ¼ø¼­´ë·Î ´ÙÀ½°ú °°Àº ·¹ÆÛ·±½º·Î ¾×¼¼½ºµÈ´Ù.

 document.korea.city[0]
 document.korea.city[1]
 document.korea.city[2]

À̸§ÀÌ cityÀÎ Radio °´Ã¼ÀÇ °³¼ö´Â ´ÙÀ½°ú °°ÀÌ length ÇÁ·ÎÆÛƼ¸¦ ÀÌ¿ëÇÑ´Ù.

 n = document.korea.city.length

# Checkbox °´Ã¼ÀÇ °æ¿ì

°¢ °´Ã¼ÀÇ À̸§ÀÌ µ¿ÀÏÇÒ ¼ö ¾ø±â ¶§¹®¿¡ Radio °´Ã¼¿¡¼­ ¹ß»ýÇÏ´Â ¹®Á¦µéÀº ¹ß»ýÇÏÁö ¾Ê´Â´Ù.

(Ç¥) Radio, CheckboxÀÇ ÇÁ·ÎÆÛƼ ¹× ¸Þ¼Òµå

ÇÁ·ÎÆÛƼ ¼³ ¸í
 checked ¼±ÅÃµÈ »óÅÂÀ̸é true, ¼±ÅõÇÁö ¾Ê¾ÒÀ¸¸é false
 defaultChecked Ãʱ⿡ ¼±ÅÃµÈ »óÅÂÀ̸é true, ¼±ÅõÇÁö ¾Ê¾ÒÀ¸¸é false
 form »óÀ§ °´Ã¼ÀÎ Form °´Ã¼¿¡ ´ëÇÑ ·¹ÆÛ·±½º.
 name NAME ¼Ó¼ºÀ» ¹Ý¿µ.
 type TYPE ¼Ó¼º, Áï "radio" ½ºÆ®¸µ
 value VALUE ¼Ó¼ºÀ» ¹Ý¿µ.

¡¡

¸Þ¼Òµå ¼³ ¸í
 blur() Æ÷Ä¿½º¸¦ ÇØÁ¦ÇÑ´Ù.
 focus() Æ÷Ä¿½º¸¦ ÁØ´Ù.
 handleEvent(Event °´Ã¼) ÆĶó¹ÌÅÍ·Î ÁöÁ¤µÈ À̺¥Æ®ÀÇ À̺¥Æ® Çڵ鷯¸¦ È£ÃâÇÑ´Ù.
 click() ¹öÆ°¿¡ ¸¶¿ì½º Ŭ¸¯µÈ °Íó·³ ½ÇÇàµÈ´Ù.

Radio, CheckboxÀÇ À̺¥Æ® Çڵ鷯

onBlur, onClick, onFocus

¡¡

¡¡

8. Select, Option °´Ã¼

Select °´Ã¼´Â <select> ű׿¡ ÀÇÇØ ºê¶ó¿ìÀú°¡ ÀÚµ¿ »ý¼ºÇÏ´Â °´Ã¼ÀÌ´Ù. <select> ÅÂ±×¿Í </select> ÅÂ±× »çÀÌ¿¡´Â ´Ù¼öÀÇ ¼±Åà Ç׸ñÀ» ÁöÁ¤ÇÏ´Â <option> ű׸¦ Æ÷ÇÔÇÑ´Ù. Option °´Ã¼´Â <option> ű׿¡ ÀÇÇØ ÀÚµ¿ »ý¼ºÇÑ´Ù. Option °´Ã¼´Â Select °´Ã¼ÀÇ ÇÏÀ§ °´Ã¼ÀÌ´Ù. ±×·¯¹Ç·Î ¾î¶² Option °´Ã¼°¡ ¾×¼¼½ºµÉ ¶§´Â Select °´Ã¼ÀÇ ÇÁ·ÎÆÛƼÀÎ °Íó·³ ¾×¼¼½ºµÈ´Ù.

Option °´Ã¼ÀÇ »ý¼º

Option °´Ã¼´Â Æû ¿ä¼Ò°¡ ¾Æ´Ï¸ç ´ÙÀ½ µÎ °¡Áö ¹æ¹ýÀ¸·Î »ý¼ºµÈ´Ù.

  • <option> ű׿¡ ÀÇÇØ ºê¶ó¿ìÀú°¡ ÀÚµ¿ »ý¼º
  • ÀÚ¹Ù½ºÅ©¸³Æ® Äڵ忡¼­ Option °´Ã¼ÀÇ »ý¼ºÀÚ¸¦ È£ÃâÇÏ¿© »ý¼º
    ¿¹¸¦µé¾î, new Option("»ç°ú", "°úÀÏ", true, true);

ÀÌ¹Ì Ãâ·ÂµÈ ¹®¼­»ó¿¡¼­ ÀÚ¹Ù½ºÅ©¸³Æ® Äڵ带 ÀÌ¿ëÇÏ¿© Option °´Ã¼¸¦ »ý¼ºÇÏ°í Select °´Ã¼¿¡ »ðÀÔÇÏ¿´´Ù¸é ¹Ýµå½Ã ´ÙÀ½ÀÇ Äڵ带 ½ÇÇàÇÏ¿©¾ß ¿É¼ÇÀÌ º¯°æµÈ ¹®¼­¸¦ º¼ ¼ö ÀÖ´Ù.

 history.go(0)

ÀÌ ÄÚµå´Â HTML ¹®¼­¸¦ Àç·ÎµåÇÏ´Â ±â´ÉÀ» ÇÑ´Ù. ¹®¼­ÀÇ Àç·Îµå´Â »ý¼ºµÈ Option °´Ã¼µéÀ» °¡Áø Select °´Ã¼¸¦ Ãâ·ÂÇÏ´Â È¿°ú¸¦ °¡Áø´Ù.

¡¡

ÀÚ¹Ù½ºÅ©¸³Æ®·Î Select °´Ã¼ÀÇ ¿É¼Ç ¼±ÅÃÇϱâ

Option °´Ã¼ÀÇ »ý¼ºÀÚ¿¡¼­ óÀ½ºÎÅÍ ¼±ÅÃµÈ »óÅ·Π¿É¼ÇÀ» »ý¼ºÇÏ°íÀÚ ÇÑ´Ù¸é, 3, 4 ¹ø° ÆĶó¹ÌÅÍÁß¿¡¼­ 4¹ø° ÆĶó¹ÌÅ͸¦ true·Î ÁÖ¾î¾ß ÇÑ´Ù. ¿É¼ÇÀ» ¼±ÅûóÅ·Π¸¸µå´Â ¹æ¹ýÀº Option °´Ã¼ÀÇ selected ÇÁ·ÎÆÛƼ¸¦ true·Î ¸¸µéµçÁö, Select °´Ã¼ÀÇ selectedIndex¸¦ º¯°æÇÏ¸é °¡´ÉÇÏ´Ù.

¿¹¸¦ µé¾î, ¹®¼­³»¿¡ Æû °´Ã¼ÀÇ À̸§ÀÌ fÀÌ°í Select °´Ã¼ÀÇ À̸§ÀÌ selÀ̸é selÀÇ µÎ ¹ø° ¿É¼ÇÀ» ¼±ÅûóÅ·Π¸¸µå´Â ÀÚ¹Ù½ºÅ©¸³Æ® ÄÚµå´Â ´ÙÀ½°ú °°´Ù.

 document.f.sel.options[1].selected = true
 history.go(0)

ȤÀº

 document.f.sel.selectedIndex = 1
 history.go(0)

¡¡

(Ç¥) SelectÀÇ ÇÁ·ÎÆÛƼ ¹× ¸Þ¼Òµå

ÇÁ·ÎÆÛƼ ¼³ ¸í
 length ¿É¼Ç ¸®½ºÆ®¿¡ ÀÖ´Â ¿É¼ÇÀÇ °³¼ö.
 options ¿É¼Ç °´Ã¼µéÀÇ ¹è¿­. ÀÌ ¹è¿­ÀÇ ¿ø¼Ò´Â Option °´Ã¼.
 selectedIndex ¼±ÅÃµÈ ¿É¼Ç¿¡ ´ëÇÑ À妽º. ´Ù¼ö°³ÀÇ ¿É¼ÇÀÌ ¼±ÅõǾúÀ¸¸ç ù¹ø° ¿É¼Ç¿¡ ´ëÇÑ À妽ºÀÌ°í ¾Æ¹« ¿É¼Çµµ ¼±ÅõÇÁö ¾Ê¾Ò´Ù¸é 0 °ª.
 form »óÀ§ Æû °´Ã¼¿¡ ´ëÇÑ ·¹ÆÛ·±½º
 name NAME ¼Ó¼ºÀ» ¹Ý¿µÇÏ´Â °´Ã¼ÀÇ À̸§ ½ºÆ®¸µ.
 type <select> ű׿¡ MULTIPLE Çʵ尡 ÁöÁ¤µÇ¾úÀ¸¸é "select-multiple", ¾Æ´Ï¸é "select-one" ½ºÆ®¸µ °ª

¡¡

¸Þ¼Òµå ¼³ ¸í
 blur() Æ÷Ä¿½º¸¦ ÇØÁ¦ÇÑ´Ù.
 focus() Æ÷Ä¿½º¸¦ ÁØ´Ù.
 handleEvent(Event °´Ã¼) ÆĶó¹ÌÅÍ·Î ÁöÁ¤µÈ À̺¥Æ®ÀÇ À̺¥Æ® Çڵ鷯¸¦ È£ÃâÇÑ´Ù.

¡¡

(Ç¥) Option °´Ã¼ÀÇ »ý¼ºÀÚ

 new Option(text, value, defaultSelected, selected)
  • text - ¿É¼Ç ¸®½ºÆ®·¹ Ãâ·ÂÇÒ ÅؽºÆ® ½ºÆ®¸µ(¼±ÅûçÇ×)
  • value - ¿É¼ÇÀÌ ¼±ÅõǾúÀ» ¶§ ¼­¹ö·Î Àü¼ÛµÇ´Â value °ª(¼±ÅûçÇ×)
  • defaultSelected - ¿É¼ÇÀÌ Ãʱ⿡ ¼±ÅÃµÈ »óÅÂÀÎÁö¸¦ °¡¸®Å°´Â boolean °ª(¼±ÅûçÇ×)
  • selected - ÇöÀç ¿É¼ÇÀÇ ¼±Åà »óŸ¦ Ç¥½ÃÇÏ´Â boolean °ª(¼±ÅûçÇ×)

(Ç¥) OptionÀÇ ÇÁÆ÷ÆÛƼ(¸Þ¼Òµå ¾øÀ½)

ÇÁ·ÎÆÛƼ ¼³ ¸í
 defaultSelected ¿É¼ÇÀÌ Ãʱ⿡ ¼±ÅõǾú´ÂÁö¸¦ Ç¥½ÃÇÏ´Â boolean °ª.
 selected ÇöÀç ¿É¼ÇÀÇ ¼±Åà »óŸ¦ Ç¥½ÃÇÏ´Â boolean °ª.
 text ¿É¼Ç ¸®½ºÆ®¿¡ Ãâ·ÂµÇ´Â ÅؽºÆ® ½ºÆ®¸µ.
 value ¿É¼ÇÀÌ ¼±ÅõǾúÀ» ¶§ ¼­¹ö¿¡°Ô Àü¼ÛµÇ´Â value °ª.

¡¡

SelectÀÇ À̺¥Æ® Çڵ鷯

onBlur, onChange, onFocus

¡¡

Select °´Ã¼ÀÇ ¿É¼Ç ¸®½ºÆ®¿¡¼­ ¿É¼ÇÀ» µ¿ÀûÀ¸·Î Á¦°ÅÇÒ ¼ö ÀÖ´Ù. ¿É¼ÇÀ» Á¦°ÅÇϱâ À§Çؼ­´Â Select °´Ã¼ÀÇ ¿É¼Ç ¹è¿­¿¡ ´ëÇÑ ·¹ÆÛ·±½ºÀÌ options¿¡¼­ ÇØ´ç ¿É¼Ç¿¡ null °ªÀ» ÁÖ¸éµÈ´Ù.

sel.options[2] = null;

ÃßõÃßõ : 308 Ãßõ ¸ñ·Ï
¹øÈ£ Á¦¸ñ
2,885
input ÀÔ·Â ÇÊµå ¾ÕµÚ °ø¹é ½Ç½Ã°£ Á¦°Å
2,884
Placeholder Æ÷Ä¿½º½Ã °¨Ãß±â
2,883
MySQL Áߺ¹µÈ µ¥ÀÌÅ͸¦ »èÁ¦
2,882
MySQL Áߺ¹ µ¥ÀÌÅÍ È®ÀÎ
2,881
sessionStorage.getItem ¿Í sessionStorage.setItem
2,880
Á¦ÀÌÄõ¸® ·£´ýÀ¸·Î ¹è°æ»ö º¯°æ
2,879
preg match¿¡ °üÇÑ Á¤±Ô½Ä
2,878
Stream an audio file with MediaPlayer ¿Àµð¿À ÆÄÀÏ ½ºÆ®¸®¹Ö Çϱâ
2,877
Audio Streaming PHP Code
2,876
PHP $ SERVER ȯ°æ º¯¼ö Á¤¸®
2,875
Vimeo (ºñ¸Þ¿À) API ¸¦ »ç¿ëÇÏ¿© Ç÷¹À̾î ÄÁÆ®·ÑÇϱâ
2,874
iframe »ç¿ë½Ã ÇÏ´Ü¿¡ ¹ß»ýÇÏ´Â °ø¹é Á¦°Å¹æ¹ý
2,873
¾ÆÀÌÇÁ·¹ÀÓ(iframe) Àüüȭ¸é °¡´ÉÇÏ°Ô Çϱâ
2,872
ºÎÆ®½ºÆ®·¦(bootstrapk)¿¡¼­ »ç¿ëÇÏ´Â class¸í Á¤¸®
2,871
ºÎÆ®½ºÆ®·¦ CSS
2,870
Å©·Ò¿¡¼­ ¸¶Áø Á¶Àý
2,869
PHP ÇöÀç ÆäÀÌÁöÀÇ µµ¸ÞÀθíÀ̳ª urlµîÀÇ Á¤º¸ ¾Ë¾Æ¿À±â
2,868
PHP preg match all()
2,867
PHP ·Î À¥ÆäÀÌÁö ±Ü¾î¿À±â ¸ðµç ¹æ¹ý ÃÑÁ¤¸®!
2,866
[PHP] ¿ø°ÝÁö ÆÄÀÏ ÁÖ¼Ò ³ëÃâ ¾ÈÇÏ°í curl·Î ´Ù¿î·Îµå ¹Þ±â
2,865
PHP ÇÔ¼ö Á¤¸®
2,864
¾ÆÀÌÇÁ·¹ÀÓ(iframe) ºñÀ² À¯ÁöÇϸ鼭 Å©±â Á¶ÀýÇÏ´Â ¹æ¹ý
2,863
PHP ¹è¿­¿¡¼­ ¹«ÀÛÀ§·Î Çϳª »Ì¾ÆÁÖ´Â array rand() ÇÔ¼ö
2,862
PHP Á¤±Ô½Ä Á¤¸®
2,861
PHP Á¤±Ô½ÄÀ» È°¿ëÇÑ ÅÂ±× ¹× ƯÁ¤ ¹®ÀÚ¿­ Á¦°Å ¹× ÃßÃâ ¹æ¹ý
2,860
php Å©·Ñ¸µ ¶Ç´Â ÆÄ½Ì ÇÔ¼ö, Á¤±Ô½Ä ¸ðÀ½
2,859
Á¦ÀÌÄõ¸® ±âº» ¸í·É¾î
2,858
À¥ÆäÀÌÁö °¡·Î ¸ðµå¼¼·Î ¸ðµå ÀνÄÇϱâ
2,857
¸ð¹ÙÀÏ À¥ È­¸é °­Á¦ ȸÀü(°¡·Î¸ðµå °íÁ¤)
2,856
[HTML5]¿¡¼­ frameset ´ëü ¹æ¹ý°ú iframe ¼Ó¼º
¸ñ·Ï
¹ÂÁ÷Æ®·ÎÆ® ºÎ»ê±¤¿ª½Ã ºÎ»êÁø±¸ °¡¾ßµ¿ ¤Ó °³ÀÎÁ¤º¸Ãë±Þ¹æħ
Copyright ¨Ï musictrot All rights reserved.