본문 바로가기

FrontEnd/HTML

#8-2. HTML input 요소 :: 날짜, 시간 관련 입력

반응형

# 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에 있는 글을 토대로 공부한 내용입니다.
반응형