티스토리 뷰
이번 시간에는 label이라는 것을 배워보도록 합시다.
파일을 form_label.html을 만들어 보도록 합시다.
form_text.html 화일을 이용해서 copy & paste를 해서 화일명만 바꿔서 사용합니다.
<label>이라는 태그는 폼태그의 이름을 지정하는 태그입니다.
사용하는 방법은 2가지가 있는데, 첫번째는 label의 속성인 for와 id값을 이용해서 사용하는 것입니다.
label태그의 for="A"와 이름을 지정하려는 태그 input id="A"를 같은 값으로 묶어줍니다.
두번째는 이름을 지정하려는 input태그를 label태그로 감싸줍니다.
label태그의 자체적으로는 아무런 기능이 없지만 해당하는 UI 중 아무거나 클리기해도 해당 필드에 포커스가 이동하며, 제목을 부여함으로써 가독성 및 정보로서의 가치를 높여주고 사용성도 증대할 수 있습니다.
<html>
<body>
<form action="">
<p>
<label for="id_txt">text</label> :
<input id="id_txt" type="text" name="id" value="default value">
</p>
<p>
<label for="password">password</label> :
<input id="password" type="password" name="pwd" value="default value">
</p>
<p>
<label>textarea :
<textarea rows="2">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>
'방과후 > HTML' 카테고리의 다른 글
| HTML - form : 파일업로드 (0) | 2017.09.11 |
|---|---|
| HTML - form : method (0) | 2017.09.11 |
| HTML - form : hidden (0) | 2017.09.08 |
| HTML - form : button (0) | 2017.09.08 |
| HTML - form : radio, checkbox (0) | 2017.09.06 |