【譯】HTML表單指南---第一個HTML表單
前言
這個系列譯自mdn上的一份表單指南，原文詳盡闡述了表單相關的基礎知識。而表單做爲一個經典的頁面交互方式，是每一個前端工程師繞不開的話題，經過翻譯這個系列的文章既是有助於掃清本身的知識盲區，也但願藉此能讓更多人受惠吧~javascript
先列下目錄：php
第一個HTML表單css
怎樣構建HTML表單html
原生表單組件前端
-
HTML表單的CSSjava
HTML表單樣式web
HTML表單高級樣式segmentfault
表單組件的屬性兼容表瀏覽器
發送表單數據服務器
聲明：本文源於mdn，遵循mdn的相關協議，翻譯過程可能會加入我我的的理解，轉載請註明出處。
好，該說的都說完了，正文開始~
第一個HTML表單
這是一篇介紹HTML表單的文章，經過一個簡單的contact表單，咱們能夠看到構建HTML表單的全部基本知識。本文假設你已掌握基本的HTML和CSS，但還不瞭解HTML表單。
開始以前
啥是HTML表單？
HTML表單是用戶和網站或引用的一個主要交互點。表單容許用戶發送數據給網站，大多數時候數據會發到服務器上，然而頁面也能夠把數據攔下來給本身用。
一個HTML表單由一或多個部件組成，這些部件能夠是文本框（單行或多行）、選擇框、按鈕、複選框、或單選按鈕。一般，部件們會伴隨一個描述它們使用目的的label出現。
處理表單須要什麼？
處理HTML時，你只需一個文本編輯器和一個瀏覽器便可。固然，你也也可使用諸如Visual Studio、 Eclipse，Aptana之類的IDE。
此外，HTML表單和常規的HTML的主要區別在於表單收集的數據每每會被髮送到服務器，這時你就須要搭個服務器來接受和處理這些數據了。至於如何搭建服務器，本文不做討論，欲知詳情，你能夠看一篇這方面的文章：發送表單數據。
設計你的表單
在開始擼代碼前，最好先花點時間來構思下咱們的表單。一個快速設計模型有助於你定義但願從用戶那得到的數據集。從用戶體驗（UX）的觀點來看，要知道你的表單越大，你越有可能失去用戶。因此你應該保持簡單和專一，只問你真想要的內容。要具體討論表單的用戶體驗已超出本文的範圍，給幾篇這方面的文章把：
Smashing Magazine有很多和表單UX有關的好文章，但其中最重要的莫屬Extensive Guide To Web Form Usability啦。
在本文，咱們將創建一個簡單的contact表單，草圖以下：
在咱們的表單裏，有三個文本框和一個按鈕。文本框用來詢問用戶的名字、郵箱和他們想發送的消息，點擊按鈕則會把數據發給服務器。
盡情地寫一波HTML吧
如今咱們要開始編碼了，創建起咱們的contact表單，一共須要這幾個的HTML元素： <form>, <label>, <input>, <textarea>, <button>。
form元素：
全部的HTML表單都和下面代碼同樣以<form>元素開頭：
<form action="/my-handling-form-page" method="post"> </form>
<form>元素讓咱們定義了一個表單。雖然它也是個相似<div>或<p>同樣的容器元素，但它還支持一些特有屬性來定義表單行爲。這些屬性是可選的，而最佳實踐是至少得設置action和method屬性：
action屬性定義了表單收集的數據會被送往的地址（URL）method屬性則定義了用什麼http方式來發送數據（好比"get"或"post"方式）
若你還想知道這些屬性是如何工做的，請閱讀發送表單數據。
添加label、input和textarea元素
咱們簡單的contact表單只有三個帶label的文本框：用於姓名輸入域的是個基本的單行文本框；用於郵箱的輸入域也是單行文本框，不過它只能填入郵箱地址；最後用於發生消息的輸入域則是個基本的多行文本框。
HTML代碼以下：
<form action="/my-handling-form-page" method="post">
<div>
<label for="name">Name:</label>
<input type="text" id="name" />
</div>
<div>
<label for="mail">E-mail:</label>
<input type="email" id="mail" />
</div>
<div>
<label for="msg">Message:</label>
<textarea id="msg"></textarea>
</div>
</form>
<div>元素在這裏用於結構化咱們的代碼並方便咱們定義樣式。此外還要注意<label>元素for屬性的使用，該屬性是一種顯式聯繫label和表單組件的方法，能夠給它賦予想要關聯組件的id值。這樣一來，用戶就能夠經過點擊label來激活表單組件了。若是你還想了解for
屬性的其餘好處，就參考這篇文章吧：怎樣構建HTML表單
至於<input>元素，type屬性是其最重要的屬性，由於該屬性定義了input元素的行爲。欲知更多，請閱讀原生表單組件。
在咱們的示例裏，一個文本框中用了該屬性的默認值text，該值表示一個基本的單行文本框，用於接收無控制或驗證的任何文本。而另一個文本框則使用了值email，表示定義一個只接收合法郵箱地址單行文本框，也就是說它會對用戶輸入的數據進行一些檢查。咱們會在表單數據校驗這篇文章裏討論更多和表單驗證有關的內容，
最後，咱們來比較下<input/>和<textarea></textarea>間的語法差異。<input/>就是所謂的自動閉合元素，這種元素須要你加個"/"而不是結束標籤來閉合（譯註：這只是xhtml的強制要求，但在html裏不用"/"也是能夠的）；而<textarea>與之相反，並不是自動閉合，這時你就得乖乖加上結束標籤來閉合了。這點語法差異，其實決定了這兩種元素在表單上設定默認值方法有所不一樣。
若要定義<input>元素的默認值，你得和下面的示例同樣使用value屬性：
<input type="text" value="by default this element is filled with this text" />
至於<textarea>，你只需像下面通常，把默認值放進它的起止標籤間便可：
<textarea>by default this element is filled with this text</textarea>
再加個button來完成表單
咱們的表單代碼已經快準備好了，只差個讓用戶發送數據的按鈕而已，再加個<button>元素就能夠很簡單地完成任務：
<form action="/my-handling-form-page" method="post">
<div>
<label for="name">Name:</label>
<input type="text" id="name" />
</div>
<div>
<label for="mail">E-mail:</label>
<input type="email" id="mail" />
</div>
<div>
<label for="msg">Message:</label>
<textarea id="msg"></textarea>
</div>
<div class="button">
<button type="submit">Send your message</button>
</div>
</form>
按鈕共有三種類型：submit, reset, button。
點擊
submit型按鈕，會按照咱們在<form>元素上定義的action屬性，把表單數據發給指定的頁面。點擊
reset型按鈕，會直接重置全部表單組件爲它們的默認值。從用戶體驗的角度來看，這實際上是個不太好的操做。點擊
button型按鈕，什麼都不會發生。。。聽起來有點蠢，但其實這對於用javascript來定義自定義按鈕是再好不過啦。
固然，你也能夠用<input>元素來生成上面那幾個按鈕，和使用<button>相比，最大的區別就是<input>元素只容許使用純文本做爲它的內容，而<button>元素可使用其餘的HTML內容。（譯註：好比圖片，其實<input>元素經過css也能實現相似效果。此外還有個更大的差異，就是在舊版本IE中會出現<input>構造的按鈕提交的是其value屬性值，然而<button>按鈕提交的不是value值而是元素的文本內容，不過考慮到要把按鈕也設置value提交的狀況實在少見，這個差異其實也沒多大意義）
用CSS裝扮漂亮點
HTML表單已經有了，在你的瀏覽器下看看吧，其實仍是有點醜的：
下面咱們給它加點CSS裝點裝點，先讓form元素居中並帶上點邊框：
form {
/* 用來使表單相對頁面居中 */
margin: 0 auto;
width: 400px;
/* 設置表單外沿 */
padding: 1em;
border: 1px solid #CCC;
border-radius: 1em;
}
接下來，給表單組件間加些間隔：
form div + div {
margin-top: 1em;
}
而後再來解決label們，最佳作法是設置全部label爲統一大小並沿同一方向對齊。這裏咱們使用右對齊，但某些狀況下使用左對齊也能夠：
label {
/* 確保全部label大小相同並適當對齊 */
display: inline-block;
width: 90px;
text-align: right;
}
其實HTML表單的組件樣式仍是蠻難整的，其中文本框還算簡單、但其餘組件就難說了，若想深刻了解如何設置表單組件樣式，可見HTML表單樣式。
首先咱們進行下一些通用配置：協調字體、大小和邊框：
input, textarea {
/* 確保全部文本框有相同的字體設置
默認設置一個等寬字體 */
font: 1em sans-serif;
/* 給全部文本框設置相同的大小 */
width: 300px;
-moz-box-sizing: border-box;
box-sizing: border-box;
/* 協調文本框邊框的外形 */
border: 1px solid #999;
}
HTML表單還支持很多僞類，用以表現各元素的狀態。好比，咱們能夠在組件被激活時做突出顯示，這樣能夠方便用戶知道表單填到哪一步了：
input:focus, textarea:focus {
/* 讓元素被激活時突出顯示 */
border-color: #000;
}
多行文本框還須要一些獨有的自定義樣式，<textarea>這個內聯元素會默認讓它的底部與別的文本的基線對齊，而咱們每每並不想這樣。想要完美對齊label和文本框，咱們得把<textarea>的vertical-align屬性設爲top。
此外還得注意resize屬性，它能方便用戶縮放<textarea>的大小。
textarea {
/* 對齊多行文本框和他們的label */
vertical-align: top;
/* 給輸入文本留下足夠的空間 */
height: 5em;
/* 容許用戶垂直縮放textarea但這並不會在全部瀏覽器上有效 */
resize: vertical;
}
按鈕也得加點特殊樣式才行。爲此，咱們先將按鈕置於一個class設爲"button"的<div>中。由於咱們還但願按鈕能域其餘表單組件對齊，因此咱們得模仿出一個和其餘label同樣的效果（譯註：在這裏就是佔一樣大小），加上內外邊距來實現吧。
.button {
/* 將按鈕置於和文本框相同的位置 */
padding-left: 90px; /* 和label元素同樣大小 */
}
button {
/* 這個額外的外邊距大體充當了label和對應文本框間的間距 */
margin-left: .5em;
}
如今咱們的表單看起來漂亮多了：
將數據發給你的web服務器
如前所述，HTML表單就是爲了方便從用戶那獲取數據併發送到服務端。因此最後、也是看起來最棘手的，就是在服務端處理這些表單數據了。
其實action和method屬性已經給<form>元素定義了數據發送到哪兒、如何發生數據了。
然而這還不夠，咱們還得給咱們的數據起個名字。這些名字在兩端都是很重要的：在瀏覽器端，這能告訴瀏覽器如何給各部分的數據命名；而在服務端，這也讓服務器可以依據數據名來處理每塊數據。
要給你的數據命名，就得給那些須要收集特定數據的表單組件加上name屬性：
<form action="/my-handling-form-page" method="post">
<div>
<label for="name">Name:</label>
<input type="text" id="name" name="user_name" />
</div>
<div>
<label for="mail">E-mail:</label>
<input type="email" id="mail" name="user_email" />
</div>
<div>
<label for="msg">Message:</label>
<textarea id="msg" name="user_message"></textarea>
</div>
<div class="button">
<button type="submit">Send your message</button>
</div>
</form>
在本例中，表單會發送三組數據，依次命名爲user_name、user_email和user_message，他們會以HTTP POST的方式發送到URL"/my-handling-form-page"。
而在服務端，負責處理URL"/my-handling-form-page"的腳本會從HTTP請求中以3組鍵/值對的形式接收這些數據。至於腳本如何處理這些數據就取決於你的需求了，各類服務端語言（PHP, Python, Ruby, Java, C#等）有它們自有的機制來作這件事。要深刻探究這方面就不是本文的主題了，欲知詳情，咱們會在發送表單數據這篇文章中給你一些例子。
結論
恭喜！你終於完成你的第一個HTML表單啦~下面就是最終效果的在線演示：
接下來是時候更上一層樓了，其實HTML表單遠比咱們在這裏展示的強大，本指南的其餘文章將會幫助你掌握剩下的內容。
- 1. 【譯】HTML表單指南---第一個HTML表單
- 2. 一個html表單頁面
- 3. 【譯】HTML表單樣式
- 4. html表單,表單域
- 5. SpringMVC表單和HTML表單
- 6. HTML 表單
- 7. HTML-表單
- 8. HTML表單
- 9. html表單
- 10. HTML form 表單
- 更多相關文章...
- • ASP.NET Web Pages - HTML 表單 - ASP.NET 教程
- • ASP.NET Web Forms - HTML 表單 - ASP.NET 教程
- • TiDB 在摩拜單車在線數據業務的應用和實踐
- • 算法總結-雙指針
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 【譯】HTML表單指南---第一個HTML表單
- 2. 一個html表單頁面
- 3. 【譯】HTML表單樣式
- 4. html表單,表單域
- 5. SpringMVC表單和HTML表單
- 6. HTML 表單
- 7. HTML-表單
- 8. HTML表單
- 9. html表單
- 10. HTML form 表單