지난 포스트에서는 input type 속성 중에 hidden에 대해서 배웠습니다.
이번에는 매우 작은 영역을 클릭해야 할 때 유용한 label 태그에 대해서 공부해보겠습니다.
지난 포스트
클릭하기 편하게 묶어주는 label 태그
form_label.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="http://localhost/login.php">
<p>
<label for="id_txt">아이디 :</label>
<input id="id_txt" type="text" name="id" value="default value">
</p>
<p>
<label for="pw">비밀번호 :</label>
<input id="pw" type="password" name="pwd">
</p>
<input type="submit">
<p>
<label>textarea :
<textarea cols="50" rows="5">default value</textarea>
</label>
</p>
<p>
<label>
<input type="checkbox" name="color" value="red"> 레드
</label>
<label for="color_blue">
<input id="color_blue" type="checkbox" name="color" value="blue"> 블루
</label>
</p>
</form>
</body>
</html>
label.. 라벨이라고도 읽지만, 현지 발음으로 레이블인 label은 '표시, 상표'라는 뜻이 있는 단어입니다.
label 태그는 매우 작은 영역(체크박스나 라디오 버튼)을 클릭해야 할 때 사용합니다.
체크박스와 텍스트를 하나의 레이블로 묶으면 텍스트를 클릭해도 체크박스에 체크가 됩니다.
레이블을 지정하는 방법은 두 가지가 있습니다.
input에 id를 지정해서 lable for="" 안에 id를 넣어주는 방법과, input을 <label></label>로 통째로 묶어주는 방법입니다.
이렇게 하면 웹사이트의 사용자도 작은 영역을 클릭해야 할 때 범위가 넓어서 편리해지고, 웹사이트 자체의 정보 전달에도 좋은 영향을 미칠 것 같네요.
다음 포스트
댓글 쓰기
1. 댓글은 블로그 운영자의 승인 후에 블로그에 표시됩니다.
2. 가능하면 비로그인 방문자 분께서는 익명보다 이름/URL로 댓글을 남겨주시면 감사하겠습니다. (URL은 생략 가능합니다.)
3. 구글 블로그에 댓글을 쓰고 '게시' 버튼을 클릭했을 때 가끔 에러가 발생해서 댓글이 날아가는 이슈가 있습니다.
혹시 장문의 댓글을 남기실 분들은 혹시 모를 에러를 대비해 '게시' 버튼 클릭 전에 댓글을 복사해두세요.