HTML5에서 두드러지는 요소 중 하나가 웹 폼입니다. 이메일 주소나 웹 주소, 날짜 등은 손쉽게 입력할 수 있고, HTML4까지는 서버쪽에서 스크립트를 이용해서 체크해야 했던 폼 요소들도 HTML5에서는 모두 마크업으로 처리할 수 있게 되었습니다. 단, 아직까지 브라우저마다 지원하는 내용이 다르기 때문에 HTML5 표준 규약이 완성될 때까지는 브라우저별로 확인해야 합니다.
HTML5는 폼에서 많은 변화가 있습니다. HTML5에서 추가된 것은 무엇이고,수정된 부분은 무엇인지를 살펴보겠습니다.
지금까지는 HTML에서 폼을 만들려면 마크업을 이용해서 텍스트 필드나 단추 같은 폼을 만들고, 자바스크립트를 이용해서 확인 프로그램을 실행해야 했습니다. 하지만 HTML5에서는 폼 만들기가 훨씬 편리해졌습니다. 아직까지 모든 브라우저 에서 HTML5의 폼을 지원하고 있지는못하지만 HTML5 표준 규약이 완성되면 자바스크립트 없이도 편리하게 폼을 사용할 수 있게 될 것입니다.
지금까지 HTML4의 input 태그에서 사용할 수 있었던 필드들은 다음과 같습니다.
| 유형 | 설명 | 코드 |
|---|---|---|
| 텍스트 | 텍스트 입력 | <input type="text"> |
| 패스워드 | 비밀번호 입력 | <input type="password"> |
| 체크박스 | 클릭할때마다 on/off | <input type="checkbox"> |
| 라디오 단추 | 그룹 중에서 한 가지를 선택 | <input type="radio"> |
| 파일 | 파일을 업로드 | <input type="file"> |
| 전송 단추 | 폼에 입력한 값을 전송 | <input type="submit"> |
HTML5에서는 위의 요소들이 그대로 사용되면서 몇 가지 유형이 더 추가되었습니다.
| 유형 | 설명 | 코드 |
|---|---|---|
| 이메일 주소 | 이메일 주소 입력 | <input type="email"> |
| 웹 주소 | 웹사이트 주소 입력 | <input type="url"> |
| 숫자(스핀 박스) | 숫자를 ▲/▼로 눌러 선택 | <input type="number"> |
| 숫자(슬라이드 막대) | 슬라이드 막대로 지정된 범위의 숫자 선택 | <input type="range"> |
| 날짜/시간 등 | 달력에서 날짜를 선택하거나 스핀 박스에서 시간을 선택 | <input type="date"> <input type="datetime"> |
| 검색 상자 | 검색 상자 삽입 | <input type="search"> |
| 색상 선택 | 웹에서 색상을 선택 | <input type="color"> |
HTML5에는 새로운 속성들도 많이 추가되었습니다.
| 속성 | 설명 |
|---|---|
| list | 입력 가능한 값을 가지고 있는 데이터리스트 요소를 가리킴 |
| max와 min | 날짜/시간 및 숫자 값의 유효범위를 지정한 최소값(min)과 최대값(max)을 지정 |
| pattern | 입력값에 제약조건(constrain)을 지정 |
| placeholder | 텍스트 필드에 입력 힌트를 표시 |
이외에도 'valid'와 'invalid', 'required' 같은 슈도 클래스(pseudo class)가 새로 추가되어 브라우저에서 필드에 입력된 값을 직접 체크하고 폼을 전송할 수 있게 되었습니다.
HTML5 폼에 CSS3의 기능을 적용하면 좀더 보기 좋은 형태로 만들 수 있습니다. 만들어진 폼은 개인용 PC뿐만 아니라 모바일 기기에서도 자유롭게 사용할 수 있습니다.
