number
숫자를 강제로 입력하게 하는 속성이다. 모바일에서 보면 숫자를 입력하기 편하도록 숫자 키패드가 나온다.
예시
<input type = "number" name = "numberv" min ="10" max"15">
date
연도-월-일 을 입력하라는 조건
예시
<input type = "date" name = "datev">
month
년 월 을 입력하라는 조건
예시
<input type = "month" name = "monthv">
time
연도와 시간을 입력하라는 조건
예시
<input type = "time" name = "timev">
email
이메일을 입력하라는 조건
예시
<input type = "email" name = "emailv">
search
모양은 text 속성과 같지만 검색할 때 쓰인다는 정보를 제공해준다.
예시
<input type = "search" name = "searchv">
tel
전화번호를 입력하라는 조건
예시
<input type = "tel" name = "telv">
url
url을 입력하라는 조건
예시
<input type = "url" name = "urlv">
range
슬라이드가 생성되면서 min와 max를 설정하면 최소 최대치고 정할 수 있다.
예시
<input type = "range" name = "rangev" min = "0" max = "10">
placeholder
text 상자 안에 어떤 값을 입력하라고 알려줄 수 있는 속성
예시
<input type = "text" name = "id" placeholder = "id를 입력해주세요">
autofocus
웹 페이지 실행 시 자동으로 커서가 위치하게 하는 속성
예시
<input type = "text" name = "id" placeholder = "id를 입력해주세요" autofocus>
pattern은 input의 속성 중 하나로 pattern의 속성으로는 정규표현식이 오도록 약속되어있다.
pattern 예시
<input type ="text" name = "id" pattern="[a-zA-z].+[0-9]"
->맨앞에는 알파벳대소문자하나가오고 그 뒤에 모든문자 하나이상이 오고 마지막으로는 숫자로 끝나야한다.
HTML의 유효성 검사로는 완전한 보안으로 검사가 불가능하다. 즉, 어떤 방법을 통하면 유효성검사에 부합하지 않는 값이 서버로 전송될 수 있다는 것이다. 그래서 서버에서 값을 받을 때 더 엄격한 검사를 통해 값을 받아들여야한다.