프론트엔드 로드맵 9 HTML 폼 유효성 검사

<Form 요소>

form 요소는 웹 페이지에서 사용자가 입력한 데이터를 서버로 전송할 수 있다. 

 

<form action="처리할 페이지 주소" method="get (또는) post"></form>

**action 속성 : 입력받은 데이터를 처리할 서버 상의 스크립트 파일의 주소를 명시. 해당 주소로 전달된 데이터를 처리하는 스크립트 파일을 폼 핸들러(form-handler)라고 한다.

**method 속성 : action에 명시된 위치로 데이터를 서버에 전달되는 방식을 결정하는 것.

  - get : 이 방식은 주소에 데이터를 추가해 전달한다. 따라서 데이터가 주소 입력창에 그대로 나타나 보안성이 취약하고, 데이터 크기 또한 제한적. 검색 엔진의 쿼리(query)와 같이 크기가 작고 중요도가 떨어지는 정보를 보낼 때 주로 사용.

  -post : 이 방식은 데이터를 별도로 첨부해 전달한다. 보안성 및 활용성이 GET보다 높다.

 

<input 요소>

HTML에서 사용하는 대표적인 input 요소에는 - text, password, radio, checkbox, file, select, textarea, button, submit, fieldset 등이 있다.

 * fieldset - form 요소와 관련 데이터들을 하나로 묶어주는 역할. legend - fieldset 요소의 제목

 

<HTML5에 추가된 input 요소>

**datalist : input 요소에 대해 미리 정의된 옵션 리스트 명시하는 요소. (list 속성값-datalist id값이 반드시 일치)

  - 사파리, 익스플로러9 및 그 이하 버전은 지원 불가

<form action="example.php">   <input list="lecture" name="lecture">     <datalist id="lectures">       <option value="HTML">       <option value="HTML">       <option value="HTML">       <option value="HTML">     </datalist>   <input type="submit" value="전송"> </form>

**keygen : 사용자가 입력한 데이터를 암호화하여 서버로 전송. 서버는 암호화된 키(key)를 가지고 사용자 인증을 수행.

 - 익스플로러 지원 불가

 

**output : 스크립트에서 실행된 계산 결과를 바로 보여주는 요소

 - 익스플로러 지원 불가

 

이외에 input 요소 : number(숫자 입력), range(범위 지정), color, date, time, datetime-local, month, week, email, url, tel, search

 

<input 요소 속성>

value, readonly, disabled, maxlength, size

 

<HTML5 form 요소 속성> 
autocomplete :
form 요소나 input 요소에 입력된 정보를 자동 저장할 지에 대한 여부. 값이 on으로 설정되면 브라우저는 사용자가 입력하는 정보를 자동으로 저장. (input - text, search, url, tel, email, password, datepickers, range, color 사용)

novalidate :
입력한 정보(data)를 전송할 때, 그 정보의 유효성 검사에 대한 여부.
url이나 email과 같은 input 타입에 이 속성을 넣으면 유효성 검사를 하지 않는다.
이 속성이 사용된 form 요소는 서버에서 반드시 유효성 검사를 실시해야 함.

autofocus : 웹페이지 로드될 때 속성이 적용된 input 요소에 자동으로 포커스가 가도록 한다.

form : form 요소가 둘 이상일 경우 id 속성값 연결 가능

formaction : 입력한 정보를 전송할 때 전달될 서버 측 파일을 명시. input - submit, image 사용 가능

formaenctype : 입력한 정보를 전송할 때 암호화 하는 방법
form - method, post / input - submit, image 사용 가능

formmethod : http 메소드를 설명함.

height.width 속성 :  image에서 각각 높이와 너비를 명시.

 

참고 사이트 :
http://www.devkuma.com/books/pages/315

http://tcpschool.com/html/html5_element_inputattr