2011/09/14 에 해당되는 글 2건

  1. 2011.09.14 6.3 HTML5 Input Attr: Required field
  2. 2011.09.14 6.2 HTML5 Input Attr: Autofocus
2011. 9. 14. 12:30

6.3 HTML5 Input Attr: Required field

HTML5 2011. 9. 14. 12:30
Required filed는 입력을 강제화 시킬 수 있는 항목을 지정할 때 사용할 수 있습니다. 이 역시도 기존에 Java Script를 사용해서 이미 많이 사용하던 기능 중의 하나 입니다.
 HTML5에서는 아래와 같이 Required 속성을 사용 할 수 있습니다.

<form>
<label for="movie">What is your favorite movie : </label>
<input name="movie" type="text" required />
<input type="submit" value="Submit"/>
</form>

 만약 입력하지 않고 Submit 버튼을 누르게 되면 웹 브라우저는 사용자에게 입력을 요구 합니다.


사용하기 따라서 굉장히 편리한 기능이긴 하지만 아직까지 입력을 요구할 때 메시지를 설정하는 부분이 없고 지금은 FireFox와 Opera 9 만 지원하고 있어서 사용이 제한적입니다.

IE 9
Firefox 4 ✓
Safari 5
Chrome 8
Opera 9 ✓

  1. HTML5 DocType의 정의
  2. HTML5 Header stuff
  3. Audio
  4. Video
  5. Canvas
    Canvas: Rectangle
    Canvas: Shadow
    Canvas: Path
    Canvas: Image
    Canvas: Text
  6. Web form 2.0
    Input Attr: Placeholder
    Input Attr: Autofocus
    Input Attr: Required field
    Input Attr: DataList
    Input Type: Search
    Input Type: Email, URL, Phone
    Input Type: Range
    Input Type: Number
    Input Type: Date
    Input Type: Color
  7. Towards Semantic Web
    Semantic <mark>
    Semantic <time>
    Semantic <meter>
    Semantic <progress>
    Semantic <section>
    Semantic <header>
    Semantic <footer>
    Semantic <nav>
    Semantic <article>
    Semantic <aside>

저작자표시변경금지
html5, HTML5시리즈, Web Form
0 0
2011. 9. 14. 08:30

6.2 HTML5 Input Attr: Autofocus

HTML5 2011. 9. 14. 08:30

로그인 화면 같은데서 기본적으로 포커스가 아이디 쪽으로 맞추어져 있는 것을 본 적이 많을 것 같습니다. Autofocus는 기본적으로 기존에는 Java Script를 사용해서 설정했지만 HTML5에서는 이 조차도 하나의 속성으로 제공하고 있습니다.

<label for="name">Your name goes here :</label><input id ="name" type="text" autofocus/>

Autofocus는 위에서 보는 바와 같이 해당 태그 뒤에 그냥 autofocus라고 명시하면 바로 동작이 됩니다.

Browsers Autofocus Support
IE 9 Beta
Firefox 4 ✓
Safari 4.0 ✓
Chrome 3.0 ✓
Opera 10 ✓



하지만 Autofocus도 현재는 Internet Explorer 9은 지원하지 않고 있습니다.  그래서 여전히 Java Scriptm를 사용하는 방식도 한동안 사용할 수 밖에 없는 상황입니다.

<script>
function testAttribute(element, attribute) {
  var test = document.createElement(element);

  if (attribute in test) {
    return true;
  }
  else
    return false;
  }

  window.onload = function() {
  if (!testAttribute('input', 'autofocus'))
    document.getElementById('Text2').focus();
  //for browser has no autofocus support, set focus to Text2.
}
</script>
<label for="Text1">Support Autofocus :</label><input id ="Text1" type="text" autofocus/> <br />
<label for="Text2">No Autofocus Support :</label><input id ="Text2" type="text" />

김영욱 iwinkey@hotmail.com

현재 한국마이크로소프트에서 Evangelist로 근무하고 있으며 국내 유수의 대기업 프로젝트에 참여했던 경험과 Microsoft MVP로 다년간 활동했습니다.
올해는 컨슈머와 관련된 앱을 만드는 다양한 업체들을 발굴하고 지원하는 일을 맡고 있습니다.


HTML5 강좌 전체 목록

  1. HTML5 DocType의 정의
  2. HTML5 Header stuff
  3. Audio
  4. Video
  5. Canvas
    Canvas: Rectangle
    Canvas: Shadow
    Canvas: Path
    Canvas: Image
    Canvas: Text
  6. Web form 2.0
    Input Attr: Placeholder
    Input Attr: Autofocus
    Input Attr: Required field
    Input Attr: DataList
    Input Type: Search
    Input Type: Email, URL, Phone
    Input Type: Range
    Input Type: Number
    Input Type: Date
    Input Type: Color
  7. Towards Semantic Web
    Semantic <mark>
    Semantic <time>
    Semantic <meter>
    Semantic <progress>
    Semantic <section>
    Semantic <header>
    Semantic <footer>
    Semantic <nav>
    Semantic <article>
    Semantic <aside>
저작자표시변경금지
html5, HTML5시리즈, Web Form
0 0
1