티스토리 뷰
* 이번에는 HTML5 를 통해서 새로 생겨난 다양한 form들을 살펴보자.
* 이번에는 브라우져들이 상당부분 지원해주지 않고 있는 부분이라 가장 많은 부분을 지원해주고 있는 Opera 브라우져와 크롬 브라우져를 쓴다면 다양하게 잘 보일 것이다. 아직까지 브라우져마다 지원해주고 있는 현황이 다르기 때문에 체험을 해보려면 2가지 이상의 브라우져를 사용할 것을 권하고, 오페라와 크롬을 사용하면 2개로 거의 모든 것을 체험할 수 있다. 익스플로러10 이전 버전에는 현재 거의 아무것도 적용이 안되어있으니 이미지만 참고하면 될 것이다.
2012/10/25 - [HTML5 튜토리얼] HTML5의 등장 배경과 여러 가지 개발 환경 및 현재 현황
2012/11/03 - [HTML5 튜토리얼] 기초 및 기본 구조, 프로그래밍상 기존의 HTML과 바뀐 점
2012/11/05 - [HTML5 튜토리얼] HTML5에 추가된 Element들 그리고 문서의 구조화
2012/11/18 - [HTML5 튜토리얼] Canvas 기초 강좌
2012/11/23 - [HTML5 튜토리얼] Video와 Audio 태그 기본
* 새로운 form element
: 기존의 html의 입력 폼이라하면 text, textare, button, radio, checkbox, select 이정도를 생각할 수 있었을 것이다. 이것들 이외의 입력 수단에 대해서는 특별하게 제공해주는 것들이 없었기 때문에 새로운 기능들은 거의 다 자바스크립트를 통해서 추가했어야했다. 그중에서 가장 많은 개발자들이 만들었던건 역시 바로 달력이 아닐까 싶다. 달력 관련 자바스크립트 라이브러리는 직접 만들기도 했었고 여기저기 나와있는 것들도 많다. 그러한 달력을 이제는 HTML5에서 바로 지원을 해준다.
* 새로운 input type들
: 이전부터 자바스크립트로 짜왔던 달력을 이제는 브라우저에 기본으로 들어가게 되었다. 아래는 input을 입력하였지만, 만약 오페라가 아니라면 아직 지원을 안해주고 있을 것이다. 앞으로 이러한 input type들이 다른 브라우져에서는 어떻게 제공될지는 확실하지는 않지만, 이러한 기능들의 확대는 확실하다. 그럼 새로운 input type들에 대해서 살펴보자.
* 아래부터는 Opera가 있다면 실제로 테스트도 해볼 수 있을 것이다. Opera가 아닌 경우를 위해 이미지를 직접 캡쳐해서 같이 올렸다.
* <input type="datetime">
: 날짜와 시간을 같이 입력받는 새로운 input type이다. 오페라와 사파리에서만 지원해주고 있지만, 오페라만 제대로 UI를 제공해주고 있다.
<input type="datetime"/>
: 오페라에서 열어본다면 아래와 같은 것이 생겨나있다.
: 자바스크립트로 고생고생하며 이런 달력을 만들었던게 엊그제 같은데 이제는 기본이 되어버렸다. 프로그래머들로 인해 프로그래머들이 직업을 잃는다는 말이 왠지 실감이 난다.
: 위의 datetime 말고도 type에 date를 넣으면 날짜만 받을수도 있고, week, month, time 등 단위를 다르게 설정할 수 있다. 아래는 그 예와 캡쳐 이미지들이다.
* <input type="date">
: 시간이 빠진 것을 볼 수 있다. 크롬에서는 달력 관련 type 중에서 date를 지원해준다. 오페라와 크롬, 사파리에서 지원해주고 있지만, 오페라와 크롬에서만 제대로 UI를 지원해주고 있다.
<input type="date" />
: 왼쪽은 오페라에서 실핸한 화면이고, 오른쪽은 크롬에서 실행한 모습이다.
* <input type="week">
: 이번에는 주단위로 선택이 되고, 현재 몇 번째주인지 나온 것을 확인할 수 있다. 오페라와 사파리에서 지원해주고 있지만, 오페라에서만 제대로 UI를 지원해주고 있다.
<input type="week" />
* <input type="month">
: 한달 단위로 선택되는 달력을 볼 수 있을 것이다. 오페라와 사파리에서 지원해주고 있지만, 오페라만 제대로 UI를 지원해주고 있다.
<input type="month" />
* <input type="time">
: 처음의 datetime에서 시간 부분만 가져온 것을 볼 수 있다. 오페라와 크롬, 사파리에서 지원해주고 있지만, 오페라와 크롬에서만 제대로 UI를 지원해주고 있다.
<input type="time" />
* <input type="number">
: 숫자형을 기본으로하는 타입이다. 0 이하로 내려가면 알아서 - 가 붙는다. 아래와 같이 최소값, 최대값과 함께 위아래 화살표를 누를 때 한단계에 얼마씩 변화될지까지 설정 가능하다.
속성 | 설명 |
min |
input에 들어갈 최소값 |
max |
input에 들어갈 최대값 |
value |
input에 들어갈 기본값 |
step |
옆의 화살표로 한번에 이동할 크기 |
<input type="number" min="-10" max="10" value="0" step="2"/>
* <input type="range">
: 슬라이드바 형식의 입력 위젯이다. 기존에 이런 위젯 만들려고하면 자바스크립트와 DOM으로 엄청 고생했는데 이제는 편해졌다. range 타입도 number와 같이 설정이 가능하나 실제로는 보이지 않는다. 대신 onchange 이벤트로 값을 받을때 원하는 범위를 미리 설정한다면 편할 것이다.
속성 | 설명 |
min | input에 들어갈 최소값 |
max | input에 들어갈 최대값 |
value | input에 들어갈 기본값 |
step | 옆의 화살표로 한번에 이동할 크기 |
<input type="range" min="-10" max="10" value="0" step="2"/>
: 그래서 간단하게 응용을 한다면 아래와 같이 만들수도 있다. HTML 단 2줄로 이런것을 만들 수 있다.
<input type="range" min="0" max="1" value="0" step="0.01" onchange="document.getElementById('currentValue').innerHTML=this.value;">
<span id="currentValue">0.5</span>/1
* <input type="color">
: 처음에 이거보고 헐~ 놀랬다. 색을 고르는것까지 HTML에서 기본으로 들어간다! 이런거 짜려고하면 얼마나 피곤했던가!
<input type="color" />
: 왼쪽 화면에서 아래의 Other... 버튼을 누르면 오른쪽과 같이 파레트가 나온다. 이건 HTML5에서 해주는 느낌이 아닌 포토샵에서나 봤을법한 무언가 고급스러운 느낌이다.
: 다음은 email 타입이다. 겉보기에는 별달라보이는 것이 없지만, form을 submit해보면 다르다.
<form> <input type="email" /> <input type="submit" /> </form>
* 2012년 12월 현 시점에서는 파이어폭스, 크롬, 오페라에서만 제대로 작동한다! 그외의 브라우져는 아래 submit 누르지 말고 이미지 참고!
: 왼쪽은 오페라에서 submit한 모습이고 오른쪽은 크롬에서 submit한 모습이다. 자동으로 validation을 해주는 것을 볼 수 있다. 일일이 validation을 넣지 않아도 되고 편하다.
: 위의 두 브라우져와 파이어폭스는 약간 다른 형태를 띄고 있다. 조금더 발전된 UX를 가져올 수 있는 하이라이트 등의 기능도 제공해주고 있다. 아래는 파이어폭스에서 보여주고 있는 email타입 input의 동작을 보여주고있는 것이다. 만약 주소와 맞지 않은 형태로 입력을 하게 되면 다른 브라우져와 마찬가지로 다이얼로그를 띄워주고, 고치지 않은 경우에는 빨간색으로 계속 validation이 안된다고 표시해준다.
: 그리고 이메일의 형태로 맞게 고쳐주면 input 상자를 두르고 있었던 빨간색 하이라이트가 없어진다. 현 상태로 보면 이러한 input 타입에 대한 지원은 파이어폭스가 가장 앞서나가는 것 같다.
<form> <input type="url" /> <input type="submit" /> </form>
* 2012년 12월 현 시점에서는 파이어폭스, 크롬, 오페라에서만 제대로 작동한다! 그외의 브라우져는 아래 submit 누르지 말고 이미지 참고!
: 각 브라우져가 동작하는 것은 비슷하다. url이라 칭함은 앞에 프로토콜이 들어가는 것을 뜻하므로, 단순히 'unikys.tistory.com'은 통화를 못하는 반면, 'http://unikys.tistory.com'은 validation을 통과하게 된다.
: 크롬도 똑같은 방식으로 앞에 "http://"가 있는지 여부로 url을 체크한다.
: 반면 오페라는 input 박스가 포커스를 잃었을 경우 앞에 자동으로 http://를 붙여줌으로써 강제로(?) url의 양식에 맞추도록해주고 있다. 왼쪽 처럼 입력하고 포커스를 잃으면, 오른쪽 처럼 자동으로 붙여준다. 따라서 validation도 통과를 하게 된다.
* <input type="tel">
: search 타입은 다양하게 응용이 가능한 input 타입이다. 하지만 현재는 크롬과 사파리만이 지원을 해주고 있다.
속성 | 설명 |
results | 저장할 이전 검색 수 |
name | 검색 이름 (크롬에서 검색 결과가 저장되는 기준) |
autosave | 자동 저장 이름 (사파리에서 검색 결과가 저장되는 기준) |
<form> <input type="search" name="search" results="5" autosave="unique"/> <input type="submit" /> </form>
* 2012년 12월 현 시점에서는 크롬, 사파리에서만 표시된다
: 먼저 크롬에서 어떻게 동작하는지 살펴보자. results를 설정해주면 아래와 같이 비어있을 때 돋보기가 나온다. 이전의 검색 결과를 표시해주기 위한 인터페이스이다. 그리고 텍스트를 입력하면 오른쪽에 입력값을 한번에 지울 수 있는 x 표시가 나온다. 모바일에서는 상당히 친숙한 인터페이스일 것이다. 그리고 검색을 하고나서 돋보기를 눌러보면, 이전에 검색했던 검색어들이 나오는 것을 볼 수 있다.
: 이번에는 사파리를 살펴보자. 기본적으로 똑같은 동작을 하고 있다. 이전 검색을 볼 수 있는 돋보기와 텍스트를 입력하면 x 표시까지 나오는 것이 같다.
: 하지만 이전의 검색 결과를 보는 것이 조금더 세련된 것을 볼 수 있고, 이전의 검색어들을 지울수도 있는 옵션이 추가되어있다.
: 역시 모바일에서는 검색에 대한 인터페이스가 중요하기 때문에 두 모바일 OS의 선두주자들이 검색과 관련된 input에 대해서는 앞서가는 것을 확인할 수 있다.
* 기존의 form element에서 바뀐 기능
: 이번에는 기존의 form element들에서 새로 추가되거나 바뀐 기능들을 살펴보자.
* <input type="checkbox">: indeterminate 상태
: 기존의 checkbox는 checked/unchecked 두가지 상태만을 가지고 있을 수 있었지만, 일상적으로 체크박스에서 사용하고 있는 상태가 한가지가 더 있다. 바로 하위에 체크박스의 전부가 아닌 일부만 선택되었을 때 보여주는 '반 선택' 상태이다. html5에서는 이러한 표시 기능도 추가하였다. html 상에서는 접근할 수 없고, 대신 자바스크립트로 접근이 가능하다. 바로 indeterminate 속성을 true로 설정시켜주면 체크박스가 반선택 상태가 되면서 체크표시가 아닌 '-'가 표시되게 된다. 아래는 간단한 예이다.
<input type="checkbox" id="indeterminateCheckbox"onchange="this.indeterminate=!this.indeterminate;" /><label for="indeterminateCheckbox">indeterminateCheckbox</label>
: 위와 같이 일부 선택인 상태를 새롭게 표시할 수 있게 되었다. 최신의 모든 브라우져에서 지원해주니 요긴하게 사용할 수 있을 것이다.
* <input type="file">: multiple, accept, files 속성
: input type="file" 인 경우 이제는 여러 개의 파일을 multiple="true"로 시켜주거나 multiple 을 적어주는 것 만으로도 여러 개의 파일을 받을 수 있게 되었다. 그리고 accept를 통해서 현재 입력받고자 하는 MIME 타입을 선택해서 설정할수도 있다. (현재 accept는 크롬에서만 제대로 동작한다.) 그리고 자바스크립트에서는 File API가 file 타입의 input에 대해서 새롭게 추가되었다. 일단 예를 보자.
<input type="file" id="imageFile" accept="image/jpeg, image/png" multiple />
: 위처럼 태그를 설정하고나서 크롬에서 확인해보면 jpeg, png 파일이 아닌 맨 위의 index.html 파일이 비활성화된 것을 확인할 수 있고, 한번에 여러 개의 파일을 입력 받을 수 있는 것을 확인할 수 있다. 그리고 여러 개를 선택하게 되면 이렇게 "4 files"이라고 명시해준다.
: 이렇게 여러 파일을 선택하고나서 파일에 대한 접근은 자바스크립트에서 위의 element를 가져와서 .files 속성으로 바로 접근할 수 있다. 파일 처리하는 부분이 이전에는 value를 가져와서 로컬 영역의 파일을 다루었다면, 이제는 보안상 직접 'C:\unikys\tistory\com\html5.txt' 이런식으로 접근이 불가능해졌다. 최신의 브라우져로 로컬의 파일을 열면 위의 주소창에 'files://C:/unikys/tistory/com/html5.txt' 이런식으로 앞에 프로토콜이 붙는 것을 확인할 수 있을 것이다. 자바스크립트에서는 이러한 프로토콜로 접근할 수 없고 직접 files 속성을 통해 접근하면 된다. 아래는 위의 imageFile input 태그와 연동한 간단한 예이다.
<script>
function getFileList() {
var imageFile = document.getElementById("imageFile");
var files = imageFile.files,
length = files.length,
alertString = "다음의 파일들을 선택했습니다.\n";
if (length > 0) {
for (var i = 0; i < length; i++) {
if ('name' in files[i]) {
alertString += files[i].name +"(" + files[i].size + "bytes)\n"
} else {
alertString += files[i].fileName +"(" + files[i].fileSize + "bytes)\n"
}
}
} else {
alertString = "위의 input에서 파일을 선택하세요.";
imageFile.focus();
}
alert(alertString);
}
</script>
<button onclick="getFileList()">Alert selected Files</button>
: 파일 선택 input에서 파일을 선택하고 위의 버튼을 누르면 파일 목록을 출력하는 간단한 예이다. 이렇게 파일에 대한 접근이 자바스크립트에서의 편의성이 높아졌다.
* <input type="submit">, <input type="image">: formmethod, formaction, enctype 속성
: 이제는 submit의 action과 method가 submit 버튼 단에서 설정이 가능해졌다. 이전에는 각기 다른 버튼을 만들어서 자바스크립트로 분기 시켰다면, 이제는 html 상에서 같은 form을 여러 다른 곳으로 분기시킬 수 있게 되었다. 이 속성은 input type="submit" 과 이미지 submit 버튼인 input type="image" 이 두가지에서 설정이 가능하다.
속성 | 설명 |
formmethod | Submit이 request를 보낼 방식(GET 또는 POST) |
formaction | Submit을 하면서 request를 보낼 url |
enctype | Request를 보낼 인코딩 타입, 다음의 3가지를 대표적으로 가진다.
|
: 아래의 예는 같은 form 안에서 하나는 form에서 설정한 기본 post method를, 다른 하나는 get method를 이용하도록 설정하고 있다. 먼저 그냥 submit 버튼을 누르면 위의 url에 추가 데이터 없이 #submit만 붙어서 submit 된 것을 확인할 수 있을 것이다. 반면, Submit using GET 버튼을 누르게 되면, 위의 주소창 '?data=unikys.tistory.com#submit"이 새롭게 붙은 것을 확인할 수 있을 것이다.
<form action="#submit" method="post"> Sending data: <input type="text" name="data" value="unikys.tistory.com" /><br /> <input type="submit" value="Submit" /> <input type="submit" formmethod="post" formaction="#submit" value="Submit using GET" /> </form>
: 먼저 post를 하게 되면 주소창에 정보가 왼쪽처럼 없지만, GET으로 하게 되면 주소창에 데이터가 추가된 것을 볼 수 있다.
* 새롭게 추가된 element들
: 이번에는 새롭게 추가된 form element들을 살펴보자.
* <output>
: output element는 form이 입력된 뒤에 form을 처리한 결과를 표시하는 element로서 활용된다. 대표적인 예로 form에 두 input에 값이 입력되면 두 input의 값을 더해서 표시하는 예가 있다. 이럴 경우는 form의 oninput 이벤트를 이용하거나 output element의 onforminput 이벤트를 이용한다. 현재 output element의 onforminput 이벤트는 오페라에서만 작동하고 form의 oninput은 모든 브라우져에서 작동하므로 output element를 사용하게 되면 일단은 form의 oninput 이벤트를 이용하는 것이 좋을 것이다. 그럼 아래는 두개의 수를 더하는 간단한 예이다. 아래의 구현은 오페라가 아니면 제대로 작동 안 할 것이다.
<form onsubmit="return false" oninput="o.value = parseInt(a.value) + parseInt(b.value)"> <input name="a" type="number" step="any"> + <input name="b" type="number" step="any"> = <output name="o"></output> </form> <form onsubmit="return false"> <input name=a type=number> + <input name=b type=number> = <output onforminput="value = a.valueAsNumber + b.valueAsNumber"></output> </form>
: 아래는 오페라에서 작동한 이미지이다.
: keygen element를 이용하게 되면, private key와 public key를 쌍으로 생성하게 되며, 로컬에는 private key를 저장하고 서버로는 public key를 보내게 된다. 서버에서는 이 키를 이용하여 SSL이나 로그인 프로세스를 자동으로 하고 다음에 사용자가 접속하게 되면 이 public 키를 통해 로그인을 자동으로 시켜줄수도 있을 것이다. 로그인등의 프로세스를 keygen을 통해서 요긴하게 구현할수도 있으니 한번 더 자세한 스펙을 찾아보는 것도 좋을 것이다.
<form action="#keygen"> <p><keygen name="key"></p> <p><input type=submit value="Submit key..."></p> </form>
: 브라우져에서는 key를 생성할 등급을 설정하고 submit을 하게 되면 크롬이외의 브라우져라면 생성된 키를 URL로 확인할 수 있을 것이다. 이것이 바로 서버로 보내지는 public key이고 클라이언트 로컬에 private key가 보관되게 된다.
: 현재 로그인/패스워드의 방식에서 위의 keygen을 이용해서 로그인을 하는 WebID라는 프로젝트도 진행중이니 관심있으면 아래의 사이트에서 한번 알아보는 것도 좋을 것이다.
* <progress>
: progress element 이제 흔하게 봐왔던 로딩의 진행도를 보여주는 그러한 element를 하나의 html element 로서 새롭게 제공하게 된 것이다. 이전에 자바스크립트로 div의 크기를 점점 늘려가던것에서 이제는 복잡한 DOM 수정없이 값만 설정해주면 쉽게 구현할 수 있다.
속성 | 설명 |
max | Progress 바가 꽉 차기 위한 값 |
value | 현재 Progress의 값 |
<script>
var intervalProgress, currentProgress = 0, progressElement;
function updateProgress() {
currentProgress += 0.01;
if (currentProgress > 1) {
currentProgress = 0;
}
progressElement.value = currentProgress;
}
function toggleProgress() {
if (intervalProgress) {
clearInterval(intervalProgress);
intervalProgress = false;
} else {
progressElement = document.getElementById("progress")
intervalProgress = setInterval(updateProgress, 50);
}
}
</script>
<progress max="1" value="0" id="progress" onclick="toggleProgress();">지원하지 않는 브라우져입니다(크롬 사</progress><button onclick="toggleProgress();">Start/stop progress</button>
: 버튼을 클릭하면 50ms 마다 progress바를 0.01씩 채우는 함수를 호출하는 예이다.
* <meter>
: meter element는 알려진 범위내에서 특정 값이 계속 변화되는 경우 그 값의 변동을 표시해줄 수 있는 element이다. 예를 든다면 배터리 상태라던가, 음향 출력이라던가와 같은 것을 표시해줄 수 있다.
속성 | 설명 |
min | meter에서 다룰 최소값 |
max | Progress 바가 꽉 차기 위한 값 |
low | min에서부터 시작하는 낮은 분류 기준값 설정 |
high | max까지 범위를 갖는 높은 분류 기준값 설정 |
optimum | 최적의 값, 가까울수록 초록색바가 된다 |
value | 현재 Progress의 값 |
Your score is: 50 <meter value="50" min="0" max="100" low="60" high="90" optimum="100">50</meter> 80 <meter value="80" min="0" max="100" low="60" high="90" optimum="100">80</meter> 95 <meter value="95" min="0" max="100" low="60" high="90" optimum="100">95</meter>
* 기존의 element에 새롭게 추가된 속성들
: 이번에는 기존에 사용하던 element들에 새롭게 추가된 속성들을 살펴보자.
* <form>, <input>: autocomplete
: 기존의 form과 input의 값을 자동으로 채워주는 autocomplete 기능이 기본 html5 스펙에 올라왔다. 기존의 브라우져들에서 해주던 기능을 html5에서 명시적으로 지원할 수 있게 해준 것이다. 현재는 오페라를 제외하고 나머지 브라우져들에서 지원해주고 있다. autocomplete 속성은 <form> 의 속성으로 들어갈수도 있고, 개별의 <input> 태그 속에도 들어갈 수 있다.
속성 | 설명 |
autocomplete | 자동완성을 설정하는 속성ㅡ on 또는 off 값을 가짐 |
<form action=" #autocomplete"="" method="get" autocomplete="on"> First name:<input type="text" name="fname" /><br /> E-mail: <input type="email" name="email" /><br /> <input type="submit" /> </form>
: 크롬에서의 동작을 살펴보면 다음과 같이 된다. 먼저 왼쪽과 같이 입력을 하고 submit을 하면 다음에 다시 입력을 할 때에는 오른쪽과 같이 이전에 입력했던 값을 선택하여 자동완성할 수 있도록 도와준다.
* <input>: list와 <datalist>
: 이번에는 또 다른 의미의 자동완성 기능이다. 위의 autocomplete는 사용자가 입력했던 값에 기반하여 자동 완성을 도와주는 것이라면 이번에는 서버측, 서비스 제공자측에서 자동완성 목록을 제공해주는 것이다. 그것은 <input> 태그에 list 속성과 <datalist> 태그를 이용해서 만들어낼 수 있다. 이것을 조합하면 네이버나 구글의 검색바와 같이 아래로 자동완성기능을 쉽게 구현할 수 있다.
속성 | 설명 |
list | <input> 태그 안에 <datalist>의 id를 받는다 |
<input list="browsers" /> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Google Chrome"> <option value="Opera"> <option value="Safari"> </datalist>
: 위처럼 <datalist>는 <select>처럼 안에 <option>들과 속성으로 id를 부여받는다. <input> 에서의 list 속성은 <datalist>의 id와 일치해야 적용이 된다. 동적으로 부여하고자 한다면, 자바스크립트로 <datalist> 태그를 접근해서 <option> 을 추가하거나 수정하면 될 것이다. 입력에 대한 필터링은 자동으로 해준다.
: 실제로 크롬에서 돌아가는 것을 확인해보면, input 박스를 그냥 한번 클릭하면 왼쪽처럼 모든 선택가능한 항목들이 나오고, 문자를 입력하게 되면 자동으로 필터링을 해준다.
* <input>: required, pattern, placeholder, autofocus
: 사용자의 입력을 받는 <input> 의 형태가 다양해지면서 편리한 기능들이 많이 생겼다.
속성 | 설명 |
required | Submit할 때 필수 검사를 한다, boolean값이나 아무 값을 안써도 적용된다 (크롬, 오페라, 파이어폭스) |
pattern | Submit할 때 validation 검사를 한다, 자바스크립트의 정규표현식을 값으로 받는다 (크롬, 오페라, 파이어폭스) |
placecholder | 아무것도 입력이 안되었을 때 회색으로 보여줄 텍스트, 입력이 포커스를 받으면 없어진다 (크롬, 오페라, 파이어폭스, 사파리) |
autofocus | 시작할 때 자동으로 포커스를 받는다, boolean 값이나 아무 값을 안써도 적용된다 (크롬, 오페라, 파이어폭스, 사파리) |
: 아래는 required와 pattern, placeholder를 이용한 간단한 예이다.
<form>
<input placeholder="3 Letter Code" pattern="[A-Za-z]{3}" required/>
<input type="submit" />
</form>
: 아래는 파이어폭스에서 구동한 이미지이다. 왼쪽에 회색글씨로 들어온 것은 placeholder 속성 값을 설정 시킨것이고, 바로 submit을 해보면 값을 입력해야된다고 경고를 띄운다. 이것은 required 속성을 설정했기 때문이다.
: 값을 입력한 다음에 submit을 하면 format을 맞추라고 경고가 뜨는데, 이것은 pattern에 입력했던 정규식과 일치하지 않기 때문에 일어나게 된다. 따라서 정규식에서 요청하는 3글자로 설정하게 되면 경고가 없어지고 submit을 할 수 있게 된다. 원래는 이러한 모든 작업을 onsubmit 이벤트에 자바스크립트 함수를 호출했지만 이제는 html만으로 모든것이 가능해진것이다.
* 정리
: 새로운 input form element들
속성 | 설명 |
datetime | 시간/날짜를 입력하는 폼 |
date | 날짜를 입력하는 폼 |
week | 주를 입력하는 폼 |
month | 달을 입력하는 폼 |
time | 시간을 입력하는 폼 |
number | 숫자를 입력하는 폼 |
range | 슬라이드로 입력하는 폼 |
color | 색을 입력하는 폼 |
이메일을 입력하는 폼 | |
url | url을 입력하는 폼 |
tel | 전화번호를 입력하는 폼 |
search | 검색을 하는 폼 |
: 기존의 form element에서 바뀐 속성
속성 | 설명 |
<input type="checkbox" indeterminate /> | 일부 선택 상태 |
<input type="file" multiple /> | 파일을 여러 개 입력 받음 |
<input type="file" accept="MIME" /> | MIME 타입의 파일만 입력 받도록 설정 |
<input type="file" /> .files | 자바스크립트로 선택된 파일 접근 |
<input type="submit", "image" formmethod="METHOD"> | 폼의 GET/POST 방식 설정 |
<input type="submit", "image" formaction="ACTION"> | 폼의 action을 개별적으로 설정 가능 |
<input type="submit", "image" enctype="ENCTYPE"> | 입력의 인코딩 방식 설정 |
: 새롭게 추가된 element들
속성 | 설명 |
<output> | form 입력 뒤 수식 등의 결과를 표시해주는 element |
<keygen> | Private/Public 키 쌍을 만들어 서버로 키를 제공하는 element |
<progress> | 진행 상태바를 보여주는 element |
<meter> | 알려진 범위 내 수치를 보여주는 element |
: 기존의 element에 새롭게 추가된 속성
속성 | 설명 |
<form autocomplete="on"> | form의 자동완성을 설정해주는 속성 |
<input list="datalist">, <datalist> | 자동완성을 도와주는 목록을 작성하고 설정하는 속성 |
<input required> | 입력을 필수 요구사항으로 설정 |
<input pattern="RegExp"> | 입력의 요구사항을 정규표현식으로 설정 |
<input placeholder="PLACEHOLDER"> | 입력된 값이 없을때 보여줄 텍스트 |
<input autofocus> | 자동으로 포커스를 설정해주는 속성 |
: 이렇게 다양한 입력폼들이 있는데, 아직은 사용에 주의를 요하는 입력 폼과 엘레멘트들도 있고, 향후 사용이 매우 기대되는 폼들도 있다. 이들을 최소한 내후년안에는 효과적으로 이용할 수 있는 환경이 구축될 것이라고 생각한다.
* 다음편
2016/05/04 - [HTML5 튜토리얼] Web storage (localStorage, sessionStorage)
2017/01/09 - [HTML5 튜토리얼] navigator.geolocation 위치 정보 수집 API
HTML5 튜토리얼 - 새로운 form element들 끝.
- Total
- Today
- Yesterday
- Writing
- 속깊은 자바스크립트 강좌
- mini project
- Android
- HTML5
- lecture
- 서울
- 뽐뿌
- 안드로이드 앱 개발 기초
- php
- 샷
- google app engine
- Python
- Javascript
- 삼식이
- 자바스크립트
- 탐론 17-50
- ny-school
- java
- gre
- 사진
- 팁
- HTML5 튜토리얼
- c++
- K100D
- 안드로이드
- 강좌
- gae
- TIP
- GX-10
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | |||||
| 3 | 4 | 5 | 6 | 7 | 8 | 9 |
| 10 | 11 | 12 | 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 | 21 | 22 | 23 |
| 24 | 25 | 26 | 27 | 28 | 29 | 30 |