웹개발/html

[html] input 태그의 추가된 속성과 속성값

webvillain 2021. 5. 25. 14:53

[ 추가된 속성 값 ]

추가된 속성 값 내용
pattern 허용하는 입력의 형태를 정규식으로 지정
required 입력양식 제출 전에 반드시 채워져 있어야 함을 표현
readonly 읽기 전용
placeholder 입력 힌트를 보여줌
autofocus 페이지 로드시 자동으로 입력 포커스를 갖음
autocomplete 자동 입력 완성

 

[ 추가된 input 태그의 속성 ]

1. 날짜관련

input type = "datetime" UTC 날짜와 시간 형식을 이용한 컨트롤 창 생성
input type = "datetime-local" 현지 날짜 (년월일) / 시간
input type = "week" YYYY, N번째 주
input type = "month" YYYY MM
input type = "date" YYYY MM DD
input type = "time" 시간

 

2. email

input type = "email" 표준 이메일 주소를 입력받아서 검증하는 컨트롤 창 생성

 

3. url

input type = "url" URL만 입력 받는 컨트롤 창 생성

 

4. search

input type = "search" 검색어 입력 양식 창 생성

 

5. number - min, max

input type = "number" 숫자만 입력 받는 창 생성

 

6. range - min, max, step, value

input type = "range" 2개의 숫자 사이의 숫자 선택 슬라이더 컨트롤 창 생성

 

7. tel

input type = "tel" 전화번호를 입력받아서 검증하는 컨트롤 창 생성

 

8. color

input type = "color" 색상코드 입력 컨으롤 창 생성