프로그래밍 공부 일기

2020년 10월 21일
지금까지 HTML을 공부해 왔지만, 셀렉트 박스를 사용한 적이 없었기 때문에 사용법을 정리한다.

선택 상자의 기본 쓰기

select 요소로 셀렉트 박스를 작성할 수 있다. 메뉴의 선택은 select 요소 내에 배치하는 option 요소로 작성한다.
select 요소는 name 속성에는 부품의 이름을 지정하고 size 속성으로 표시행수를 지정한다(초기값은 1), multiple 속성은 복수 선택을 가능하게 한다.
'option 요소는 value 속성에는 송신되는 캐릭터 라인을 지정하고, label 속성은 옵션으로서 표시되는 텍스트를 지정해, selected 속성에서는 선택된 상태를 지정한다.

기본적인 쓰는 방법은 다음과 같다.

html

<select name="example">
  <option value="サンプル1">サンプル1</option>
  <option value="サンプル2">サンプル2</option>
  <option value="サンプル3">サンプル3</option>
</select>

실행 결과 (화살표를 클릭하면 샘플 2와 샘플 3이 나온다)

특정 선택사항을 선택하는 샘플 코드

'option 요소에 selected 속성을 지정한다.

html

<select name="example">
  <option value="サンプル1">サンプル1</option>
  <option value="サンプル2"  selected>サンプル2</option>
  <option value="サンプル3">サンプル3</option>
</select>

실행 결과 (샘플 2가 이미 선택되어 있고 클릭하면 세 가지 표시)

목록 형식으로 표시할 샘플 코드

select 요소에 size 속성을 지정한다.

html

<select name="example" size="3">
  <option value="サンプル1">サンプル1</option>
  <option value="サンプル2">サンプル2</option>
  <option value="サンプル3">サンプル3</option>
</select>

실행 결과 (아래와 같이 나열됨)

참고문헌

HTML에서의 selected에 의한 초기치의 설정 방법을 현역 엔지니어가 해설【초보자용】
선택 상자 만들기