<input type="text" x-webkit-speech />

Google Chrome 16.0.912.75 m  - Working well (O)
Internet Explorer 9.0.8.112        - Not Working (X)
Opera 11.60                            -  Not Working (X) 
Safari 5.1.2                             -  Not Working (X) 
FireFox 9.0.1                          - Not Working (X)

Fore more Details Click it. 
좀더 자세한 사항은 여기를 클릭 하세요. 

You can get sample source code here.
샘플 코드 입니다. 다운 받아서 사용하시면 됩니다.

HTML5SPEECH.html

HTML5ApplicationCache.html

1. Click Create Table Button -> The table will be created
2. Type Anything in Text field and click new to do item button. (You can make data as many as you want)
3. You can delete the data. (click the line Delete)
4. You can drop the table (Click the drop table button)

1. 먼저 create Table Button을 click 하셔서 table을 생성합니다. (Table1Test 테이블이 생성될 겁니다.)
2. text field 에 원하는 글자를 넣고 new to do item 버튼을 누르세요. 그러면 생성된 테이블에 그 데이터가 들어갑니다. 여러분이 원하는 만큼 만드세요.
3. 만들어진 데이터는 밑에 보여지게 됩니다. 여기서 Delete 링크를 누르면 해당 데이터는 지워지게 됩니다.
4. Drop table 버튼을 누르면 이 테이블 전체가 지워지게 됩니다.

사용법은 위에 있고 전체 소스는 아래에 업로드 하겠습니다.
You can download the source code below.

HTML5WebSQLDB.html

브라우저에서 실행합니다.

유저가 textbox를 선택하면 프로그램적으로 얘기하면 이 textbox가 활성화 되면 이렇게 리스트가 출력 됩니다.

그리고 유저가 이 리스트 중 아무거나 선택을 하면 그 선택한 값을 이렇게 출력 할 수도 있습니다.

조금 정치적인 예문이었죠?

인터넷 뉴스 보면 나오니까... 들은 얘기들인데... 내 생각은 말 못하겠어요... ^^

그래서 급하게 '아무 말 못하겠다'를 하나 더 만들어서 그걸 선택해 버렸네요.

쫄지 말아야 되는데... :)

아 그리고 론스타 비리, 디도스 부정선거 비리도 있는데 깜빡했다.. 아쉽네...

지난번에도 썼었는데..

학생은 하라는 공부하고 직장인들은 경제를 위해서 열심히 일해야 합니다.

그리고 국민들은 열심히 정치에 참여해야 합니다.   ^^

이 기능도 오페라 브라우저에서는 잘 됩니다. 그런데 다른 브라우저에서는 잘 되는지 모르겠네요. 제가 테스트하던 크롬에서는 안되네요.

***  placeholder

input box를 보면 미리 연한 글씨로 글자가 쓰여져 있는 경우가 있습니다. 유저가 그 textbox를 클릭하면 이 연한 글자는 지워지고 유저가 원하는 글자를 입력할 수 있게 되는데요. 이 연한 글자(guide)가 나오도록 하는 것이 placeholder 입니다.

<input type="text" placeholder="Type Anything"> <p>

보시면 맨 아래 input box에 Type Anything이라는 글자가 미리 나와 있죠?

*** Required

회원가입을 하다보면 id, password 같은 것들은 필수 입력 항목입니다.

이 필수 입력항목을 넣지 않고 버튼을 누르면 이 입력 항목을 넣으라는 메세지가 나오죠?

예전에는 이것을 모두 JavaScript로 했는데 HTML5에서는 자체적으로 이 기능을 제공하고 있습니다.

방금 전 placeholder 했던 tag에 required 를 넣어 보세요.

<input type="text" placeholder="Type Anything" required> <p>

이렇게 Required 를 한 input box에 아무것도 안 넣고 버튼을 누르면 값을 넣으라고 메세지가 나옵니다.

브라우저 마다 똑 같이 나오는 것은 아닙니다. 처음 것은 Opera 이고 두번째 것은 Chrome 입니다. 기능은 제공하지만 모양이나 문구는 다르게 나옵니다.

*** date,time,month,week

유저에게 날짜등을 입력받을 때 달력이 뜨게 하는 기능이 있습니다.

아직까지는 이 기능 구현할 때 아주 복잡한 자바스크립트를 사용합니다.

하지만 HTML5에서는 아주 간단하게 이런 기능을 구현할 수 있습니다.

다만 이것도 오페라 브라우저에서만 지원이 되는 것 같습니다.

<label> Choose a date :
            <input type="date"/>
            </label><br/>
            <label> Choose a time :
            <input type="time"/>
            </label><br/>
            <label> Choose a month :
            <input type="month"/>
            </label><br/>
            <label> Choose a week :
            <input type="week"/>
            </label><br/>

이렇게 해당 칸을 클릭하면 달력이 뜹니다. 그냥 단지 type="date" 했을 뿐인데 아주 근사한 달력이 제공 되네요. (오페라에서만.. 아직 까지는...)

보시다 시피 date 타입은 연월일, month 타입은 연월 그리고 week 타입은 선택한 주가 1년중 몇번째 주인지가 나옵니다.

time은 1~24시간이 표시됩니다. 분단위로 위아래로 움직일 수 있고 직접 type 도 가능합니다.

여기까지 HTML5이 Form 에 대해서 알아 봤습니다.

그럼.. 새해 복 많이 받으세요....