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” : 해당 입력필드 자동입력기능 끄기

• 각 타입별로 input 객체를 생성해서 type을 지정해보고 값을 입력해서 정확한 값이 들어가는지 테스트해볼 수 있다.
• Modernizr를 통해 HTML5와 CSS3 최신 기법의 사용 가능성을 검사할 수 있다.

• 대체제 : jQuery SimpleColor
• color 지원여부 검사

  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);
  }

function hasAutofocus() {
  var element = document.createElement('input');
  return 'autofocus' in element;
}
 
$(function(){
   if(!hasAutofocus()){
     $('input[autofocus=autofocus]').focus();
   }
});

function hasPlaceholderSupport() {
  var i = document.createElement("input");
  return "placeholder" in i;
}

• contenteditable=“true” 형태로 일반 필드에 지정한다.
• blur 이벤트를 받아서 해당 값이 변경되면 저장해 Ajax 호출로 저장한다.

if (document.getElementById("요소ID").contentEditable != null) {
  // content editable을 지원할 때 하는 작업
}

• input multiple input 시 다중 선택이 가능하다. 대부분의 최신 브라우저들, IE 10+
• type이 email과 file 일 경우에만 작동한다.