체크박스와 라디오버튼
여러 항목 중 하나의 항목을 선택하려면 라디오버튼을,
2개 이상 선택하려면 체크 박스를 사용한다.
버튼에서 사용할 수 있는 속성은 다음과 같다
| 종류 | 설명 |
| value | 선택한 체크 박스나 라디오 버튼을 서버에게 알려줄 때 넘겨줄 값을 지정합니다. 이 값은 영문이거나 숫자여야 하며 필수 속성입니다. |
| checked | 버튼은 처음에 아무것도 선택되지 않은 상태로 화면에 표시되는데, 만약 기본으로 선택해 놓고 싶은 항목이 있다면 사용합니다. 속성값은 따로 없습니다. |
상품 주문을 넣는 폼을 체크바긋와 라디오버튼을 활용하여 만들어보겠다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Html-basic</title>
</head>
<body>
<form>
<fieldset>
<legend>상품 주문</legend>
<h3>주문할 상품을 선택해 주세요.</h3>
<input type="checkbox" name="" id="present-3kg" value="p3">
<label for="present-3kg">선물용 3kg</label>
<input type="checkbox" name="" id="present-5kg" value="p5">
<label for="present-5kg">선물용 5kg</label>
<input type="checkbox" name="" id="family-3kg" value="f3">
<label for="family-3kg">가정용 3kg</label>
<input type="checkbox" name="" id="family-5kg" value="f5">
<label for="family-5kg">가정용 5kg</label>
<h3>선물포장 여부를 선택해 주세요.</h3>
<input type="radio" name="present-pack" id="present-pack-yes" value="pp-yes">
<label for="present-pack-yes">선물 포장</label>
<input type="radio" name="present-pack" id="present-pack-no" value="pp-no">
<label for="present-pack-no">선물 포장 안 함</label>
</fieldset>
</form>
</body>
</html>
라디오 버튼에서 여러 버튼 중 하나의 버튼만 선택되도록 하려먼 여러 버튼의 name값을 동일하게 설정해주어야 한다. 위 예제에서 name값을 지정하지 않거나 각 버튼마다 다르게 지정했다면 라디오 버튼이라 할 지라도 여러 버튼이 동시에 선택될 수 있다.
'📁Web Developing > HTML 기초' 카테고리의 다른 글
| input 태그-4 (날짜와 시간 입력) (0) | 2022.05.30 |
|---|---|
| input 태그-3 (number, range) (0) | 2022.05.30 |
| input 태그-1 (텍스트 입력) (0) | 2022.05.30 |
| 폼 삽입하기 (0) | 2022.05.29 |
| 하이퍼링크 삽입하기 (0) | 2022.05.29 |
댓글