[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 태그

 

'html' 카테고리의 다른 글

[html] select 태그  (2) 2014.10.21
[html] button 태그  (1) 2014.10.20
[html] label 태그  (1) 2014.10.17
[html] textarea 태그  (2) 2014.10.16
[html] input type 속성  (1) 2014.10.15
[html] input 태그  (2) 2014.10.14
지구별에
html 2014. 10. 17. 11:35

댓글을 달아 주세요

  1. TF_JW 2016.08.10 15:38  수정/삭제  댓글쓰기

    잘보고 갑니다.

Powerd by Tistory, designed by criuce