單標簽的作用

• <form>標簽及其屬性

<from></form>標簽對用來創(chuàng)建一個表單，即定義表單的開始和結(jié)束位置，<form>標簽具有下面等屬性。

• action屬性用來設(shè)置接收和處理瀏覽器遞交的表單內(nèi)容的服務(wù)器程序的URL。相對和絕對

• Method屬性用來定義瀏覽器將表單中的信息提交給服務(wù)器端的處理程序的方式，取值可以為：GET或POST.

• Target屬性用來指定服務(wù)器返回結(jié)果顯示的目標窗口或目標幀。

• Title屬性用來設(shè)置當網(wǎng)站訪問者的素、鼠標在表單上的任一位置停留過幾秒時，瀏覽器用黃色小浮標顯示的文本（如表單的名稱或描述）。

• Enctype屬性指示瀏覽器使用哪種編碼方法將表單數(shù)據(jù)傳送給www服務(wù)器。該屬性可以有兩種取值：

• application/x-www-form-urlencoded（默認的設(shè)置）

• multipart/form-data

表單字段元素（１）

• <input type=“submit”>
• <input type=“reset”>
• <input type=“text”>

屬性：size、value、maxlength、readonly、disabled

• <input type=“checkbox”>

屬性：checked

• <input type=“radio”>
• <input type=“hidden”>
• <input type=“password”>
• <input type=“button”>

表單字段元素（2）

• <input type=“file”>
• <input type=“image”>
• <select></select><option></option>
• <select>標簽的屬性：multiple、size,name
• <option>標簽的屬性：value、selected

如何在列表中實現(xiàn)取消選項

• <textarea></textarea>

屬性：cols、rows

• <label>

屬性：for、accesskey

單屬性匯總：

1 name屬性

服務(wù)器會識別不同的name屬性，并根據(jù)name屬性來捕獲不同元素內(nèi)的數(shù)據(jù)。

2 value屬性

value 屬性為 input 元素設(shè)定值。

對于不同的輸入類型，value 屬性的用法也不同：

type="button", "reset", "submit" - 定義按鈕上的顯示的文本

type="text", "password", "hidden" - 定義輸入字段的初始值

type="checkbox", "radio", "image" - 定義與輸入相關(guān)聯(lián)的值

注釋：<input type="checkbox"> 和 <input type="radio"> 中必須設(shè)置 value 屬性。

注釋：value 屬性無法與 <input type="file"> 一同使用。

注意：單選框和復選框傳遞數(shù)據(jù)到數(shù)據(jù)庫時一定要設(shè)置value, 否則插入數(shù)據(jù)失敗;

3 type屬性

它決定了<input>標簽在頁面中的表現(xiàn)樣式和功能

text 文本框

password 密碼框

radio 單選框

checkbox 復選框

file 文件域

hidden 隱藏域

image 圖像域

submit 提交按鈕

reset 重置按鈕

button 普通按鈕

4 size屬性

列表框中size屬性用來設(shè)置列表框顯示的行數(shù)；

文本框和密碼框會使用size屬性設(shè)置域的顯示寬度；

5 disabled屬性

定義disabled屬性可以禁止使用該元素；

無法將數(shù)據(jù)提交到服務(wù)器處理;

6 readonly屬性

常用在輸入性表單對象中(如文本框、密碼框、文本區(qū)域)，用來禁止輸入任何信息；

可以將數(shù)據(jù)提交到服務(wù)器處理;

7 checked屬性

它與disabled屬性一樣沒有屬性值，常用在選擇性表單對象中，定義對象處于被選中狀態(tài)(如單選按鈕和復選框)

但在列表框或者下拉式菜單中，為了表示被選中的項目，可使用selected屬性；

7 placeholder屬性

規(guī)定幫助用戶填寫輸入字段的提示。

表單對象：

1 文本框

<input type="text" name="textfield" id="textfield" value="單行文本框" size="20" maxlength="20">

必需的屬性:name type

2 密碼域

<input type="password" name="passwordfield" id="passwordfield">

必需的屬性:name type

3 文本域

<textarea name="textarea" cols="20" rows="5" wrap="physical"></textarea>

必需的屬性:name cols rows

wrap屬性 默認值：輸入的文本會自動換行。當數(shù)據(jù)提交到服務(wù)器被處理時, 換行符不會隨輸入的文本一同被提交到服務(wù)器；

off(也可寫成wrap)：不自動換行, 當輸入的內(nèi)容超出文本區(qū)域右邊界時, 文本將向左滾動, 并顯示滾動條。

如果希望換行，必須手動輸入回車鍵才能將插入點移到下一行；

virtual：文本能夠自動換行, 當數(shù)據(jù)提交到服務(wù)器被處理時, 換行符不會隨輸入文本一同提交到服務(wù)器；(默認值)

physical：文本能夠自動換行, 當數(shù)據(jù)提交到服務(wù)器被處理時, 換行符將會隨輸入的文本一同被提交到服務(wù)器進行處理；

關(guān)于如何限制文本域輸入字符串的長度 見javascript|語法|設(shè)置文本框

HTML5中wrap中屬性值修改為hard|soft

soft 當在表單中提交時, textarea 中的文本不換行, 默認值。

hard 當在表單中提交時, textarea 中的文本換行(包含換行符)。

當使用 "hard" 時, 必須規(guī)定 cols 屬性

4 單選按鈕

單選按鈕傳遞的信息簡單，如1或0、True或False。

<input type="radio" name="radio" value="1"/>選項1
<input type="radio" name="radio" value="2"/>選項2
<input type="radio" name="radio" value="3"/>選項3

多個單選按鈕通過定義相同的name屬性, 以實現(xiàn)捆綁在一起；

必需的屬性:type name value

5 復選框

<input type="checkbox" name="checkbox[]" value="1"/>選項2
<input type="checkbox" name="checkbox[]" value="2"/>選項2
<input type="checkbox" name="checkbox[]" value="3"/>選項2

通過設(shè)置相同的name屬性可以把多個復選框捆綁在一起；

必需的屬性:type name value

6 列表框/下拉菜單

<select name="select" size=1>
<option value="1">1</option>
<option value="2" selected="selected">2</option>
<option value="3">3</option>
</select>

如果select元素中不設(shè)置size屬性,則該元素會顯示為下拉菜單樣式

<select name="select" size="1" multiple="multiple">
<option value="1">1</option>
<option value="2" selected="selected">2</option>
<option value="3">3</option>
</select>

如果希望以列表框形式顯示,則可以使用size屬性指定列表框的高度(顯示幾個選項);

還可以通過mutiple屬性定義列表框是否為多選(默認是單選)；

通過<optgroup>標簽把相關(guān)的選項組合在一起：

<select>
<optgroup label="PHP版塊">
<option value="resource">資源共享</option>
<option value="study">學習交流</option>
<option value="salary">薪酬待遇</option>
</optgroup>
<optgroup label="IOS版塊">
<option value="resource">資源共享</option>
<option value="study">學習交流</option>
<option value="salary">薪酬待遇</option>
</optgroup>
</select>

注意：其中PHP版塊和IOS版塊不能被選中

所有主流瀏覽器都支持 <optgroup> 標簽。

7 文件域

<input type="file" name="file"/>
<input type="file" name="file" multiple/>

8 按鈕

提交按鈕

<input type="submit" name="" value="提交"/>

name值必須給出

重置按鈕

<input type="reset" name="" value="重置"/>

普通按鈕

<input type="button" name="" value="普通按鈕"/>

它一般是配合javascript來使用;

關(guān)于控制表單提交按鈕見: javascript|語法|控制表單提交

9 圖像域

<input type="image" name="image" value="提交" src="images/vote_d.gif" alt="提交" align="middle"/>

10 隱藏域

限制上傳文件大小

<input type="hidden" name="MAX_FILE_SIZE" value="1000000" />

傳遞ID值

<input type="hidden" name="id" value="<?php echo $result['id'];?>" />

11 button標簽

在 button 元素內(nèi)部，您可以放置內(nèi)容，比如文本或圖像。這是該元素與使用 input 元素創(chuàng)建的按鈕之間的不同之處。

<button type="button" name="button" value="按鈕"><img src="hw001.jpeg"/></button>

普通按鈕<button type="button">普通按鈕</button> 它一般是配合javascript來使用, 默認值

提交按鈕<button type="submit">提交按鈕</button>

重置按鈕<button type="reset">重置按鈕</button>

提交表單

enctype屬性

該屬性包含兩種方式:

application/x-www-form-urlencoded 是默認編碼類型

multipart/form-data

multipart/form-data編碼方式可以用來傳輸二進制數(shù)據(jù)或者非ASCII字符的文本(如圖片、不同格式的文件等),上傳文件必須使用此屬性

multipart: 多部件的

multiple: 多重的

text/plain

text/plain將表單屬性發(fā)送到電子郵箱時，enctype的值必須設(shè)為"text/plain",否則將會出現(xiàn)亂碼。

發(fā)送電子郵件的表單程序

<form name="form1" method="post" action="mailto:marker@broadview.com.cn" enctype="text/plain">
</form>

action 表單提交的腳本

如果傳遞到本頁面，則直接輸入控制 action=""

表單提交方式method:post/get

<form action="test.php?id=5" method="post" >
name: <input type="text" name="name" value="100">
</form>

id=5是get傳， name="100" 是post傳！ //高洛峰解釋

action="" 表示傳遞到當前腳本文件

target 指定提交到哪一個窗口

_blank 打開新窗口

_self 當前的窗口,默認值

_parent 上一層窗口

_top 最上層窗口

框架名稱 指定指定窗口或框架名稱

label標簽

作用: 擴大觸控區(qū)域, 為了提升用戶體驗, 點擊文字也能選中表單

<form action=" method="get" accept-charset="utf-8">
<label>電子郵箱: <input type="text" name="email" value="" placeholder="請輸入電子郵箱"/></label><br/>
<label>密碼: <input type="password" name="password"/></label><br/>
<label for="address">地址</label>
<input type="text" name="address" id="address" placeholder="請輸入地址" />
</form>

for與id一致

<input type="radio" id="sec" name="sex"> <label for="sex">男</label>

簡化寫法:

<label><input type="checkbox"/>周杰倫-晴天</label>

注意: "for" 屬性可把 label 綁定到另外一個元素。請把"for"屬性的值設(shè)置為相關(guān)元素的 id 屬性的值。

PHP實例：創(chuàng)建發(fā)送郵件信息的html表單

代碼：

<html>
<head>
<title>簡單郵件發(fā)送表單</title>
</head>
<body>
<h1>Mail Form</h1>
<form name="form1" method="post" action="simpleEmail.php">
<table>
<tr><td><b>To</b></td><td><input type="text" name="mailto" size="35"></td></tr>
<tr><td><b>郵件主題：</b></td>
<td><input type="text" name="mailsubject" size="35"></td></tr>
<tr><td><b>郵件內(nèi)容</b></td>
<td><textarea name="mailbody" cols="50" rows="7"></textarea></td>
</tr>
<tr><td colspan="2">
<input type="submit" name="Submit" value="發(fā)送">
</td>
</tr>
</table>
</form>
</body>
</html>

simpleEmail.php

單的工作過程

表單的信息發(fā)送與處理過程可以簡單的進行圖示，如下圖。

以注冊會員為例，用戶在自己的電腦上打開相應(yīng)的注冊表單頁面填寫信息，完成填寫后點擊提交按鈕，也就是圖中1所示過程。

這時瀏覽器會將這些信息發(fā)送給處理這些信息的服務(wù)器，服務(wù)器上有使用類似asp或php寫成的相應(yīng)的處理程序，處理完成后，生成一個反饋信息，也就是2到3的過程。

然后服務(wù)器將處理后的信息發(fā)送給個人電腦，個人電腦在瀏覽器上通過一個新頁面來提示用戶處理結(jié)果。

這里就涉及到一個問題，一個網(wǎng)站會有針對不同用戶的信息注冊表單以及相應(yīng)的信息處理程序，比如我們注冊頭條號就有"個人"、"企業(yè)"、"媒體"和"國家機構(gòu)"的區(qū)分。如何使不同的表單找到相應(yīng)的處理程序呢？在<form>標簽中，有一個action屬性就是為這個表單信息指定處理程序的。

<form>中的action屬性

調(diào)用程序

<form>的action屬性實際上就是為表單提示處理程序所在的路徑，如果程序和頁面在一個服務(wù)器中存儲，那使用相對路徑即可，如果在其他服務(wù)器，則要使用絕對路徑。示例代碼如下：

<form action="form_action.asp" method="get">
<p>First name: <input type="text" name="fname" /></p> 
<p>Last name: <input type="text" name="lname" /></p> 
<input type="submit" value="Submit" />
</form>

這段代碼中的"form_action.asp"程序和這個表單頁面在一個文件夾中，故直接寫名稱即可調(diào)用。

發(fā)送郵件

action屬性除了調(diào)用程序外，也可以發(fā)送郵件，示例代碼如下：

<form action="MAILTO:someone@w3school.com.cn" method="post" enctype="text/plain">
<h3>這個表單會把電子郵件發(fā)送到 W3School。</h3>
姓名：<br />
<input type="text" name="name" value="yourname" size="20"><br />
電郵：<br /><input type="text" name="mail" value="yourmail" size="20"><br />
內(nèi)容：<br /><input type="text" name="comment" value="yourcomment" size="40"><br /><br />
<input type="submit" value="發(fā)送">
<input type="reset" value="重置">
</form>

這段代碼中。發(fā)送郵件的寫法是這樣的：action="MAILTO:someone@w3school.com.cn"，通過MAILTO:告訴瀏覽器，這里要發(fā)送郵件！然后輸入相應(yīng)的郵箱地址，這樣就會把表單中的信息以郵件的形式發(fā)送到相應(yīng)的郵箱中了。

大家可以把郵箱地址改成自己的郵箱試一下，瀏覽器會讓大家選擇發(fā)送郵件的程序。如圖所示：

使用這個功能我們可以寫一個簡單的郵件發(fā)送頁面，示例代碼如下：

<form action="mailto:yourname@domain.com" method="post" enctype="text/plain">
主題：<input name="subject" type="text"><br>
抄送：<input name="cc" type="text"><br>
密送：<input name="bcc" type="text"><br>
正文：<textarea name="body"></textarea><br>
<input type="submit">
</form>

這樣的寫法大家可能會發(fā)現(xiàn)問題，即如果一個網(wǎng)站注冊用戶超過100人以后，靠這種手動輸入用戶郵箱的方法發(fā)送郵件簡直就是折磨人啊！

實際上，在網(wǎng)站中，我們會把會員或注冊用戶的郵箱存在數(shù)據(jù)庫中，通過調(diào)用數(shù)據(jù)庫中的用戶郵箱的程序語句來替換action中的具體郵箱地址即可，再通過程序，可以針對全部用戶或部分用戶進行群發(fā)信息。

其中，enctype屬性是向服務(wù)器聲明上傳信息的形式，也就是向服務(wù)器說明發(fā)送的數(shù)據(jù)到底是數(shù)字還是英文還是中文還是編程語句。專業(yè)一些的說法是"規(guī)定在發(fā)送表單數(shù)據(jù)之前如何對其進行編碼。"

全部屬性值有三個，如圖所示，大家可以簡要理解一下。

除此之外，我們還發(fā)現(xiàn)一個屬性叫做method（方法），通過上面的示例代碼可知，method屬性有兩個屬性值，一個是get一個是post，這是什么意思呢？

信息上傳的兩種方法

<form>中的method標簽即為表單信息指定相應(yīng)的發(fā)送方法。

方法有兩種，一種叫g(shù)et，這種方法通常用來發(fā)送簡短的且低安全要求的信息，特點是速度比較快。

post經(jīng)常用來發(fā)送體積較大的信息，如果發(fā)送一些對安全性要求高的信息，html的官方說明中建議使用post方法。

我個人認為，現(xiàn)階段大家能記住這兩個方法的主要特點即可。這一篇的內(nèi)容實際上也是前端學習者對服務(wù)器端的運行的了解內(nèi)容。

下面為大家附上更為專業(yè)的講解，看不懂也沒關(guān)系，盡量讀，至少能被專業(yè)詞匯洗禮一下!

method 屬性

瀏覽器使用 method 屬性設(shè)置的方法將表單中的數(shù)據(jù)傳送給服務(wù)器進行處理。共有兩種方法：POST 方法和 GET 方法。

如果采用 POST 方法，瀏覽器將會按照下面兩步來發(fā)送數(shù)據(jù)。首先，瀏覽器將與 action 屬性中指定的表單處理服務(wù)器建立聯(lián)系，一旦建立連接之后，瀏覽器就會按分段傳輸?shù)姆椒▽?shù)據(jù)發(fā)送給服務(wù)器。

在服務(wù)器端，一旦 POST 樣式的應(yīng)用程序開始執(zhí)行時，就應(yīng)該從一個標志位置讀取參數(shù)，而一旦讀到參數(shù)，在應(yīng)用程序能夠使用這些表單值以前，必須對這些參數(shù)進行解碼。用戶特定的服務(wù)器會明確指定應(yīng)用程序應(yīng)該如何接受這些參數(shù)。

另一種情況是采用 GET 方法，這時瀏覽器會與表單處理服務(wù)器建立連接，然后直接在一個傳輸步驟中發(fā)送所有的表單數(shù)據(jù)：瀏覽器會將數(shù)據(jù)直接附在表單的 action URL 之后。這兩者之間用問號進行分隔。

一般瀏覽器通過上述任何一種方法都可以傳輸表單信息，而有些服務(wù)器只接受其中一種方法提供的數(shù)據(jù)。可以在 <form> 標簽的 method （方法）屬性中指明表單處理服務(wù)器要用方法來處理數(shù)據(jù)，使 POST 還是 GET。

POST 還是 GET？

如果表單處理服務(wù)器既支持 POST 方法又支持 GET 方法，那么你該選擇哪種方法呢？下面是有關(guān)這方面的一些規(guī)律：

如果希望獲得最佳表單傳輸性能，可以采用 GET 方法發(fā)送只有少數(shù)簡短字段的小表單。

一些服務(wù)器操作系統(tǒng)在處理可以立即傳遞給應(yīng)用程序的命令行參數(shù)時，會限制其數(shù)目和長度，在這種情況下，對那些有許多字段或是很長的文本域的表單來說，就應(yīng)該采用 POST 方法來發(fā)送。

如果你在編寫服務(wù)器端的表單處理應(yīng)用程序方面經(jīng)驗不足，應(yīng)該選擇 GET 方法。如果采用 POST 方法，就要在讀取和解碼方法做些額外的工作，也許這并不很難，但是也許你不太愿意去處理這些問題。

如果安全性是個問題，那么我們建議選用 POST 方法。GET 方法將表單參數(shù)直接放在應(yīng)用程序的 URL 中，這樣網(wǎng)絡(luò)窺探者可以很輕松地捕獲它們，還可以從服務(wù)器的日志文件中進行摘錄。如果參數(shù)中包含了信用卡帳號這樣的敏感信息，就會在不知不覺中危及用戶的安全。而 POST 應(yīng)用程序就沒有安全方面的漏洞，在將參數(shù)作為單獨的事務(wù)傳輸給服務(wù)器進行處理時，至少還可以采用加密的方法。

如果想在表單之外調(diào)用服務(wù)器端的應(yīng)用程序，而且包括向其傳遞參數(shù)的過程，就要采用 GET 方法，因為該方法允許把表單這樣的參數(shù)包括進來作為 URL 的一部分。而另一方面，使用 POST 樣式的應(yīng)用程序卻希望在 URL 后還能有一個來自瀏覽器額外的傳輸過程，其中傳輸?shù)膬?nèi)容不能作為傳統(tǒng) <a> 標簽的內(nèi)容。

以上內(nèi)容來自W3school

今天的內(nèi)容結(jié)束了，這一篇內(nèi)容實踐的東西比較少，主要是閱讀與了解。

至此，HTML表單部分的講解就算告于段落了，如果您有任何疑問請給我留言，如有問題或錯誤請予以斧正！

如果您喜歡我的教程請關(guān)注我，點贊也能讓我充滿動力！

HTML完整學習目錄

HTML序章（學習目的、對象、基本概念）——零基礎(chǔ)自學網(wǎng)頁制作

HTML是什么？——零基礎(chǔ)自學網(wǎng)頁制作

第一個HTML頁面如何寫？——零基礎(chǔ)自學網(wǎng)頁制作

HTML頁面中head標簽有啥用？——零基礎(chǔ)自學網(wǎng)頁制作

初識meta標簽與SEO——零基礎(chǔ)自學網(wǎng)頁制作

HTML中的元素使用方法1——零基礎(chǔ)自學網(wǎng)頁制作

HTML中的元素使用方法2——零基礎(chǔ)自學網(wǎng)頁制作

HTML元素中的屬性1——零基礎(chǔ)自學網(wǎng)頁制作

HTML元素中的屬性2（路徑詳解）——零基礎(chǔ)自學網(wǎng)頁制作

使用HTML添加表格1（基本元素）——零基礎(chǔ)自學網(wǎng)頁制作

使用HTML添加表格2（表格頭部與腳部）——零基礎(chǔ)自學網(wǎng)頁制作

使用HTML添加表格3（間距與顏色）——零基礎(chǔ)自學網(wǎng)頁制作

使用HTML添加表格4（行顏色與表格嵌套）——零基礎(chǔ)自學網(wǎng)頁制作

16進制顏色表示與RGB色彩模型——零基礎(chǔ)自學網(wǎng)頁制作

HTML中的塊級元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學網(wǎng)頁制作

初識HTML中的<div>塊元素——零基礎(chǔ)自學網(wǎng)頁制作

在HTML頁面中嵌入其他頁面的方法——零基礎(chǔ)自學網(wǎng)頁制作

封閉在家學網(wǎng)頁制作！為頁面嵌入PDF文件——零基礎(chǔ)自學網(wǎng)頁制作

HTML表單元素初識1——零基礎(chǔ)自學網(wǎng)頁制作

HTML表單元素初識2——零基礎(chǔ)自學網(wǎng)頁制作

HTML表單3（下拉列表、多行文字輸入）——零基礎(chǔ)自學網(wǎng)頁制作

HTML表單4（form的action、method屬性）——零基礎(chǔ)自學網(wǎng)頁制作

HTML列表制作講解——零基礎(chǔ)自學網(wǎng)頁制作

為HTML頁面添加視頻、音頻的方法——零基礎(chǔ)自學網(wǎng)頁制作

音視頻格式轉(zhuǎn)換神器與html視頻元素加字幕——零基礎(chǔ)自學網(wǎng)頁制作

HTML中使用<a>標簽實現(xiàn)文本內(nèi)鏈接——零基礎(chǔ)自學網(wǎng)頁制作