권남

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
====== HTML5 Form ======
  * input 엘리먼트의 type 값이 다양해 졌다.
  * email : Email
  * url : URL
  * tel : 전화번호
  * search : 검색 
  * ragne : 슬라이더(범위)
  * number : 숫자
  * date : 날짜
  * datetime : 날짜와 시간
  * color : 색상
  * autofocus : 자동포커스
    * FF 13에서 이상한 곳으로 자동 스크롤되는 경우가 있음
  * placeholder : input 영영에 안내 문구 넣기
  * contenteditable : input이 아닌 일반 엘리먼트에 지정하여 input 처럼 즉시 수정할 수 있게 한다.
  * autocomplete="off" : 해당 입력필드 자동입력기능 끄기

===== HTML5 지원여부 검사 =====
  * 각 타입별로 input 객체를 생성해서 type을 지정해보고 값을 입력해서 정확한 값이 들어가는지 테스트해볼 수 있다.
  * [[http://modernizr.com/|Modernizr]]를 통해 HTML5와 CSS3 최신 기법의 사용 가능성을 검사할 수 있다.

===== Color =====
  * 대체제 : [[http://recursive-design.com/projects/jquery-simple-color/|jQuery SimpleColor]]
  * color 지원여부 검사<code javascript>
function hasColorSupport() {
  input = document.createElement("input");
  input.setAttribute("type", "color");
  var hasColorType = (input.type !== "text");
  // handle Safari/Chrome partial implementation
  if(hasColorType){ // <label id="code.js.webkit" />
    var testString = "foo";
    input.value=testString;
    hasColorType = (input.value != testString);
  }
  return(hasColorType);
}
</code>

===== autofocus =====
<code javascript>
function hasAutofocus() {
  var element = document.createElement('input');
  return 'autofocus' in element;
}

$(function(){
   if(!hasAutofocus()){
     $('input[autofocus=autofocus]').focus();
   }
});
</code>

===== placeholder =====
<code javascript>
function hasPlaceholderSupport() {
  var i = document.createElement("input");
  return "placeholder" in i;
}
</code>

===== contenteditable =====
  * contenteditable="true" 형태로 일반 필드에 지정한다.
  * blur 이벤트를 받아서 해당 값이 변경되면 저장해 Ajax 호출로 저장한다.
<code javascript>
if (document.getElementById("요소ID").contentEditable != null) {
  // content editable을 지원할 때 하는 작업
}
</code>

===== multiple =====
  * [[http://www.w3schools.com/tags/att_input_multiple.asp|input multiple]] input 시 다중 선택이 가능하다. 대부분의 최신 브라우저들, IE 10+
  * ''type''이 ''email''과 ''file'' 일 경우에만 작동한다.
권남

사용자 도구

사이트 도구

문서 도구
