Computer >> 컴퓨터 >  >> 프로그래밍 >> HTML

HTML에서 날짜 필드와 함께 input type 필드를 사용하는 방법

HTML의 <input type="date">는 날짜를 입력받기 위한 전용 입력 필드입니다. 일, 월, 연도를 손쉽게 선택하여 날짜를 입력할 수 있으며, 생년월일, 회원 가입일, 예약일 등 다양한 날짜 정보를 사용자로부터 받을 때 유용하게 활용됩니다.

사용자가 날짜 입력 필드를 클릭하면 달력 형태의 데이트 피커(datepicker)가 자동으로 표시되어, 키보드로 직접 입력하지 않아도 직관적으로 날짜를 선택할 수 있습니다.

참고: input type="date"는 Firefox 및 Internet Explorer에서는 지원되지 않으며, Google Chrome에서 정상적으로 작동합니다. 최신 버전의 Firefox 및 Edge에서도 지원되므로, 프로젝트의 대상 브라우저를 먼저 확인하는 것이 좋습니다.

예제

다음 코드를 실행하면 HTML에서 날짜 필드와 함께 input type 필드를 사용하는 방법을 직접 확인할 수 있습니다. 이 예제에서는 등록일(생년월일)을 입력받는 폼을 구현합니다.

<!DOCTYPE html>
<html>
    <head>
        <title>HTML input date</title>
    </head>

    <body>
        <form action = "" method = "get">
            Enter Registration Date:<br>
            <input type="date" name="birthday"><br>
            <input type="submit" value="Submit">
        </form>
    </body>
</html>

위 예제를 실행하면 'Enter Registration Date'라는 라벨과 함께 날짜 입력 필드가 나타나며, 필드를 클릭하면 달력이 열려 원하는 날짜를 선택할 수 있습니다. 'Submit' 버튼을 누르면 선택한 날짜가 폼 데이터로 함께 전송됩니다.