티스토리 뷰

[개발]프로그래밍/html5

[html5] input type = time,datetime-local,submit,reset - 시간,날짜와시간,전송,재작성

좋은 블로그 2021. 2. 10. 11:16
1. 개념
input type = time,datetime-local,submit,reset - 시간,날짜와시간,전송,재작성
time 타입 : 시간만을 지정하고자 할 경우에 사용
datetime-local 타입 : 날짜와 시간을 함께 지정하고자 할 경우에 사용

속성

설명

min

날짜와 시간의 최소값 지정

max

날짜와 시간의 최대값 지정

value

화면에 표시할 초기값을 지정
submit 타입 : form 태그에 지정한 서버 프로그램 쪽으로 데이터를 전송
reset 타입 : 폼 안에 있는 모든 정보를 지우고 다시 작성할 수 있도록 초기화 시켜줌
2. 태그
input type = time,datetime-local,submit,reset
html5 코드
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<! DOCTYPE html>
<html lang = "kr" >
<head>
<meta charset = "utf-8" >
<title> 키보드와 하루 </title>
</head>
<body>
<form>
1
<label> time 필드 : </label>
<input type = "time" name = "time_name" min = "10:00" max = "13:00" >
2
<label> datetimelocal 필드 : </label>
<input type = "datetime-local" name = "datetimelocal_name" value = "2021-02-10T09:00" >
3
<label> submit 필드 </label>
<input type = "submit" name = "submit_name" value = "전송" >
4
<label> reset 필드 </label>
<input type = "reset" name = "reset_name" value = "재작성" >
</form>
</body>
</html>
결과 화면
코드 설명
1
<input type = "time" ...... >
time 타입은 시간을 선택할 수 있도록 합니다.
위에서 1번을 보시는 것처럼 왼쪽에는 오전과 오후를 나누고 시간과 분을 선택할 수 있도록 할 수 있습니다
또한 min 값을 10시 ,max 값을 13시로 설정을 해 놓아서 해당 범위를 벗어나 submit을 누르면 오류 알림 메시지가 나옴을 확인하실 수 있습니다.
2
<input type = "datatime-local" ...... >
datetimelocal 타입은 날짜와 함께 시간을 선택을 할 수 있도록 합니다.
2번을 보시면 왼쪽에는 날짜가 나오고 오른쪽에는 시간을 설정할 수 있는 화면이 나오는 것을 확인 하실 수 있습니다.
value는 초기값을 설정할 수 있는데 시간을 입력하고자 할 경우에는 날짜 뒤에 'T'를 입력하고 24시 기준으로 시간을 입력해 주시면 됩니다.
3
<input type = "submit" ...... >
submit 타입은 폼에 저장된 모든 내용을 서버 프로그램으로 전송해주는 역할을 합니다.
4
<input type = "reset" ...... >
reset 타입은 폼 안에 있는 모든 요소에 있는 value 값을 삭제하고 다시 입력할 수 있도록 초기화를 시켜줍니다.
저작자표시

'[개발]프로그래밍 > html5' 카테고리의 다른 글

[html5] autofocus,placeholder - 커서 위치,힌트 표시  (0) 2021.02.16
[html5] input type = image,button,file - 이미지 버튼, 버튼 , 파일 첨부  (0) 2021.02.15
[html5] input type = color,date,month,week - 색상,날짜,월,주  (0) 2021.02.09
[html5] input type = number,range,radio,checkbox - 숫자,슬라이드 막대,라디오,체크박스  (0) 2021.02.08
[html5] input type = search,url,email,tel - 검색,웹주소,메일주소,전화번호  (0) 2021.02.05
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday