input 태그와 함께하는 label 태그

label 태그는 input 태그와 함께일 때 동작한다. 

<label>Profile Photo</label>

 

Profile Photo

 

위와 같이 input 태그 없이 label 태그만 작성할 경우 클릭을 해도 아무런 이벤트가 일어나지 않는다. 

 

여기서 input 태그가 추가되면 label 태그가 동작하게 된다. 

<label for="profile">Profile Photo</label>
<input id="profile" type="file" accept=".pdf">

 

Profile Photo

 

label 태그에 for 속성을 추가해주고 "profile"이라는 값을 주었다. 그 후 input 태그를 만들어 해당 태그의 id값을 동일하게 "profile"이라고 지정해주었다. 그 후 동작을 살펴보면 "Profile Photo" 라는 문구를 클릭했을 때 input 태그와 같은 동작이 이루어지는 것을 볼 수 있다. 

 

<label for="first-name">First Name</label>
<input id="first-name" required placeholder="Name" type="text">

 

First Name

 

이는 input 태그의 type이 text인 경우에도 예외없이 적용된다.

 

여기서 중요한 점은 id 속성은 한 태그당 하나만 가질 수 있다는 것이다. 또한 그 id값은 고유해야 한다.