티스토리 뷰
사용자들로 하여금 여러개의 선택지에서 하나 또는 복수의 선택을 할 수 있게 하는 radio버튼과 checkbox버튼을 배워봅시다.
먼저 [실습] 폴더에 form_choice2.htlm이라는 화일을 생성합니다.
라디오버튼과 체크박스는 각각 <input>태그의 type속성으로 설정을 해줍니다.
radio의 속성의 경우에는 같은 name으로 묶여진 그룹에서 하나만 선택이 가능하지만, checkbox의 경우에는 다중으로 선택이 가능합니다.
기본적으로 화면이 실행되었을 때, 선택되어져 있는 것으로 보이기 위해서는 태그의 옵션에 "checked"라고 입력을 해주면 됩니다.
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="http://localhost/order.php">
<p>
<h1>색상(단일선택)</h1>
붉은색 : <input type="radio" name="color" value="red">
검은색 : <input type="radio" name="color" value="black" checked>
파란색 : <input type="radio" name="color" value="blue">
</p>
<p>
<h1>사이즈(다중선택)</h1>
95 : <input type="checkbox" name="size" value="95">
100 : <input type="checkbox" name="size" value="100" checked>
105 : <input type="checkbox" name="size" value="105" checked>
</p>
<input type="submit" value="제출">
</form>
</body>
</html>
'방과후 > HTML' 카테고리의 다른 글
| HTML - form : hidden (0) | 2017.09.08 |
|---|---|
| HTML - form : button (0) | 2017.09.08 |
| HTML - form : dropdown list (0) | 2017.09.06 |
| HTML - form : 문자입력 (0) | 2017.09.06 |
| HTML - form 기본 (0) | 2017.09.05 |