html label 태그로 폼 요소의 캡션 만들기
네 안녕하세요, 이번 포스팅에서는 html에서 쓰이는 label 태그를 이용하여 폼 요소의 캡션을 만들어보려고 합니다.
html에서 캡션이란 어떤 표나 그림 등에 대한 설명문입니다.
우리가 프런트엔드나 백엔드 코딩을 할 때 무언가를 설명하기 위해서 주석문을 넣곤 합니다.
그러한 것 처럼 어떤 그림이나 표 등의 시각적인 자료를 넣었을 때 이것이 어떤 것인지를
사용자들에게 알리기 위해서 부가적인 설명문을 붙입니다.
그리고 폼에서는 이러한 캡션과 기타 폼 요소를 한 단위로 묶어서 표현을 하여 문서의 가독성을 높입니다.
그럼 지금부터 같이 한 번 알아보실까요?
1. 캡션 지정 및 캡션과 폼 요소 연결하기 : label 태그와 for 속성 이용
우리가 label 태그를 이용할 때 우리가 만들어낸 것들과 연결을 지어야 제대로 폼 요소들이 돌아가는데,
그럴 때 우리는 for 속성을 사용할 수 있습니다.
우리가 label 속성으로 감싼 내용물에 대하여 속성을 부여하여 캡션과 연결을 지어주는 겁니다.
<label for="loginID">
사용자 ID :
</label>
<input type="text" id="loginID">이런 식으로 속성 값을 주어서 label 태그에 있는 캡션 속성과
input 태그에서 만들어낸 로그인 폼과 연결을 지어줄 수 있습니다.
그럼 간단한 예제를 통하여 같이 보도록 하겠습니다.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>로그인 폼</title>
</head>
<body>
<h3>로그인 폼</h3>
<hr>
<form name="fo" method="get">
<label>사용자 ID : <input type="text" size="15" value=""></label><br>
<label for="pass">비밀번호 : </label>
<input id="pass" tyoe="password" size="15" value="">
<input type="submit" value="완료">
</form>
</body>
</html>요렇게 간단하게 한 번 작성을 해봤습니다.
보시면 label 태그 안에 있는 비밀번호 입력란을 제가 연결을 했습니다.
우리가 늘 보는 로그인 화면은 id가 맞아도 비밀번호가 틀리면 접속이 불가합니다.
그 이유가 바로 이런 식으로 캡션이 연결이 되어있기 때문입니다.
물론 두 개 다 연결을 지어서 할 수도 있지만,
보통은 비밀번호가 제일 중요하기 때문에 비밀번호와 연결을 짓습니다.
그럼 결과 화면을 같이 보도록 하겠습니다.
요런 식으로 우리가 예전에 작성했던 예제와 결과물은 똑같지만,
좀 더 기능이 향상이 된 폼이라 생각하시면 됩니다.
2. 선택한 요소의 캡션을 label 태그로 감싸기
label 태그는 캡션을 연결 지어주는 태그라고 했었습니다.
그렇다면 이 label 태그가 가장 빛을 발하는 분야가 어디일까요?
바로 선택형 요소를 만들 때입니다.
우리가 전에 라디오 버튼과 체크박스를 만들었을 때는 오로지 버튼을 클릭했을 때만 처리가 됐었습니다.
그런데 label 태그를 이용하면 캡션,
다시 말해 설명글을 눌러도 체크표시가 됩니다.
우리가 보통 웹사이트에서 설문조사 등을 하게 되면 버튼을 클릭하는 사람들도 있지만,
그냥 글씨를 누르는 분들도 있습니다.
그래서 그러한 분들도 있기 때문에 다수의 편의를 고려하여 만드는 것이 바람직합니다.
그러면 간단한 예제를 통하여 같이 살펴볼까요?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>캡션을 가진 라디오 버튼</title>
</head>
<body>
<h3>먹고 싶은 거 하나만 선택?(<label>이용)</h3>
<hr>
<form>
<label>
<input type="radio" name="china" value="1">
짜장면<img src="3장media/jajang.png"></label><br>
<input type="radio" name="china" value="2" checked="">
짬뽕<img src="3장media/jjambbong.png"><br>
<input type="radio" name="china" value="3">
탕수육<img src="3장media/tangsuyuk.png">
</form>
</body>
</html>이렇게 한 번 간단하게 예제를 한 번 작성을 해봤습니다.
그럼 결과는 어떻게 나오는지 한 번 보실까요?
이렇게 나옵니다.
일단 결과물은 우리가 전에 작성했던 라디오 버튼을 만들었던 예제와 똑같습니다.
하지만 그 예제와 지금 예제의 차이는 글씨를 눌렀을 때 체크가 되느냐 안되느냐의 차이에 있습니다.
그래서 지금의 결과물이 훨씬 편한 기능을 가지고 있다고 볼 수 있습니다.
지금까지 label 태그를 이용하여 캡션을 연결하는 방법에 대하여 알아보았습니다.
다음 포스팅에서는 폼을 이용하여 색을 입력하는 방법에 대하여 알아보도록 하겠습니다.
긴 글 읽어주신 독자분들께 진심으로 감사합니다 ~
'html, css, 자바스크립트 > html' 카테고리의 다른 글
| html month, week, date, time, datetime-local 속성 이용하여 시간 표현하기 (0) | 2023.03.07 |
|---|---|
| html color 속성 이용하여 색 입력하기 (0) | 2023.03.07 |
| html 폼 만들기 7 - select, option 태그로 콤보박스 만들기 (0) | 2023.03.04 |
| html 폼 만들기 6 - 라디오 버튼 만들기 (0) | 2023.03.04 |
| html 폼 만들기 5 - 체크박스 만들기 (0) | 2023.03.04 |
댓글