반응형
html 폼 만들기 6 - 라디오 버튼 만들기
네 안녕하세요, 이번 포스팅에서는 라디오 버튼에 대해 알아보도록 하겠습니다.
라디오 버튼 역시 선택형 입력 폼의 일종입니다.
그리고 체크박스만큼이나 자주 쓰입니다.
그래서 그만큼 중요한 선택형 입력 폼 양식입니다.
그럼 지금부터 시작하도록 하겠습니다.
1. 라디오 버튼 만들기 : input type = "radio"
라디오 버튼은 radio 속성을 이용해서 만듭니다.
또한, 라디오 버튼은 name 속성의 값이 같은 라디오 버튼끼리 하나의 그룹을 형성하고 묶입니다.
그리고 라디오 버튼 역시 체크박스처럼 checked 속성이 존재하는 칸이 있다면
웹 페이지를 여는 순간부터 체크표시가 되어서 출력이 됩니다.
그럼 간단한 예제를 통하여 같이 알아보실까요?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>라디오 버튼 만들기</title>
</head>
<body>
<h3>먹고 싶은 것 하나만 선택?</h3>
<hr>
<form>
<input type="radio" name="china" value="1">
짜장면<img src="3장media/jajang.png"><br>
<input type="radio" name="china" value="2" checked>
짬뽕<img src="3장media/jjambbong.png"><br>
<input type="radio" name="china" value="3">
탕수육<img src="3장media/tangsuyuk.png">
</form>
</body>
</html>
반응형
이런 식으로 작성을 합니다.
각각의 라디오 버튼을 만드는 <input> 태그 안에 name 속성에 있는 이름이 china죠?
그리고 이 china라는 name 속성을 가진 라디오 버튼끼리 묶여서 하나의 그룹을 이룹니다.
그러면 결과 화면을 통하여 같이 보실까요?
 |
 |
이렇게 checked 속성이 없으면 아무것도 표시가 되어있지 않고,
checked 속성이 있으면 오른쪽 사진처럼 체크가 되어있습니다.
그리고 라디오 버튼의 제일 큰 특징은 다수의 답안을 선택할 수 없다는 겁니다.
그래서 다수의 답안을 허용하려고 한다면 체크박스를,
하나의 답안만 허용을 한다면 라디오 버튼을 쓰시면 됩니다.
여기까지 라디오 버튼을 만드는 방법에 대하여 알아보았습니다.
다음 포스팅에서는 콤보박스를 만드는 방법에 대하여 알아보도록 하겠습니다.
긴 글 읽어주신 독자분들께 진심으로 감사합니다~
반응형
'html, css, 자바스크립트 > html' 카테고리의 다른 글
| html label 태그로 폼 요소의 캡션 만들기 (0) | 2023.03.06 |
|---|---|
| html 폼 만들기 7 - select, option 태그로 콤보박스 만들기 (0) | 2023.03.04 |
| html 폼 만들기 5 - 체크박스 만들기 (0) | 2023.03.04 |
| html 폼 만들기 4 - 이미지 버튼 만들기 (0) | 2023.03.04 |
| html 폼 만들기 3 - button 태그로 기본 버튼 만들기 (0) | 2023.03.04 |
댓글