[html] label 태그

 

 

[html] label 태그

 

<lable> 태그는 양식 입력 창(form control)을 설명하는 이름표입니다.

 

lable 요소로 묶인 텍스트를 클릭하면, form control(양식 입력 창)이 선택 됩니다.

(다시 클릭하면 선택 해제됨)

 

*form control이란-> input, textarea, button, select 요소로 생성된 입력 제어 장치

 

 

▶함께 사용할 수 있는 속성

 

속성	속성값	설명
for	요소 id	label로 묶을 id. 관련 요소의 id와 같음
form	form id	label이 속한 form의 id

 

 

lable로 묶는 방법은 두 가지가 있는데, 

1. for 속성을 사용하거나
2. <lable> 요소 안에 form cotrol을 두는 것.

 

 

 

 

 

▶html/css 작성 예를 보겠습니다~

 

html

<form action="url">
<label> 이름: <input type="text" name="nick"></label> 
<p>
<h3> 좋아하는 장르를 선택하세요 </h3>
<label for="action">1. 액션</label><input type="checkbox" name="movie" value="action" id="action"><br>
<label for="sf">2. 공상과학</label><input type="checkbox" name="movie" value="sf" id="sf"><br>
3. 스릴러<input type="checkbox" name="movie" value="thrill"><br>
</p>
 <input type="submit" value="전송"> <input type="reset" value="초기화">
</form> 

 

3. 스릴러는 label로 묶지 않았습니다.

 

css

form{
background-color:#D9E5FF;
width: 300px;
height: 200px;
border: 1px solid #B2CCFF;
padding: 20px;
}

 

▶실행화면

 

이름과, 1. 액선 2.공상과학은 라벨로 묶었기 때문에 텍스트를 클릭했을 때 선택이 됩니다.

 

하지만 3.스릴러는 선택해도 아무 변화가 없습니다.

 

소스는 다운받아 확인 하세요

 

label.htm

 

   

form 태그(html 양식 만들기)

 

[html] input 태그

 

input type 속성

 

textarea 태그