html & css/개념
그 외 form 요소
by Doo Hee
2023. 6. 19.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<label>살고 있는 지역은?</label>
<select>
<option value="02">서울</option>
<option value="031">경기도</option>
<option value="064">제주도</option>
</select>
<!-- 옵션의 수가 많을 때 select 태그를 사용한다. -->
<!-- 다중/단일 선택 모두 가능하다. -->
<br />
<select multiple>
<option value="02">서울</option>
<option value="031">경기도</option>
<option value="064">제주도</option>
</select>
<!-- 옵션이 한번에 펼쳐지며 ctrl 키를 누른 상태에서 다중 선택이 가능하다. -->
<div>
<textarea style="width: 100%" rows="2"></textarea>
<!-- 여러 줄을 입력하기 위한 태그 -->
<!-- cols, rows는 글자, 줄 입력 제한이 아닌 그 크기만큼의 입력상자(사이즈) 설정을 의미한다.-->
</div>
<div>
<fieldset>
<!-- fieldset - 정보의 유형이 구분되어야 하는 경우 -->
<legend>개인정보</legend>
<div>
<label for="name">이름</label>
<input type="text" id="name" />
</div>
<div>
<label for="tel">연락처</label>
<input type="tel" id="tel" />
</div>
</fieldset>
<fieldset>
<legend>학력정보</legend>
<div>
<label for="univ">대학교</label>
<input type="text" id="univ" />
</div>
<div>
<label for="grade">학년</label>
<input id="grade" />
</div>
</fieldset>
</div>
<div>
<input list="browsers" id="browsers1" />
<datalist id="browsers">
<option value="Internet Explorer">Internet Explorer</option>
<option value="Firefox">Firefox</option>
<option value="Chrome">Chrome</option>
<option value="Opera">Opera</option>
<option value="Safari">Safari</option>
</datalist>
</div>
<!-- datalist - 문자를 입력받을 수 있는 input 박스이면서 select의 기능이 들어간 태그 -->
<!-- ex) 살고있는 국가 선택, 150개국의 목록을 보는 것보단 작성하고 찾는 것이 효율적 -->
<!-- 지워진다는 단점(잘못쓰고 그냥 두면 끝), 최종적으로 맞는 값을 적었는지 JS를 통해 확인해야한다. -->
<!-- 하나 작성하고 다른 곳에서 사용이 가능하다. -->
<div>
<input list="browsers" id="browsers2" />
</div>
</body>
</html>
