폼 관련 요소

이인재·2022년 7월 9일
0

HTML / CSS

목록 보기
6/15

<select> , <option>

<label for = "movie">좋아하는 영화</label>
<select id = "movie" name = "movie" required>
  <option value = "">--Please choose an option--</option>
  <optgroup label = "animation">
  <option value = "toystory">토이스토리</option>
  <option value = "zootopia" selected>주토피아</option>
  <option vlaue = "insideout">인사이드아웃</option>
  </optgroup>
  <optgroup>
  <option value = "matrix">매트릭스</option>
  </optgroup>
</select>

<input type = "submit"> 

좋아하는 영화
--Please choose an option-- 토이스토리 주토피아 인사이드아웃 매트릭스

  • option 처음꺼에서 value에 빈 문자열을 넣지 않으면 제출이 가능해짐...
  • selected를 통해 다른 옵션을 골라도 새로고침하면 주토피아로 고정됨
  • optgroup으로 나눌 수 있음(예를 들면 장르를 구분하고 싶을 때)

<datalist> : 가능한 선택지 추천해줌

<label for = "movie">좋아하는 영화: </label>
<input type = "text" id = "movie" name = "movie" list = "movie-list">

<datalist id = "movie-list">
  <option>주토피아</option>
  <option>인사이드아웃</option>
  <option>토이스토리1</option>
  <option>토이스토리2</option>
  <option>토이스토리3</option>
</datalist>

<input type = "submit">

좋아하는 영화:

주토피아 인사이드아웃 토이스토리1 토이스토리2 토이스토리3

0개의 댓글