문의 양식에 제목, 설명 덧붙이는 방법 - 라벨(label)
<label> 태그는 양식에 제목이나 설명을 덧붙이기 위한
것입니다. 라벨(label) 이란 입력창 옆에 'ID' 나 '비밀번호' 처럼 붙여 놓은
텍스트를 말합니다. <label> 태그를 사용하면 폼 요소와 라벨
텍스트가 서로 연결되어 있다는 것을 브라우저가 인식할 수 있습니다.
label
주요 속성은 for 입니다.<label>태그의 for 의 값과
양식의 id 의 값이 같으면 연결됩니다.
label을 클릭하면 연결된 양식에 입력할 수 있도록 하거나 체크를 하거나 체크를
해제합니다.
<table>
<tr>
<label for="user-id">I D </label>
<input type="text" id="user-id">
</tr>
<tr>
<label for="user-name">이 름 </label>
<input type="text" id="user-name">
</tr>
<tr>
<label for="user-email">이메일 </label>
<input type="text" id="user-email">
</tr>
<tr>
<label><input type="checkbox"> 이메일 수신 동의</label>
</tr>
</table>data-height="320"
data-theme-id="light"
data-default-tab="result"
data-user="LiveBlogger"
data-slug-hash="LYbLEoL"
style="height: 320px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"
data-pen-title="html label 예제"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
예제
- input 요소의 for 값과 label 요소의 id 값을 연결한 간단한 예제입니다.
<p>
<label for="input-text">글상자</label>
<input type="text" id="input-text"/>
</p>
<p>
<label for="input-checkbox">체크박스</label>
<input type="checkbox" id="input-checkbox"/>
</p>data-default-tab="html,result"
data-editable="true"
data-preview="true"
data-height="441"
data-pen-title="HTML 폼의 양식에 이름 붙이는 방법 tag label 예제1"
data-slug-hash="vYGbRbW"
data-theme-id="light"
data-user="LiveBlogger"
style="align-items: center; border: 2px solid; box-sizing: border-box; display: flex; height: 441px; justify-content: center; margin: 1em 0px; padding: 1em;"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
Tip
id 와 for 가 없어도 input 요소를
<label> 태그로 감싸면 같은 결과를 얻을 수 있습니다.
<p><label>글상자 <input type="text"></label></p>
<p><label>체크박스 <input type="checkbox"></label></p>data-default-tab="html,result"
data-editable="true"
data-preview="true"
data-height="441"
data-pen-title="HTML 폼의 양식에 이름 붙이는 방법 tag label 예제2"
data-slug-hash="rNePoLe"
data-theme-id="light"
data-user="LiveBlogger"
style="align-items: center; border: 2px solid; box-sizing: border-box; display: flex; height: 441px; justify-content: center; margin: 1em 0px; padding: 1em;"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
문의 양식에 무엇을 입력해야 하는지 안내하는 문구를 넣고 싶다면 placeholder를
사용합니다.
href="https://urliveblogger.blogspot.com/2021/01/html-label.html"
>문의 양식에 안내 문구 넣는 방법 - placeholder>
기타 HTML 참조
>제목 >
>문단 >
>줄바꿈 >
>공백 >
>목록 >
>이미지 >
>동영상 >
>오디오 >
>링크 >
>표 >
- 양식
>인용구 >
>기초 >