- HTML - 국비 radio,label활용 목차
<!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은 하나의 공통점을 가진 것들의 모임이라 생각하자.
'Web(국비) > HTML & CSS' 카테고리의 다른 글
| HTML - 국비 자식,자손 선택자 css (0) | 2019.10.16 |
|---|---|
| HTML - 국비 id선택자 css활용 (0) | 2019.10.16 |
| HTML - 국비 class (0) | 2019.10.16 |
| HTML-국비 form의 중요성 및 button을 통한value와 submit 차이 (0) | 2019.10.16 |
| HTML - input태그안 name에 대해.. (0) | 2019.10.16 |