html 선택창

html 선택 창은 값을 선택해야 할 때 사용할 수 있는 태그입니다. 회원가입 시 이메일을 선택해야 할 때처럼 하나의 값을 선택해야 될 때 사용됩니다. form 태그 안에서 사용이 되며 select 태그 안에 option 태그를 사용해서 선택요소들을 생성할 수 있습니다. option 태그 안에 value 속성에 서버에 전송할 값을 입력할 수 있으며 selected 값을 입력한 태그가 처음 선택된 상태입니다.

 

 

사용법

 

<form action="/email">
      <label for="email">Please Select Email</label>
      <select name="email" id="email">
        <option value="gmail.com" selected>gmail.com</option>
        <option value="daum.net">daum.net</option>
        <option value="naver.com">naver.com</option>
      </select>
      <button>submit</button>
 </form>

 

선택창

 

선택창-결과

 

 

 

label 태그 for 속성과 select 태그의 id 속성의 값을 일치시키면 텍스트를 클릭해도 선택 창이 선택이 되고 위아래 방향 키로 선택 요소들을 선택할 수 있습니다. 서버에 전송할 때 select 태그의 name 속성값=option 태그의 value 속성값 형식으로 전송이 됩니다.