HTML / label / 폼의 양식에 이름 붙이는 태그

label

  • label은 폼의 양식에 이름 붙이는 태그이다.
  • 주요 속성은 for이다. label의 for의 값과 양식의 id의 값이 같으면 연결된다.
  • label을 클릭하면, 연결된 양식에 입력할 수 있도록 하거나, 체크를 하거나, 체크를 해제한다.

예제

  • input 요소에 label을 붙인 간단한 예제이다.
  • label을 클릭하면 input의 type에 맞게 처리한다.
<!doctype html>
<html lang="ko">
	<head>
	<meta charset="utf-8">
		<title>HTML</title>
	</head>
	<body>
		<p>
			<label for="jb-input-text">Input - Text</label>
			<input type="text" id="jb-input-text">
		</p>
		<p>
			<label for="jb-input-checkbox">Input - Checkbox</label>
			<input type="checkbox" id="jb-input-checkbox">
		</p>
	</body>
</html>

Tip

  • input 등 양식을 label로 감싸면, id와 for가 없이도 같은 결과를 얻을 수 있다.
<!doctype html>
<html lang="ko">
  <head>
  <meta charset="utf-8">
    <title>HTML</title>
  </head>
  <body>
    <p>
      <label>Input - Text
      <input type="text">
      </label>
    </p>
    <p>
      <label>Input - Checkbox
      <input type="checkbox">
      </label>
    </p>
  </body>
</html>
같은 카테고리의 다른 글
HTML / noscript

HTML / noscript

noscript noscript 태그 안의 내용은 스크립트를 지원하는 않는 웹브라우저나 스크립트를 실행하지 않도록 설정한 웹브라우저에서만 출력됩니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML Tag | noscript</title> </head> <body> <script> document.write( '<h1>Your browser supports JavaScript</h1>'); ...

HTML / input / hidden / 입력하지 않은 값을 넘기는 숨겨진 양식

HTML / input / hidden / 입력하지 않은 값을 넘기는 숨겨진 양식

양식은 보통 사용자가 입력한 값을 활용하기 위해 사용한다. 하지만, 사용자가 입력하지 않아도 필요한 값이 있을 수 있다. 사용자가 접속한 IP, 로그인한 상태에서의 계정 정보, 게시물의 답글인 경우 게시물의 ID 등을 예로 들 수 있다. 이러한 값들은 type이 hidden인 input 태그로 만들어서 넘긴다. 다른 type의 input과 마찬가지로 이름은 name, 값은 value로 정한다. 다음은 ...

HTML / label / 폼의 양식에 이름 붙이는 태그

HTML / label / 폼의 양식에 이름 붙이는 태그

label label은 폼의 양식에 이름 붙이는 태그이다. 주요 속성은 for이다. label의 for의 값과 양식의 id의 값이 같으면 연결된다. label을 클릭하면, 연결된 양식에 입력할 수 있도록 하거나, 체크를 하거나, 체크를 해제한다. 예제 input 요소에 label을 붙인 간단한 예제이다. label을 클릭하면 input의 type에 맞게 처리한다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> </head> <body> <p> <label for="jb-input-text">Input - Text</label> <input type="text" id="jb-input-text"> </p> <p> <label for="jb-input-checkbox">Input - Checkbox</label> <input type="checkbox" id="jb-input-checkbox"> </p> </body> </html> Tip input 등 ...

HTML / 문법

HTML / 문법

기본 문법 가장 기본적인 문법은 다음과 같다. <tagname>Contents</tagname> 위 모든 걸 요소(element)라고 한다. <tagname>을 시작 태그, </tagname>을 종료 태그, 둘을 합쳐 태그(tag)라고 한다. Contents는 내용이다. 예를 들어 <p>Lorem</p> 는 p 요소라 하고, 시작 태그는 <p>, 종료 태그는 </p>, 내용은 Lorem이다. 속성 태그는 속성(attribute)을 가질 수 있다. <tagname attribute="value">Contents</tagname> 예를 들어 blockquote에 id 속성(attribute)을 추가하고 값(value)을 abc로 정하고 싶으면 다음과 같이 한다. <blockquote id="abc"> ...

HTML / video / 동영상 삽입하는 태그

HTML / video / 동영상 삽입하는 태그

video video는 HTML 문서에 동영상을 삽입하는 태그이다. HTML 5에서 추가된 것이므로, HTML 5를 지원하지 않는 웹브라우저(예를 들어 IE 8 이하)에서는 작동하지 않는다. 문법 <video autoplay controls loop muted poster="aaa" preload="bbb"> <source src="xxx" type="yyy"> zzz </video> autoplay : 동영상을 자동으로 재생한다. controls : 재생, 정지 등 조작 메뉴를 보여준다. loop : 동영상을 반복 재생한다. poster : 동영상 ...

HTML / abbr - 약자(abbreviation)임을 나타내는 태그

HTML / abbr - 약자(abbreviation)임을 나타내는 태그

abbr abbr은 약자(abbreviation)임을 나타냅니다. 문법 <abbr title="Xxx Yyy Zzz">XYZ</abbr> title 속성에 약자의 뜻을 넣으면, 마우스를 약자 위에 올렸을 때 그 뜻이 툴팁으로 나옵니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML Reference | abbr</title> </head> <body> <p> <abbr title="World ...

HTML / select / 선택할 수 있는 목록을 만드는 태그

HTML / select / 선택할 수 있는 목록을 만드는 태그

select select는 선택할 수 있는 목록을 만들 때 사용한다. 목록의 내용은 option 태그로 만든다. 문법 <select> <option>...</option> <option>...</option> <option>...</option> </select> 속성 select 태그에 사용하는 주요 속성은 다음과 같다. autofocus : 페이지가 로드되었을 때 해당 목록으로 바로 포커스가 맞춰진다. disabled : 화면에는 보이지만 사용할 수 없도록 만든다. multiple : 여러 값을 선택할 수 있도록 한다. name : 이름을 붙인다. size : 목록을 펼치기 전에 ...

HTML / br / 줄바꿈하는 태그

HTML / br / 줄바꿈하는 태그

HTML은 연속한 여러 개의 빈 칸 또는 줄바꿈을 하나의 빈 칸으로 인식한다. 따라서 코드 상에서 줄바꿈을 하거나 여러 번 띄어쓰기를 해도 한 번 띄어쓰기로 표현된다. 만약 블록 요소 안에서 줄바꿈을 하고 싶다면 br 태그를 이용한다. 다음은 br 태그를 이용해서 줄바꿈을 한 예제이다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...

HTML / address - 문서의 소유자, 작성자의 연락처를 나타내는 태그

HTML / address - 문서의 소유자, 작성자의 연락처를 나타내는 태그

address address는 소유자 또는 작성자의 연락처를 나타내는 태그입니다. body 태그 안에 있으면 문서의 소유자 또는 작성자의 연락처를 나타냅니다. article 태그 안에 있으면 기사의 소유자 또는 작성자의 연락처를 나타냅니다. 기본 모양은 기울임꼴입니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> </head> <body> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit ...

HTML / h1, h2, h3, h4, h5, h6, p / 제목과 문단

HTML / h1, h2, h3, h4, h5, h6, p / 제목과 문단

제목 제목(heading)은 h1, h2, h3, h4, h5, h6 태그로 만든다. 문서의 구조와 밀접한 관련이 있으므로 순서에 맞게 사용하는 게 좋다. 문단 문단(paragraph)은 p 태그로 만든다. 문단과 문단 사이는 간격이 크다. 문단 내에서 줄바꿈을 하고 싶다면 br 태그를 이용한다. 예제 1 제목의 기본 모양은 굵은 글자이고, 레벨에 따라 크기가 다르다. h4와 p는 글자 크기가 같다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> </head> <body> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading ...