（譯者注：由于yeeyan編輯器對(duì)文章中的標(biāo)簽做解析的原因，我在每個(gè)標(biāo)簽的<符號(hào)之后都加入了一個(gè)空格，比如說(shuō)，左尖括號(hào)<+fieldset+右尖括號(hào)>，我會(huì)寫(xiě)成< fieldset>，以便其能夠在文章中正確顯示，不便之處敬請(qǐng)諒解。）
企業(yè)級(jí)機(jī)構(gòu)的管理、數(shù)據(jù)分析、營(yíng)銷(xiāo)策略以及其他功能都很重要，然而，如果沒(méi)有合格的數(shù)據(jù)窗口可提供給你的潛在客戶使用的話——或是激發(fā)起用戶的使用興趣的話——那么促使站點(diǎn)訪問(wèn)者轉(zhuǎn)化所必需的最初過(guò)程就是缺失的。一種積極的、鼓勵(lì)交互的、用戶友好的體驗(yàn)是機(jī)構(gòu)的主要目標(biāo)，而這種交互是需要你的努力來(lái)達(dá)成的。
交互的核心是站點(diǎn)的表單，這些表單方便了與用戶的互動(dòng)交流，因此，最初引發(fā)網(wǎng)站構(gòu)建的目標(biāo)可通過(guò)轉(zhuǎn)化站點(diǎn)訪問(wèn)者來(lái)推進(jìn)。表單是活躍網(wǎng)站所有者或是代理商和網(wǎng)站用戶之間的交互的核心因素，正因?yàn)槿绱耍鼈冊(cè)谠O(shè)計(jì)和開(kāi)發(fā)網(wǎng)站過(guò)程中就顯得極為重要。
核心的核心部分是控件——單選按鈕、復(fù)選框、文本框、數(shù)字的微調(diào)控制器等等。對(duì)于與站點(diǎn)進(jìn)行對(duì)話的網(wǎng)站用戶來(lái)說(shuō)，這些元素都是必不可少的。換句話說(shuō)，沒(méi)有充分的功能控制（在“機(jī)械”的控件操作和控件適合于給定任務(wù)兩方面都是），就不可能進(jìn)行對(duì)話，其結(jié)果就是，沒(méi)有潛在的轉(zhuǎn)化。
對(duì)轉(zhuǎn)化過(guò)程的關(guān)系做仔細(xì)的考慮是很有必要的，這其中包括了站點(diǎn)訪問(wèn)者和運(yùn)行系統(tǒng)之間的交互的各個(gè)方面，驗(yàn)證的速度、輸入、認(rèn)知、導(dǎo)航、頁(yè)面的加載以及頁(yè)面組裝的方式，所有的這些方面都對(duì)轉(zhuǎn)化過(guò)程產(chǎn)生影響。隨著HTML5規(guī)范的多媒體特性和所提供的擴(kuò)充的種種表單控件選項(xiàng)一起到來(lái)的是驗(yàn)證的改進(jìn)和增強(qiáng)，這兩方面都在HTML5的把站點(diǎn)訪問(wèn)者轉(zhuǎn)化成實(shí)際的站點(diǎn)用戶的能力中做出了貢獻(xiàn)。
對(duì)于驗(yàn)證以及完善的基于web的計(jì)算——一個(gè)關(guān)鍵的安全資產(chǎn)，對(duì)于這兩方面來(lái)說(shuō)，HTML5是一個(gè)異常有力的工具。在設(shè)計(jì)和開(kāi)發(fā)旨在招徠客戶的網(wǎng)站時(shí)，其顯得越發(fā)的重要。因此，它的使用對(duì)于維護(hù)一個(gè)好的轉(zhuǎn)化率來(lái)說(shuō)是必不可少的。如果你不能描繪出前景，那說(shuō)明你有困惑；但如果你不能轉(zhuǎn)化你所描繪的前景的話，那就得要求緊急迫降了。
不過(guò)沒(méi)關(guān)系，這里就能夠提供幫助。HTML5的類(lèi)型，比如說(shuō)email和telephone，提供了更廣泛的通信選項(xiàng)，其與HTML5的語(yǔ)義基礎(chǔ)所賦予的結(jié)構(gòu)化清晰度相結(jié)合，使得不會(huì)再有什么壁壘存在于你和其他一切的暢通對(duì)話之間。
鑒于我們的以網(wǎng)絡(luò)為中心的世界、隨機(jī)性日益增強(qiáng)的全球經(jīng)濟(jì)的忙碌步伐、云計(jì)算的快步發(fā)展、移動(dòng)技術(shù)使用的呈指數(shù)增長(zhǎng)，以及跨平臺(tái)的通信解決方案——既指商業(yè)的也指社會(huì)的——很明顯，我們正站在一個(gè)基于web的計(jì)算和通信的美麗新世界的門(mén)檻上。這一世界是通信的許多元素與IT之間這種不斷進(jìn)化的聯(lián)姻的函數(shù)和導(dǎo)數(shù)，同時(shí)也是一個(gè)高度競(jìng)爭(zhēng)的全球社會(huì)的需要。
設(shè)計(jì)表單
在HTML5中，表單已經(jīng)做了重大的修整，一些以前需要JavaScript編碼的任務(wù)現(xiàn)在已經(jīng)可以在不需要編碼的情況下就很容易地完成。本文中的表單例子分析了HTML5的表單創(chuàng)新套件的用法，當(dāng)然，這一過(guò)程的第一步是規(guī)劃表單。
你要開(kāi)發(fā)的表單例子的布局如圖1所示，你要開(kāi)發(fā)表單頁(yè)面的三個(gè)區(qū)域：Header區(qū)、Form區(qū)和Footer區(qū)。Header區(qū)包含了封裝在< header>< /header>標(biāo)簽中的頁(yè)面標(biāo)題和副標(biāo)題。在頁(yè)面的底部，F(xiàn)ooter區(qū)包含了放在< footer>< /footer>標(biāo)簽內(nèi)的版權(quán)信息。我已經(jīng)在這一文章系列的第一部分所提供的例子中討論了Header區(qū)和Footer區(qū)的構(gòu)造，如果你對(duì)< header>和< footer>標(biāo)簽不太熟悉的話，請(qǐng)參閱該篇文章。
圖1. 表單頁(yè)面的布局
對(duì)這一表單的討論重點(diǎn)放在四個(gè)標(biāo)簽上：
1. < form>
2. < fieldset>
3. < label>
4. < input>
在HTML5中，兩個(gè)新的屬性被加入到了< form>標(biāo)簽中：autocomplete和novalidate。autocomplete屬性啟用了出現(xiàn)在諸如Google一類(lèi)的站點(diǎn)中的下拉建議列表，novalidate屬性關(guān)掉表單的校驗(yàn)，這在測(cè)試過(guò)程中是很有用的。< fieldset>標(biāo)簽有三個(gè)新的屬性：disable、name和form。disable屬性禁用< fieldset>，name屬性設(shè)置< fieldset>的名稱，form屬性的值是是< fieldset>所屬的一個(gè)或多個(gè)表單的ID。在HTML5中，< fieldset>可處在其所屬的一個(gè)或多個(gè)表單的外部，當(dāng)< fieldset>被置于表單的外部時(shí)，你必須要設(shè)置該< fieldset>標(biāo)簽的form屬性，這樣< fieldset>就可以正確地與一個(gè)或多個(gè)表單關(guān)聯(lián)起來(lái)。
定義輸入元素的類(lèi)別的< label>標(biāo)簽有一個(gè)新的屬性：form，form屬性的值是< label>所屬的一個(gè)或多個(gè)表單的ID。< label>標(biāo)簽也可放置在表單的外部，因此這里的form屬性也是用來(lái)把< label>標(biāo)簽和適當(dāng)?shù)谋韱侮P(guān)聯(lián)在一起的。
< input>標(biāo)簽有幾個(gè)新的類(lèi)型，以及一些新的屬性，這些都增強(qiáng)了表單的可用性。HTML5引入了幾個(gè)新的input類(lèi)型，目的是組織和分類(lèi)數(shù)據(jù)，復(fù)制出HTML5的整個(gè)語(yǔ)義路徑。形式應(yīng)該服從內(nèi)容這句古訓(xùn)很適合于描述HTML5的表單功能。
在HTML5中，表單的< input>域可以處在< form>標(biāo)簽的外部，form屬性標(biāo)識(shí)了輸入域所屬的一個(gè)或多個(gè)表單，其還可以通過(guò)引用form的ID來(lái)標(biāo)識(shí)其所屬的表單。表1給出了新的< input>類(lèi)型。
表1. 新的< input>類(lèi)型
color date datetime datetime-local month
week time email number range
search tel url
表2給出了新的< input>屬性
表2. 新的< input>屬性
autocomplete autofocus form formaction formenctype
formmethod formnovalidate formtarget height max
min multiple pattern placeholder required
step
在網(wǎng)頁(yè)的創(chuàng)建過(guò)程中，你會(huì)用到這些類(lèi)型和屬性的大部分。
創(chuàng)建表單
圖2所示的是Classical Music Place的網(wǎng)頁(yè)，一個(gè)提供幾個(gè)作曲家的作品的下載站點(diǎn)，它還允許古典音樂(lè)愛(ài)好者上傳他們的古典作品錄音，這就是你要?jiǎng)?chuàng)建的頁(yè)面。
圖2. Classical Music Place的表單
表單的結(jié)構(gòu)從< form>標(biāo)簽開(kāi)始，在該例子中，你用到了新的autocomplete屬性，如下所示：
< form id="orderForm" autocomplete="on" action="javascript:alertValues();" method="get">
這一< form>標(biāo)簽中還包含了一個(gè)JavaScript式的action，我們會(huì)在稍后的內(nèi)容中談到這一點(diǎn)。
< form>標(biāo)簽包含了四個(gè)< fieldset>標(biāo)簽，其通過(guò)圖2中的灰色區(qū)域很直觀地劃分了出來(lái)：Customer Info、Favorite Composer、Composers和Upload file(s)（譯者注：原文為Name, Telephone, Email address, and date，疑有誤）。< fieldset>標(biāo)簽分組了表單中的相似內(nèi)容，讓我們看到的是各自分隔開(kāi)的每個(gè)< fieldset>。
第一個(gè)< fieldset>標(biāo)簽
第一個(gè)< fieldset>標(biāo)簽包含了客戶信息（參見(jiàn)圖3），它有一個(gè)Name域，一個(gè)Telephone域，一個(gè)Email address域和一個(gè)Date域。Name域有一個(gè)autofocus屬性，其可讓你在無(wú)需用鼠標(biāo)點(diǎn)擊該域的情況下就可以開(kāi)始輸入文本。
圖3. 客戶信息域
第一個(gè)< fieldset>首先包含了一個(gè)< legend>，一個(gè)< label>和一個(gè)< input>標(biāo)簽，如清單1所示。Name域的類(lèi)型是text，其有三個(gè)新的< 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確保在頁(yè)面打開(kāi)時(shí)，輸入焦點(diǎn)落在該域上。這是一個(gè)促成頁(yè)面只要一加載就獲得焦點(diǎn)的功能，其允許用戶立刻訪問(wèn)表單。placeholder屬性把雙引號(hào)中的文字以一種柔和的灰色文本的方式顯示在域中，placeholder屬性應(yīng)該告訴用戶該域要包含的內(nèi)容，以及當(dāng)該域?yàn)榭諘r(shí)所顯示的內(nèi)容。然而，因?yàn)镹ame域還設(shè)置了autofocus，所以在進(jìn)入頁(yè)面時(shí)，你實(shí)際上并不能看到這一文本內(nèi)容。需要注意的是，在圖3中，Name域不會(huì)顯示占位內(nèi)容，而是有一個(gè)黃色的高亮外框。如果你在不輸入數(shù)據(jù)的情況下移到另一個(gè)域上的話，占位內(nèi)容就會(huì)顯示出來(lái)。當(dāng)autofocus屬性和placeholder屬性一起使用時(shí)，因?yàn)樵撚颢@得激活焦點(diǎn)的原因，占位內(nèi)容就會(huì)隱而不見(jiàn)。
required屬性方便了作為提交表單的先決條件的域的強(qiáng)制性填充。對(duì)于text、search、URL、tel、email、password、日期選擇器、number、復(fù)選框、單選按鈕和file等類(lèi)型來(lái)說(shuō)，該屬性都是有效的。
Telephone域的類(lèi)型是tel，其用到屬性required、placeholder、size和pattern，如清單2所示。tel是一個(gè)文本域，目的是用來(lái)存放電話號(hào)碼。在這一例子中，電話有著一個(gè)必須嚴(yán)格遵守的模式限制，因?yàn)槌鞘悄闶褂昧苏_的字符模式，否則系統(tǒng)是不會(huì)讓你提交的。電話的占位符內(nèi)容存放了你的輸入必須與之相匹配的模式。
模式（pattern）模擬了傳統(tǒng)的JavaScript正則表達(dá)式（regex）的功能，輸入的內(nèi)容必須要與所定義的正則表達(dá)式的模式結(jié)構(gòu)相匹配才能通過(guò)校驗(yàn)。pattern屬性可用在text、search、url、tel、email和password等類(lèi)型上。
清單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（郵件地址）域的類(lèi)型是email，如清單3所示。郵件地址是自動(dòng)進(jìn)行驗(yàn)證的，無(wú)需使用模式：這一驗(yàn)證是HTML5的組成部分。如果郵件地址沒(méi)有以正確的方式給出的話，表單就不能提交。
清單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>的最后一項(xiàng)錄入是Date域。date類(lèi)型會(huì)在Opera瀏覽器中提供一個(gè)用于日期選擇的日歷選擇器，但在Google Chrome中則是創(chuàng)建一個(gè)微調(diào)器，如圖3所示。圖4顯示了Opera使用Date域的選擇器作為顯示的網(wǎng)頁(yè)渲染。可以注意到，在Opera中，域設(shè)置框的邊角不是圓形的，即使是使用了那種在Chrome中會(huì)使邊角變圓的的式樣表也是如此。
圖4. Date域
清單4給出了用來(lái)創(chuàng)建日期選擇器的代碼。
清單4. Date域
< p>
< label>Date: < input type="date">
< /label>
< /p>
< /fieldset>
你可以生成任何日期的一個(gè)單子，你甚至可以把日期分解到小時(shí)一級(jí)。下面這些是你可以創(chuàng)建的日期類(lèi)型：
1. 日期：選擇日、月和年
2. 月份：選擇月和年
3. 星期：選擇星期和年
4. 時(shí)間：選擇時(shí)間（小時(shí)和分鐘）
5. 日期時(shí)間：選擇時(shí)間、日、月和年（UTC時(shí)間）
6. 當(dāng)?shù)厝掌跁r(shí)間：選擇時(shí)間、日、月和年（當(dāng)?shù)貢r(shí)間）
第二個(gè)< fieldset>標(biāo)簽
第二個(gè)< fieldset>標(biāo)簽包含了一個(gè)用到了list屬性的< input>標(biāo)簽和一個(gè)< datalist>標(biāo)簽。list屬性指明了輸入域的< datalist>, < datalist>標(biāo)簽提供了一個(gè)輸入域選項(xiàng)列表。list屬性可用在這些< input>類(lèi)型上：text、search、url、tel、email、日期選擇器、number、range和color。
< datalist>以下拉列表的方式做顯示，如圖5所示。這一截圖是從Opera中獲取的，在Chrome中，該列表只是顯示成一個(gè)簡(jiǎn)單的文本框，沒(méi)有把列表呈現(xiàn)給用戶。
圖5. Favorites域
清單5提供了創(chuàng)建Favorite Composer部分的域設(shè)置。
清單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>
第三個(gè)< fieldset>標(biāo)簽
第三個(gè)< fieldset>標(biāo)簽顯示了作曲家的一個(gè)列表，后面跟隨著一個(gè)數(shù)字域，該域指明了每位列出的作曲家都提供了多少作品。圖6顯示該部分內(nèi)容。
圖6. Composers域
例如，Bach有五個(gè)作品，Beethoven有十個(gè)作品。清單6給出了每個(gè)作曲家作品個(gè)數(shù)的最大值，在你提交表單時(shí)，數(shù)字域不會(huì)接受超過(guò)最大值的數(shù)值。在提交時(shí)，該域通過(guò)提示你改正輸入來(lái)響應(yīng)不正確的、超出范圍的值，這樣它就能夠遵照該域的可接受數(shù)值的限制。
number類(lèi)型創(chuàng)建了一個(gè)輸入的微調(diào)域，其用到了min、max和step屬性。默認(rèn)的step值是1。min、max和step屬性可用來(lái)做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>
第四個(gè)< fieldset>標(biāo)簽
第四個(gè)< fieldset>標(biāo)簽包含了file類(lèi)型的< input>并用到了屬性multiple，如圖7所示。multiple屬性指明了輸入域可以從數(shù)據(jù)列表或是文件列表中選擇多個(gè)值，用戶可以選擇多個(gè)上傳的文件。
圖7. Upload域
file類(lèi)型和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所示。你使用這些屬性來(lái)設(shè)置image輸入類(lèi)型的高和寬。在設(shè)置這些屬性時(shí)，頁(yè)面為圖像預(yù)留的空間區(qū)域由這一預(yù)設(shè)的寬度和高度尺寸所強(qiáng)制執(zhí)行的約束來(lái)確定，這種做法通過(guò)增強(qiáng)頁(yè)面渲染的功效來(lái)使頁(yè)面的加載變得更順利。
清單8. Submit按鈕
< input type="image" src="submitbutton.png" kesrc="submitbutton.png" alt="Submit" width="100" height="45" />
< /form>
JavaScript和CSS3
沒(méi)CSS3的話，HTML5的渲染就無(wú)法完成。而且，盡管HTML5已經(jīng)排除了對(duì)一些JavaScript編碼的需要，但JavaScript依然是一個(gè)很有用的工具。下面是用來(lái)創(chuàng)建例子表單的JavaScript代碼和CSS3文件。
JavaScript代碼是一個(gè)返回三個(gè)必輸入域的警告框，如清單9所示。盡管這里用到的JavaScript代碼只有一行，但它被放置在一個(gè)單獨(dú)的JavaScript文件中，遵循使用JavaScript的最佳做法。
清單9. JavaScript代碼的例子
function alertValues()
{
alert("Customer information: " + "n " + fullname.value + "n "
+ tel.value + "n " + email.value);
}
清單10展示了用來(lái)格式化例子表單的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;
}
結(jié)論
切實(shí)的個(gè)人和機(jī)構(gòu)的成功的關(guān)鍵是溝通。表單控件和一般網(wǎng)頁(yè)的構(gòu)造指南對(duì)這一過(guò)程來(lái)說(shuō)很重要。HTML5提供了一盒子適合于這一任務(wù)的功能非常強(qiáng)大的工具。那些有為將來(lái)做準(zhǔn)備的人——現(xiàn)在已經(jīng)到時(shí)候了——將會(huì)受益，而那些沒(méi)有做準(zhǔn)備的人則將會(huì)受到這個(gè)世界一網(wǎng)化的（one-Web-world）、以網(wǎng)絡(luò)為中心的全球化社會(huì)的步伐和需求的嚴(yán)重沖擊。