HTML <label> 태그 양식 컨트롤 레이블 태그(Form Control Label) - HTML의 <label> 태그는 입력 요소에 대한 레이블을 정의합니다.
HTML 태그 2012. 9. 18. 10:59HTML <label> 태그 : 양식 컨트롤 레이블 태그(Form Control Label)
HTML의 <label> 태그는 양식 컨트롤에 레이블을 추가하는 데 사용됩니다.
<label> 태그는 마우스 사용자에게 편의성을 제공합니다.
일반적으로 <label> 태그는 많이 사용하지 않지만 잘 활용하면 checkbox,radio button의 form 컨트롤을 선택하지 않고
텍스트만 눌러도 폼 요소가 클릭한거와 같은 이벤트가 일어난다.
이때는 <label> 태그의 'for'속성과 <input> 태그의 'id'의 값을 동일하게 해야하고 .name을 넣어주면 안됩니다.
1.예제
<label><input type="checkbox" name="brandName" value="애플"/>애플</label>
2.예제
<input type="radio" name="brandName" id="one"><label for="one">사과</label>
<input type="radio" name="brandName" id="two"><label for="two">배</label>
3.예제
<input type="checkbox" name="brandName1" id="checkbox1"><label for="checkbox1">사과</label>
<input type="checkbox" name="brandName2" id="checkbox2"><label for="checkbox2">배</label>
<label> 태그 예제
<html>
<head>
<title>html label 태그 예제샘플</title>
</head>
<body>
<h1>label 태그의 예제샘플입니다</h1>
<p>
<FORM action="..." method="post">
<P>
<LABEL>
이름 <INPUT type="text" name="fname">
</LABEL>
<LABEL>
연락처 <INPUT type="text" name="ftel">
</LABEL>
</P>
</FORM>
<p>
<FORM action="..." method="post">
<TABLE>
<TR>
<TD><LABEL for="fname">성명</LABEL>
<TD><INPUT type="text" name="fname" id="fname">
<TR>
<TD><LABEL for="ftel">연락처</LABEL>
<TD><INPUT type="text" name="ftel" id="ftel">
</TABLE>
</FORM>
<p>
<h1><span style="background-color: #FFFFcc">또다은 라벨 예제</span></h>
<s:form>
<s:label name="fname" value= "Name" />
<s:label name="froll" value= "Roll" />
<s:label name="faddress" value= "Address: " />
</s:form>
</body>
</html>
<label> 태그 속성
accesskey : 요소를 활성화하고 포커스/바로가기키를 지정합니다.
class : 문서의 요소를 식별합니다.
dir : HTML의 일세 속성은 HTML 문서의 요소 안에있는 텍스트의 방향을 설정합니다.
for : 라벨 요소에 식별자를 지정하는 것입니다.
id : 문서의 요소를 식별합니다.
lang : 요소의 내용의 언어를 지정합니다.
style : 요소에 대한 인라인 스타일을 지정합니다.
title : 문서에 대한 제안 제목은 열 수 있습니다.
<label> 태그 이벤트
onblur : 요소가 포커스를 잃을 때 스크립트가 실행됩니다.
onclick : 마우스 클릭에서 스크립트가 실행됩니다.
ondblclick : 마우스를 두번 클릭에서 스크립트가 실행됩니다.
onmousedown : 스 버튼을 누를 때 스크립트가 실행됩니다.
onmouseup : 마우스 버튼이 버튼이 누른후 스크립트가 실행됩니다.
onmouseover : 마우스 포인터가 요소 위에 이동할 때 스크립트가 실행됩니다.
onmousemove : 마우스 포인터가 이동할때 스크립트가 실행됩니다.
onmouseout : 마우스 포인터가 요소에서 이동할 때 스크립트가 실행됩니다.
onkeypress : 키를 누르면 스크립트가 실행됩니다.
onkeydown : 키를 눌렀을 때 스크립트가 실행됩니다.
onkeyup : 키가 누른후에 스크립트가 실행됩니다.
'HTML 태그' 카테고리의 다른 글
WRITTEN BY
- white_rabbitstar
html대학에서는 html 태그,html5 신규태그,css등 모든 속성,이벤트,속성값을 정리하여 앞으로 열심히 글을 올리 겠습니다.
