반응형
■ lable 태그를 사용한 radio 박스 선택영역 확장
radioLable.php |
| <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <title>라디오버튼 선택영역 확장</title> </head> <body> <font size="5px" color="#000000"><b>선택영역이 확장되지 않은 경우</b></font> <div> <ul> <font size="3px" color="#000000"> <li> <input name="quizeABC" value="N" type="radio"/> 나이트 엘프</li> <li> <input name="quizeABC" value="O" type="radio"/> 오크</li> <li> <input name="quizeABC" value="U" type="radio"/> 언데드</li> <li> <input name="quizeABC" value="H" type="radio"/> 휴먼</li> </font> </ul> </div> </body> </html> |
출력결과 |
라디오 박스를 사용하면 기본적으로 위 예제와 같이 작은 라디오 박스 부분만 선택영역으로 지정된다.
그렇지만 아래와 같이 lable태그를 사용함으로서 선택영역을 좀더 넓힐 수 있다.
<label><input type="radio"/>텍스트</label> |
위와 같은 방식을 예제에 적용하면 결과는 아래와 같이 달라진다.
radioLable.php |
| <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <title>라디오버튼 선택영역 확장</title> </head> <body> <font size="5px" color="#000000"><b>선택영역이 확장된 경우</b></font> <div> <ul> <font size="3px" color="#000000"> <li> <label><input name="quizeABC" value="N" type="radio"/> 나이트 엘프</label></li> <li> <label><input name="quizeABC" value="O" type="radio"/> 오크</label></li> <li> <label><input name="quizeABC" value="U" type="radio"/> 언데드</label></li> <li> <label><input name="quizeABC" value="H" type="radio"/> 휴먼</label></li> </font> </ul> </div> </body> </html> |
출력결과 |
반응형
'HTML' 카테고리의 다른 글
| [HTML] HTML / CSS 만을 이용하여 트리 뷰(tree view) 제작하기 #01 (0) | 2017.04.15 |
|---|---|
| [HTML] 범위 주석 (0) | 2015.10.31 |
| [HTML] 대표링크 (0) | 2014.11.21 |
| [HTML] 글자 스타일을 바꾸는 태그 (0) | 2011.12.20 |
| [HTML] 글자를 편집하는 FONT 태그 (0) | 2011.12.20 |
