HTML / select - 선택할 수 있는 목록을 만드는 태그
select
select는 선택할 수 있는 목록을 만들 때 사용합니다. 목록의 내용은 option 태그로 만듭니다.
문법
|
1 2 3 4 5 |
<select> <option>...</option> <option>...</option> <option>...</option> </select> |
속성
select 태그에 사용하는 주요 속성은 다음과 같습니다.
- autofocus : 페이지가 로드되었을 때 해당 목록으로 바로 포커스가 맞춰집니다.
- disabled : 화면에는 보이지만 사용할 수 없도록 만듭니다.
- multiple : 여러 값을 선택할 수 있도록 합니다.
- name : 이름을 붙입니다.
- size : 목록을 펼치기 전에 보여질 목록의 개수를 정합니다.
예제
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML Reference | select</title> </head> <body> <h1>General</h1> <form> <select> <option>Lorem</option> <option>Ipsum</option> <option>Dolor</option> <option>Amet</option> </select> </form> <h1>Autofocus</h1> <form> <select autofocus> <option>Lorem</option> <option>Ipsum</option> <option>Dolor</option> <option>Amet</option> </select> </form> <h1>Disabled</h1> <form> <select disabled> <option>Lorem</option> <option>Ipsum</option> <option>Dolor</option> <option>Amet</option> </select> </form> <h1>Multiple</h1> <form> <select multiple> <option>Lorem</option> <option>Ipsum</option> <option>Dolor</option> <option>Amet</option> </select> </form> <h1>Size</h1> <form> <select size="2"> <option>Lorem</option> <option>Ipsum</option> <option>Dolor</option> <option>Amet</option> </select> </form> </body> </html> |
