HTML / input / date, time / 날짜, 시간 입력하는 양식
input type="date"
type이 date인 input은 날짜를 입력받기 위한 양식입니다. 웹브라우저마다 표현 방식은 다르고, IE가 지원하지 않는다는 단점이 있지만, 스크립트를 사용하지 않고 날짜 형식만 입력 받을 수 있습니다.
문법
|
1 |
<input type="date" value="xxx" min="yyy" max="zzz"> |
- value : 선택 항목으로, 기본 날짜를 정합니다.
- min : 선택 항목으로, 입력 가능한 가장 빠른 날짜입니다.
- max : 선택 항목으로, 입력 가능한 가장 늦은 날짜입니다.
예제 1
- 날짜를 입력 받는, 선택 항목이 없는 가장 간단항 양식입니다.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!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일을 기본값으로 하는 예제입니다.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!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일까지만 입력할 수 있는 양식입니다.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!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은 시간을 입력받기 위한 양식입니다.
문법
|
1 |
<input type="time" value="xxx" min="yyy" max="zzz"> |
- value : 선택 항목으로, 기본 시간을 정합니다.
- min : 선택 항목으로, 입력 가능한 가장 빠른 시간입니다.
- max : 선택 항목으로, 입력 가능한 가장 늦은 시간입니다.
예제 1
- 시간을 입력 받는, 선택 항목이 없는 가장 간단항 양식입니다.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!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
기본값과 입력 가능한 시간 범위를 정한 예제입니다.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!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> |
