引言

這篇文章可以給你關于以下內容的的體驗：

• 創(chuàng)建一個表單
• 發(fā)送表單數(shù)據(jù)

什么是HTML表單？

表單是用戶與服務器或應用交互的主要方式之一。它們允許用戶向服務器發(fā)送數(shù)據(jù)。表單中的數(shù)據(jù)大多會被發(fā)送至服務器，但也可以被網(wǎng)頁截獲，使用。

一個表單是由一個或多個widget(部件，工具)組合而成的。
這些widget可以是

• text field（single line or multiline）（文本框）
• select box（下拉框）
• button（按鈕）
• checkbox（復選框）
• radio button（單選框）

大多數(shù)情況下，每一個widget都有一個label與之匹配，用于描述widget的用途。

設計你的表單

建立一個簡單地模型可以幫助你確定你想從用戶那兒得到的正確的數(shù)據(jù)。
在本文中，我們將建立一個簡單地聯(lián)系人表單。首先，讓我們先畫一個簡單的草圖

來自mozilla mdn

我們的表單包含三個文本框和一個提交按鈕。當用戶點擊提交按鈕時，數(shù)據(jù)將被發(fā)送到指定的服務器上

來手動寫一個

我們將使用以下5個HTML元素來實現(xiàn)我們的聯(lián)系人表單

• <form>
• <label>
• <input>
• <textarea>
• <button>

<form> 元素

所有的HTML表單都被包含在一對<form>...</form>元素標簽內，比如：

<form action = "/my-handling-form-page" method = "post">
    ...
</form>

與<div>和 <p>元素類似，<form> 元素也是一個容器元素，并且它也支持特定的屬性。
實踐中一般至少確定action 與method 屬性

• action 屬性定義了表單提交數(shù)據(jù)的地址
• method 屬性定義了哪一個HTTP方法將被調用（"post" or "get"）

<label> , <input> ,and <textarea> 元素

我們的表單包含三個文本框，并且每一個文本框都有對應的標簽。姓名框只是一個簡單的單行文本框，e-mail框則只能接受e-mail地址，消息框則是一個簡單的多行文本框。

<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_mail" >
    </div>
    <div>
        <label for = "msg" >Message:</label>
        <textarea id = "msg" name = "user_msg"></textarea>
</form>

我們使用<div> 標簽組織我們的代碼和樣式。
所有<label> 標簽均通過 for 屬性與對應的widget匹配。for屬性的值是widget的ID。

<input> 元素最重要的屬性是type屬性，type屬性定義了<input> 元素的行為。

也許你會對for 與 type屬性感到疑惑，繼續(xù)往下閱讀，在你看到更多的實例之后，你會有更加全面的認識，也會對他倆更加熟悉。
另外，注意<input> 與 <textarea>...</textarea> 的語法差異。這種語法差異體現(xiàn)在定義默認值上

<input type = "text" value = "你好">

<textarea>你好</textarea>

<button> 元素

最后，我們需要向我們的表單添加一個按鈕（button），使用戶可以發(fā)送他們的數(shù)據(jù)。

<div class = "button">
    <button type = "submit" >提交</button>
</div>

<button> 也有一個type屬性，其值可以是：submit，reset，button

• submit 將數(shù)據(jù)發(fā)送給由form表單中的action屬性定義的服務器或網(wǎng)頁
• reset 重新設定表單中的所有widgets的值為默認值
• button 用于自定義，通過javascript實現(xiàn)

向服務器發(fā)送數(shù)據(jù)

你可能會發(fā)現(xiàn)我們上面的代碼中，每個widget有"多余的"屬性---name。其實它并不多余，因為表單中的數(shù)據(jù)是要提交給服務器處理的，而瀏覽器和服務器都需要對數(shù)據(jù)進行分類，因此，name 屬性是必須的。

最終效果

結果

只是有點丑...

學習于：mozilla mdn