웹 폼

기존에는 자바스크립트를 사용해야 가능했던 것들이 HTML5에서는 쉽게 사용할 수 있다.

HTML5에서 추가된 datetime, time, data등의 인풋 타입 결과를 보기 위해서는 오페라 브라우저를 사용해야한다.
달력생성 - <input type = "datetime" />
주간 단위로만 선택이 가능한 달력 - <input type = "week" />
월간 단위로 선택이 가능한 달력 - <input type = "month" />
시간만 선택할 수 있는 기본 시간폼 - <input type = "time" />

이메일 형식 체크 - <input type = "email" />
URL체크 - <input type = "URL" />       : http:// 존재 여부를 체크한다.
컬러 팔레트를 제공 - <input type = "color" />
검색을 위한 search - <input type = "search" />
특정 숫자값만 입력받고자 할 때 - <input type = "number" />
수치를 제공된 슬라이드 막대에서 선택하도록 해 주는 range - <input type = "range" />
전화번호를 입력받고자 할 때 - <input type = "tell" />       : pattern 속성은 사용자가 아무 값이나 입력하지 못하도록 막아준다. 정규표현식 사용.
기능이 강화된 file - <input type = "file" multiple />       : multiple 속성을 사용하면 한번에 여러 개의 파일을 업로드 할 수 있다.
이미지 파일만 선택할 수 있도록 필터링 - <input type = "file" accept = "image/*" />


인풋 요소에 새로 추가된 속성
placeholder 속성 - <input type = "email" placeholder = "이메일 주소 입력" />

예전에는 안내 문구를 이미지로 제작하거나 임의의 텍스트로 넣어야 했고, 텍스트 필드를 선택하여 포커싱되면 안내문구가 사라지는 효과를 위해 외부의 자바 스크립트까지 동원해야 했지만 placeholder 속성 하나면 간단히 해결된다.

autocomplete 속성 - <input type = "text" autocomplete = "on" />

입력된 정보를 저장하고 다른 페이지에 갔다가 돌아오는 경우에 그 값을 다시 채워 넣는다. 회원가입을 할 때 페이지가 날아가서 처음부터 다시 입력해야하는 경우가 있었을 텐데 autocomplete 속성을 그런 일을 막아 주는 속성이다.

autofocus 속성 - <input type = "text" autofocus="autofocus" /> : 페이지가 로드되면 원하는 인풋 요소에 자동으로 포커싱이 된다.
formaction 속성 - 폼이 데이터를 넘겨줄 페이지를 input 타입선에서 바꾸어 버릴 수 있는 속성이다.
required 속성 - 인풋 요소에 값을 반드시 채워야만 서밋이 작동하도록 한다.