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>

Related Posts

HTML / placeholder / 양식에 안내 문구 추가하기

HTML / placeholder / 양식에 안내 문구 추가하기

value input 태그에 value를 이용해서 기본값을 만들 수 있습니다. 이 상태에서 버튼을 클릭하면 기본값이 전송됩니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> <style> * { font-size: 16px; ...

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

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

input type="date" type이 date인 input은 날짜를 입력받기 위한 양식입니다. 웹브라우저마다 표현 방식은 다르고, IE가 지원하지 않는다는 단점이 있지만, 스크립트를 사용하지 않고 날짜 형식만 입력 받을 수 있습니다. 문법 <input type="date" value="xxx" min="yyy" max="zzz"> value : 선택 항목으로, 기본 날짜를 정합니다. min : 선택 항목으로, 입력 가능한 가장 빠른 날짜입니다. max : 선택 항목으로, 입력 가능한 가장 ...

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

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

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

HTML / progress - 진행 정도 나타내는 바 만드는 태그

HTML / progress - 진행 정도 나타내는 바 만드는 태그

progress progress는 진행 정도 나타내는 바를 만드는 태그입니다. HTML5에서 추가되었습니다. IE는 버전 10부터 지원합니다. 주요 속성은 max, value입니다. max를 전체로 보았을 때 value에 해당하는 정도를 나타냅니다. 예제 1 첫 번째 바는 전체를 100으로 보았을 때 20을 나타냅니다. 두 번째 바는 전체를 200으로 보았을 때 20을 나타냅니다. 웹브라우저마다 표현 방식이 다릅니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> </head> <body> <div> <progress value="20" max="100"></progress> </div> <div> <progress value="20" max="200"></progress> </div> </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 / 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 / img / 이미지 삽입하는 태그

HTML / img / 이미지 삽입하는 태그

img img는 HTML 문서에 이미지를 삽입하는 태그입니다. 주요 속성은 src, alt, width, height, loading입니다. src : 이미지의 경로 alt : 이미지를 표시할 수 없을 때 출력할 내용 width : 이미지의 가로 크기 height : 이미지의 세로 크기 loading : 이미지 로딩 방식 예제 1 width, height 속성을 정하지 않으면 이미지 원본 크기 그대로 나옵니다. 만약 지정한 경로에 이미지가 없다면 alt ...

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"> ... </blockquote> 속성값(value)은 큰 따옴표로 감싸도 ...

HTML / em, strong / 강조하는 텍스트, 중요한 텍스트

HTML / em, strong / 강조하는 텍스트, 중요한 텍스트

em, strong em 태그는 강조하는 텍스트에 사용합니다. 기본 모양은 기울임꼴입니다. strong 태그는 중요한 텍스트에 사용합니다. 기본 모양은 굵은 글자입니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> <style> body { font-size: 64px; } </style> </head> <body> <p>Lorem <em>Ipsum</em> <strong>Dolor</strong>.</p> </body> </html> TIP b 태그는 글자를 굵게 만듭니다. 의미 부여 없이 굵게 만든다는 것이 strong과의 차이점입니다.

HTML / input / radio / 라디오 버튼 만들기

HTML / input / radio / 라디오 버튼 만들기

라디오 버튼 여러 개의 항목 중에서 하나만 선택하도록 하는 동그란 버튼을 라디오 버튼이라고 합니다. 라디오 버튼은 input 태그로 만듭니다. 문법 <input type="radio" name="xxx" value="yyy" checked> name : name의 값이 같은 것 중에서 하나를 선택합니다. value : 선택했을 때 전달될 값입니다. checked : 선택된 상태로 만듭니다. 예제 1 Apple 또는 Banana 중 하나만 선택합니다.(중복 선택이 가능하게 하려면 체크박스를 만드세요.) 아무것도 ...