HTML (날짜, 시간에 대한 form)

이번에는 날짜, 시간에 대한 폼에 대해서 알아볼려고 합니다.

 

날짜나 시간에 대한 폼 중 익숙하신 것이 예약하실때 예약날짜를 선택하는 폼을 가장 많이 접하셨을 것 입니다.

 

 

대표적인 예시

이런 모습을 많이 보셨을 겁니다. (익숙한 모습)

 

이번에는 여러가지 폼을 한번 적어 볼려고 합니다.

 

1.  date 형식

기본적인 형식은 <input type = "date" name = "이름"> 입니다.

폼의 형태만 보여주는 것이 목적이기 때문에 따로 꾸미지는 않습니다.

 

date 모습

date 타입은 기본적으로 연도-월-일 3가지 시간을 선택하실수 있습니다.

 

2. datetime-local

date를 datetime-local 로 바꾸면 됩니다.

datetime-local 모습

연도 / 월 / 일 / 오전,오후 / 시간 / 분

6가지가 표시 되지만 선택은 date와 똑같이 선택 가능하고 나머지는 직접 칸 마다 선택해서 입력하게 되어있습니다.

3. month

month 모습

month 타입의 모습 입니다.

기본적으로 단어 그대로 연도 / 월 표시만 가능 합니다.

날짜 선택창을 열면 날짜는 다 나오지만 선택할려고하면 모든 날짜가 선택이 되는 해당하는 달만 선택이 됩니다.

4. week

week 모습

week는 연도 / 몇번째 주 만 나타납니다.

날짜를 선택할려면 한주가 선택이 됩니다. 그리고 해당하는 달은 안나오고 몇번째 주만 인지 알려주네요.

5. time

time 모습

time의 모습입니다. 여태까지는 연도는 기본적으로 나왔지만 이번 타입은 오전/오후 여부 시/분 까지만 표시가 됩니다.

 

 

여기까지 html의 시간관련 타입 5가지를 살펴봤습니다. 아무것도 하지않은 기본베이스적인 모습이라 어색할수도 있고 알고있던 모습이 아닐수도 있을겁니다. 여기서 좀 더 추가해주면 아시는 모습이 될 수 있을겁니다.

많이 부족하지만 글 읽어주셔서 감사합니다.