input 와 label태그 사용하기

 

웹 사이트를 만드는 데 중요하게 사용되는 input 태그의 종류와 label 태그의 사용법에 대해서 정리해 보겠습니다.

 

input과 label

input과 label은 한 쌍으로 이루어진 태그입니다. 웹 접근성을 통과하기 위해서는 모든 input에는 연결되는 label이 존재해야 합니다. 간단히 얘기하자면 input은 기능을 제공하고, label은 연결된 input을 정의하고 설명하는 기능을 가집니다.  

input과 label 연결하기

---

예시)

레이블Label:

---

 

위의 예시를 html 코드 그대로 옮기면 다음과 같습니다.

 

<label for="inputEx"> 레이블Label: </label>

<input id="inputEx" type="text" />

 

input 태그의 id  값을 지정하고 label에 for 값으로 입력하여 두 태그를 상호 연결하였습니다. 마우스로 label 태그를 클릭하였을 때 연결되어 있는 input 박스가 셀렉트 된 것을 확인할 수 있습니다. label을 눌렀을 때 input이 선택되는 것을 활용하여 input을 선택할 수 있는 범위를 조정하거나 다양한 스타일을 입힐 수 있습니다. 예시로 사용된 input:text뿐만 아니라 모든 input 태그에는 어떤 방법으로든 label이 필요합니다.

 

간혹 디자인상 라벨 태그를 감춰야 하는 상황도 다수 존재합니다. 다양한 방법이 존재하기에 나중에 새로운 포스팅으로 정리해 보겠습니다^^

자주 사용되는 input의 종류

input은 다양한 상황에 다양한 방법으로 사용됩니다. input 태그의 type을 어떻게 설정하는지에 따라서 속성이 변화합니다. 아래로 많이 사용되는 input 태그의 type에 대하여 알아보겠습니다.

텍스트 input:text

---

레이블Label:

<label for="inputEx3">레이블Label: </label>

<input id="inputEx3" type="text" />

---

상단에서 사용하였던 것과 동일한 예시입니다. input:text는 한 줄로 작성되는 테스트 내용을 입력할 수 있습니다. submit 버튼을 추가하여 입력된 정보를 전달하거나 저장하는 역할로서 사용이 가능합니다.

라디오 input: radio

---

원하는 스포츠 활동을 고르시오(복수 선택 불가능)

 

야구축구수영

 

<input id="radio1" name="radioEx" type="radio" /><label for="radio1">야구</label><input id="radio2" name="radioEx" type="radio" /><label for="radio2">축구</label><input id="radio3" name="radioEx" type="radio" /><label for="radio3">수영</label>

---

input:radio입니다. radio는 여러 개의 선택 지 중 하나의 옵션만 선택해야 할 때 사용됩니다. 선택지들은 각각의 input 태그에 name 속성을 활용하여 함께 묶어주어야 합니다. name을 적용하여야만 개중 하나만 선택할 수 있는 제약을 걸 수 있습니다.

체크박스 input:checkbox

---

좋아하는 간식을 고르세요(복수 선택 가능)

 

쿠키초콜렛사탕

 

<input id="checkbox" name="checkEx" type="checkbox" /><label for="checkbox">쿠키</label><input id="checkbox2" name="checkEx" type="checkbox" /><label for="checkbox2">초콜렛</label><input id="checkbox3" name="checkEx" type="checkbox" /><label for="checkbox3">사탕</label>

---

input:checkbox는 복수의 답변을 선택할 수 있을 때 사용됩니다. 예시에서 볼 수 있듯이 name을 사용하여 서로 묶더라도 복수 선택하는데 지장을 받지 않습니다.

파일 input:file

---

파일 첨부 :

 

<label for="file">파일 첨부 : </label><input id="file" type="file" />

---

input 파일은 컴퓨터 내 자료를 첨부하기 위한 속성입니다. 파일을 첨부하면 자동으로 첨부된 파일명이 text로 표기됩니다.

 

오늘은 자주 쓰이는 input의 type과 label 태그의 사용법에 대해서 알아보았습니다. 다음 포스팅으로는 input 태그의 커스텀에 관한 포스팅을 가지고 오겠습니다^^