728x90
반응형
form 요소(2)
<!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 for="">살고 있는 지역은?</label>
<select name="" id="">
<!-- 옵션이 많을떄 유용한 드롭아웃박스 -->
<option value="02">서울</option>
<!-- value가 고유값이고 서울은 변동가능한 값 -->
<option value="051">부산</option>
<option value="054">제주</option>
</select>
<br />
<select name="" id="" multiple>
<!-- multiple옵션으로 다중 선택 가능 -->
<!-- 그래도 사용자가 보기 힘들기 떄문에 거의 쓰지않음 -->
<option value="02">서울</option>
<option value="051">부산</option>
<option value="054">제주</option>
</select>
<br />
<select name="" id="">
<option value="female">여자</option>
<option value="male">남자</option>
</select>
<div>
<input type="radio" name="rdo_gender" id="male" />
<label for="male">남자</label>
<input type="radio" name="rdo_gender" id="female" />
<label for="female">여자</label>
</div>
<!-- 성별 선택 칸에서는 더 적은 클릭을 유도할 수 있기떄문에
라디오버튼을 사용하는 편이 더 편하다 -->
<div>
<textarea name="" id="" cols="30" rows="10"></textarea>
<!-- 더 입력할 있으나 보이는 것을 기준으로 작성 -->
<textarea name="" id="" style="width: 100%" rows="10"></textarea>
</div>
<div>
<fieldset>
<legend>개인정보</legend>
<!-- 정보의 유형이 구분되어 있을때
묶여서 보일 수 있게 해줌 -->
<div>
<label for="name">이름</label>
<input type="text" name="" id="name" />
</div>
<div>
<label for="tel">연락처</label>
<input type="tel" name="" id="tel" />
</div>
</fieldset>
<fieldset>
<legend>학력정보</legend>
<div>
<label for="university">대학교</label>
<input type="text" name="" id="university" />
</div>
<div>
<label for="year">졸업년도</label>
<input type="tel" name="" id="year" />
</div>
</fieldset>
<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>
<!-- 검색창을 만들때 좋은 기능 입력한 알파벳이 있는 단어를 리스트에서 찾아 알려줌 (input + select 가이드)-->
</div>
</div>
<div>
<input list="browsers" id="browsers2" />
<!-- 위의 browser옵션을 가지고 같이 쓸 수 있다. -->
</div>
</body>
</html>728x90
반응형
'HTML & CSS' 카테고리의 다른 글
| CSS 기초 (2) | 2023.11.06 |
|---|---|
| input요소의 주요 속성 (2) | 2023.10.12 |
| form 요소 (2) | 2023.10.12 |
| 목록 태그, 표 태그 (0) | 2023.10.03 |
| 의미에 맞는 태그 (2) | 2023.10.02 |