[HTML] select 하나만 골라봐

HTML 썸네일

[HTML] select 하나만 골라봐

select 주로 셀렉트박스라고 불린다.

<select>와 <option>태그로 구성되어 있으며 

여러 <option>중에서 하나를 선택하여 고를수 있게 한다.

 

셀렉트박스 예

select 예시

여러개의 옵션 중에서 하나를 골라서 화면에 보여준다.

 

설문조사, 생년월일 등 선택지에서 하나를 고르게 할 때 사용한다.

 

select 속성

<select name="favorite" disabled autofocus required>
    <option value="">좋아하는 과일</option>
    <option value="apple">사과</option>
    <option value="banana">바나나</option>
    <option value="kiwi">키위</option>
    <option value="melon">멜론</option>
</select>

name : select의 이름 설정 데이터 전송이나 객체접근할 때 사용

disabled : 비활성화

autofocus : 자동으로 포커스 된다. 

required : form 사용시 필수로 선택해야 되는 항목임을 나타내주는 속성

 

 

option 속성

<select name="favorite">
    <option value="">좋아하는 과일</option>
    <option value="apple" selected>사과</option>
    <option value="banana" disabled>바나나</option>
    <option value="kiwi">키위</option>
    <option value="melon">멜론</option>
</select>

value : 데이터 전송시 전송될 값[selected된 항목]

selected : 기본값 설정

disabled : select와 같이 비활성화 시킨다.

 

셀렉트박스 사용법

<select name="favorite">
    <option value="">좋아하는 과일</option>
    <option value="apple">사과</option>
    <option value="banana">바나나</option>
    <option value="kiwi">키위</option>
    <option value="melon">멜론</option>
</select>

좋아하는 과일 사과 바나나 키위 멜론

 

html의 구성의 사용법 아래와 같이 select안에 option을 두는 형태로 구성한다.

기본값 설정을 하려면 <option> 태그에 selected를 선언해주면된다.

<select name="favorite">
    <option value="">좋아하는 과일</option>
    <option value="apple">사과</option>
    <option value="banana" selected="selected">바나나</option>
    <option value="kiwi">키위</option>
    <option value="melon">멜론</option>
</select>

좋아하는 과일 사과 바나나 키위 멜론

 

option의 disabled은 항목만 비활성화 시키고

select의 disabled는 전체가 비활성화 된다.

 

<select name="favorite">
    <option value="">좋아하는 과일</option>
    <option value="apple">사과</option>
    <option value="banana" disabled>바나나</option>
    <option value="kiwi">키위</option>
    <option value="melon">멜론</option>
</select>

<select name="favorite" disabled>
    <option value="">좋아하는 과일</option>
    <option value="apple">사과</option>
    <option value="banana">바나나</option>
    <option value="kiwi">키위</option>
    <option value="melon">멜론</option>
</select>

option의 disabled은 항목만 비활성화

바로 아래있는 셀렉트박스를 보면

바나나가 비활성화 되었다.

좋아하는 과일 사과 바나나 키위 멜론

select의 disabled는 전체가 비활성화

바로 아래있는 셀렉트박스를 보면

셀렉트박스 전체가 비활성화 되어있다.

좋아하는 과일 사과 바나나 키위 멜론