검색결과 리스트
2011/09/08 에 해당되는 글 2건
- 2011.09.08 6.1 HTML5 Input Attr: Placeholder
- 2011.09.08 6. HTML5 Web form 2.0
2011. 9. 8. 12:30
Placeholder라는 텍스트 박스에 미리 희미하게 입력되어 있어서 사용자들의 입력을 도와주는 기능을 말합니다. 아래 그림은 국내 모 포탈의 화면으로 아이디와 비밀번호의 입력을 자연스럽게 유도하고 있습니다.
이런 Placeholder를 구현하기 위해서는 기존에는 Java Script를 사용하는 방법만이 유일했지만 HTML5에서는 기본적으로 Placeholder를 제공합니다.
<label for="first_name">First Name</label> : <input id="first_name" placeholder="First name goes here">
그런데 아직 Placeholder는 IE에서는 지원되지 않고 있다. 그래서 당분간은 Java Script를 사용하는 방법이 유지되어야 할 것 같습니다.
Java Script를 활용하는 소스는 아래 소스를 참조하면 됩니다.
<label for="demo">Placeholder demo</label> : <input id ="demo" placeholder="Support Placeholder" />
<script>
function testAttribute(element, attribute)
{
var test = document.createElement(element);
if (attribute in test)
return true;
else
return false;
}
if (!testAttribute("input", "placeholder"))
{
window.onload = function()
{
var demo = document.getElementById("demo");
var text_content = "No Placeholder support";
demo.style.color = "gray";
demo.value = text_content;
demo.onfocus = function() {
if (this.style.color == "gray")
{ this.value = ""; this.style.color = "black" }
}
demo.onblur = function() {
if (this.value == "")
{ this.style.color = "gray"; this.value = text_content; }
}
}
}
</script>
HTML5 강좌 전체 목록
이런 Placeholder를 구현하기 위해서는 기존에는 Java Script를 사용하는 방법만이 유일했지만 HTML5에서는 기본적으로 Placeholder를 제공합니다.
<label for="first_name">First Name</label> : <input id="first_name" placeholder="First name goes here">
그런데 아직 Placeholder는 IE에서는 지원되지 않고 있다. 그래서 당분간은 Java Script를 사용하는 방법이 유지되어야 할 것 같습니다.
| Browsers | Placeholder Support |
|---|---|
| IE 9 | |
| Firefox 3.7 | ✓ |
| Safari 4.0 | ✓ |
| Chrome 4.0 | ✓ |
| Opera 11 | ✓ |
Java Script를 활용하는 소스는 아래 소스를 참조하면 됩니다.
<label for="demo">Placeholder demo</label> : <input id ="demo" placeholder="Support Placeholder" />
<script>
function testAttribute(element, attribute)
{
var test = document.createElement(element);
if (attribute in test)
return true;
else
return false;
}
if (!testAttribute("input", "placeholder"))
{
window.onload = function()
{
var demo = document.getElementById("demo");
var text_content = "No Placeholder support";
demo.style.color = "gray";
demo.value = text_content;
demo.onfocus = function() {
if (this.style.color == "gray")
{ this.value = ""; this.style.color = "black" }
}
demo.onblur = function() {
if (this.value == "")
{ this.style.color = "gray"; this.value = text_content; }
}
}
}
</script>
|
 |
현재 한국마이크로소프트에서 Evangelist로 근무하고 있으며 국내 유수의 대기업 프로젝트에 참여했던 경험과 Microsoft MVP로 다년간 활동했습니다. |
HTML5 강좌 전체 목록
- HTML5 DocType의 정의
- HTML5 Header stuff
- Audio
- Video
- Canvas
Canvas: Rectangle
Canvas: Shadow
Canvas: Path
Canvas: Image
Canvas: Text - 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 - Towards Semantic Web
Semantic <mark>
Semantic <time>
Semantic <meter>
Semantic <progress>
Semantic <section>
Semantic <header>
Semantic <footer>
Semantic <nav>
Semantic <article>
Semantic <aside>
2011. 9. 8. 08:30
웹 폼(Web form)은 말 그대로 사용자에게 특정한 입력을 요구하나 출력하는 용도로 사용되는 폼 객체들을 제공해 주고 있습니다. 기존에 이런 형태로 많이 사용되었습니다.
<input type="text" ......../>
위의 경우는 Text 필드의 경우 입니다. HTML5의 웹 폼 2.0의 경우에 이 기본적인 Text 필드 객체에 새로운 속성들이 여럿 추가 되었습니다.
- PlaceHolder
- Autofocus
- Required
- DataList
이름만 보아도 어떤 역할을 하는지 대충 짐작이 가실 것으로 생각하고 하나 하나에 대한 추가적인 설명은 계속이어지는 다른 글에서 하도록 하겠습니다.
이외에도 새로운 타입의 폼들이 추가 되었습니다.
- Search
- Email, URL and Phone
- Range as Slider
- Number as Spinner
- Data and Times
- Color picker
다음 글 부터는 이 웹 폼 2.0에 대한 설명을 하나씩 이어 가도록 하겠습니다.
- HTML5 DocType의 정의
- HTML5 Header stuff
- Audio
- Video
- Canvas
Canvas: Rectangle
Canvas: Shadow
Canvas: Path
Canvas: Image
Canvas: Text - 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 - Towards Semantic Web
Semantic <mark>
Semantic <time>
Semantic <meter>
Semantic <progress>
Semantic <section>
Semantic <header>
Semantic <footer>
Semantic <nav>
Semantic <article>
Semantic <aside>
댓글을 달아 주세요