<label> : <input> 에 이름(라벨) 붙이기

<label> 태그를 사용하면 <form>의 요소인 <input> 등에 명시적으로 이어져 있음을 브라우저에 알릴 수 있다.

 이름에서도 알 수 있듯이 라벨링을 생각하면 쉽다.

 

방법은 두 가지가 있다. 

첫 번째는 위치상으로 라벨과 input 이 서로 연관이 있음을 알려주는 것이고,

두 번째는 라벨이 어느 input 을 위한 것인지 명시적으로 알려주는 것이 있다.

 

🔷 <label> 라벨 <input> </lable>

<label>아이디 : <input type="text" value="아이디" size="20"></label>

🔷 <label for="id이름"> 라벨 </label> <input id="id이름">

<label for="id-text">아이디 : </label>
<input type="text" id="id-text" value="아이디" size="20">

화면상으로는 첫 번째 방법과 두 번째 방법의 차이가 드러나지는 않지만,

두 번째을 사용하면 이 둘의 위치가 떨어지더라도 id 값으로 찾아갈 수 있기 때문에 쉽게 연결할 수 있다는 장점이 있다.

 

또한 라디오 필드와 체크박스 필드에서도 유용하게 사용할 수 있는 것이 바로 이 라벨 필드이다.

기존의 라디오 필드와 체크박스 필드는 반드시 해당하는 사각형 또는 원형을 선택해야만 했지만,

라벨 필드를 사용하게 되면 라벨까지 선택 가능한 범위가 되어 사용자의 사용이 쉬워진다는 장점이 있다.

<ul>
	<li>
		<label>
			선택 1번
			<input type="radio" name="radio" value="1">
		</label>
	</li>
	<li>
		<label>
			선택 2번
			<input type="radio" name="radio" value="2">
		</label>
	</li>
	<li>
		<label>
			선택 3번
			<input type="radio" name="radio" value="3">
		</label>
	</li>
</ul>