HTML5에서의 form 태그

input type 속성의 추가

• 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>

form 속성

• autocomplete = "on"
  브라우저의 자동완성 기능 켜기
  기본값은 off 꺼져있다.
  form 속성 안에 사용하면 form 태그 안에 있는 모든 입력값을 자동완성 시켜줄 수 있다. 하지만 일부 입력값(예 : 비밀번호)의 경우 자동완성을 시켜주고 싶지 않을 때는 input 태그의 속성 안에 개별적으로 autocomplete = "off"를 입력해주면 된다.

form에서 입력값 체크

• input 태그의 속성 - email, number, url 등으로 입력값에 제한을 주어 체크할 수 있다.
• input 태그의 속성 - required를 통해 필수적 입력을 설정할 수 있다.
• input 태그의 속성 - pattern을 통해 입력값을 체크할 수 있다.

Pattern = "정규표현식"

pattern은 input의 속성 중 하나로 pattern의 속성으로는 정규표현식이 오도록 약속되어있다.

• [a-zA-z] : 알파벳 대소문자 하나를 의미
• . : 모든 문자 하나를 의미
• .+ : 모든 문자 하나이상을 의미
• [0-9] : 숫자하나를 의미

pattern 예시

<input type ="text" name = "id" pattern="[a-zA-z].+[0-9]"
->맨앞에는 알파벳대소문자하나가오고 그 뒤에 모든문자 하나이상이 오고 마지막으로는 숫자로 끝나야한다.

HTML 입력값 체크 주의사항

HTML의 유효성 검사로는 완전한 보안으로 검사가 불가능하다. 즉, 어떤 방법을 통하면 유효성검사에 부합하지 않는 값이 서버로 전송될 수 있다는 것이다. 그래서 서버에서 값을 받을 때 더 엄격한 검사를 통해 값을 받아들여야한다.