HTML / select / 선택할 수 있는 목록을 만드는 태그

select

select는 선택할 수 있는 목록을 만들 때 사용합니다. 목록의 내용은 option 태그로 만듭니다.

문법

<select>
  <option>...</option>
  <option>...</option>
  <option>...</option>
</select>

1

2

3

4

5

</select>

속성

select 태그에 사용하는 주요 속성은 다음과 같습니다.

autofocus : 페이지가 로드되었을 때 해당 목록으로 바로 포커스가 맞춰집니다.
disabled : 화면에는 보이지만 사용할 수 없도록 만듭니다.
multiple : 여러 값을 선택할 수 있도록 합니다.
name : 이름을 붙입니다.
size : 목록을 펼치기 전에 보여질 목록의 개수를 정합니다.

예제

<!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>

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>

<head>

<title>HTML Reference | select</title>

</head>

<body>

<h1>General</h1>

<form>

<option>Lorem</option>

<option>Ipsum</option>

<option>Dolor</option>

</select>

</form>

<h1>Autofocus</h1>

<form>

<option>Lorem</option>

<option>Ipsum</option>

<option>Dolor</option>

</select>

</form>

<h1>Disabled</h1>

<form>

<option>Lorem</option>

<option>Ipsum</option>

<option>Dolor</option>

</select>

</form>

<h1>Multiple</h1>

<form>

<option>Lorem</option>

<option>Ipsum</option>

<option>Dolor</option>

</select>

</form>

<form>

<option>Lorem</option>

<option>Ipsum</option>

<option>Dolor</option>

</select>

</form>

</body>

</html>

HTML

CODING FACTORY