[HTML] input태그의 다양한 타입들

HTML이 5버전이 나오면서 신규로 추가된 여러 엘리멘트가 있습니다. 

HTML5를 공부하면서 저번에 봤던 것들인데 다시한번 보니까 또 새로워서

오늘은 이중에서 <Input>태그의 재미있는 타입들을 포스팅 해드리려고합니다.

목차는 이렇게 이루어집니다.

1. date time
2. week
3. month
4. date
5. time

Date Time

input의 type으로 datetime-local 이라고 Mark-UP 해주면 다음과 같은 이미지가 나타나게 됩니다.

<input type="datetime-local" />

처음에는 JS를 이용해서 코딩을 했었는데 HTML로 간편하게 표기할 수 있는게 정말 대단한 것 같다고 생각했어요.

datetime-local 은 연도, 월, 일, 시간 모두 나타나 줍니다.

Week

<input type="week" />

Week 타입은 datetime과는 달리 주별로 띄워줍니다. 이름값 잘 하네요 ㅎㅎ.

month

<input type="month" />

month도 이름값 하는군요. 매달 별로 표시해 줍니다.

date

<input type="date" />

date도 이름값 하네요!! ㅋㅋㅋㅋㅋ 애들 이름값 짱 잘하네. date는 날짜를 표시해 줍니다.

time

<input type="time" />

time키워드는 사진이 이상하게 나왔는데.. 사용해보시면 옆에 화살표가 있어서 오전 오후를 조절 가능하고, 시간을 설정할 수 있어요.

Input의 다양한 타입들을 사용해보면서 세상 참 좋아졌다는 걸 느낀 것 같습니다.. 또 다양하게 활용할 수 있을 것 같아서 좋네요..!

※ Input에서 min 과 max, 그리고 value를 통해 조작이 가능합니다.

참고 : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local