[매일 HTML5 공부 09] input요소에 추가된 타입과 속성

※ 클릭시 w3school로 이동 합니다

 

개요

 

폼요소에 포함되는 Input Tag는 ~

HTML5에서 많은 타입과 속성들이 추가되어 기존에 자바스크립트로 처리했던 부분을 보다 간단하게 처리할수 있게 되었다.

그러나 웹브라우저마다 지원여부가 틀리기때문에 사용하기 전에 꼭 브라우저 지원상태를 체크해봐야겠다.

 

기존 TYPE

 

text , password, checkbox, radio, file, submit, reset, button, image, hidden

 

신규 TYPE

 

타입	설명
search	text 타입과 구별하여 표시하기 위한 타입 줄바꿈을 포함한 문자열일경우 줄바꿈 제거    브라우저별지원상태
tel	전화번호 입력 줄바꿈을 포함한 문자열일경우 줄바꿈 제거    브라우저별지원상태
url	URL 입력 절대경로 URL만 가능하다. 줄바꿈을 포함한 문자열일경우 줄바꿈 제거    브라우저별지원상태
email	이메일 주소 입력    브라우저별지원상태
date	날짜 입력    브라우저별지원상태
month	연월 값 입력    브라우저별지원상태
week	주 입력 브라우저별지원상태
datetime	날짜와시간 타임존을 UTC로 설정하기 때문에 한국 시각과 비교하면 9시간이 늦음    브라우저별지원상태
datetime-local	타임존이 없는 날짜와 시간    브라우저별지원상태
namber	숫자 입력    브라우저별지원상태
range	숫자 범위 입력    브라우저별지원상태
color	색상 입력    브라우저별지원상태

 

기존 속성

 

readlonly, size, maxlength, multiple, min, max , disabled, name

 

신규 속성

 

속성	설명
autocomplete	자동완성 기능을 사용할 것인지 결정     브라우저별지원상태
list	직접 입력 후보 값을 제공     브라우저별지원상태
required	필수 속성인지 체크하는 논리속성     브라우저별지원상태
patten	입력값의 정규 표현식      브라우저별지원상태
step	값의 단위 지정     브라우저별지원상태
placeholder	어떤 값을 입력하는지 알리는 힌트      브라우저별지원상태
autofocus	로딩시 바로 폼 콘트롤로 포커스로 이동하는 논리 속성    브라우저별지원상태
form	input요소가 나타내는 form 요소와 연결    브라우저별지원상태