[HTML5] 웹 양식(Web Form)의 개선, 폼 태그

웹 양식(Web Form)의 개선
웹 양식을 지원하는 태그를 폼 태그(Form Tag)라 한다
보통 회원가입이나 게시판 글쓰기 같은 UI를 만들 때 사용되는 태그로
input 박스, select 박스, button, checkbox , radio 버턴 등이 있다

이러한 폼 태그는 HTML 문서에서 사용자 입력을 위해 제공되는 양식 태그이다
물론 폼 태그는 HTML5 이전에도 제공되어 왔다. 다만, HTML5 에서는 기존 폼 태그와 더불어 대폭 개선된 형태를 새로 추가하였다

기존 폼 태그는 텍스트, 버턴, 선택박스, 체크박스 등 단순한 형태의 입력 양식만을 제공했지만 HTML5에서는 달력양식, Range 양식, email 등 새롭고 실용적인 양식이 추가 되었으며 입력 보조 수단이나 입력 값 검증 등 기존에는 스크립트에 의존할 수 밖에 없었던 기능적 요소도 폼 태그에 추가 되었다
이러한 향상된 웹 폼을 Web Forms 2.0 이라 한다

이러한 다양하고 실용적인 양식 태그들이 추가됨으로써 좀더 쉽고 빠르게 개발을 할 수 있게 된 것이다

브라우저 지원 현황
아직까지 대부분의 브라우저에서는 모든 폼 태그를 지원하지는 않는 것 같다
각 브라우저가 폼 태그의 부분적인 것을 지원하며 그 부분적인 것은 브라우저마다 조금씩 상이하다
예를 들어 range input 요소의 경우 크롬에서는 지원되지만 파이어폭스에서는 지원되지 않는다

일단 caniuse.com 에서 제공하는 지원표를 보도록 하자

그림1. 브라우저별 새 폼 태그 지원 현황 (출처: http://caniuse.com/)

위의 표에서도 알 수 있듯이 대부분의 브라우저가 부분적으로 새 폼 태그를 지원하고 있다
다만 오페라는 모두 지원한다고 나와 있는데 확인해 볼 일이다

현재 시점에 브라우저 지원현황은 부분적이며 일관적이지도 않아 만족스럽지 못하기는 하다
(브라우저 호환성을 확보하기 힘드니 실 서비스 적용이 꺼려지는 것이다)
그러나 머지 않은 시기에  모든 요소가 지원되지 않을까 하고 기대 해 본다

Google's WebForms2 라이브러리
http://code.google.com/p/webforms2/

HTML5 의 Canvas를 지원하지 않는 IE8 이전 버전을 위해
ExplorerCanvas(http://code.google.com/p/explorercanvas/) 라이브러리가 제공되듯이
HTML5 확장 폼을 지원하지 않는 브라우저의 경우 WebForm2 라이브러리를 사용할만 하다

라이브러리를 다운받고 아래와 같이 라이브러리를 참조한다

<script type='text/javascript' src='webforms2.js'></script>

WebForms2 라이브러리는 HTML 폼 확장에 대해 각 브라우저마다 다르게 동작하는 문제점을 극복하기 위해 제공되며 Cross Broswer HTML5 Form 구현을 가능하도록 해 준다.
이와 관련한 다음의 글을 참고해 보기 바란다
http://nz.pe.kr/wordpress/programming/html5/번역-지금-바로-cross-browser-html5-form-만드는-방법

웹 양식 다루기
그럼 이제 HTML5 에서 추가되거나 개선된 웹 양식을 하나 씩 살펴보자
참고로 브라우저마다 웹 양식의 지원 범위가 다르기 때문에 각 요소를 설명할 때 지원되는 브라우저를 각각 달리하여 테스트 할 것이다(예제 실행 화면 옆에 브라우저를 명시한다)

새로운 입력 양식(새로 추가된 input 타입)
input 태그에 다양한 타입이 새로 추가되었다.
기존에 제공되었던 text, button,checkbox 등은 여전히 유효하며 다음과 같은 양식이 추가되었다

1) range
일정한 범위의 숫자를 입력 받기 위한 양식이다
min, max 속성에 범위의 최소, 최대값을 지정하고 step 으로 범위 이동 크기를 지정한다
아래 예는 0 ~ 10 까지의 범위를 가지는 2칸식 이동 가능한 Range 컨트롤이다(기본값은 2)

<input type="range" min=0 max=10 step=2 value=2>

(크롬)

2) number
숫자를 입력 받기 위한 양식이다
range 양식과 마찬가지로 min, max, step 속성을 가진다

<input type="number" min=1 max=10 step=1 value=5>

(오페라)

3) date
날짜를 입력 받기 위한 양식이다. 날짜 선택을 위한 달력이 표시된다
역시 min, max, step 속성이 제공된다

<input type="date" min="2001-01-01" max="2010-08-31" step=1 value="2010-08-26">

(오페라)

날짜와 시간관련 양식은 data 외에데 몇 가지가 더 있다. 다음을 참고하자

<input type="datetime"><input type="datetime-local"><input type="month">
<input type="week"><input type="time">

4) 기타 새로운 타입들
검색을 위한 search 타입, 전화번호 입력을 위한 tel 타입, 리소스 주소 입력을 위한 url 타입, 이메일 입력을 위한 email 타입, 색상 입력을 위한 color 타입 등이 새로 추가되었다
현재 데스크탑 브라우저들에서는 이들 타입이 지원되지 않거나 평범한 text 타입처럼 보이기 때문에
설명으로만 대체하겠다

다만 특이한 점은 이러한 타입이 아이폰과 같은 모바일 기기에서는 해당 타입에 맞춰 UI가 다르게 보이기도 한다. 아래 글을 참고 바란다

iPhone의 모바일 Safari 브라우저에서는 이러한 새 유형을 일부 사용하여 사용자에게 표시되는 키보드 유형을 변경한다. 예를 들면, 이메일 유형과 함께 @ 기호와 .com 단축 아이콘이 표시된다. 또한, Opera에서는 숫자 유형을 선택할 수 있는 스피너와 날짜 관련 유형을 선택할 수 있는 날짜 선택도구와 같은 다양한 제어를 구현하는 데 필요한 새로운 위젯을 일부 제공한다
- IBM Developer Works HTML5 컬럼 중... -

참고: 새로운 입력(input) 양식에 대한 다음 글을 참고하기 바란다
http://www.w3schools.com/html5/html5_form_input_types.asp

개선된 폼 양식
새로운 양식의 추가는 물론이고 기존 양식의 기능적 요소들도 상당 부분 개선되었다
 
1) 입력 보조 수단
새로운 양식의 추가 이외에도 자동 포커싱이나 PlaceHolder 와 같은 입력 보조 수단도 제공된다
자동 포커싱은 페이지가 로딩될 때 특정 양식으로 포커스를 주는 것이며 PlaceHolder은 텍스트기반 입력양식이 비어있을 경우 표시하는 텍스트를 지정할 수 있도록 한다
중요한 것은 이전 환경에서 이들 기능을 구현하려면 자바스크립트에 의존했어야 했지만 HTML5는 양식태그의 속성만으로 해결해 준다

<input type='search' autofocus>
<input type='email' placeholder="이메일 주소 입력">
<input type='tel' placeholder="전화번호 입력">

 

(크롬)


2) 파일 선택 양식의 개선
웹 페이지에서 서버로 파일을 업로드 하기 위해서 사용되던 것이 파일 input 박스이다
이는 이전에도 제공되는 것이지만 HTML5 에서는 기능적으로 보다 개선되었다

- 다중 파일 업로드(multiple 속성)
HTML5 이전 환경에서는 하나의 파일 박스에는 하나의 파일만 선택 가능했었다
다중 파일을 업로드 하기 위해서는 여러개의 파일박스를 두거나 서드파티업체의 제품을 이용했어야 했다. 그러나 HTML5 에서는 하나의 파일박스에 여러개의 파일을 지정할 수 있도록 개선되었다

<input type='file' multiple>

- 파일 필터링(accept 속성)
파일 선택 창에서 파일 형식을 제한할 수 있다
기본적으로 모든 파일 형식이지만 MIME 타입을 지정하여 특정 형식으로의 제한이 가능하다

<input type='file' accept="image/gif">

- 파일 정보 액세스(files 속성)
선택된 파일(들)의 정보를 조회하려면 파일박스 DOM 객체의 files 속성을 이용하면 된다
files 속성은 선택된 파일(들)의 정보를 배열형태로 담아 두고 있다. 각 배열의 요서가 특정 한 파일의 정보가 되며 name 및 size 속성등으로 파일 정보를 액세스 할 수 있다

<script type="text/javascript">
  var selectedFiles = document.getElementById("file").files;
  selectedFiles[0].name; //파일이름
  selectedFiles[1].size; //파일사이즈 
</script>

3) submit(폼 전송) 버턴의 개선
input 타입 중 submit , image 는 폼 전송을 수행하는 버턴이다
폼을 전송하기 위해 전송할 곳(action), 전송방식(get or post),enctype 등을 명시해야 하는데
이전 환경에서는 <form> 태그에 이들 속성을 지정하였다
HTML5 에서는 폼 전송 버턴인 submit, image 버턴에도 이들 속성을 지정할 수 있게 되었다

<form>
    <input type="submit" formmethod="POST" formaction="/formOk.html">
</form>

만일 <form> 과 submit 버턴 둘 다 action 이 지정되면 submit 에 지정된 action 값이 우선 적용 된다
(현재 오페라 브라우저에서만 정상 동작함)

 
추가된 폼 양식
input 타입에 새로운 양식이 추가된 것과 더불어 새로운 폼 요소들도 몇 가지 추가되었다

1) Progress 요소
진행 상태를 알려 주는 프로그레스 바를 나타낸다
max, value 를 이용하여 진행량의 최대값과 초기값을 지정할 수 있으며 position 속성을 참조하여 진행률을 계산할 수 있다. 현재 시점에 progress 요소를 지원하는 브라우저는 없다

<progress max="1" value="0"></progress>

2) Output 요소
새로 추가된 폼 출력요소이다. Input 요소가 폼 입력을 담당한다면 Output 요소는 폼 출력을 담당한다
보기에는 단순한 텍스트처럼 보이지만 실제로 폼 전송시 Output 요소의 값도 같이 전송된다. 이런 의미에서 눈에 보이는 히든 요소라는 표현도 있다. 읽기전용 폼 전송 요소를 정의한다고 보면 된다

<output name="sum">100</output>

3) DataList 요소
input (입력) 양식에 대한 옵션 리스트를 제공한다
즉 입력 양식에 들어갈 내용을 미리 제공하여 input 박스에 포커스가 오면 이 리스트를 보여준다
input 박스의 list 속성에 datalist id를 지정하여 둘을 매핑 시킨다

<input type="url" list="url_list" />
  <datalist id="url_list">
  <option label="모바일플랫폼" value="http://m.mkexdev.net" />
  <option label="MKEX의닷넷" value="http://www.mkexdev.net" />
  <option label="Microsoft" value="http://www.microsoft.com" />
  </datalist>

(오페라)

4) Keygen 요소
암호 키를 생성해 주는 폼 요소이다.
공개키기반의 키 쌍을 생성하며 폼 전송 시 공개키가 서버로 전송된다
다음은 RSA 키를 생성하는 코드이며 브라우에 이 요소가 표시될 때 키의 길이를 선택하도록 표시된다

<keygen name="key" keytype="rsa"></keygen>

(크롬)


5) Meter 요소
디스크 사용량과 같은 용량과 임계치가 존재하는 상황에서 현재 사용량을 보여주는 UI를 표시한다
min, max 로 최소값과 최대값(임계치)를 설정하며 현재 사용량의 정도(낮음, 높음, 적정)을 나타내는 low, high, optimum 속성이 제공된다. 현재 시점에 progress 요소를 지원하는 브라우저는 없다

<meter min="0" max="10"></meter>

폼 유효성 검사(입력값 검증)
HTML5 의 폼은 자체적으로 입력 값 검증을 수행하도록 되어 있다
예를 들어 <input type=email>에 입력된 값이 이메일 패턴과 다를 경우 폼은 전송되지 않고 에러 메시지를 표시해 준다. 그리고 입력 양식에 required 속성을 부여하면 빈 값이 허용되지 않는다
또한 입력 양식에 pattern 속성으로 정규표현식으로 입력 패턴을 지정할 수 있다
지정한 패턴과 다른 형태의 값은 입력이 허용되지 않는다

ex) 우편번호 패턴
<input type="text" name="postCode" pattern="/^\d{3}-?\d{3}$/" title="123-123">

이전 환경에서는 이 모든 것을 스크립트 영역에서 별도로 처래해 줘야 했다

<form action="demo_form.asp" method="get">
  First name: <input type="text" name="fname" required /><br />
  Last name: <input type="text" name="lname"  /><br />
  E-mail: <input type="email" name="email" /><br />
  <input type="submit" />
</form>

(오페라)
 
이렇듯 폼이 자동으로 입력 값 유효성을 검사하는 것은 폼에 validate 가 기본적으로 활성화되었기 때문이다. 만일 폼의 자동 유효성 검사를 꺼두고 싶다면 폼에 novalidate 를 부여하면 된다

<form novalidate action="demo_form.asp" method="get">
   .....

개선된 폼 이벤트(Event)
HTML5 에서는 폼과 관련한 몇 가지 이벤트도 추가되었다
대표적으로 forminput 이벤트와 formchange 이벤트를 들 수 있다

이 이벤트들은 폼의 하위 요소가 아닌, 폼 자체에 걸 수 있는 이벤트로써 폼에 포함되어 있는 각종 요소들을 특정 이벤트로 연계시키기 좋은 구조를 제공한다

간단한 예를 보자
폼에 3개의 요소가 있고 특정 한 요소의 입력 변화를 감지해 다른 두 요소를 제어하는 샘플이다

<form onforminput="ta2.value = ta1.value;textLength.value=ta1.value.length;">
  <textarea id="ta1"></textarea> <br>
  글자 복사 ↓<br> 
</form> 

<textarea id="ta2"></textarea>
글자 수:<output id="textLength"></output>

폼에 forminput 이벤트를 구현하여 글이 입력될 때 마다 아래로 복사하고 글자 수를 표시하는 코드이다
참고로 코드에서는 폼에 하나의 요소(textarea)만 존재하지만, forminput 이벤트는 폼에 포함된 모든 요소의 변화를 감지한다. 아래는 실행화면이다

(오페라)

이렇듯 forminput, formchange 이벤트를 이용하면 폼의 각 요소를 쉽게 연계할 수 있다