티스토리 뷰
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>쳌밬만들기</h1>
<div>
<form>
<p>오늘 메뉴</p>
<input type="checkbox" name="foodSelect" value="1" id="label1">
밥
<label>
<input type="checkbox" name="foodSelect" value="2" id="label2">
된장궁
</label>
<!-- label을 이렇게 묶으면 클라이언트 입장에서 편리함(체크박스가 아닌 이름만 눌러도
체크가 됨 -->
<input type="checkbox" name="foodSelect" value="1" id="label3">
<label for="label3">김</label>
<!-- 이런 방식도 가능 -->
<!-- cheked속성을 통해 기본으로 체크되어 있게할 수 있음 -->
<label for="label3">먼곳에 있는 김</label>
<!-- 먼 곳에서 label태그를 활용하여 김 체크박스 체크가능 -->
<!-- name을 통일해야함 서버에 제출할때 name을 달리하면 따로따로 바인딩해야함. -->
</form>
</div>
</body>
</html>
또한 value값에 따라 작동하므로 value는 다르게해야함
id속성은 script가 제어하므로 대부분 id로 컨트롤함.
'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 - 국비 radio,label활용 (0) | 2019.10.16 |