label 태그의 이것,저것 쓰임새(사용법)
얼마전까지도 웹표준이라는 말이 나오기전에는 label태그는 크게 사랑받지 못했었습니다.
'이거 뭐 보이지도 않는 태그인데 굳이 써서 뭐가 도움이 되겠어' 하는 투로..경시한 태그죠..
하지만 좀 더 웹표준화가 입에 오르면서 웹페이지는 태그의 의미와 쓰임새가 중요하게 되었습니다.
웹페이지(홈페이지)를 사용할때 시각 장애인은 링크를 이동할때나 입력항목이 나올때 'Tab'키를 눌러 이동합니다.
이동시 그 항목이 무슨 항목인지 어떤 입력사항이 필요한지를 시각 장애인에게 알려줘야 하는 것입니다.
그렇다면 label태그의 사용법에 대해 알아 봅시다.
우리가 많이 보는 아이디 입력창을 예로들면...아래와 같다.
이것을 html로 코딩해보면...
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>아이디 입력</title>
</head>
<body>
<label> 아이디 : <input type="text" id="id"></label>
</body>
</html>
비밀번호 란도 만들어 보면...
여기서는 아이디와 비밀번호등을 묶어서 코딩을 하려면 ul태그로 묶어주는 것이 좋습니다.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>아이디,비밀번호 입력</title>
</head>
<body>
<ul>
<li><label> 아이디 : <input type="text" id="id"></label></li>
<li><label> 비밀번호 : <input type="password" id="pwd"></label></li>
<li><label> 비밀번호 확인 : <input type="password" id="pwd_ok"></label></li>
</ul>
</body>
</html>
결과물
물론 실제적으로 적용하려면 form태그로 감싸줘야 하며 css를 통해서 블릿을 없애줘야 합니다.
이런 폼에서 label태그를 사용하는 또다른 큰 이유는 라디오버튼 및 체크박스를 선택할 때
텍스트를 선택해도 선택할 수 있게 해주는 것입니다.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> 라디오버튼, 체크박스</title>
</head>
<body>
<fieldset>
<legend> 제 2 외국어 </legend>
<ul>
<li><label><input type="radio" id="language" name="language" value="english"> 영어 </label></li>
<li><label><input type="radio" id="language" name="language" value="japanese"> 일본어 </label></li>
<li><label><input type="radio" id="language" name="language" value="chinese"> 중국어 </label></li>
</ul>
</fieldset>
</body>
</html>
이렇게 결과물이 나옵니다. 텍스트를 클릭해도 선택이 된다는 것을 알 수 있습니다.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> 라디오버튼, 체크박스</title>
</head>
<body>
<fieldset>
<legend> 제 2 외국어 </legend>
<ul>
<li><label><input type="checkbox" id="language" name="language" value="english"> 영어 </label></li>
<li><label><input type="checkbox" id="language" name="language" value="japanese"> 일본어 </label></li>
<li><label><input type="checkbox" id="language" name="language" value="chinese"> 중국어 </label></li>
</ul>
</fieldset>
</body>
</html>
이렇게 실질적으로 label의 쓰임새를 확인해 볼 수 있었습니다~
댓글 없음:
댓글 쓰기