# HTML에서 사용되는 다양한 input 요소들을 살펴봅니다.
# 날짜 입력(date), 시간 입력(time), 날짜와 시간 입력(datetime-local), 연도와 월 입력(month), 연도와 주 입력(week)
# tag 목록을 볼 수 있는 페이지로 이동합니다.
# 비전공자가 이해한 HTML
HTML input 요소 :: 날짜, 시간 관련 입력
1) 날짜 입력(date)
<input>태그의 type 속성값을 "date"로 설정하면, input요소는 사용자가 날짜를 입력할 수 있도록 합니다.
브라우저의 지원 여부에 따라 날짜를 선택하기 위한 캘린더를 보여줍니다.
<input type="date" name="startday">
2) 시간 입력(time)
<input>태그의 type 속성값을 "time"으로 설정하면, input요소는 사용자가 시간를 입력할 수 있도록 합니다.
브라우저의 지원 여부에 따라 시간을 선택하기 위한 도구를 보여줍니다.
<input type="time" name="birthtime">
3) 날짜와 시간 입력(datetime-local)
<input>태그의 type 속성값을 "datetime-local"로 설정하면, input요소는 사용자가 날짜와 시간를 입력할 수 있도록 합니다.
브라우저의 지원 여부에 따라 날짜을 선택하기 위한 캘린더와 시간을 선택하기 위한 도구를 보여줍니다.
<input type="datetime-local" name="starttime">
4) 연도와 월 입력(month)
<input>태그의 type 속성값을 "month"로 설정하면, input요소는 사용자가 연도와 월을 입력할 수 있도록 합니다.
브라우저의 지원 여부에 따라 연도와 월을 선택하기 위한 캘린더를 보여줍니다.
<input type="month" name="birthmoon">
5) 연도와 주 입력(week)
<input>태그의 type 속성값을 "week"로 설정하면, input요소는 사용자가 연도와 몇 번째 주인지를 입력할 수 있도록 합니다.
브라우저의 지원 여부에 따라 연도와 주를 선택하기 위한 캘린더를 보여줍니다.
<input type="week" name="nthweek">
해당 글은 TCP School에 있는 글을 토대로 공부한 내용입니다.
'FrontEnd > HTML' 카테고리의 다른 글
#8-3. HTML input 요소 :: 이메일, URL, 전화번호, 검색어 입력 (0) | 2021.07.19 |
---|---|
#8-1. HTML input 요소 :: 숫자 입력, 입력 범위 지정, 색상 입력 (0) | 2021.07.19 |
#7. HTML5에서 추가된 다양한 타입의 input 요소 (0) | 2021.07.19 |
#6-3. HTML input 요소의 속성 변경하기 (0) | 2021.07.16 |
#6-2. HTML input 요소를 사용해 입력받기 (0) | 2021.07.16 |