TOSSUG HTML5 讀書會 新標籤與表單
-
Upload
- -
Category
Technology
-
view
2.634 -
download
4
description
Transcript of TOSSUG HTML5 讀書會 新標籤與表單
![Page 1: TOSSUG HTML5 讀書會 新標籤與表單](https://reader030.fdocuments.net/reader030/viewer/2022020919/54bb63704a7959a2108b45c3/html5/thumbnails/1.jpg)
HTML5 The Missing Partothree
![Page 2: TOSSUG HTML5 讀書會 新標籤與表單](https://reader030.fdocuments.net/reader030/viewer/2022020919/54bb63704a7959a2108b45c3/html5/thumbnails/2.jpg)
Outline
• Semantic Web
• HTML5 標籤與屬性
• Web Forms 2.0
![Page 3: TOSSUG HTML5 讀書會 新標籤與表單](https://reader030.fdocuments.net/reader030/viewer/2022020919/54bb63704a7959a2108b45c3/html5/thumbnails/3.jpg)
Semantic Web
• Tim Bernes Lee 目前主力推動目標
![Page 4: TOSSUG HTML5 讀書會 新標籤與表單](https://reader030.fdocuments.net/reader030/viewer/2022020919/54bb63704a7959a2108b45c3/html5/thumbnails/4.jpg)
What is Semantic Web
• 網路上的資料都有電腦可以理解的意義標記
![Page 5: TOSSUG HTML5 讀書會 新標籤與表單](https://reader030.fdocuments.net/reader030/viewer/2022020919/54bb63704a7959a2108b45c3/html5/thumbnails/5.jpg)
So
• 想像有一天全部的資料可以連結起來
![Page 6: TOSSUG HTML5 讀書會 新標籤與表單](https://reader030.fdocuments.net/reader030/viewer/2022020919/54bb63704a7959a2108b45c3/html5/thumbnails/6.jpg)
![Page 7: TOSSUG HTML5 讀書會 新標籤與表單](https://reader030.fdocuments.net/reader030/viewer/2022020919/54bb63704a7959a2108b45c3/html5/thumbnails/7.jpg)
How ?
• XML for data
• (X)HTML for web content
![Page 8: TOSSUG HTML5 讀書會 新標籤與表單](https://reader030.fdocuments.net/reader030/viewer/2022020919/54bb63704a7959a2108b45c3/html5/thumbnails/8.jpg)
(X)HTML Standards
• HTML 4.01: Still using today
• XHTML 1: Bridge between HTML and XML
• XHTML 1.1: Preparing for Semantic Web
• XHTML 2.0 (廢棄)
![Page 9: TOSSUG HTML5 讀書會 新標籤與表單](https://reader030.fdocuments.net/reader030/viewer/2022020919/54bb63704a7959a2108b45c3/html5/thumbnails/9.jpg)
XHTML 2.0
• 烏托邦的標準• 太嚴格,不向下相容• ex: no <h1> ~ <h6>, <br>
![Page 10: TOSSUG HTML5 讀書會 新標籤與表單](https://reader030.fdocuments.net/reader030/viewer/2022020919/54bb63704a7959a2108b45c3/html5/thumbnails/10.jpg)
一次到位是有難度的
![Page 11: TOSSUG HTML5 讀書會 新標籤與表單](https://reader030.fdocuments.net/reader030/viewer/2022020919/54bb63704a7959a2108b45c3/html5/thumbnails/11.jpg)
How ?
• 正確的使用標籤• <table> for 表格資料 not 排版
• <p> for 段落
• <h1> ~ <h6> for 標題 not 大字體
• <blockquote> for 引言 not 縮排
• 不使用 <b>, <i>, <u>, <big>, <small>
![Page 12: TOSSUG HTML5 讀書會 新標籤與表單](https://reader030.fdocuments.net/reader030/viewer/2022020919/54bb63704a7959a2108b45c3/html5/thumbnails/12.jpg)
http://www.certifiedchinesetranslation.com/openaccess/rdfa-primer.html
![Page 13: TOSSUG HTML5 讀書會 新標籤與表單](https://reader030.fdocuments.net/reader030/viewer/2022020919/54bb63704a7959a2108b45c3/html5/thumbnails/13.jpg)
2nd Step
• 使用 RDFa, Microformats ... etc
![Page 14: TOSSUG HTML5 讀書會 新標籤與表單](https://reader030.fdocuments.net/reader030/viewer/2022020919/54bb63704a7959a2108b45c3/html5/thumbnails/14.jpg)
HTML
<div> 我是 Bob Smith, 不過朋友都叫我 Smithy。 以下是我的首頁網址: <a href="http://www.example.com">www.example.com</a>. 我住在 Albuquerque (NM),目前服務於ACME Corp., 擔任工程師一職。</div>
http://www.google.com/support/webmasters/bin/topic.py?topic=21997
![Page 15: TOSSUG HTML5 讀書會 新標籤與表單](https://reader030.fdocuments.net/reader030/viewer/2022020919/54bb63704a7959a2108b45c3/html5/thumbnails/15.jpg)
vCardBEGIN:VCARDVERSION:3.0N:Bob SmithFN:Bob SmithNICKNAME:SmithyURL: http://www.example.comTITLE:工程師ORG:ACME CorpADR;TYPE=work:;;;Albuquerque;NM;;END:VCARD
http://www.google.com/support/webmasters/bin/topic.py?topic=21997
![Page 16: TOSSUG HTML5 讀書會 新標籤與表單](https://reader030.fdocuments.net/reader030/viewer/2022020919/54bb63704a7959a2108b45c3/html5/thumbnails/16.jpg)
RDFa
<div xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Person"> 我是 <span property="v:name">Bob Smith</span>, 不過朋友都叫我 <span property="v:nickname">Smithy</span>。 以下是我的首頁網址: <a href="http://www.example.com" rel="v:url">www.example.com</a>. 我住在 Albuquerque (NM),目前服務於 <span property="v:affiliation">ACME Corp</span>., 擔任<span property="v:title">工程師</span>一職。</div>
http://www.google.com/support/webmasters/bin/topic.py?topic=21997
![Page 17: TOSSUG HTML5 讀書會 新標籤與表單](https://reader030.fdocuments.net/reader030/viewer/2022020919/54bb63704a7959a2108b45c3/html5/thumbnails/17.jpg)
Microformats
<div class="vcard"> 我是 <span class="fn">Bob Smith</span>, 不過朋友都叫我 <span class="nickname">Smithy</span>。 以下是我的首頁網址: <a href="http://www.example.com" class="url">www.example.com</a>. 我住在 Albuquerque (NM),目前服務於 <span class="org">ACME Corp</span>., 擔任<span class="title">工程師</span>一職。</div>
http://www.google.com/support/webmasters/bin/topic.py?topic=21997
![Page 18: TOSSUG HTML5 讀書會 新標籤與表單](https://reader030.fdocuments.net/reader030/viewer/2022020919/54bb63704a7959a2108b45c3/html5/thumbnails/18.jpg)
MicroformatshCalendar
hCard
rel-license
rel-nofollow
rel-tag
XFN
XOXO
...
![Page 19: TOSSUG HTML5 讀書會 新標籤與表單](https://reader030.fdocuments.net/reader030/viewer/2022020919/54bb63704a7959a2108b45c3/html5/thumbnails/19.jpg)
Benefits
• 親和力 (Accessibility)
• SEO
• 第三方應用• 爽
![Page 20: TOSSUG HTML5 讀書會 新標籤與表單](https://reader030.fdocuments.net/reader030/viewer/2022020919/54bb63704a7959a2108b45c3/html5/thumbnails/20.jpg)
HTML Standards
• HTML 4.01: Still using today
• XHTML 1: Bridge between HTML and XML
• XHTML 1.1: Preparing for Semantic Web
• XHTML 2.0 (廢棄)
• (X)HTML5 by WHATWG
![Page 21: TOSSUG HTML5 讀書會 新標籤與表單](https://reader030.fdocuments.net/reader030/viewer/2022020919/54bb63704a7959a2108b45c3/html5/thumbnails/21.jpg)
HTML5 New Elements
![Page 22: TOSSUG HTML5 讀書會 新標籤與表單](https://reader030.fdocuments.net/reader030/viewer/2022020919/54bb63704a7959a2108b45c3/html5/thumbnails/22.jpg)
New Structure Elements
<header>
<footer>
<nav>
<aside>
<article>
<hgroup>
<section>
![Page 23: TOSSUG HTML5 讀書會 新標籤與表單](https://reader030.fdocuments.net/reader030/viewer/2022020919/54bb63704a7959a2108b45c3/html5/thumbnails/23.jpg)
A Web Page<div id=”header”></div>
<div id=”footer”></div>
<ul id=”navigator”></ul>
<div id=”content”></div> <div id=”sidebar”></div>
![Page 24: TOSSUG HTML5 讀書會 新標籤與表單](https://reader030.fdocuments.net/reader030/viewer/2022020919/54bb63704a7959a2108b45c3/html5/thumbnails/24.jpg)
A Web Page in HTML5<header></header>
<footer></footer>
<nav></nav>
<div id=”content”></div><aside></aside>
![Page 25: TOSSUG HTML5 讀書會 新標籤與表單](https://reader030.fdocuments.net/reader030/viewer/2022020919/54bb63704a7959a2108b45c3/html5/thumbnails/25.jpg)
Structure Elements
• <header> 頁首資訊:標題、作者
• <footer> 頁尾資訊:著作權
• <aside> 相關資訊
• <nav> 導覽
![Page 26: TOSSUG HTML5 讀書會 新標籤與表單](https://reader030.fdocuments.net/reader030/viewer/2022020919/54bb63704a7959a2108b45c3/html5/thumbnails/26.jpg)
Weblog Index
<div class=”entry”></div>
<div class=”entry”></div>
<div class=”entry”></div>
![Page 27: TOSSUG HTML5 讀書會 新標籤與表單](https://reader030.fdocuments.net/reader030/viewer/2022020919/54bb63704a7959a2108b45c3/html5/thumbnails/27.jpg)
Weblog Index
<article></article>
<article></article>
<article></article>
![Page 28: TOSSUG HTML5 讀書會 新標籤與表單](https://reader030.fdocuments.net/reader030/viewer/2022020919/54bb63704a7959a2108b45c3/html5/thumbnails/28.jpg)
<article>
• 部落格文章• 訪客留言• 討論區文章• 報章雜誌文章• ...etc
![Page 29: TOSSUG HTML5 讀書會 新標籤與表單](https://reader030.fdocuments.net/reader030/viewer/2022020919/54bb63704a7959a2108b45c3/html5/thumbnails/29.jpg)
An Article<h1></h1>
<p></p>
<h2></h2>
<p></p>
<h2></h2>
<p></p>
![Page 30: TOSSUG HTML5 讀書會 新標籤與表單](https://reader030.fdocuments.net/reader030/viewer/2022020919/54bb63704a7959a2108b45c3/html5/thumbnails/30.jpg)
<section>
</section>
An Article<h1></h1>
<p></p>
<h2></h2>
<p></p>
<h2></h2>
<p></p>
![Page 31: TOSSUG HTML5 讀書會 新標籤與表單](https://reader030.fdocuments.net/reader030/viewer/2022020919/54bb63704a7959a2108b45c3/html5/thumbnails/31.jpg)
<hgroup><hgroup> <h1>My Weblog</h1> <h2 class="tagline">A lot of effort went into making this effortless.</h2></hgroup>
<div class="entry"> <h2>Travel day</h2></div>
<div class="entry"> <h2>I'm going to Prague!</h2></div>
http://diveintohtml5.org/semantics.html
![Page 32: TOSSUG HTML5 讀書會 新標籤與表單](https://reader030.fdocuments.net/reader030/viewer/2022020919/54bb63704a7959a2108b45c3/html5/thumbnails/32.jpg)
Outline
• My Weblog
• Travel day
• I'm going to Prague!
http://diveintohtml5.org/semantics.html
![Page 33: TOSSUG HTML5 讀書會 新標籤與表單](https://reader030.fdocuments.net/reader030/viewer/2022020919/54bb63704a7959a2108b45c3/html5/thumbnails/33.jpg)
Site Title and Article Title<h1>My Weblog</h1><h2 class="tagline">A lot of effort went into making this effortless.</h2>
<div class="entry"> <h2>Travel day</h2></div>
<div class="entry"> <h2>I'm going to Prague!</h2></div>
http://diveintohtml5.org/semantics.html
![Page 34: TOSSUG HTML5 讀書會 新標籤與表單](https://reader030.fdocuments.net/reader030/viewer/2022020919/54bb63704a7959a2108b45c3/html5/thumbnails/34.jpg)
Outline
• My Weblog
• A lot of effort went into making this effortless
• Travel day
• I'm going to Prague!
http://diveintohtml5.org/semantics.html
![Page 35: TOSSUG HTML5 讀書會 新標籤與表單](https://reader030.fdocuments.net/reader030/viewer/2022020919/54bb63704a7959a2108b45c3/html5/thumbnails/35.jpg)
Mixin
• Is <article> in <article> valid ?
• Is <article> in <section> valid ?
• How about <header> in <article> ?
![Page 36: TOSSUG HTML5 讀書會 新標籤與表單](https://reader030.fdocuments.net/reader030/viewer/2022020919/54bb63704a7959a2108b45c3/html5/thumbnails/36.jpg)
Yes<article> <header> <h1>The Very First Rule of Life</h1> <p><time pubdate datetime="2009-10-09T14:28-08:00"></time></p> </header> <p>If there's a microphone anywhere near you, assume it's hot and sending whatever you're saying to the world. Seriously.</p> <p>...</p> <section> <h1>Comments</h1> <article> <footer> <p>Posted by: George Washington</p> <p><time pubdate datetime="2009-10-10T19:10-08:00"></time></p> </footer> <p>Yeah! Especially when talking about your lobbyist friends!</p> </article> </section></article>
http://dev.w3.org/html5/spec/sections.html#the-article-element
![Page 37: TOSSUG HTML5 讀書會 新標籤與表單](https://reader030.fdocuments.net/reader030/viewer/2022020919/54bb63704a7959a2108b45c3/html5/thumbnails/37.jpg)
<article>
</article>
<header>
</header>
<p>Centent</p>
<section>
</section>
<h1>Title</h1>
<p><time pubdate></p>
<h1>Comments</h1>
<article>
</article>
<footer>
</footer>
<p></p>
<p>Posted by</p>
<p><time pubdate></p>
![Page 38: TOSSUG HTML5 讀書會 新標籤與表單](https://reader030.fdocuments.net/reader030/viewer/2022020919/54bb63704a7959a2108b45c3/html5/thumbnails/38.jpg)
New Elements
<figure>
<figcaption>
![Page 39: TOSSUG HTML5 讀書會 新標籤與表單](https://reader030.fdocuments.net/reader030/viewer/2022020919/54bb63704a7959a2108b45c3/html5/thumbnails/39.jpg)
for
http://html5doctor.com/the-figure-figcaption-elements/
![Page 40: TOSSUG HTML5 讀書會 新標籤與表單](https://reader030.fdocuments.net/reader030/viewer/2022020919/54bb63704a7959a2108b45c3/html5/thumbnails/40.jpg)
Actually for
• Everything
• image
• code
• blockquote
• video
• ...etc
![Page 41: TOSSUG HTML5 讀書會 新標籤與表單](https://reader030.fdocuments.net/reader030/viewer/2022020919/54bb63704a7959a2108b45c3/html5/thumbnails/41.jpg)
Examples
<figure> <img src="bubbles-work.jpeg" alt="Bubbles, sitting in his office chair, works on his latest project intently."> <figcaption>Bubbles at work</figcaption></figure>
http://dev.w3.org/html5/spec/grouping-content.html#the-figure-element
![Page 42: TOSSUG HTML5 讀書會 新標籤與表單](https://reader030.fdocuments.net/reader030/viewer/2022020919/54bb63704a7959a2108b45c3/html5/thumbnails/42.jpg)
Examples
<figure> <p>'Twas brillig, and the slithy toves<br> Did gyre and gimble in the wabe;<br> All mimsy were the borogoves,<br> And the mome raths outgrabe.</p> <figcaption><cite>Jabberwocky</cite> (first verse). Lewis Carroll, 1832-98</figcaption></figure>
http://dev.w3.org/html5/spec/grouping-content.html#the-figure-element
![Page 43: TOSSUG HTML5 讀書會 新標籤與表單](https://reader030.fdocuments.net/reader030/viewer/2022020919/54bb63704a7959a2108b45c3/html5/thumbnails/43.jpg)
And...
<audio>
<video>
<canvas>
<embed>
![Page 44: TOSSUG HTML5 讀書會 新標籤與表單](https://reader030.fdocuments.net/reader030/viewer/2022020919/54bb63704a7959a2108b45c3/html5/thumbnails/44.jpg)
<dialog>
• dropped !
![Page 45: TOSSUG HTML5 讀書會 新標籤與表單](https://reader030.fdocuments.net/reader030/viewer/2022020919/54bb63704a7959a2108b45c3/html5/thumbnails/45.jpg)
New Inline Elements
<b>, <i>, <small>
<ruby>, <rt>, <rp>
<mark>
<time>
<a>
![Page 46: TOSSUG HTML5 讀書會 新標籤與表單](https://reader030.fdocuments.net/reader030/viewer/2022020919/54bb63704a7959a2108b45c3/html5/thumbnails/46.jpg)
b, i, small redefine
• <b> for typographic presentation is boldened
• <i> for alternate voice or mood
• <small> for small print
![Page 47: TOSSUG HTML5 讀書會 新標籤與表單](https://reader030.fdocuments.net/reader030/viewer/2022020919/54bb63704a7959a2108b45c3/html5/thumbnails/47.jpg)
<ruby>
not on Rails
![Page 48: TOSSUG HTML5 讀書會 新標籤與表單](https://reader030.fdocuments.net/reader030/viewer/2022020919/54bb63704a7959a2108b45c3/html5/thumbnails/48.jpg)
漢字かん じ
![Page 49: TOSSUG HTML5 讀書會 新標籤與表單](https://reader030.fdocuments.net/reader030/viewer/2022020919/54bb63704a7959a2108b45c3/html5/thumbnails/49.jpg)
Ruby Markup
<ruby> 漢 <rt> かん </rt> 字 <rt> じ </rt></ruby>
http://dev.w3.org/html5/spec/text-level-semantics.html#the-ruby-element
![Page 50: TOSSUG HTML5 讀書會 新標籤與表單](https://reader030.fdocuments.net/reader030/viewer/2022020919/54bb63704a7959a2108b45c3/html5/thumbnails/50.jpg)
<rp>
<ruby> 漢 <rp>(</rp><rt>かん</rt><rp>)</rp> 字 <rp>(</rp><rt>じ</rt><rp>)</rp></ruby>
漢 (かん) 字 (じ)http://dev.w3.org/html5/spec/text-level-semantics.html#the-rp-element
![Page 51: TOSSUG HTML5 讀書會 新標籤與表單](https://reader030.fdocuments.net/reader030/viewer/2022020919/54bb63704a7959a2108b45c3/html5/thumbnails/51.jpg)
<mark>
畫重點
![Page 52: TOSSUG HTML5 讀書會 新標籤與表單](https://reader030.fdocuments.net/reader030/viewer/2022020919/54bb63704a7959a2108b45c3/html5/thumbnails/52.jpg)
mark usage
• 引言重點• 程式碼重點• 搜尋結果關鍵字 highlight
• ...etc
![Page 53: TOSSUG HTML5 讀書會 新標籤與表單](https://reader030.fdocuments.net/reader030/viewer/2022020919/54bb63704a7959a2108b45c3/html5/thumbnails/53.jpg)
Example
<p lang="en-US">Consider the following quote:</p><blockquote lang="en-GB"> <p>Look around and you will find, no-one's really <mark>colour</mark> blind.</p></blockquote><p lang="en-US">As we can tell from the <em>spelling</em> of the word,the person writing this quote is clearly not American.</p>
http://dev.w3.org/html5/spec/text-level-semantics.html#the-mark-element
![Page 54: TOSSUG HTML5 讀書會 新標籤與表單](https://reader030.fdocuments.net/reader030/viewer/2022020919/54bb63704a7959a2108b45c3/html5/thumbnails/54.jpg)
<time>
日期時間
![Page 55: TOSSUG HTML5 讀書會 新標籤與表單](https://reader030.fdocuments.net/reader030/viewer/2022020919/54bb63704a7959a2108b45c3/html5/thumbnails/55.jpg)
Example
<time datetime="2006-09-23">a Saturday</time><time pubdate datetime="2009-08-30">today</time>
http://dev.w3.org/html5/spec/text-level-semantics.html#the-time-element
![Page 56: TOSSUG HTML5 讀書會 新標籤與表單](https://reader030.fdocuments.net/reader030/viewer/2022020919/54bb63704a7959a2108b45c3/html5/thumbnails/56.jpg)
Annoying pubdate
• without pubdate : just a time
• with pubdate : page publish time
• with pubdate and inside an <article> :article’s publish time
![Page 57: TOSSUG HTML5 讀書會 新標籤與表單](https://reader030.fdocuments.net/reader030/viewer/2022020919/54bb63704a7959a2108b45c3/html5/thumbnails/57.jpg)
<a>
• block level link howto ?
• XHTML 2 :
• href is global level attribute
• HTML5 ?
![Page 58: TOSSUG HTML5 讀書會 新標籤與表單](https://reader030.fdocuments.net/reader030/viewer/2022020919/54bb63704a7959a2108b45c3/html5/thumbnails/58.jpg)
Block Level Link in HTML5
<a href="http://blog.othree.net"> <p>I'm block. But I always try to be a link too.</p> <p>me too.</p></a>
a { display: block;}
![Page 59: TOSSUG HTML5 讀書會 新標籤與表單](https://reader030.fdocuments.net/reader030/viewer/2022020919/54bb63704a7959a2108b45c3/html5/thumbnails/59.jpg)
Content Models
http://dev.w3.org/html5/spec/content-models.html#flow-content
![Page 60: TOSSUG HTML5 讀書會 新標籤與表單](https://reader030.fdocuments.net/reader030/viewer/2022020919/54bb63704a7959a2108b45c3/html5/thumbnails/60.jpg)
Microdata
![Page 61: TOSSUG HTML5 讀書會 新標籤與表單](https://reader030.fdocuments.net/reader030/viewer/2022020919/54bb63704a7959a2108b45c3/html5/thumbnails/61.jpg)
Remember Microformats ?
<div class="vcard"> 我是 <span class="fn">Bob Smith</span>, 不過朋友都叫我 <span class="nickname">Smithy</span>。 以下是我的首頁網址: <a href="http://www.example.com" class="url">www.example.com</a>. 我住在 Albuquerque (NM),目前服務於 <span class="org">ACME Corp</span>., 擔任<span class="title">工程師</span>一職。</div>
http://www.google.com/support/webmasters/bin/topic.py?topic=21997
![Page 62: TOSSUG HTML5 讀書會 新標籤與表單](https://reader030.fdocuments.net/reader030/viewer/2022020919/54bb63704a7959a2108b45c3/html5/thumbnails/62.jpg)
Microdata
<div itemscope itemtype="http://data-vocabulary.org/Person"> 我是 <span itemprop="name">Bob Smith</span> 不過朋友都叫我 <span itemprop="nickname">Smithy</span>. 以下是我的首頁網址: <a href="http://www.example.com" itemprop="url">www.example.com</a> 我住在 Albuquerque (NM),擔任 <span itemprop="title">工程師</span> 一職 目前服務於 <span itemprop="affiliation">ACME Corp</span>。</div>
http://www.google.com/support/webmasters/bin/topic.py?topic=21997
![Page 63: TOSSUG HTML5 讀書會 新標籤與表單](https://reader030.fdocuments.net/reader030/viewer/2022020919/54bb63704a7959a2108b45c3/html5/thumbnails/63.jpg)
attributes
• itemscope : 資料範圍
• itemtype : 資料類別
• itemprop : 資料屬性
![Page 64: TOSSUG HTML5 讀書會 新標籤與表單](https://reader030.fdocuments.net/reader030/viewer/2022020919/54bb63704a7959a2108b45c3/html5/thumbnails/64.jpg)
APIs
• document . getItems( [ types ] )
• element . properties
• element . itemValue [ = value ]
http://www.w3.org/TR/2010/WD-microdata-20100624/#microdata-dom-api
![Page 65: TOSSUG HTML5 讀書會 新標籤與表單](https://reader030.fdocuments.net/reader030/viewer/2022020919/54bb63704a7959a2108b45c3/html5/thumbnails/65.jpg)
No Browser Supports Now
![Page 66: TOSSUG HTML5 讀書會 新標籤與表單](https://reader030.fdocuments.net/reader030/viewer/2022020919/54bb63704a7959a2108b45c3/html5/thumbnails/66.jpg)
Web Forms 2.0
![Page 67: TOSSUG HTML5 讀書會 新標籤與表單](https://reader030.fdocuments.net/reader030/viewer/2022020919/54bb63704a7959a2108b45c3/html5/thumbnails/67.jpg)
Where is 1.0 ?
![Page 68: TOSSUG HTML5 讀書會 新標籤與表單](https://reader030.fdocuments.net/reader030/viewer/2022020919/54bb63704a7959a2108b45c3/html5/thumbnails/68.jpg)
http://www.w3.org/TR/html401/
HTML 4.01 Spec
![Page 69: TOSSUG HTML5 讀書會 新標籤與表單](https://reader030.fdocuments.net/reader030/viewer/2022020919/54bb63704a7959a2108b45c3/html5/thumbnails/69.jpg)
What’s New
• New Input Types
• New Attributes
• Form Validation
![Page 70: TOSSUG HTML5 讀書會 新標籤與表單](https://reader030.fdocuments.net/reader030/viewer/2022020919/54bb63704a7959a2108b45c3/html5/thumbnails/70.jpg)
New Input Types
url
tel
number
range
color
date
![Page 71: TOSSUG HTML5 讀書會 新標籤與表單](https://reader030.fdocuments.net/reader030/viewer/2022020919/54bb63704a7959a2108b45c3/html5/thumbnails/71.jpg)
<input type="datetime" /><input type="number" min="99" max="101"/><input type="email" placeholder="[email protected]" />
![Page 72: TOSSUG HTML5 讀書會 新標籤與表單](https://reader030.fdocuments.net/reader030/viewer/2022020919/54bb63704a7959a2108b45c3/html5/thumbnails/72.jpg)
DEMOhttp://miketaylr.com/pres/html5/forms2.html
![Page 73: TOSSUG HTML5 讀書會 新標籤與表單](https://reader030.fdocuments.net/reader030/viewer/2022020919/54bb63704a7959a2108b45c3/html5/thumbnails/73.jpg)
And One More Type
search
![Page 74: TOSSUG HTML5 讀書會 新標籤與表單](https://reader030.fdocuments.net/reader030/viewer/2022020919/54bb63704a7959a2108b45c3/html5/thumbnails/74.jpg)
New Form Elements
<output>
<datalist>
![Page 75: TOSSUG HTML5 讀書會 新標籤與表單](https://reader030.fdocuments.net/reader030/viewer/2022020919/54bb63704a7959a2108b45c3/html5/thumbnails/75.jpg)
<output>
<form> <input name=a type=number step=any> + <input name=b type=number step=any> = <output onforminput="value = a.valueAsNumber + b.valueAsNumber"></output></form>
http://dev.w3.org/html5/spec/the-button-element.html#the-output-element
![Page 76: TOSSUG HTML5 讀書會 新標籤與表單](https://reader030.fdocuments.net/reader030/viewer/2022020919/54bb63704a7959a2108b45c3/html5/thumbnails/76.jpg)
<datalist>
<input type="search" autofocus list="search-suggestions"/><datalist id="search-suggestions"> <option label="DM" value="Depeche Mode"> <option label="Moz" value="Morrissey"> <option label="NO" value="New Order"> <option label="TC" value="The Cure"></datalist>
http://miketaylr.com/pres/html5/forms2.html
![Page 77: TOSSUG HTML5 讀書會 新標籤與表單](https://reader030.fdocuments.net/reader030/viewer/2022020919/54bb63704a7959a2108b45c3/html5/thumbnails/77.jpg)
New Attributes
• autofocus: auto focus
• autocomplete: browser’s auto complete
• placeholder: short hint
• multiple for [type=file]: upload multiple file
![Page 78: TOSSUG HTML5 讀書會 新標籤與表單](https://reader030.fdocuments.net/reader030/viewer/2022020919/54bb63704a7959a2108b45c3/html5/thumbnails/78.jpg)
Validation
• support new input types
• pattern attribute for <input>
• novalidate attribute for <form>
![Page 79: TOSSUG HTML5 讀書會 新標籤與表單](https://reader030.fdocuments.net/reader030/viewer/2022020919/54bb63704a7959a2108b45c3/html5/thumbnails/79.jpg)
Opera Supportshttp://www.opera.com/docs/specs/presto26/
![Page 80: TOSSUG HTML5 讀書會 新標籤與表單](https://reader030.fdocuments.net/reader030/viewer/2022020919/54bb63704a7959a2108b45c3/html5/thumbnails/80.jpg)
<datagrid>
• dropped !
![Page 81: TOSSUG HTML5 讀書會 新標籤與表單](https://reader030.fdocuments.net/reader030/viewer/2022020919/54bb63704a7959a2108b45c3/html5/thumbnails/81.jpg)
Q&A