친절한효자손 취미생활

HTML에서 input이라는 태그가 있습니다. 이 요소의 사용이 가장 두드러지게 이뤄지고 있는 영역은 바로 회원가입입니다. 인터넷을 사용하시는 분들이라면 최소 한 곳 이상의 사이트에 가입을 하신 경험이 있을 것이고, 그 회원 가입 과정에서 동의 부분에 체크를 한번이라도 해보신 경험이 있으실 겁니다. 바로 그 체크박스가 <input> 태그로 만들어집니다.

 

input type

input 태그는 type(타입)에 따라 종류와 형태가 달라집니다. 방금 언급했던 체크박스의 경우는 type="checkbox"라는 옵션을 사용합니다. 만약 직접 문자나 숫자 등의 변수를 입력받을 경우에는 어떤 타입을 사용할까요? 바로 type="text"라는 옵션을 사용하게 됩니다. 아래에 input 태그의 type 별 스타일을 모아두었으니 한번 육안으로 확인해보시기 바랍니다.

 

See the Pen HTML <input> by rgy0409 (@rgy0409) on CodePen.

보시는 것처럼 종류가 상당합니다. 딱 보시면 아시겠지만 확실히 뭔가 회원 가입에서 사용될만한 기본 형태들이 많이 눈에 보입니다. 수많은 input type 종류들 중에서 많이 사용되는건 생각보다 많지는 않습니다. 텍스트를 입력받는 input의 경우는 대부분 type은 text로 사용되고 있지요. 나머지 타입에 대한 자세한 정보는 조만간 따로 하나씩 작성해서 안내해 드리겠습니다.

 

label의 역할

<label>이라는 태그가 있습니다. 이 태그는 HTML에 마크업(입력)을 해도 딱히 결과가 육안으로 보여지지는 않습니다. 그러면 이 녀석은 어떤 상황에서 사용되어지느냐! 그것이 핵심이라고 할 수 있겠습니다.

 

여러분들, 본인인증 과정에서 핸드폰 인증을 해보신 분들이라면 아마 공감을 많이 하실텐데, 개인정보 확인 동의 체크박스에 체크할때 반드시 그 체크박스를 터치해야지만 체크가 되는 경험이 있으실겁니다. 아마 이 체크박스가 4개일 겁니다. 물론 전체동의에 딱 한번만 터치하면 모두 체크가 되긴 합니다만 문제는 이 전체동의 체크박스마저도 정확하게 체크박스에 터치를 해야 체크가 됩니다. 그래서 사용하는게 라벨 태그입니다. 이 태그는 어떤 특정 요소를 감싸주는데 사용되어진 그 요소를 클릭하면 자동으로 체크박스가 동작하게끔 만들어줘서 사용자 입장에서는 훨씬 스트레스를 덜 받게 만들어줄 수 있습니다. 더 직관적이라고 표현해야 할 것 같군요. 말로는 설명이 어려우니 다음 과정으로 넘어갑니다.

 

label 태그를 input 태그에 연결시키기

<label>태그와 <input>태그는 반드시 연결이 되어야 합니다. 아래의 예시를 살펴봐주시기 바랍니다.

 

See the Pen HTML <label> + <input> by rgy0409 (@rgy0409) on CodePen.

보시면 첫번째의 「여기를 클릭해보세요」 문구를 마우스 커서로 한번 클릭해 보시기 바랍니다. 체크박스에 체크가 되지 않습니다. 분명 텍스트는 <label>태그로 감싸여져 있지만 동작하지 않습니다. 이유는 해당 <label>태그와 <input>태그가 서로 연결이 되지 않아 인식할 수 없는 상태이기 때문입니다. 반면 두번째의 「여기를 클릭해보세요」 문구를 클릭했을 때 체크박스에 체크가 되는것을 확인하실 수 있습니다. 원리는 <label> 태그에는 for를, <input> 태그에는 id를 사용해 그 값을 똑같이 입력해주는 것입니다. 이렇게 연결해놓으면 체크박스를 클릭해 체크해도 되고 텍스트를 클릭해도 동작하게 되므로 사용자 입장에서는 훨씬 사용이 수월해집니다. 여러분들도 본인인증 과정에서 그 작디작은 체크박스를 정확히 터치하는 것보다는 그냥 텍스트까지 터치해도 체크가 되면 스트레스를 조금이나마 덜 받지 않겠습니까? 이것이 바로 라벨태그의 사용 이유입니다.

 

<label> + <input> 태그 사용법

위의 예시에서 보여드린 방법은 명시적 작성(마크업) 방식이라고 합니다. label과 input을 부모자식 관계로 두지 않고 평등하게 마크업하여 for와 id로 연결한 방식입니다. 아래의 예시를 살펴보겠습니다.

 

See the Pen HTML <label> + <input> 2 by rgy0409 (@rgy0409) on CodePen.

여기에서 첫번째가 바로 명시적 작성법이라고 할 수 있겠습니다. 오늘날의 대부분 입력 플랫폼에서는 명시적 방법을 가장 많이 사용합니다. 이유는 오래된 플랫폼에서도 사용 가능한 방식이기 때문입니다. 두번째는 암시적 작성 방식이라고 합니다. 특징이라고 한다면 for와 id를 굳이 연결하지 않아도 된다는 부분입니다. 왜냐하면 <label>태그가 <input>태그를 감싸고 있기에 마치 명시적 작성 방식과 결과는 똑같이 작동하기 때문입니다. 사실 암시적 작성 방식이 개발자 입장에서 가장 쉽고 직관적인 태그 마크업 방식일 것입니다. 유지보수할때도 용이하구요. for와 id를 굳이 찾지 않아도 되기 때문이죠. 최근에는 암시적 작성 방식이 많이 늘고 있습니다. 어차피 HTML도 버전이 5까지 나온데다 CSS도 3까지 나왔기에 암시적 작성 방식의 구버전은 점점 잊혀져 가고 있는 상태니까요. 익스플로러도 단종되었으니 더욱 그렇습니다. 끝.

공유하기

facebook twitter kakaoTalk kakaostory naver band