HTML
31일차//[html] check box + radio 사용법
aesup
2021. 2. 24. 19:03
728x90
check box (중복선택가능)
radio
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- form
resource(자원)
textfield, button, textArea, checkbox, radio
-->
<!--
<태그명 속성명 = "특성명:값" 속성명 = "값"
style
Attribute(속성): 표현, 접근 (데이터IO)하기 위한 목적
<태그명 id = , class = , name = >
id:현재 페이지에서 한개만 유효
class : 다중으로 사용이 가능. 디자인(CSS)
name : 값을 전달하는 목적.
-->
<p id = "aaa" class = "ddd" name = "a1">hello</p>
<p id = "bbb" class = "ddd" name = "b1">hello</p>
<a href = "NewFile.html">NewFile.jsp로이동</a>
<br>
<form action = "NewFile.html">
NewFile.html 로 이동
<input type="submit" value = "이동">
</form>
<br><br><br>
<form>
<!-- text 유저들이 기입하는 칸--><!-- Attribute -->
ID : <input type = "text" value = "여기에 id 기입"> <br>
ID : <input type = "text" value = "" title = " 여기에 id 기입"> <br>
ID : <input type = "text" value = "" title = " 여기에 id 기입"
size = "10" readonly = "readonly" > <br>
ID : <input type = "text" value = "" title = " 여기에 id 기입"
size = "10" placeholder = "id기입"><br>
PW : <input type = "password" size = "10"> <br>
초기화: <input type = "reset" value = "초기화"> <br>
<!-- 초기화를 하려면 form이 있어야한다 -->
</form>
<br><br><br>
<!-- html5 -->
number: <input type="number" max = "5" min = "1"><br>
date : <input type="date"><br>
color : <input type="color" value = "red"><br>
range : <input type="range" max = "10" min = "1"><br>
search : <input type="search">
<br><br><br>
checkbox & radio button<br>
<input type="checkbox" value = "패션">패션<br>
<input type="checkbox" value = "음악">음악<br>
<input type="checkbox" value = "게임">게임<br>
<br>
<!-- 하나만 선택 -->
<input type="radio" name = "car" value = "벤츠">벤츠<br>
<input type="radio" name = "car" value = "아우디">아우디<br>
<input type="radio" name = "car" value = "BMW">BMW<br>
<br><br>
<textarea rows="10" cols ="30">기본값</textarea>
<br><br>
<select>
<option value = "사과">apple</option>
<option value = "바나나">banana</option>
</select>
<select multiple="multiple">
<option value = "사과">apple</option>
<option value = "바나나">banana</option>
</select>
</body>
</html>
728x90