선택형 입력
목록을 보여주고 목록에서 사용자가 선택하는 방식의 입력 요소다.
- <input type="radio" name="카테고리 이름" id="요소 이름" value="값">
radio의 경우 여러 개의 목록 중 하나만 선택하고자 할 때 name을 통해서 항목끼리 묶어주면 된다. radio의 경우에는 name과 id가 다르다. value의 경우 입력하여 웹 서버에 전송될 때 보내지는 값을 의미한다. - <input type="checkbox" name="이름" id="이름" value="값">
checkbox의 경우 다중선택이 가능하며 name과 id를 같게 설정한다.
<!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>
<form action="" method="get">
<!-- radio의 경우 name을 "sex"로 카테고리화 했다. checked 속성의 경우 맨 처음부터 활성화 된 상태로 출력된다.-->
<label>성별</label>
<input type="radio" name="sex" id="male" value="1" checked><label for="male">남자</label>
<input type="radio" name="sex" id="female" value="2"><label for="female">여자</label><br>
<hr>
<h4>좋아하는 과일을 선택하세요.(다중선택가능)</h4>
<input type="checkbox" name="apple" id="apple"><label for="apple">사과</label>
<input type="checkbox" name="grape" id="grape"><label for="grape">포도</label>
<input type="checkbox" name="kiwi" id="kiwi"><label for="kiwi">키위</label>
<input type="checkbox" name="watermelon" id="watermelon"><label for="watermelon">수박</label>
<button type="submit">등록하기</button>
</form>
</body>
</html>
드롭다운 목록
드롭다운 목록을 보여주고 그 중 하나를 선택하게 하는 폼 요소이다.
- <select name="이름" id="이름" size="값">
<option value="">값</option>
</select>
값을 항목별로 나누고 싶으면 <optgroup label="카테고리명"></optgroup>으로 묶을 수 있으나, 기능적인 부분은 없고 시각적인 기능만 한다. size를 통해서 처음에 보여주는 목록의 갯수를 설정할 수 있다. - <input type="text" list="리스트명">
<datalist id="리스트명">
<option value="값">
</datalist>
선택 가능한 목록을 datalist로 만들고, input태그의 list 속성값과 datalist의 id속성 값을 동일하게 하여 둘을 연결한다.
<!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>
<form action="" method="get">
<!-- multiple을 작성하여 다중선택이 가능하도록 한다(ctrl을 누르면서 여러개 선택하면 됨), selected를 사용하여 맨 처음부터 활성화 된 상태로 출력할 수 있다-->
<h3> 메뉴를 골라주세요. </h3>
<select name="food" id="food" size="6" multiple>
<optgroup label="음료">
<option value="coffee" selected>커피</option>
<option value="tea">차</option>
<option value="water">물</option>
</optgroup>
<optgroup label="음식">
<option value="rice">밥</option>
<option value="bread">빵</option>
</optgroup>
</select>
<br><br>
<h3>가게에 오시게 된 경로를 알려주세요.</h3>
<input type="text" list="route">
<datalist id="route">
<option value="인터넷검색"></option>
<option value="친구추천"></option>
<option value="전단지"></option>
</datalist>
<br><br>
<button type="submit">등록하기</button>
</form>
</body>
</html>
'Frontend > HTML' 카테고리의 다른 글
| HTML5의 문서 구조화 (0) | 2024.07.07 |
|---|---|
| HTML의 진행률을 알아보는 태그(<progress>, <meter>태그) (0) | 2024.07.01 |
| HTML에서 버튼을 만들어보자 (1) | 2024.06.30 |
| HTML의 폼 요소를 사용해보자 (0) | 2024.06.30 |
| HTML 웹 페이지를 통해 사용자 입력을 받는 폼을 만들어 보자 (0) | 2024.06.29 |
| HTML 페이지 내에 다른 HTML을 출력해보자 (<iframe>태그) (0) | 2024.06.28 |
| HTML에서 표(table)를 만들어보자 (0) | 2024.06.27 |
| HTML의 <a>태그에 대해 알아보자 (0) | 2024.06.27 |