1. HTML5 & CSS3
3장. 사용자 중심의 웹 폼 만들기
김홍준
twitter.com/jun0683

2. HTML 기본적인 폼 컨트롤 한계
기본폼
텍스트 필드
라디오 버튼
체크박스
멀티플 셀렉트 쓸려면... 하루종일...
버튼을 누르고.. 맥이면 다른키값
결국 다른 라이브러리 이용
폼끼리의 충돌문제

3. HTML 기본적인 폼 컨트롤 한계

4. 그래서?
새로운 폼 필드 타입
자동 포커스, 힌트 텍스트
contenteditable으로 HTML 요소를 입력 필드
로

5. HTML5의 새로운 입력 폼
기본적인 폼
<form method="post" action="/projects/1">
<fieldset id="personal_information">
<legend>프로젝트 정보</legend>
<ol>
<li>
<label for="name">이름</label>
<input type="text" name="name" autofocus="autofocus" id="name">
</li>
<li>
<input type="submit" value="Submit">
</li>
</ol>
</legend>
</fieldset>
</form>
ol : order list
li : list item
label(for) : 접근성(id값 참조)

6. voice over 데모

7. range로 슬라이더 만들기
<li>
<label for="priority">중요도</label>
<input type="range" min="0" max="10"
name="priority" value="0" id="priority">
</li>

8. 숫자와 스핀박스 다루기
<li>
<label for="estimated_hours">예상 시간</label>
<input type="number" name="estimated_hours"
min="0" max="1000"
id="estimated_hours">
</li>

9. 날짜
오페라만 제공
<li>
<label for="start_date">시작 날짜</label>
<input type="date" name="start_date"
id="start_date"
value="2011-10-22">
</li>

10. 이메일
모바일에서 유용 키보드 레이아웃이 변함
<li>
<label for="email">이메일 연락처</label>
<input type="email" name="email" id="email">
</li>

11. URL
모바일에서 유용
<li>
<label for="url">테스트 URL</label>
<input type="url" name="url" id="url">
</li>

12. 색깔
오페라는 제공...
<li>
<label for="project_color">프로젝트 색상</label>
<input type="color" name="project_color"
id="project_color">
</li>

13. 새로운 타입을 지원하지 않을때..
이해하지 못하는 브라우저는 단순 텍스트 필드로...
jQuery UI나 YUI(야후UI) 사용해서 텍스트 필드와 연
결
나중에.. 브라우저가 지원하면 자바스크립트를 제거하
는 꿈을... 꾸어본다...

14. 색상 선택기 교체(1)
jQuery와 CSS3속성 선택자를 이용 색상 필드
를 찾아서 교체
color 타입의 input요소를 찾아, jQuery플러그
인 simpleColor를 적용
if (!hasColorSupport()){
$('input[type=color]').simpleColor();
}

15. 색상 선택기 교체(2)
브라우저 자체에서 color타입을 지원한다면..
function hasColorSupport(){
input = document.createElement("input");
input.setAttribute("type", "color"); 브라우저 지원 체크
var hasColorType = (input.type !== "text");
if(hasColorType){
var testString = "foo";
input.value=testString; 브라우저 완벽지원 체크
hasColorType = (input.value != testString);
}
return(hasColorType);
}
if (!hasColorSupport()){
$('input[type=color]').simpleColor();
}

16. jQuery
$ == jQuery
$('input[type=color]').simpleColor();
||
jQuery('input[type=color]').simpleColor();
jQuery와 CSS3속성 선택자를 이용 색상 필드를 찾아서 교체

17. 모더나이저(modernizr)
HTML5와 CSS기능의 지원 여부를 검사
브라우저에서 지원하지 않는 기능을 대신 만
들어 주지 않음
has....

18. autofocus 자동 포커스 이동
페이지 하나에 autofocus 속성 하나만 가능
<label for="name">이름</label>
<input type="text" name="name" autofocus="autofocus" id="name">
지원되지 않을때(jQurey)
if(!hasAutofocus()){
$('input[autofocus=autofocus]').focus();
}

19. placeholder 힌트제공
placeholder 속성
<label for="first_name">이름</label>
<input id="first_name" type="text" autofocus="true" name="first_name"
placeholder="한선용">

20. 자동완성 방지
autocomplete 속성
<label for="password_confirmation">비밀번호 확인</label>
<input id="password_confirmation" type="password"
name="password_confirmation" value=""
autocomplete="off" placeholder="비밀번호를 다시 입력하세요" />

21. 지원하지 않을때..
jQuery가.. 갑인듯..
if(!hasPlaceholderSupport()){
$("#create_account").placeholder();
};

22. contenteditable
contenteditable을 이용한 즉석 편집
데이터 입력 부분을 자동으로 처리
텍스트영역을 감지해서 텍스트 필드로 바꾸는 작업 안해도
됨 <b>Name</b>
<span id="name" contenteditable="true">Hugh Mann</span>
데모

23. 데이터 유지
새로고침하면 내역이 사라짐
바꾼 내용을 서버로 전송
<b>Name</b>
<span id="name" contenteditable="true">Hugh Mann</span>
$(function(){
var status = $("#status");
$("span[contenteditable=true]").blur(function(){
var field = $(this).attr("id");
var value = $(this).text();
$.post("http://localhost:4567/users/1",
field + "=" + value,
function(data){
status.text(data); 서버에서 받은 데이터
}
);
});
});
contenteditable 속성이 true로 설정된
모든 span 요소에 이벤트 핸들러를 연결(jQuery.blur)

24. 지원되지 않을때..
편집 페이지를 만들어라
자바스크립트 차단 + HTML5 지원 X
감지 기능 추가
if(document.getElementById("edit_profile_link").contentEditable != null){
$("#edit_profile_link").hide();
...

25. 미래엔..
사이트 마다 다른 표현방식들..
모든 브라우저가 HTML5 지원을 한다면..
-_-)b

26. 참고
http://rintiantta.blog.me/40121658531
생활코딩 http://opentutorials.org/course/1