HTML <select> 태그 - 선택박스 (폼 form 양식

HTML <select> 태그 - 선택박스 (폼 form 양식)

HTML <select> → 선택박스

- <select>~</select>으로 클로징 태그를 작성해야합니다.

- <select>는 선택 옵션 태그로 <option>~</option>태그 요소를 1개 이상 가지고 있어야합니다.

- <select> 전체 항목 안에서 선택된<option>~</option>은 서버로 전송이됩니다.

 

[ select 태그의 기본 형태 ]

↓ <select>태그는 전체 선택 항목들을 감싸고 <option> 태그는 각 항목을 감싸는 형태입니다.

<select>
	<option>옵션 내용</option>
</select>

 

<option>에서 자주 쓰는 속성
→ selected

• selected : 옵션들 중에서 미리 선택되어지는 옵션을 지정하는 속성으로 selected를 쓴 <option>의 순서와 상관없이 가장 먼저 표시가 됩니다.

 

[ 실전예시 ]

<form>
        이메일 : <input type="text" name="email" placeholder="아이디" autofocus> @ 
        <select>
            <option>직접 입력</option>
            <!-- <option>naver.com</option> -->
            <option selected>naver.com</option>
            <option>gmail.com</option>
            <option>nate.com</option>
            <option>hanmail.com</option>
        </select>
</form>

 

[ 실행시 화면 ]

html code 실행 page