HTML 5에서 편리해진 form 태그

jsleeg98·2020년 5월 14일
0

HTML

목록 보기
11/11

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

0개의 댓글