HTML / input / date, time / 날짜, 시간 입력하는 양식

input type="date"

type이 date인 input은 날짜를 입력받기 위한 양식입니다. 웹브라우저마다 표현 방식은 다르고, IE가 지원하지 않는다는 단점이 있지만, 스크립트를 사용하지 않고 날짜 형식만 입력 받을 수 있습니다.

문법

<input type="date" value="xxx" min="yyy" max="zzz">
  • value : 선택 항목으로, 기본 날짜를 정합니다.
  • min : 선택 항목으로, 입력 가능한 가장 빠른 날짜입니다.
  • max : 선택 항목으로, 입력 가능한 가장 늦은 날짜입니다.

예제 1

  • 날짜를 입력 받는, 선택 항목이 없는 가장 간단항 양식입니다.
<!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>
      <p><input type="date"></p>
      <p><input type="submit" value="Submit"></p>
    </form>
  </body>
</html>
  • Edge라면 다음처럼 나옵니다.

  • 양식을 선택하면 다음처럼 날짜를 선택하도록 합니다.

  • 크롬이라면 다음처럼 나옵니다.

예제 2

  • 2019년 9월 22일을 기본값으로 하는 예제입니다.
<!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>
      <p><input type="date" value="2019-09-22"></p>
      <p><input type="submit" value="Submit"></p>
    </form>
  </body>
</html>

예제 3

  • 2019년 9월 10일부터 2019년 9월 25일까지만 입력할 수 있는 양식입니다.
<!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>
      <p><input type="date" value="2019-09-22" min="2019-09-10" max="2019-09-25"></p>
      <p><input type="submit" value="Submit"></p>
    </form>
  </body>
</html>

input type="time"

type이 time인 input은 시간을 입력받기 위한 양식입니다.

문법

<input type="time" value="xxx" min="yyy" max="zzz">
  • value : 선택 항목으로, 기본 시간을 정합니다.
  • min : 선택 항목으로, 입력 가능한 가장 빠른 시간입니다.
  • max : 선택 항목으로, 입력 가능한 가장 늦은 시간입니다.

예제 1

  • 시간을 입력 받는, 선택 항목이 없는 가장 간단항 양식입니다.
<!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>
      <p><input type="time"></p>
      <p><input type="submit" value="Submit"></p>
    </form>
  </body>
</html>
  • Edge라면 다음처럼 나옵니다.

  • 양식을 선택하면 다음처럼 시간을 선택하도록 합니다.

  • 크롬이라면 다음처럼 나옵니다.

예제 2

기본값과 입력 가능한 시간 범위를 정한 예제입니다.

<!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>
      <p><input type="time" value="13:10:20" min="13:00:00" max="15:00:00"></p>
      <p><input type="submit" value="Submit"></p>
    </form>
  </body>
</html>