(번역) 지금 바로 cross-browser HTML5 form 만드는 방법

번역을 하며.

다음의 내용은 원작자의 동의를 얻어 번역된 내용입니다. 원문

HTML5 forms 지원하는 브라우저는 한정되어 있고 각 브라우저 벤더별로 지원하는 분야가 달라 공통분모가 적습니다. HTML5 form 의 기능은 좋은데 모든 브라우저가 지원할 때까지 기다리자니 너무 오래 걸립니다. 그래서 현시점에서 어떻게 하면 cross-browser 지원할 수 있는 지에 대한 방법에 대해서 기고하였습니다.

원작자는 기존 라이브러리를 활용해 html5Widgets 을 직접 개발하여 구현하였으며 Google 의 webforms2 code로 통합될 것이라고 합니다. 따라서 html5Widgets 는 단순 참고 하시고 실제로는 html5Widgets 가 포함된 webform2 의 출시를 기다리시면 될 것 같습니다.

번역이 처음이고 최대한 의역하여 한국인 정서에 맞게 기록하였습니다.

지금 바로 모든 브라우저를 지원하는 HTML5 form 만드는 방법

Modernizr, webforms2 그리고 html5Widgets 를 사용하여서 크로스 브라우징을 지원하는 HTML5 forms 을 만들어 봅시다.

Range:
Placeholder:
Color:

Modernizrwebforms2 그리고 html5Widgets을 이용해 만든 HTML5 forms 예제입니다. 사용해보세요

달력과, 색 선택기, 슬라이딩 위젯, 그리고 입력값 검증 등은 HTML5 의 멋진 기능들입니다. 몇몇 사람들은 이렇게 말합니다. “근데요? 이러한 기능들은 기존에 웹에서 이미 봐었던 것들인데요?” 맞습니다. 많은 개발자들이 이미 유용한 위젯이나 검증 스크립트를 만들었습니다. 그런데도 왜 HTML5로 바꾸기 위해서 노력해야 할까요?

  • 배우기 쉬운 마크업 : HTML5 폼 위젯과 검증 기능은 쉬운 select tag 정도만큼 쉬운 쉬운 마크업으로 만들수 있고 JavaScript 는 잘 몰라도 됩니다.
  • W3C 표준 : 앞으로 수년동안 표준으로 사용될 것이고 모르는게 있으면 대부분의 웹개발 커뮤니티에 문의하여 도움을 청할 수 있습니다.
  • 모바일 폰 지원 : HTML5 폼 필드는 특정 디바이스에 맞게 적절하게 활용됩니다. Blackberry 폰은 이미 날짜/시간 색 선택 위젯을 지원합니다. Mark Pilgrim의 글인 A Form of Madness 글에 의하면 HTML5 특성에 의거한 가상 키보드 들이 데이타 입력을 최적화 시켜준다고 합니다.
  • 웹개발 툴들이 지원합니다. : Aptana 나 Dreamweaver 그리고 대부분의 IDE들이 HTML5를 지원하게 될 것입니다.
  • HTML 파이브 입니다 : 기술적으로 잘 모르는 주변 사람에게 설명할때 자랑할 수 있습니다. HTML보다 HTML5 가 다섯배는 더 좋아보입니다. 그래서 당신은 마치 최신 기술의 고수인 것처럼 보이게 됩니다. 아마 보너스도 받지 않을까요? ㅎㅎ

딜레마..

불행히도 요즘 HTML5 form을 모든 브라우저가 모두 지원하는 것은 아닙니다. 그리고 각 브라우저마다 지원하는 범주에도 차이가 있습니다. 위키피디아 브라우저별 비교 문서를 보세요. 각 브라우저별로 각기 다른 기능을 일부 지원하는 것을 볼 수 있고 공통분모 (모든 브라우저가 동시 지원하는 것을 말함) 은 매우 적다는 것을 알 수 있습니다.

지금 당장 사용하고 싶은데!!!

사실 HTML5 form의 구현은 2004년으로 거슬러 올라가 WebForms 2.0 부터 시작되었습니다. 현시점에서는.. 이미 몇몇 개발자들이 JavaScript 로 HTML5 forms의 대체기능을 구현했다는게 놀랍지는 않습니다. Weston Ruter 의 크로스 브라우저 라이브러리인 webforms2.js는 WebForms 2.0에서 HTML5 form으로 변환되지 않은 일부 기능(Webform 2.0’s Repetition Model)을 포함하는 통합 라이브러리 입니다.

저는 webforms2.js 에는 구현되지 않은 위젯 기능들이 있어서 html5Widgets.js 라는 라이브러리를 만들었습니다. 이 UI 라이브러리는 webforms2.js 와 독립적으로 작동합니다. 만약에 당신이 클라이언트 기반 검증을 포함하여 크로스 브라우징 기반의 HTML5 form 을 원한다면 webforms2.js도 같이 사용해야 합니다. 만약 당신이 모든 브라우저에서 위젯들을 사용하려면 html5Widgets.js도 사용해야 합니다. 저는 htmlt5Wigets.js를 처음부터 완전히 새로 개발하는 것을 원치 않았기 때문에 몇몇 좋은 라이브러리를 이용하여서 만들었습니다. (밑에서 소개됩니다.) 또한 Modernizr를 사용하여서 브라우저가 해당 위젯을 자체 지원할 경우 그것을 쓰도록 하였고 만약 아니라면 html5Widgets를 통해 적절한 위젯이 나타나도록 하였습니다. 네트워크 자원을 절약하기 위해서 개발자는 각 기능에 맞는 라이브러리만 include 하면 됩니다.

이제부터 저는 HTML5 의 각각의 spec 에 대해서 설명하고 어떻게 그것들을 바로 당신의 페이지에 적용할 수 있는지에 대해서 단계별로 설명할 것입니다. 각 섹션에는 브라우저가 해당 기능을 자체지원하는지 여부를 기록할 것이고 브라우저가 지원하지 못할경우 무엇이 필요한지 설명할 것입니다. 훗날 각 브라우저 개발사들이 표준을 지켜 개발을 하게 된다면 결국, JavaScript를 전혀 사용하지 않아도 될 것입니다.

required, pattern 을 사용한 입력값 검증

required 속성은 input 필드를 submit 하기위해서 반드시 입력되어야 하는 값이라는 것을 말합니다. markup 은 간단합니다.

<input type="text" name="firstName" value="" required="required" />

(XHTML 표준에 맞지 않게 required 속성만 적어도 됩니다.)

pattern 속성은 지정된 포멧으로 값을 입력 받도록 합니다. 그것은 정규표현식 (regular expressions)을 사용하여 정의합니다. 만약에 우편번호(123-456) 형태로 입력하는 것을 강제하고 싶다면 다음과 같은 markup을 쓸 수 있습니다.

<input type="text" name="zipCode" value=""
    pattern="\d{3}([\-]\d{3})?" required="required"  />

required 와 pattern 은 서로 별개로 작동합니다. 꼭 필요하지는 않지만 입력된다면 특정 포멧을 지켜야 하는 데이타를 만들 수 있습니다. (pattern 은 값이 입력되었을 경우에만 체크합니다.)

Opera 10+ (모바일, 데스크탑용) 은 form validation 을 자체지원하는 유일한 브라우저입니다. 모든 브라우저를 위해서라면 다음의 script 를 include하여 사용해야 합니다.


브라우저별 차이점을 확인해 봅시다.

Opera 10+ Windows Firefox 3.6 with webforms2.js
[Screenshot of HTML5 Validation using Opera] [Screenshot of HTML5 Validation using Firefox and webforms2.js]

“별표” 처리된 필드는 필수 입력 필드의 기본 Look and Feel 은 아닙니다. CSS를 사용하여 만들었습니다.

Note the “starred” style of the form field ? this is not the default look and feel of the required fields, but something I added with a simple amount of CSS:

input[required], select[required] {
	background: #ffffee url("../images/asterix.gif")  no-repeat left 2px;
	padding-left: 1.5em;
	width: 13.5em !important;
}

(이 CSS는 IE6 에서는 작동하지 않습니다. 나는 독자가 IE6가 몇년전부터 퇴보길에 들어갔다는 사실을 알기 바랍니다).

pattern 과 required 의 예제 보기.

검증 프레임 워크는 email 과 URL 그리고 숫자가 기대된도로 잘 입력되는지를 검증합니다. iPhone, iPad 에 들어간 사파리를 쓰고 있다면, 입력하기 편한 아주 적절한 가상 키보드가 나오는 것을 경험할 수 있습니다. (숫자를 입력해야 하는 필드라면 숫자만을 입력할 수 있는 키보드가 보이게 됩니다. 이것은 iOS의 자체 기능입니다. 나중에 안드로이드의 모바일 브라우저도 해당 기능을 지원했으면 하는군요.

autofocus 속성

autofocus 속성은 페이게가 처음 열렸을때 커서가 위치할 요소를 선택할 수 있게 합니다. 구글의 첫 페이지는 JavaScript 를 이용해서 검색어 입력란에 입력 커서가 가 있도록 합니다. 12년 후..(w3c 에서는 12년후 HTML5로 완전히 대체될 것으로 예상하고 있음) 다음과 같이 HTML markup 으로 완전히 대체될 것입니다.

<input type="text" name="fullName" value=""
  required="required" autofocus="autofocus" />

Safari, Chrome 그리고 Opera 를 자체지원을 합니다. 다른 브라우저에서 지원하게 하려면 requiredpattern 에서 한 것 처럼 webforms2.js 를 사용해야 합니다.

autofocus 가 어떻게 작동하는가에 대한 예제 보기

placeholder 속성

placehoder 는 입력 필드에 대한 특정 설명을 가시적으로 잘 나타내주는 좋은 기능입니다. (어떠한 값이 입력되어야 하는가, 꼭 입력해야 하는값인가 등등..)

An example of placeholder text.  The text disappears when the field has focus or if the user types information into the field.

placehoder 의 예제입니다. 해당 필드가 focus 되거나 사용자가 입력을 시작하면 해당 내용이 사라집니다.

Markup 은 다음과 같습니다.

<input type="text" name="fullName" value="" required="required"
   placeholder="Required information" />

Safari, Chrome 그리고 Firefox 는 자체지원합니다. 다른 브라우저를 위해서 html5Widgets 라이브러리를 사용해야 합니다. 그리고 html5Widget를 위해서 다음의 라이브러리도 함께 사용해야 합니다.

<script type="text/javascript"
   src="/path/to/shared/js/modernizr.com/modernizr-1.5.min.js">
</script>

<script type="text/javascript" src="/path/to/shared/js/EventHelpers.js">
</script>

<script type="text/javascript" src="/path/to/shared/js/html5Widgets.js">
</script>

이 라이브러리들이 무엇을 하냐면

  • modernizr는 HTML5 attribute와 tag를 감지하고 브라우저가 그것을 지원하는지 확인합니다.
  • html5Widgets 는 EventHelpers.js 를 이용해서 cross browser 이벤트를 감지하여 placehoder 의 동작을 구현합니다.

What do these libraries do?

placehoder 가 어떻게 동작하는지 보는 예제

범위 선택 기능과 출력

HTML5 widgets, range 를 이용해서 쉽게 slide control 을 폼에 넣을 수 있습니다.

Markup은 다음과 같습니다.

<input type="range"  name="rangeEl" value="" min="0" max="150" step="1" />

min과 max attribute 는 최소 최대 값을 의미 합니다. 그리고 step 은 range 가 변할때마다 변경되는 숫자의 최소 변경 크기를 말합니다. number type의 input 을 이용해서도 숫자를 입력받을 수 있지만 이 갠춘한 UI를 이용하면 입력받을 수 있는 값을 적절하게 지정할 수 있습니다.

이 글을 기고할 당시에는, Opera와 Webkit 기반의 브라우저 (Safari와 Chrome) 은 자체 지원합니다. html5Widgets 은 비지원 브라우저를 위해서 the Frequency Decoder Slider Widget기능을 사용합니다. cross-browser HTML5 range 기능을 위해서 다음의 script 를 사용해야 합니다.

<!-- Needed for Range Element -->
<link type="text/css" rel="stylesheet" href="/path/to/shared/css/slider.css">

<!--[if lte IE 6]>
<link type="text/css" rel="stylesheet" href="/path/to/shared/css/slider_ie.css" />
<![endif]-->

<script type="text/javascript" src="/path/to/shared/js/frequency-decoder.com/slider.js">
</script>

<!-- Needed for Validation -->
<script type="text/javascript" src="/path/to/shared/js/weston.ruter.net/webforms2/webforms2_src.js">
</script>

<!-- Need for HTML5Widgets -->
<script type="text/javascript"
  src="/path/to/shared/js/modernizr.com/modernizr-1.5.min.js">
</script>

<script type="text/javascript" src="/path/to/shared/js/html5.js">
</script>
<script type="text/javascript" src="/path/to/shared/js/EventHelpers.js">
</script>

<script type="text/javascript" src="/path/to/shared/js/html5Widgets.js">
</script>

다음의 스크린샷을 보세요. 다양한 브라우저에서 자체 지원하고 있음을 알수 있습니다. 그리고 일부는 html5Widgets 를 의존합니다.

Explorer 6.x+(html5Widgets support) Firefox 3.5+(html5Widgets support) Safari 4.0+(native support) Chrome 3.0+(native support) Opera 10.0+(native support)
Windows Screenshot of range field for Internet Explorer 6 Screenshot of range field for Windows Firefox Screenshot of range field for Windows Safari Screenshot of range field for Chrome Windows Screenshot of range field for Windows Opera
Mac Not Applicable Screenshot of range field for Mac Firefox Screenshot of range field for Mac Safari Screenshot of range field for Chrome Mac Screenshot of range field for Mac Opera
Linux Not Applicable Screenshot of range field for Linux Firefox Not Applicable Screenshot of range field for Linux Chrome Screenshot of range field for Linux Opera

output tag 는 선택된 값을 보여 주거나 연산 숫자 필드의 JavaScript 를 이용한 연산된 결과를 보여줄 때만 사용됩니다. output tag 는 어떠한 form fields 든 참조하는 연산식을 가질수 있지만 특히 range 를 이용해 사용자가 선택한 위치의 정확한 값을 표시하는데 유용합니다.

<output onforminput="this.value = rangeEl.value">-</output>
<input type="range"  name="rangeEl" value="" min="0" max="150" step="1" />

output tag의 내용은 기본값입니다. this.value W3C HTML5 working group 에서 그것이 . 만약에 마지막 명세서에 다른 타입의 표현이 지원된다면, 그것들은 html5Widgets으로 작동하지 않을겁니다. IE에서 output tag에 CSS를 지정하기 위해서 Remy Sharp’s HTML5 Enabling Script를 사용해야 합니다.

range input을 이용해서 output 이 어떻게 바뀌는지에 대한 예제

range input 이 없는 상황에서 output이 어떻게 활용될 수 있는지에 대한 예제

datetime, datetime-local, date 그리고 week input types

이 글을 쓸 때는 Opera의 Desktop browser 만이 HTML5 date fields 를 지원합니다. 다른 브라우저를 지원하기 위해서 html5Widgets 는 DynArch.com 님의 Ex-”Coolest” DHTML Calendar를 사용했습니다. ( the coolest one는 사용하지 않기로 했는데 Ex-Coolest가 좀더 유연한 license를 가지고 있고잘 작동하기 때문입니다.) 그리고 이제 모든 브라우저가 datetime, datetime-local, date, month 그리고 week input fields를 가질수 있습니다.

다음의 Script 를 include해야 합니다.

<!-- Needed for Date/Time Elements -->
<link type="text/css" rel="stylesheet" href="/path/to/shared/js/jscalendar-1.0/calendar-win2k-1.css" />
<script type="text/javascript" src="/path/to/shared/js/jscalendar-1.0/calendar.js"></script>
<script type="text/javascript" src="/path/to/shared/js/jscalendar-1.0/lang/calendar-en.js"></script>
<script type="text/javascript" src="/path/to/shared/js/jscalendar-1.0/calendar-setup.js"></script>

<!-- Needed for Validation -->
<script type="text/javascript" src="/path/to/shared/js/weston.ruter.net/webforms2/webforms2_src.js">
</script>

<!-- What glues all the above together -->

<script type="text/javascript" src="/path/to/shared/js/modernizr.com/modernizr-1.5.min.js">
</script>
<script type="text/javascript" src="/path/to/shared/js/EventHelpers.js">
</script>
<script type="text/javascript" src="/path/to/shared/js/html5Widgets.js">
</script>

달력 위젯이 언어 팩을 (calendar-en.js) 사용하는고 영문 언어팩을 사용한 것을 확인하세요.

아래 Opera 의 자체 지원 위젯과 DynaArch/HTML5Widget 의 차이를 보십시오

DateTime Widget Month Widget
Opera Windows
Opera Mac
Firefox 3.5+ Windows(html5Widgets support)

Mac용 Opera 의 달력은 Windows 달력보다 작게 보입니다. 너무 작네요 ^^

실제로 표현되는 format과 서버로 전송되는 값은 거의 비슷합니다.

Input type Format displayed on page Format sent to server
datetime yyyy-mm-dd HH:MM yyyy-mm-ddTHH:MMZ
datetime-local yyyy-mm-dd HH:MM yyyy-mm-ddTHH:MM
date yyyy-mm-dd yyyy-mm-dd
month yyyy-mm yyyy-mm
week yyyy-mmW yyyy-mmW

HTML5 date widget이 어떻게 작동되는지에 대한 예제

윈도우즈에서 구동한 Opera Mobile Emulator 에서는 datetime과 datetime-local 달력이 왼족 위에 배치되는 모습입니다. Opera는 html5Widgets 없이 달력 위젯을 자체지원하므로 Opera 에서 해당 버그를 수정해야 합니다.

Screenshot of Opera Mobile bug

Screenshot of Opera Mobile bug

The color Input Type

현재는 어떠한 데스크탑 브라우저도 색 선택기를 지원하지 않습니다. (새로운 웹킷 기반의 BlackBerry 브라우저는 일부 지원합니다.) 주요 브라우저 제작사가 해당 기능을 기다리지 못하겠다면 Jan Odvarko 님의 jscolor 를 사용해 만든 html5Widgets을 이용하면 됩니다. 이 스크립트는 W3C 명세에 따라서 16진수 소문자의 rgb입력을 허용하고, 빈값은 허용하지 않습니다.

모든 브라우저를 지원하기 위해서 다음의 스크립트를 include 해야 합니다.

<!-- Needed for Color Element -->
<script type="text/javascript" src="../../shared/js/jscolor/jscolor.js">
</script>

<!-- What glues all the above together -->
<script type="text/javascript" src="../../shared/js/modernizr.com/modernizr-1.5.min.js">
</script>

<script type="text/javascript" src="../../shared/js/EventHelpers.js">
</script>

<script type="text/javascript" src="../../shared/js/html5Widgets.js">
</script>

BlackBerry 에서 구현한 예제(the Blackberry Development Blog 참조)와 HTML5Widget/jscolor 를 비교한 화면입니다.

Blackberry Web Browser Firefox 3.5 with html5Widgets.js
HTML5 Color form field, Blackberry HTML5 color input field with html5Widgets and jscolor.

HTML5Widgets 으로 구현된 색 선택 input type 예제

어떻게 하면이 라이브러리들을 잘 활용할수 있을까?

저는 이러한 HTML5 form 기능을 개발자들이 사용할 수 있도록 적절히 활용한 몇가지 예제를 보여드리겠습니다. 필요한 JavaScript 라이브러리가 포함된 몇가지 예제입니다.

HTML5 forms 에 대한 명세는 매우 큽니다. 그리고 불행해도 webforms2 과 html5Widgets 라이브러리는 아직 모든것을 전부 구현할 수는 없습니다. HTML5 forms 가 할 수 있는 것들에 매료된 이후 저는 대부분의 기능을 구현해왔습니다. 이 블로그를 위한 webforms2 는 Weston Ruter 의 원래 버전이 약간 변형되었습니다. 그것은 다음주쯤에 Google code version 으로 통합되거나 통합된 하나의 라이브러리로 만들어 질 것입니다. html5Widgets 라이브러리는 여기서는 계속 제공됩니다.

곧 제가 구현할 것들입니다.

  • 다른 HTML5 form elements 를 구현합니다. datalist, number, keygen, progress, time and meter
  • HTML5 form widgets 에 CSS styling 기능을 추가 합니다. 오페라가 현재 지원하는 것으로 보이는 검증 결과를 표현할 수 있는 :valid :invalid 등의 style 입니다.
  • 새로운 input types (tel, email url) 들에 대한 기본 스타일을 지원합니다.. Mac이나 Mobile 용 Opera는 다음과 같이 기본 스타일을 지원합니다.
  • email and url form fields in Opera Mac

    email and url form fields in Opera Mac

  • 검증 look and feel 지원. 이것은 꼭 하고 싶은 것입니다. 많은 개발자들이 validation 에러에 대한 UI를 변경하고 싶어 합니다. HTML5 명세에 의하면 이것에 대한 정의가 되어 있지 않습니다. 브라우저 제작사가 이 이슈를 어떻게 대할지 궁금합니다. (만약, 당신이 브라우저 개발자라면 form validaion error UI에 대해서 어떻게 할 계획인지 알려주세용~)
  • IE7와 더 낮은 버전에서는 input[type=”range”] 같은 CSS코드가 작동하지 않는 것을 가능하게 합니다.
  • HTML5 form을 지원하지 않고 JavaScript 를 지원하지 않는 상황에서 서버쪽의 HTML5 form validation을 가능하게 합니다.
  • webforms2 에서 사용되는 다국어 지원을 합니다. 번역을 할 수 있도록 도와주세요 🙂

아래는 HTML5 forms 를 브라우저 엔진별로 어느정도 지원하는지에 대해서 Wikipedia 를 참고한 내용입니다.

Trident Gecko WebKit Presto
Attributes
autocomplete Yes Yes Yes 2.0
list No No No 2.0
required Yes (with webforms2) Yes (with webforms2) Yes (with webforms2) 2.0
multiple No 1.9.2 526 No
pattern Yes (with webforms2) Yes (with webforms2) Yes (with webforms2, and natively in Nightly build) 2.0
minmax Yes (with webforms2) Yes (with webforms2) Yes (with webforms2) 2.0
step Yes (with webforms2) Yes (with webforms2) Yes (with webforms2 and Nightly build natively) 2.0
placeholder Yes (with webforms2) 1.9.3 Yes Yes (with webforms2)
form No 1.9.3 No 2.0
autofocus Yes (with html5Widgets) 1.9.3 Yes (with html5Widgets and Nightly build natively) 2.0
maxlength No 1.9.3 Nightly build 2.0
novalidate No No Nightly build No
control No 1.9.3 No No
accept No 1.9.3 No No
formtarget No No No No
formaction No No No No
Elements
datalist No No No 2.0
keygen No 1.0 125 1.0
output No 1.9.3 No 2.0
progress No No Nightly build No
meter No No No No
Input types
search No 1.9.3 312 No
tel No 1.9.3 Nightly build No
url No No Nightly build 2.0
email No No Nightly build 2.0
datetime Yes (with html5Widgets) Yes (with html5Widgets) Yes (with html5Widgets and Nightly build natively) 2.0
date
month
week
time
datetime-local
number No No Nightly build 2.0
range Yes (with html5Widgets) Yes (with html5Widgets) Yes 2.0
color Yes (with html5Widgets) Yes (with html5Widgets) Yes (with html5Widgets and Nightly build natively) Yes (with html5Widgets)

visibleIf 활용으로 좀더 유연한 Forms 만들기

webforms2 와 html5Widgets 라이브러리는 visibleIf 에서 제시한 방법을 이용해서 visibleIf 상태일 때만 폼 검증을 할 수 있도록 디자인 되었습니다.

The webforms2 and html5Widgets libraries are designed to co-exist well with visibleIf to create interactive forms with fields that only validate the ones that visibleIf is displaying.

VisibleIf 라이브러리 사용하여 HTML5 validation이 작동하는 예제

Acknowledgments, Shout-outs and Kudos

Further Reading

다운로드

이것은 html5Widgets 의 임시 자료입니다. 이것은 webforms2 Google Code page 에서 지속적으로 제공될 것입니다.

html5Widgets v. 1.0 and example code (zip format)

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다