목차
- <label> 예제 - <input> 태그 꼬리표(=설명문)
- <label> 정의
- <label> 구문
- <label> 속성
- <label> 기본CSS
<label> 예제 - <input> 태그 꼬리표(=설명문)
<form action="sexinfo_form.php">
<label for="boy">소년 홈짱닷컴 (homzzang.com)</label>
<input type="radio" name="sex" id="boy" value="boy"><br>
<label for="girl">소녀 홈짱닷컴 (homzzang.com)</label>
<input type="radio" name="sex" id="girl" value="girl"><br>
<input type="submit" value="Submit">
</form>
<label> 정의
<input> 태그에 상세설명 꼬리표 붙여 쉽게 선택 가능케 함.
1.
- 마우스 사용자가 쉽게 input 입력값을 선택할 수 있도록 함. (예) 회원가입 페이지에서 약관 동의 글자 클릭 시 선택.
- <label> 태그의 for 속성과 <input> 태그의 id 속성의 값을 같게 해서 연결함.
- <label>의 시작태그와 종료태그 사이에 <input> 태그를 넣으면 굳이 for와 id 이용해 연결 안 해도 됨.
- HTML5에서 form 속성 추가됨.
- 시작태그와 종료태그로 구성.
2.
3. MDN <label> 예제보기
<label> 구문
<form>
<label for="아이디">꼬리표</label>
<input type="타입" name="이름" id="아이디" value="입력값">
</form>
※ 위처럼 input 태그와 함께 사용.
<label> 속성
속성
|
속성값 |
쓰임새 |
for
|
element_id |
<label>태그와 관련 있는 요소의 아이디 지정 |
form
|
form_id |
<label>태그가 속하는 하나 이상의 <form> 태그의 아이디 지정 |
※ <label>태그는 전역속성과 이벤트속성 지원.
<label> 기본CSS
label {
cursor: default;
}