반응형
input type="date"에서 입력받을 수 있는 날짜를 제한할 수 있습니다.
먼저 화면 부터 확인해 보겠습니다.
4월 1일부터~4월 15일 까지만 입력을 받을 수 있도록 설정을 하였습니다.
예제는 하기와 같습니다.
<body>
<h1>Input type 날짜 예제</h1>
<li>
<label for="dateType">가입기한:</label>
<input type="date" id="dateType" name="dateType" min="2023-04-01" max="2023-04-15" value="2023-04-02" >
</li>
</body>id 와 name 은 입력란을 구분할 수 있는 속성 값입니다.
min : 입력 가능한 시작 날짜.
max : 입력 가능한 마지막 날짜.
value : 기본으로 보이는 날짜.
min과 max 속성을 사용하면 입력받는 날짜를 제어할 수 있습니다.
여러 상황에 맞게 사용할 수 있는 폼 속성입니다.
추가로 날짜 사이에 간격을 두어 입력받을 수 있도록 설정할 수 도 있습니다.
<input type="date" id="dateType" name="dateType" min="2023-04-01" max="2023-04-30" step="2" value="2023-04-02" >step 속성을 활용하면 날짜 사이 입력 간격이 조정됩니다.
step 속성이 없을 때는 당연히 1일씩 선택할 수 있겠죠.
input type="date"의 min, max, value, step 속성을 사용하여 날짜 입력 값을 제어해보는 예제를 만들어 보았습니다.
감사합니다.
반응형
'앱 만들기 > HTML5 study' 카테고리의 다른 글
| submit 이미지 버튼 만들기 (2) | 2023.04.17 |
|---|---|
| input type="month" 월 제한 하기 (1) | 2023.04.15 |
| Input type 주 입력 (4) | 2023.04.13 |
| Input type 연도, 월 입력 (2) | 2023.04.12 |
| Input type 날짜 입력 (2) | 2023.04.11 |
댓글