資訊專欄INFORMATION COLUMN
摘要：一個表單由一或多個部件組成，這些部件可以是文本框單行或多行選擇框按鈕復選框或單選按鈕。在我們的示例里，一個文本框中用了該屬性的默認值，該值表示一個基本的單行文本框，用于接收無控制或驗證的任何文本。
前言
這個系列譯自mdn上的一份表單指南，原文詳盡闡述了表單相關的基礎知識。而表單作為一個經(jīng)典的頁面交互方式，是每個前端工程師繞不開的話題，通過翻譯這個系列的文章既是有助于掃清自己的知識盲區(qū)，也希望借此能讓更多人受惠吧~
先列下目錄：
第一個HTML表單
怎樣構建HTML表單
原生表單組件
HTML表單的CSS
HTML表單樣式
HTML表單高級樣式
表單組件的屬性兼容表
發(fā)送表單數(shù)據(jù)
表單數(shù)據(jù)校驗
怎樣創(chuàng)建定制表單組件
通過JavaScript發(fā)送表單
使用FormData對象
遺留瀏覽器中的表單
聲明：本文源于mdn，遵循mdn的相關協(xié)議，翻譯過程可能會加入我個人的理解，轉(zhuǎn)載請注明出處。
好，該說的都說完了，正文開始~
第一個HTML表單原文
這是一篇介紹HTML表單的文章，通過一個簡單的contact表單，我們可以看到構建HTML表單的所有基本知識。本文假設你已掌握基本的HTML和CSS，但還不了解HTML表單。
開始之前 啥是HTML表單？HTML表單是用戶和網(wǎng)站或引用的一個主要交互點。表單允許用戶發(fā)送數(shù)據(jù)給網(wǎng)站，大多數(shù)時候數(shù)據(jù)會發(fā)到服務器上，然而頁面也可以把數(shù)據(jù)攔下來給自己用。
一個HTML表單由一或多個部件組成，這些部件可以是文本框（單行或多行）、選擇框、按鈕、復選框、或單選按鈕。通常，部件們會伴隨一個描述它們使用目的的label出現(xiàn)。
處理表單需要什么？處理HTML時，你只需一個文本編輯器和一個瀏覽器即可。當然，你也也可以使用諸如Visual Studio、 Eclipse，Aptana之類的IDE。
此外，HTML表單和常規(guī)的HTML的主要區(qū)別在于表單收集的數(shù)據(jù)往往會被發(fā)送到服務器，這時你就需要搭個服務器來接受和處理這些數(shù)據(jù)了。至于如何搭建服務器，本文不作討論，欲知詳情，你可以看一篇這方面的文章：發(fā)送表單數(shù)據(jù)。
設計你的表單在開始擼代碼前，最好先花點時間來構思下我們的表單。一個快速設計模型有助于你定義希望從用戶那獲得的數(shù)據(jù)集。從用戶體驗（UX）的觀點來看，要知道你的表單越大，你越有可能失去用戶。所以你應該保持簡單和專注，只問你真想要的內(nèi)容。要具體討論表單的用戶體驗已超出本文的范圍，給幾篇這方面的文章把：
Smashing Magazine有不少和表單UX有關的好文章，但其中最重要的莫屬Extensive Guide To Web Form Usability啦。
UXMatters上的資源也蠻豐富的，從基本的最佳實踐到類似多頁表單復雜內(nèi)容都有。
在本文，我們將建立一個簡單的contact表單，草圖如下：
在我們的表單里，有三個文本框和一個按鈕。文本框用來詢問用戶的名字、郵箱和他們想發(fā)送的消息，點擊按鈕則會把數(shù)據(jù)發(fā)給服務器。
盡情地寫一波HTML吧現(xiàn)在我們要開始編碼了，建立起我們的contact表單，一共需要這幾個的HTML元素： , , ,
至于元素，type屬性是其最重要的屬性，因為該屬性定義了input元素的行為。欲知更多，請閱讀原生表單組件。 在我們的示例里，一個文本框中用了該屬性的默認值text，該值表示一個基本的單行文本框，用于接收無控制或驗證的任何文本。而另外一個文本框則使用了值email，表示定義一個只接收合法郵箱地址單行文本框，也就是說它會對用戶輸入的數(shù)據(jù)進行一些檢查。我們會在表單數(shù)據(jù)校驗這篇文章里討論更多和表單驗證有關的內(nèi)容， 最后，我們來比較下和間的語法差別。就是所謂的自動閉合元素，這種元素需要你加個"/"而不是結束標簽來閉合（譯注：這只是xhtml的強制要求，但在html里不用"/"也是可以的）；而
再加個button來完成表單
我們的表單代碼已經(jīng)快準備好了，只差個讓用戶發(fā)送數(shù)據(jù)的按鈕而已，再加個元素就可以很簡單地完成任務： 按鈕共有三種類型：submit, reset, button。 點擊submit型按鈕，會按照我們在元素上定義的action屬性，把表單數(shù)據(jù)發(fā)給指定的頁面。 點擊reset型按鈕，會直接重置所有表單組件為它們的默認值。從用戶體驗的角度來看，這其實是個不太好的操作。 點擊button型按鈕，什么都不會發(fā)生。。。聽起來有點蠢，但其實這對于用javascript來定義自定義按鈕是再好不過啦。 當然，你也可以用元素來生成上面那幾個按鈕，和使用相比，最大的區(qū)別就是元素只允許使用純文本作為它的內(nèi)容，而元素可以使用其他的HTML內(nèi)容。（譯注：比如圖片，其實元素通過css也能實現(xiàn)類似效果。此外還有個更大的差別，就是在舊版本IE中會出現(xiàn)構造的按鈕提交的是其value屬性值，然而按鈕提交的不是value值而是元素的文本內(nèi)容，不過考慮到要把按鈕也設置value提交的情況實在少見，這個差別其實也沒多大意義） HTML表單已經(jīng)有了，在你的瀏覽器下看看吧，其實還是有點丑的： 下面我們給它加點CSS裝點裝點，先讓form元素居中并帶上點邊框： 接下來，給表單組件間加些間隔： 然后再來解決label們，最佳做法是設置所有l(wèi)abel為統(tǒng)一大小并沿同一方向?qū)R。這里我們使用右對齊，但某些情況下使用左對齊也可以： 其實HTML表單的組件樣式還是蠻難整的，其中文本框還算簡單、但其他組件就難說了，若想深入了解如何設置表單組件樣式，可見HTML表單樣式。 首先我們進行下一些通用配置：協(xié)調(diào)字體、大小和邊框： HTML表單還支持不少偽類，用以表現(xiàn)各元素的狀態(tài)。比如，我們可以在組件被激活時作突出顯示，這樣可以方便用戶知道表單填到哪一步了： 多行文本框還需要一些獨有的自定義樣式，
元素在這里用于結構化我們的代碼并方便我們定義樣式。此外還要注意元素for屬性的使用，該屬性是一種顯式聯(lián)系label和表單組件的方法，可以給它賦予想要關聯(lián)組件的id值。這樣一來，用戶就可以通過點擊label來激活表單組件了。如果你還想了解for
屬性的其他好處，就參考這篇文章吧：怎樣構建HTML表單
form {
/* 用來使表單相對頁面居中 */
margin: 0 auto;
width: 400px;
/* 設置表單外沿 */
padding: 1em;
border: 1px solid #CCC;
border-radius: 1em;
}
form div + div {
margin-top: 1em;
}
label {
/* 確保所有l(wèi)abel大小相同并適當對齊 */
display: inline-block;
width: 90px;
text-align: right;
}
input, textarea {
/* 確保所有文本框有相同的字體設置
默認設置一個等寬字體 */
font: 1em sans-serif;
/* 給所有文本框設置相同的大小 */
width: 300px;
-moz-box-sizing: border-box;
box-sizing: border-box;
/* 協(xié)調(diào)文本框邊框的外形 */
border: 1px solid #999;
}
input:focus, textarea:focus {
/* 讓元素被激活時突出顯示 */
border-color: #000;
}
在本例中，表單會發(fā)送三組數(shù)據(jù)，依次命名為user_name、user_email和user_message，他們會以HTTP POST的方式發(fā)送到URL"/my-handling-form-page"。
而在服務端，負責處理URL"/my-handling-form-page"的腳本會從HTTP請求中以3組鍵/值對的形式接收這些數(shù)據(jù)。至于腳本如何處理這些數(shù)據(jù)就取決于你的需求了，各種服務端語言（PHP, Python, Ruby, Java, C#等）有它們自有的機制來做這件事。要深入探究這方面就不是本文的主題了，欲知詳情，我們會在發(fā)送表單數(shù)據(jù)這篇文章中給你一些例子。
結論恭喜！你終于完成你的第一個HTML表單啦~下面就是最終效果的在線演示：
演示
接下來是時候更上一層樓了，其實HTML表單遠比我們在這里展現(xiàn)的強大，本指南的其他文章將會幫助你掌握剩下的內(nèi)容。
文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/54367.html
摘要：提到老舊瀏覽器，我們腦海中往往復現(xiàn)的就是舊版的。但幸運的是，有一些技巧可以協(xié)助解決由老舊瀏覽器引起的的問題。放棄表單和老舊瀏覽器的最大問題是對的支持。結論如你所見，處理老舊瀏覽器所涉及的內(nèi)容不止有表單。 系列文章說明 原文 所有的web開發(fā)者都會很快（或者很痛苦地）意識到Web是一個粗糙的環(huán)境，其中最糟糕的一點就是老舊的瀏覽器。提到老舊瀏覽器，我們腦海中往往復現(xiàn)的就是舊版的IE。但...
摘要：提到老舊瀏覽器，我們腦海中往往復現(xiàn)的就是舊版的。但幸運的是，有一些技巧可以協(xié)助解決由老舊瀏覽器引起的的問題。放棄表單和老舊瀏覽器的最大問題是對的支持。結論如你所見，處理老舊瀏覽器所涉及的內(nèi)容不止有表單。 系列文章說明 原文 所有的web開發(fā)者都會很快（或者很痛苦地）意識到Web是一個粗糙的環(huán)境，其中最糟糕的一點就是老舊的瀏覽器。提到老舊瀏覽器，我們腦海中往往復現(xiàn)的就是舊版的IE。但...
摘要：并非所有組件受的影響都是平等的如今在表單使用時依然有一些困難這些問題可歸為三類還好的若存在跨平臺問題，一些元素可以只添加少許的樣式，有如下幾個結構元素此外，還有所有的文本框組件單行或多行，以及按鈕。 系列文章說明 原文 本文中，我們將學習如何使用CSS來讓HTML表單看起來更漂亮，這可能需要竅門才能做到。由于歷史及技術上的原因，表單組件并不太適合使用CSS；而也正因為有這些困難，許...
摘要：并非所有組件受的影響都是平等的如今在表單使用時依然有一些困難這些問題可歸為三類還好的若存在跨平臺問題，一些元素可以只添加少許的樣式，有如下幾個結構元素此外，還有所有的文本框組件單行或多行，以及按鈕。 系列文章說明 原文 本文中，我們將學習如何使用CSS來讓HTML表單看起來更漂亮，這可能需要竅門才能做到。由于歷史及技術上的原因，表單組件并不太適合使用CSS；而也正因為有這些困難，許...
摘要：這個方法論在內(nèi)容和容器之間有著明顯的區(qū)分。這是通過把命名為表示其角色的類名。通過使用這種扁平的命名方式避免了多后代的選擇器。 原文鏈接：A Look at Some CSS methodologies CSS在大型，復雜，快速迭代的系統(tǒng)中難以管理的程度是出了名的。 其中一個原因是CSS缺少內(nèi)置的作用域管理機制。在CSS中，所有的一切都是全局的，這意味著任何你所做的改變都有可能層疊或者改...
閱讀 2242·2023-04-26 00:23
閱讀 918·2021-09-08 09:45
閱讀 2507·2019-08-28 18:20
閱讀 2644·2019-08-26 13:51
閱讀 1671·2019-08-26 10:32
閱讀 1460·2019-08-26 10:24
閱讀 2095·2019-08-26 10:23
閱讀 2264·2019-08-23 18:10
