radio box는 동그란 모양으로 단일 선택을 할 수 있고
chech box는 네모 모양으로 복수 선택이 가능하다.
box는 같은 name을 갖고 있어야 하나의 그룹으로 묶어진다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>input boxes</title>
</head>
<body>
<h3>성별 구분</h3>
<input type="radio" name="gender" value="m">남자<br>
<input type="radio" name="gender" value="f">여자<br>
<br>
<h3>취미 활동을 선택하세요.</h3>
<input type="checkbox" name="hobby" value="1">등산<br>
<input type="checkbox" name="hobby" value="2">골프<br>
<input type="checkbox" name="hobby" value="3">마라톤<br>
</body>
</html>
form 형식에서 데이터 보내는 방법을 사용하여 작성하였다.
데이터를 외부로 보낼때는 box에 설정된 value 값이 전송된다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>boxes Exam</title>
</head>
<body>
<form name="classSelect" method="GET" action="select.html">
<h3>수강 분야(다수 선택 가능)</h3>
<input type="checkbox" name="class" value="grammer">문법<br>
<input type="checkbox" name="class" value="writing">작문<br>
<input type="checkbox" name="class" value="reading">독해<br>
</form>
<form name="subjectSelect" method="GET" action="select.html">
<h3>수강 과목(1과목만 선택 가능)</h3>
<input type="radio" name="subject" value="eng">영어회화<br>
<input type="radio" name="subject" value="jap">일본어회화<br>
<input type="radio" name="subject" value="chi">중국어회화<br>
</form>
</body>
</html>
728x90
반응형
'HTML > HTML 기초' 카테고리의 다른 글
| [HTML] input의 여러가지 형태 (0) | 2020.07.28 |
|---|---|
| [HTML] filedset으로 묶어서 사용해보기 (0) | 2020.07.28 |
| [HTML] FORM 실습하기 (0) | 2020.07.27 |
| [HTML] table에서 thead, tbody, tfoot 사용해 보기 - 2 (0) | 2020.07.27 |
| [HTML] table에서 thead, tbody, tfoot 사용해 보기 - 1 (0) | 2020.07.27 |
