input type="checkbox"

1 개요
2 문법
3 예제 - 기본
4 예제 - checked
5 예제 - 배열로 값 넘기기

개요

checkbox는 여러 선택지를 제공하고, 사용자가 하나 또는 여러 개의 선택을 할 수 있게 하는 폼 요소입니다.
input 태그의 type="checkbox" 속성을 사용하여 체크박스를 생성합니다.

문법

<input type="checkbox" name="xxx" value="yyy" checked>

name : 전달할 값의 이름입니다.
value : 전달될 값입니다.
checked : 선택된 상태로 만듭니다.

예제 - 기본

Blue 또는 Red를 선택합니다. 둘 다 선택할 수 있습니다.(라디오 버튼은 하나만 선택할 수 있습니다.)
아무것도 선택되지 않은 상태에서 시작합니다.

<!doctype html>
<html lang="ko">
  <head>
  <meta charset="utf-8">
    <title>HTML</title>
    <style>
      * {
        font-size: 16px;
        font-family: Consolas, sans-serif;
      }
    </style>
  </head>
  <body>
    <form method="get" action="form-action.html">
      <p>Color</p>
      <label><input type="checkbox" name="color" value="blue"> Blue</label>
      <label><input type="checkbox" name="color" value="red"> Red</label>
      <p><input type="submit" value="Submit"> <input type="reset" value="Reset"></p>
    </form>
  </body>
</html>

Blue를 체크하고 Submit 버튼을 클릭하면 color의 값으로 blue를 전송합니다.

둘 다 체크하면 color의 값으로 blue와 red를 전송합니다.

예제 - checked

checked를 추가하면 선택된 상태에서 시작합니다.

<!doctype html>
<html lang="ko">
  <head>
  <meta charset="utf-8">
    <title>HTML</title>
    <style>
      * {
        font-size: 16px;
        font-family: Consolas, sans-serif;
      }
    </style>
  </head>
  <body>
    <form method="get" action="form-action.html">
      <p>Color</p>
      <label><input type="checkbox" name="color" value="blue" checked> Blue</label>
      <label><input type="checkbox" name="color" value="red"> Red</label>
      <p><input type="submit" value="Submit"> <input type="reset" value="Reset"></p>
    </form>
  </body>
</html>

예제 - 배열로 값 넘기기

[]를 이용하여 값을 배열로 넘길 수 있습니다.

<?php
  $nb = $_POST[ "nb" ];
  echo implode( ",", $nb );
?>
<!doctype html>
<html lang="ko">
  <head>
  <meta charset="utf-8">
    <title>HTML</title>
    <style>
      * {
        font-size: 16px;
        font-family: Consolas, sans-serif;
      }
    </style>
  </head>
  <body>
    <form method="POST">
      <p><label><input type="checkbox" name="nb[]" value="01"> 01</label></p>
      <p><label><input type="checkbox" name="nb[]" value="02"> 02</label></p>
      <p><label><input type="checkbox" name="nb[]" value="03"> 03</label></p>
      <p><label><input type="checkbox" name="nb[]" value="04"> 04</label></p>
      <p><label><input type="checkbox" name="nb[]" value="05"> 05</label></p>
      <p><input type="submit" value="Submit"></p>
    </form>
  </body>
</html>

HTML / Reference / noscript

noscript 태그는 HTML 문서에서 JavaScript가 비활성화되어 있을 때 표시할 콘텐츠를 지정하는 데 사용됩니다. 사용자의 브라우저가 JavaScript를 지원하지 않거나, JavaScript가 비활성화되어 있는 경우에만 이 태그 내의 콘텐츠가 렌더링됩니다.

HTML / Reference / select

select 태그는 드롭다운 목록을 생성하는 데 사용됩니다. 사용자는 이 드롭다운에서 하나 이상의 옵션을 선택할 수 있습니다. 드롭다운 목록의 내용은 option 태그로 만듭니다.

HTML / Reference / input type="radio"

radio(라디오 버튼)는 사용자가 여러 개의 옵션 중 하나만 선택할 수 있게 하는 폼 요소입니다. input 태그의 type="radio" 속성을 사용하여 라디오 버튼을 생성합니다.

HTML / Reference / address

address는 소유자 또는 작성자의 연락처를 나타내는 태그입니다. body 태그 안에 있으면 문서의 소유자 또는 작성자의 연락처를 나타냅니다. article 태그 안에 있으면 기사의 소유자 또는 작성자의 연락처를 나타냅니다. 기본 모양은 기울임꼴입니다.

HTML / Reference / input type="checkbox"

checkbox는 여러 선택지를 제공하고, 사용자가 하나 또는 여러 개의 선택을 할 수 있게 하는 폼 요소입니다. input 태그의 type="checkbox" 속성을 사용하여 체크박스를 생성합니다.

HTML / Reference / q

q는 인용임을 나타내는 태그입니다. 인용임을 나타내는 태그에는 blockquote와 q가 있는데, blockquote는 블록 요소이고 q는 인라인 요소입니다.

HTML / Reference / input type="time"

type이 time인 input은 시간을 입력 받기 위한 양식입니다. 웹브라우저마다, 같은 웹브라우저라도 버전에 따라 표현 방식이 다릅니다.

HTML / Reference / abbr

abbr은 약자(abbreviation)임을 나타냅니다. title 속성에 약자의 뜻을 넣으면, 마우스를 약자 위에 올렸을 때 그 뜻이 툴팁으로 나옵니다.

HTML / Reference / input type="hidden"

양식은 보통 사용자가 입력한 값을 활용하기 위해 사용합니다. 하지만, 사용자가 접속한 IP 등 사용자가 입력하지 않아도 필요한 값이 있을 수 있습니다. 이러한 값들은 type이 hidden인 input 태그로 만들어서 넘깁니다.

HTML / Reference / input type="date"

type이 date인 input은 날짜를 입력 받기 위한 양식입니다. 웹브라우저마다, 같은 웹브라우저라도 버전에 따라 표현 방식이 다릅니다.