예제 3-9. 체크박스 만들기, <input type="checkbox"> 예제 3-10. 라디오버튼 만들기, <input type="radio">
WEB/HTML5-CONCEPT 2017. 11. 4. 18:44 |1 2 3 4 | <input type="checkbox|radio" name="요소 이름" value="요소 값" // 폼요소가 선택된 상태일 때, 웹서버에 전송되는 값 checked> // 이 속성이 있으면, 초기에 선택된 상태로 출력 (defalut) | cs |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!DOCTYPE html> <html> <head> <title>체크 박스 만들기</title></head> <body> <h3>먹고 싶은 것 모두 체크하세요</h3> <hr> <form> 짜장면 <input type="checkbox" value="1"> 짬뽕 <input type="checkbox" value="2" checked> 탕수육 <input type="checkbox" value="3"> </form> </body> </html> | cs |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!DOCTYPE html> <html> <head> <title>라디오버튼 만들기</title> </head> <body> <h3>먹고 싶은 것 하나만 선택?</h3> <hr> <form> <input type="radio" name="china" value="1"> // name이 통일되어야지 하나만 선택이 된다. 짜장면<img src="media/jajang.png"><br> <input type="radio" name="china" value="2" checked> 짬뽕<img src="media/jjambbong.png"><br> <input type="radio" name="china" value="3"> 탕수육<img src="media/tangsuyuk.png"> </form> </body> </html> | cs |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html> <html> <head> <title>라디오버튼 만들기</title> </head> <body> <h3>먹고 싶은 것 하나만 선택?</h3> <hr> <form> <input type="radio" value="1"> 짜장면<img src="media/jajang.png"><br> <input type="radio" name="cha" value="2" checked> 짬뽕<img src="media/jjambbong.png"><br> <input type="radio" name="china" value="3"> 탕수육<img src="media/tangsuyuk.png"> </form> </body> </html> | cs |
'WEB > HTML5-CONCEPT' 카테고리의 다른 글
| 예제 3-12 <label>태그를 이용한 로그인 폼 만들기 (0) | 2017.11.04 |
|---|---|
| 예제 3-11. 콤보박스 만들기, <select> (0) | 2017.11.04 |
| 예제 3-8. 텍스트/이미지 버튼 만들기 (0) | 2017.11.04 |
| 예제 3-7. 데이터 목록을 가진 텍스트 입력 창, <datalist> (0) | 2017.11.04 |
| 예제 3-6. 텍스트 입력, <input type="text | password">,<textarea> (0) | 2017.11.04 |