html 폼 만들기 7 - select, option 태그로 콤보박스 만들기
네 안녕하세요, 이번 포스팅에서는 콤보박스를 만들어보도록 하겠습니다.
콤보박스도 정말 많이 쓰이는 선택형 입력 폼의 일종입니다.
앞서 포스팅을 한 체크박스와 라디오 버튼 만큼이나 많이 쓰입니다.
그래서 되게 중요한 요소입니다.
그럼 지금부터 시작하도록 하겠습니다.
1. 콤보 박스 만들기 : select, option 태그 이용
콤보 박스는 우리가 흔히 말하는 드롭다운 단추입니다.
하나의 단추 안에 여러 개의 선택지가 있다고 하여 콤보 박스라 부르고,
그 콤보 박스를 누르면 선택지가 마치 떨어지듯 쭉 ~ 내려와서 선택지가 보인다고 하여 드롭박스라고도 부릅니다.
그리고 콤보 박스는 select라는 속성으로 테두리를 만들고,
option 태그를 이용하여 콤보박스 내에 기재를 할 선택지를 기재를 할 수 있습니다.
그리고 콤보 박스를 쓰면 버튼이 중구난방으로 펼쳐져 있지 않아서 보기에 되게 깔끔해 보입니다.
그리고 콤보 박스 역시도 라디오 버튼처럼 하나의 답안만 입력이 가능하며,
체크박스나 라디오 버튼을 쓰기에는 너무 선택지가 많아 난잡할 경우 주로 사용합니다.
그럼 간단한 예제를 통하여 같이 한 번 보실까요?
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>콤보박스 만들기</title>
</head>
<body>
<h3>먹고 싶은 음식은?</h3>
<hr>
<form>
<select name="china">
<option value="1">짜장면</option>
<option value="2" selected="">짬뽕</option>
<option value="3">탕수육</option>
</select>
</form>
</body>
</html>
이렇게 작성을 할 수 있습니다.
select 태그에 name 속성을 넣어서 카테고리를 설정하여 그룹을 만들어주고,
option 태그를 이용하여 <select> 태그 내에 넣을 선택지를 기재를 할 수 있습니다.
그리고 selected 속성을 쓰면 웹 페이지를 실행을 할 때
selected 속성이 있는 option 태그가 가리키는 이름이 콤보 박스에 바로 뜹니다.
반대로 selected 속성을 쓰지 않으면 제일 첫 번째에 있는 선택란이 바로 나옵니다.
그럼 결과 화면을 통하여 같이 보실까요?
 |
 |
이런 식으로 selected 속성을 적용시켰을 때는 그 속성에 있는 것이 나오고,
반대로 selected 속성을 없애었을 때는 제일 서두애 있는 것이
value 속성 값이 1이라 제일 먼저 나오기 때문에 그게 먼저 보입니다.
여기까지 콤보박스를 만드는 방법에 대하여 알아보았습니다.
다음 포스팅에서는 폼 요소의 캡션을 만드는 방법에 대하여 알아보도록 하겠습니다.
긴 글 읽어주신 독자분들께 진심으로 감사합니다 ~
'html, css, 자바스크립트 > html' 카테고리의 다른 글
| html color 속성 이용하여 색 입력하기 (0) | 2023.03.07 |
|---|---|
| html label 태그로 폼 요소의 캡션 만들기 (0) | 2023.03.06 |
| html 폼 만들기 6 - 라디오 버튼 만들기 (0) | 2023.03.04 |
| html 폼 만들기 5 - 체크박스 만들기 (0) | 2023.03.04 |
| html 폼 만들기 4 - 이미지 버튼 만들기 (0) | 2023.03.04 |
댓글