[생활코딩] form- 컨트롤의 제목, label | sohinggu๑°⌓°๑

HTML - form: label

 

 

label

 

form의 입력창에 이름을 붙여주는 태그

 

1. 누구의 label인지 정확하게 표현하기 위해 input의 id값과 label의 for값을 동일하게 연결시켜준다.
   → 시각적인 변화는 없지만 기능상 label을 클릭하면 해당 텍스트 필드로 커서가 이동한다.

 

text :

textarea : default value

<form action="">
	<p>
		<label for="id_txt">text : </label>
		<input id="id_txt" type="text" name="id" value="default value">
	</p>
	<p>
		<label for="comment">textarea : </label> 
		<textarea id="comment" rows="2">default value</textarea>
	</p>
<form>

 

 

2. id를 쓰지 않는 방법으로는, label로 해당 input태그를 감싸주어도 같은 결과가 나온다.

 

text :

textarea : default value

<form action="">
	<p>
		<label>text :
		<input type="text" name="id" value="default value"></label>
	</p>
	<p>
		<label>textarea : 
		<textarea rows="2">default value</textarea></label>
	</p>
<form>

 

 

3. checkbox인 경우도 동일한 방법으로 텍스트를 클릭해도 체크박스가 체크되게 만들 수 있다.

 

붉은색

파란색

<form action="">
	<p>
		<label>
		<input type="checkbox" name="color" value="red> 붉은색</label>
	</p>
	<p>
		<label for="color_blue">textarea : 
		<input id="color_blue" type="checkbox" name="color" value="red> 파란색</label>
	</p>
<form>