More actions
[[pagelist(html5)]]
요약
- 웹 양식을 지원하는 태그를 폼 태그(Form Tag)라 한다
- 폼 태그는 HTML 문서에서 사용자 입력을 위해 제공되는 양식 태그
- 추가요소(webForm 2.0)
- 입력 양식 : Range 양식, email등
- 입력 보조 수단
- 입력 값 검증 등
브라우저 지원 여부
- http://caniuse.com/
- http://cfile9.uf.tistory.com/image/133539014C76281A1B4E24
- http://cfile23.uf.tistory.com/image/1212FF364C5A80AF697A7F
webForms2 library
- Google's 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 구현을 가능하도록 해 준다. 이와 관련한 다음의 글을 참고해 보기 바란다
new feature
new type
- search
- tel
- url
- datetime, date, month, week, time, and datetime-local
- number
- range
- color
new attribute
- list — 값의 제한을 포함하는 datalist element를 의미
- max and min - 유요한 날짜, 시간 그리고 숫자 값
- pattern - 제약적인 정규식을 허용
- placeholder - field에 text hint를 보여 줌
element
range
<input type="range" min=0 max=10 step=2 value=2>
number
<input type="number" min=1 max=10 step=1 value=5>
date
<input type="date" min="2001-01-01" max="2010-08-31" step=1 value="2010-08-26">
<input type="datetime"><input type="datetime-local"><input type="month">
<input type="week"><input type="time">
input-type
- search 타입, 전화번호 입력을 위한 tel 타입, 리소스 주소 입력을 위한 url 타입, 이메일 입력을 위한 email 타입, 색상 입력을 위한 color 타입 등이 새로 추가
- 참고: 새로운 입력(input) 양식에 대한 다음 글을 참고하기 바란다
input support
focus
<input type='search' autofocus> <input type='email' placeholder="이메일 주소 입력"> <input type='tel' placeholder="전화번호 입력">
file upload
- multi file upload
<input type='file' multiple>
- file filtering
<input type='file' accept="image/gif">
- files 속성
<script type="text/javascript">
var selectedFiles = document.getElementById("file").files;
selectedFiles[0].name; //파일이름
selectedFiles[1].size; //파일사이즈
</script>
form submit
- 폼 전송 버턴인 submit, image 버튼에도 전송 방법, 위치를 정할 수 있다.
<form>
<input type="submit" formmethod="POST" formaction="/formOk.html">
</form>
추가된 폼 양식
progress
<progress max="1" value="0"></progress>
Output
- form 으로 전송되고, 값을 사용자가 조정 불 가능하다.
- hidden 과 비슷하지만 표시되는 컨트롤
<output name="sum">100</output>
DataList
- input 박스에 포커스가 오면 이 리스트를 보여준다
- input 양식의 option 선택
http://cfile30.uf.tistory.com/image/16593B0B4C774BE27544CA <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>
Keygen
- 암호키 생성
- 공개키기반의 키 쌍을 생성하며 폼 전송 시 공개키가 서버로 전송된다.
- 다음은 RSA 키를 생성하는 코드이며 브라우에 이 요소가 표시될 때 키의 길이를 선택하도록 표시된다
<keygen name="key" keytype="rsa"></keygen> http://cfile3.uf.tistory.com/image/127695134C77472C21DF54
Meter
- 용량과 임계치가 존재하는 상황에서 현재 사용량을 보여주는 UI
- min, max 로 최소값과 최대값(임계치)를 설정하며 현재 사용량의 정도(낮음, 높음, 적정)을 나타내는 low, high, optimum 속성이 제공된다.
<meter min="0" max="10"></meter>
유효성 검사
- 폼의 자동 유효성 검사를 꺼두고 싶다면 폼에 novalidate 를 부여하면 된다
<form novalidate action="demo_form.asp" method="get">
예
<input type=email>
에 입력된 값이 이메일 패턴과 다를 경우 폼은 전송되지 않고 에러 메시지를 표시해 준다.
- 입력 양식에 required 속성을 부여하면 빈 값이 허용되지 않는다
- 입력 양식에 pattern 속성으로 정규표현식으로 입력 패턴을 지정할 수 있다
<input type="text" name="postCode" pattern="/^\d{3}-?\d{3}$/" title="123-123">
http://cfile8.uf.tistory.com/image/186D8B0E4C774FD32BED8B
Event
- forminput, formchange
예
- 글이 입력될 때 마다 아래로 복사하고 글자 수를 표시하는 코드
<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>
- opera
http://cfile29.uf.tistory.com/image/20444E0B4C77793149EE87