계속해서 input 타입의 여러 종류에 대해서 살펴보도록 하겠습니다. 이번에는 날짜, 시간과 관련된 태그를 살펴보도록 하겠습니다.
○ type="date" / "month" / "week" : 날짜 입력을 위한 input type
타입 값으로만 보았을 때는 일/월/주를 단일로 입력하는 필드일 것으로 보이지만, 실제로 각 타입에 따라 입력되는 값들은 다음과 같습니다.
- data : yyyy-mm-dd
- month : yyyy-mm
- week : 특정 주를 선택해 표시(yyyy-w)
이 태그는 설명하는 것보다는 직접 태그를 입력하고, 결과를 보는 것이 좋을 것으로 보입니다. 아래 코드를 참고해 주세요.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>날짜 지정 타입 사용예시</h1>
<p><input type="date"></p>
<p><input type="month"></p>
<p><input type="week"></p>
</body>
</html>
날짜 지정 타입 사용예시
○ type="time" / "datetime" / "datetime-local" : 날짜 입력을 위한 input type
시간을 입력하는 input type의 경우도 날짜 입력과 사용 방법은 비슷합니다. 타입 중 "time"은 말 그대로 시간(오전오후/시/분)을 입력하는 타입이고, "datetime"또는 "datetime-local"은 웹 문서를 사용하는 유저의 지역에 맞는 날짜+시간을 함께 입력할 수 있습니다. 역시 예시를 간단하게 살펴보도록 하겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>시간 지정 타입 사용예시</h1>
<p><input type="time"></p>
<p><input type="datetime-local"></p>
</body>
</html>
시간 지정 타입 사용예시
○ 날짜 / 시간 타입에서의 주요 속성
날짜와 시간을 입력하는 input type에서도 사용하는 주요 속성들이 있습니다. 특히 특정 날짜나 시간의 범위를 제한하는 속성이 가장 사용 가능성이 높겠네요.
- min, max : 날짜나 시간의 선택 범위를 제한합니다. 당연히 min 속성 값은 시작 날짜/시간, max는 범위의 마지막 날짜/시간을 지정하게 됩니다.
- step : 스핀 박스를 클릭해 값을 지정할 때, 클릭 1회 당 증감시킬 크기를 지정하게 됩니다.
- value : 기본적으로 표시할 날짜/시간을 미리 설정하게 됩니다.
이 중 날짜 입력 값을 제한하는 예시를 살펴보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>입력기간 제한 예시</h1>
<p><input type="date" value="2023-03-08" min="2023-03-05" max="2023-03-25"></p>
</body>
</html>
입력기간 제한 예시
'Programming > HTML+CSS' 카테고리의 다른 글
| 3. 입력 양식 작성(2) - input 태그 6 (0) | 2023.03.12 |
|---|---|
| 3. 입력 양식 작성(2) - input 태그 5 (0) | 2023.03.10 |
| 3. 입력 양식 작성(2) - input 태그 3 (0) | 2023.03.08 |
| 3. 입력 양식 작성(2) - input 태그 2 (0) | 2023.03.06 |
| 3. 입력 양식 작성(2) - input 태그 1 (0) | 2023.03.06 |
