사용자 도구

사이트 도구


html:html5:form

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을 지정해보고 값을 입력해서 정확한 값이 들어가는지 테스트해볼 수 있다.
  • Modernizr를 통해 HTML5와 CSS3 최신 기법의 사용 가능성을 검사할 수 있다.

Color

  • 대체제 : 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);
    }

autofocus

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

placeholder

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

contenteditable

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

multiple

  • input multiple input 시 다중 선택이 가능하다. 대부분의 최신 브라우저들, IE 10+
  • typeemailfile 일 경우에만 작동한다.
html/html5/form.txt · 마지막으로 수정됨: 2013/02/26 11:26 저자 kwon37xi