[HTML] html5 ( 입력양식 / 속성들 / 입력 값 체크 )

html5 ( 입력양식 / 속성들 / 입력 값 체크 )에 대해서 정리한다.

HTML5

입력양식

  - input에 대한 type이 다양하게 추가 되었다.

  - color, date , datetime, datetime-local, email, month, number, ...

  - 사용자에게 어떠한 입력을 강제할 수 있는 기능, 모바일 디바이스에서의 입력환경 지원, ...

( <input> 태그에서 number 타입을 이용해서 숫자에 대한 입력만을 받고 

범위를 넘거나 문자를 입력하려는 부분을 강제적으로 제한 시킬 수 있다 )

( 년월일에 대한 날짜 정보 전체를 입력 받고 싶다면 date 타입을 사용하면 되고

'2017-09-05' 형태로 입력을 받는다 )

( month는 년월일중에 일을 제외한 부분을 입력 받고 받는 방식은 date 타입과 같고

'2017-09' 형태로 입력을 받는다 )

( week 타입을 이용해서 입력을 받게 되면 '2017-W36'이라는 식으로 입력값이 받아지고 

해당 년에 대해 몇번째 주인지를 알려준다 )

( 화살표를 통해 오전, 오후를 입력받고 거기에 대한 시간을 직접 입력 받는다 )

( email은 모바일에서 @가 들어있는 키패드가 나오게 되고 이메일 형식인 @를 체크하여 

사용자가 이메일 형식으로 입력이 되었는지를 확인한다 )

( search 타입은 시각적으로 text 타입과 별 다를거 없어보이지만 검색을 하는 창이라는걸 명확하게 나타내주고 

예를 들면 시각장애인이 인터넷을 사용할때 검색창이 어딘지를 찾게해주는 용도로도 사용이 된다고 한다 )

( tel 타입은 모바일로 확인했을때 사용자가 입력을 하려고 하면 바로 숫자 키패드가 나오게 되는걸 확인할 수 있다 ) 

( url 형식으로 입력이 되지 않으면 경고 말풍선이 출력이 되고 

모바일에서 확인을 하면 url을 입력할 수 있도록 영문 키패드가 나오게 된다 )

( range 타입을 이용할때는 min 속성과 max 속성을 지정해줘서 현재 위치에 대한 값을 사용자로부터 입력 받는다.. )

입력양식의 속성들

  - <form> 태그에서 autocomplete 속성을 이용하면 자동완성 기능을 지원한다.

     ( 해당 <input> 태그 안에서 autocomplete="off"를 이용하면 해당 태그만 자동완성 기능을 사용하지 않을수 있다 )

  - placeholder 기능을 이용해서 사용자에게 해당 <input>에 입력받을 값을 알려줄 수 있다.

( autocomplete 속성을 이용해서 form이나 input에 대한 자동완성 기능을 제공하거나 해당 부분만 기능을 끌 수 있고

placeholder 기능을 이용해서 해당 입력창에 어떤 입력을 해야하는지를 사용자에게 미리 알려줄 수 있다 )

( autofoucs를 이용하면 웹 페이지에 접속했을때 바로 해당 입력창으로 포커스가 이동해서 

사용자가 바로 입력할 수 있는 기능이다 )

입력 값 체크

  - email 타입에서 이메일 형식을 입력하지 않았을때 체크되는 것도 폼에 대한 입력 값 체크라 할 수 있다.

  - require 속성을 이용해서 해당 input에 대해서 필수적으로 입력이 되도록 할 수 있다.

  - pattern 속성을 이용할때는 그 안에는 항상 정규표현식이 들어간다.

     ( pattern 속성에 속성값은 무조건 정규표현식이 들어가는건 하나의 약속이다 )

( require 속성을 통해서 사용자에게 해당 입력 창에 대한 입력을 필수적으로 입력할 수 있도록 강제할 수 있다 )

( pattern 속성을 이용해서 사용자 입력에 대한 값을 체크할 수 있고 

pattern 속성을 이용할때 속성값은 항상 정규표현식이 들어가야한다 )

    * 정규표현식에 대한 내용은 https://opentutorials.org/course/909/5142에서 자세히 알아볼 수 있다.

    * html에서 form validation을 보안적인 측면에서는 너무 신뢰하면 안되고 

     항상 서버쪽에서 제대로된 검증을 해줘야 한다.