轉載自http://kb.cnblogs.com/page/108662/
摘要：HTML5反映了通過Web和在雲端實施業務的方式的巨大變化。本篇文章是由四個部分構成的系列文章的第二部分，該系列文章旨在說明HTML5中的突出變化。開始先介紹新的標籤和頁面的組織，接着提供一些網頁設計方面的高層面信息，然後是表單的創建，以及API的使用與價值所在，最後是Canvas提供的進行創意設計的更多可能。這篇第二部分介紹了HTML5表單控件的概念，並涉及了JavaScript和CSS3在其中發揮的作用。
英文原文：HTML5 fundamentals, Part 2: Organizing inputs
對於一個企業來說，管理、數據分析、營銷策略等都很重要，然而，如果沒有通過網站提供合適的數據窗口給潛在客戶使用 —— 或是激發起用戶的使用興趣 —— 那麼就缺失了把站點訪問者轉化爲客戶的最基本的入口。而企業的主要目標就是通過努力提供積極的、友好的用戶體驗，促進用戶與企業之間的交互。
交互的核心是站點中的表單，這些表單方便了與用戶的互動交流，友好的互動體驗會促進網站訪問者轉化爲客戶。表單是促進網站所有者或者代理商與網站用戶之間交互的核心因素，因此，它們在設計和開發網站過程中就顯得極爲重要。
核心中的核心是這些控件 —— 單選按鈕、複選框、文本框、數字的微調控制器等等。它們是用戶與網站對話時必不可少的元素。換句話說，沒有這些控件實現的完整功能，就不可能進行對話，也就沒有潛在的用戶轉化。
對轉化過程中的各種關係做仔細的考慮是很有必要的，這其中包括了站點訪問者和系統之間交互的各個方面，驗證速度、輸入、認知、導航、頁面的加載以及頁面的組織，所有這些方面都會對轉化過程產生影響。HTML5規範帶來的多媒體特性以及更豐富的表單控制選項，改進和增強了表單驗證，從而提高了網站將站點訪問者轉化成實際用戶的能力。
HTML5爲Web驗證提供了強大的工具，爲健全的Web計算環境保駕護航（一個關鍵的安全資產）。在設計和開發旨在招徠客戶的網站時，它就顯得格外重要。因此，HTML5的使用對於保證一個網站的用戶轉化率是必不可少的。如果你不能描繪出前景，那說明你有困惑；但如果你描繪出了前景，卻不能將之落到實處，那只是空中樓閣。美好的理想需要行動來實現。
不過沒關係，HTML5就能給你幫助。比如HTML5的email和telephone類型，爲交流方式提供了更多選擇。HTML5清晰的語義結構讓交流更加通暢無阻（感謝嗷嗷的翻譯）。
我們的世界越來越以網絡爲中心、充滿機遇的全球經濟前進的步伐越來越繁忙、雲計算的快速發展、移動技術應用的指數級增長，以及跨平臺的電信解決方案 —— 既包含商業的也包含社會的 —— 很明顯，我們已經站在一個美麗新世界的大門口 —— 基於Web的計算與通信的世界。這是一個IT與通信相互融合並不斷進化的世界，同時這也是高度競爭的社會全球化發展的需要。
設計表單
在HTML5中，表單已經做了重大的修整，一些以前需要通過JavaScript編碼實現的功能現在無需編碼就可輕鬆實現。本文中的表單示例分析了HTML5新表單組件的用法。當然，首先是規劃表單。
表單的佈局如圖1所示，需要開發表單頁面的三個區域：Header區、Form區和Footer區。Header區包含了封裝在<header></header>標籤中的頁面標題和副標題。在頁面的底部，Footer區包含了放在<footer></footer>標籤內的版權信息。我已經在該系列文章的第一部分所提供的例子中討論了Header區和Footer區的構建，如果你對<header>和<footer>標籤不太熟悉的話，請參閱該篇文章。
圖1. 表單頁面的佈局
對這些表單的討論重點放在四個標籤上：
1. <form>
2. <fieldset>
3. <label>
4. <input>
在HTML5中，<form>標籤增加了兩個新的屬性：autocomplete和novalidate。autocomplete屬性用於啓用“下拉建議列表”功能，novalidate屬性用於關閉表單驗證功能，這在測試時會很有用。
<fieldset>標籤增加了三個新屬性：disable、name和form。“disable”屬性用於禁用<fieldset>，“name”屬性用於設置<fieldset>的名稱，“form”屬性的值是<fieldset>所屬的一個或多個表單的ID。在HTML5中，<fieldset>可處於其所屬的一個或多個表單的外部，當<fieldset>被置於表單的外部時，你必須設置該<fieldset>標籤的form屬性，這樣<fieldset>就可以正確地與一個或多個表單關聯起來。
<label>標籤增加了一下新屬性：form，該屬性值是<label>所屬的一個或多個表單的ID。<label>標籤也可放置在表單的外部，因此這裏的form屬性也是用於關聯<label>標籤和對應的表單。
<input>標籤引入了一些新的類型與屬性，增強了表單的可用性。HTML5引入了一些新的input類型，用於對數據進行組織和歸類，這跟HTML5總的目標（更懂語義）是一致的（感謝巴蠻子的翻譯）。“形式應該服從於功能”（form should follow function）這句古訓很適合於描述HTML5的表單功能。
在HTML5中，表單的<input>域可以處在<form>標籤的外部，“form”屬性標識了"input"域所屬的一個或多個表單，還可以通過引用form的ID來標識其所屬的表單。表1給出了新的<input>類型。
表1. 新的<input>類型
color date datetime datetime-local month
week time email number range
search tel url
表2. 新的<input>屬性
autocomplete autofocus form formaction formenctype
formmethod formnovalidate formtarget height max
min multiple pattern placeholder required
step
在網頁的創建過程中，你會用到這些類型和屬性中的大部分。
創建表單
圖2所示的是一個 Classical Music Place 網頁，一個提供作曲家作品下載的站點，它還允許古典音樂愛好者上傳他們的作品錄音，這就是你要創建的頁面。
圖2. Classical Music Place的表單
表單的結構從<form>標籤開始，在該例子中，你用到了新的autocomplete屬性，如下所示：
<form id="orderForm" autocomplete="on"
action="javascript:alertValues();" method="get">
<form>標籤中還包含了一個JavaScript式的action，我們會在稍後的內容中談到這一點。
<form>標籤包含了四個<fieldset>標籤，通過圖2中的灰色區域可以很直觀地區分出來：Customer Info、Favorite Composer、Composers和Upload file(s)（譯者注：原文爲Name, Telephone, Email address, and date，疑有誤）。<fieldset>標籤分組了表單中的相似內容，讓我們來看看每個<fieldset>。
第一個<fieldset>標籤
第一個<fieldset>標籤包含了客戶信息（參見圖3），它有一個Name域，一個Telephone域，一個Email address域和一個Date域。Name域有一個autofocus屬性，讓你無需點擊鼠標就可以直接輸入文本。
圖3. 客戶信息域
第一個<fieldset>包含了一個<legend>，一個<label>和一個<input>標籤，如清單1所示。Name域的類型是text，有三個新的<input>屬性：placeholder、autofocus和required。
清單1. Name域
<fieldset>
<legend> Customer Info </legend>
<p>
<label>Name:
<input id="name" name="name" type="text" placeholder="Enter your name"
autofocus required size="50">
</label>
</p>
autofocus確保在頁面打開時，輸入焦點落在該域上。這樣只要頁面一加載就能獲得焦點，用戶就可以立即使用表單。
placeholder屬性值表示該域在沒有輸入時的佔位內容，會以柔和的灰色文字顯示在文本框中，用於提示用戶輸入什麼樣的內容。然而，由於Name域設置了autofocus屬性，在進入頁面時，你實際上並不能看到這個佔位文本內容。所以，在圖3中，Name域不會顯示佔位內容（placeholder中定義的文字），而是有一個黃色的高亮外框棋牌開發weixinhuyu.net/news/201.html。如果你在不輸入數據的情況下移到另一個域上的話，佔位內容就會顯示出來。當autofocus屬性和placeholder屬性一起使用時，因爲該域獲得激活焦點的原因，佔位內容就會隱而不見。
required屬性方便了作爲表單提交先決條件的必填項的強制填寫。該屬性對於text、search、URL、tel、email、password、日期選擇器、number、複選框、單選按鈕和file這些類型都是有效的。
Telephone域的類型是tel，包括的屬性有required、placeholder、size和pattern，如清單2所示。tel是一個文本域，目的是用來存放電話號碼。在這個例子中，電話號碼必須遵守嚴格的模式限制，除非你輸入了正確的字符，否則系統是不會讓你提交的。Telephone域的佔位符內容存放的是你的輸入必須與之相匹配的模式提示。
pattern模擬了傳統的JavaScript正則表達式（regex）的功能，輸入的內容必須要與所定義的正則表達式的模式結構相匹配才能通過驗證。pattern屬性可用在text、search、url、tel、email和password等類型上。
清單2. Telephone域
<p>
<label>Telephone:
<input id="tel" name="telephone" type="tel"
placeholder="Pattern: 1-234-567-8910"
required size="50" pattern="([0-9]{1}(-[0-9]{3})(-[0-9]{3})(-[0-9]{4}))">
</label>
</p>
Email address（郵件地址）域的類型是email，如清單3所示。郵件地址是自動進行驗證的，無需使用模式（正則表達式），這一驗證是HTML5的組成部分。如果郵件地址沒有以正確的方式給出的話，表單就不能提交。
清單3. Email address域
<p>
<label>Email address:
<input id="email" name="email" type="email"
placeholder="Enter your email address"
required size="50">
</label>
</p>
這個<fieldset>的最後一項是Date域。在Opera瀏覽器中，date類型會提供一個用於日期選擇的日曆選擇器，但在Google Chrome中則是創建一個微調器，如圖3所示。圖4顯示了Date域的日期選擇器在Opera瀏覽器中的顯示效果。可以注意到，在Opera中，域設置框的邊角不是圓角，即使使用了同樣的在Chrome中使邊角變圓的樣式表也是如此。
圖4. Date域
清單4給出了用來創建日期選擇器的代碼。
清單4. Date域
<p>
<label>Date: <input type="date">
</label>
</p>
</fieldset>
你可以使用任意日期格式，你甚至可以把日期分解到小時一級。下面這些是你可以創建的日期類型：
1. 日期（<input type="date">）：選擇日、月和年
2. 月份（<input type="month">）：選擇月和年
3. 星期（<input type="week">）：選擇星期和年
4. 時間（<input type="time">）：選擇時間（小時和分鐘）
5. 日期時間（<input type="datetime">）：選擇時間、日、月和年（UTC時間）
6. 當地日期時間（<input type="datetime-local">）：選擇時間、日、月和年（當地時間）
第二個<fieldset>標籤
第二個<fieldset>標籤包含了一個帶有list屬性的<input>標籤和一個<datalist>標籤。list屬性指明瞭輸入域的<datalist>, <datalist>標籤提供了一個輸入域選項列表。list屬性可用在這些<input>類型上：text、search、url、tel、email、date、number、range和color。
<datalist>以下拉列表的方式顯示，如圖5所示。這個截圖是從Opera中獲取的，在Chrome中，該列表只是顯示成一個簡單的文本框，沒有把列表呈現給用戶。
圖5. Favorites域
清單5提供了創建Favorite Composer部分的域設置。
清單5. Favorite Composer域
<fieldset>
<legend> Favorite Composer </legend>
<p>
<label>
<input type="text" name="favorites" list="composers">
<datalist id="composers">
<option value="Bach">
<option value="Beethoven">
<option value="Brahms">
<option value="Chopin">
<option value="Mendelssohn">
</datalist>
</label>
</p>
</fieldset>
第三個<fieldset>標籤
第三個<fieldset>標籤顯示了作曲家的一個列表，後面跟隨着一個數字域，該域指明瞭每位列出的作曲家提供了多少作品。圖6顯示該部分內容。
圖6. Composers域
例如，Bach有五個作品，Beethoven有十個作品。清單6給出了每個作曲家作品個數的最大值，在你提交表單時，數字域不會接受超過最大值的數值。在提交時，當你輸入了不正確的、超出範圍的值，它會提示你輸入該域可接受的正確的數值。
number類型創建了一個輸入的微調域，用到了min、max和step屬性。默認的step值是1。min、max和step屬性可用來對number、range和日期選擇器的輸入進行限制。max屬性決定輸入域所允許的最大值，min屬性決定輸入域所允許的最小值，step屬性決定有效的遞增值。
清單6. Composer域
<fieldset>
<legend>Composers< /legend>
<p>
<label>
Bach: <input name="form_number" id="form_number"
type="number" min="1" max="5" >
</label>
</p>
<p>
<label>
Beethoven: <input name="form_number" id="form_number"
type="number" min="1" max="10" >
</label>
</p>
<p>
<label>
Brahms: <input name="form_number" id="form_number"
type="number" min="1" max="7" >
</label>
</p>
<p>
<label>
Chopin: <input name="form_number" id="form_number"
type="number" min="1" max="10">
</label>
</p>
<p>
<label>
Mendelssohn: <input name="form_number" id="form_number"
type="number" min="1" max="4">
</label>
</p>
</fieldset>
第四個<fieldset>標籤
第四個<fieldset>標籤包含了一個file類型的<input>並用到了屬性multiple，如圖7所示。multiple屬性表明輸入域可以從數據列表或是文件列表中選擇多個值，用戶可以選擇多個上傳的文件。
圖7. Upload域
file類型和multiple屬性的代碼如清單7所示。
清單7. Upload域
<fieldset>
<legend> Upload file(s) </legend>
<p>Upload one of your orchestra's file(s) for inclusion in our library</p>
<p><label>
<input type="file" multiple="multiple" />
</label>
</p>
</fieldset>
提交按鈕
Submit按鈕用到了height和width屬性，如清單8所示。通過這兩個屬性可以設置p_w_picpath輸入類型的高和寬。通過預設寬度與高度尺寸限定圖片顯示區域，可以增強頁面渲染效果，從而讓頁面加載更加順暢。
清單8. Submit按鈕
<input type="p_w_picpath" src="submitbutton.png" alt="Submit"
width="100" height="45" />
</form>
JavaScript和CSS3
沒CSS3的話，HTML5的渲染就無法完成。而且，儘管HTML5已經取消了對一些JavaScript編碼的需要，但JavaScript依然是一個很有用的工具。下面是用來創建上述示例表單的JavaScript代碼和CSS3文件。
這段JavaScript代碼是一個顯示三個必填項的警告框，如清單9所示。儘管這裏用到的JavaScript代碼只有一行，但它被放置在一個單獨的JavaScript文件中，遵循使用JavaScript的最佳實踐。
清單9. JavaScript代碼的例子
function alertValues()
{
alert("Customer information: " + "\n " + fullname.value + "\n "
+ tel.value + "\n " + email.value);
}
清單10展示了用來格式化示例表單的CSS3代碼，這裏不包括<header>和<footer>的信息。
清單10. 例子表單的CSS3
form {
width: 550px;
margin: 0 0 0 0 ;
padding: 50px 60px;
background-color: #2d2d2d;
border-radius: 20px;
}
fieldset {
padding: 0 20px 20px;
margin: 0 0 30px ;
border: 2px solid #ffffff;
background: #B8B8B8 ;
border-radius: 10px;
}
legend {
color: #ffffff;
background: #990033;
font-size: 0.9em;
font-weight: bold;
text-align: left;
padding: 5px;
margin: 0;
width: 10em;
border: 2px solid #660033;
border-radius: 5px;
}
label {
display: block;
float: left;
clear: left;
text-align: left;
width: 100%;
padding: .4em 0 0 0;
margin: .15em 0 0 0;
}
結論
真正能讓個人和組織成功的關鍵是溝通。表單控件和網頁構建指南對這個過程來說很重要。HTML5爲此提供了功能非常強大的工具。那些爲將來做準備的人 —— 現在已經是時候了 —— 你將會從中受益；而那些沒有做準備的人將會受到世界Web化（one-Web-world）、網絡化（netcentric）、全球化（global society）的步伐和需求帶來的嚴重衝擊（Those who are prepared for the future—which is here now—will benefit; those who are not will be severely buffeted by the pace and demands of the one-Web-world, netcentric, global society.）。
下載
名稱 大小 下載地址
HTML5Forms.zip 10KB HTTP
學習資料
1. Create modern Web sites using HTML5 and CSS3（developerWorks，March 2010）是一篇有着多節內容的HTML5和CSS3文章。
2. 在New elements in HTML 5（developerWorks，August 2007）這一文章中，你會找到HTML5中的幾個新元素的一些資料。
3. 5doctor 網站提供了一種關於HTML5當前趨勢的非常棒的看法。
4. W3Schools.com HTML5 Tag Reference 提供了一個無所不包的HTML5標籤、定義和例子的清單。
5. WHATWG網站 提供了HTML5規範的詳盡內容。
6. W3Schools.com CSS3 Reference 提供了CSS版本3的詳盡內容。
7. Web development zone 特定於涵蓋了各種基於Web的解決方案的文章。
8. 隨時關注developerWorks的technical events and webcasts。
9. developerWorks on-demand demos：觀看各種演示，範圍從爲初學者提供的產品安裝和設置到爲有經驗的開發者提供的高階功能都有。
10. 關注developerWorks on Twitter。
討論
1. 現在就創建你的developerWorks個人資料，並設置一個關於HTML的觀看列表。與developerWorks社區建立聯繫並保持聯繫。
2. 找到其他在web開發方面感興趣的developerWorks成員。
3. 分享你的知識：加入一個關注web專題的developerWorks組。
4. Roland Barcia在他的博客中談論Web 2.0和中間件。
5. 關注developerWork成員的shared bookmarks on web topics。
6. 快速獲得答案：訪問Web 2.0 Apps論壇。
7. 快速獲得答案：訪問Ajax論壇。
關於作者
Grace Walker是位於伊利諾斯州的芝加哥的Walker Automated Services公司的合夥人，她是一位有着多重背景和豐富經驗的IT顧問。她在IT行業擔任過經理、管理員、程序員、講師、業務分析師、技術分析師、系統分析師和Web開發者，工作的背景環境也各不相同，其中包括了電信、教育、金融服務和軟件等。
（本文參考了譯言網的翻譯）