引言

這篇文章可以給你關(guān)于以下內(nèi)容的的體驗(yàn)：

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

什么是HTML表單？

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

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

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

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

設(shè)計(jì)你的表單

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

來自mozilla mdn

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

來手動(dòng)寫一個(gè)

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

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

<form> 元素

所有的HTML表單都被包含在一對(duì)<form>...</form>元素標(biāo)簽內(nèi)，比如：

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

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

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

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

我們的表單包含三個(gè)文本框，并且每一個(gè)文本框都有對(duì)應(yīng)的標(biāo)簽。姓名框只是一個(gè)簡單的單行文本框，e-mail框則只能接受e-mail地址，消息框則是一個(gè)簡單的多行文本框。

<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> 標(biāo)簽組織我們的代碼和樣式。
所有<label> 標(biāo)簽均通過 for 屬性與對(duì)應(yīng)的widget匹配。for屬性的值是widget的ID。

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

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

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

<textarea>你好</textarea>

<button> 元素

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

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

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

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

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

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

最終效果

結(jié)果

只是有點(diǎn)丑...

學(xué)習(xí)于：mozilla mdn