티스토리 뷰

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>라디오버튼 만들기</h1>
	
	<div>
		<form>
			<p>1.당신의 성별은?</p>
			<input type="radio" name="gender" value="female">여자
			<input type="radio" name="gender" value="male">남자
			<!--  name속성을 지정하면 2개선택이 아닌 둘중하나만 선택할 수 있다. -->
			
			<p>2.좋아하는과목은?</p>
			<input type="radio" name="subject" value="kor">국어
			
			<input type="radio" name="subject" value="eng">영어
			
			<!--  여기서 name은 과목들간의 관계이므로 subject로 동일해야하며 성별의 name과 같아서는 안된다. -->
			<br>
			
			<p>
		
		</form>
	</div>
</body>
</html>

서버에서는 value를 얻어간다. 또한 label로 감싸면 라디오 버튼을 찍어주는게 아니라 이름만 클릭하여 선택할 수 있게 가능하다.

단 ! label에서 옵션값인 label for =""를 사용할 경우 input 태그 안에서 id를 설정해줘야한다.

 

또한 name은 하나의 공통점을 가진 것들의 모임이라 생각하자.