整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
例
帶有兩個(gè)輸入字段和一個(gè)提交按鈕的 HTML 表單：
<form action="demo_form.php" method="get">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="提交">
</form>
（更多實(shí)例見頁(yè)面底部）
瀏覽器支持
所有主流瀏覽器都支持 <form> 標(biāo)簽。
標(biāo)簽定義及使用說明
<form> 標(biāo)簽用于創(chuàng)建供用戶輸入的 HTML 表單。
<form> 元素包含一個(gè)或多個(gè)如下的表單元素：
<input>
<textarea>
<button>
<select>
<option>
<optgroup>
<fieldset>
<label>
HTML 4.01 與 HTML5之間的差異
HTML5 新增了兩個(gè)新的屬性：autocomplete 和 novalidate，同時(shí)不再支持 HTML 4.01 中的某些屬性。
HTML 與 XHTML 之間的差異
在 XHTML 中，name 屬性已被廢棄。使用全局 id 屬性代替。
屬性
New ：HTML5 中的新屬性。
| 屬性 | 值 | 描述 |
|---|---|---|
| accept | MIME_type | HTML5 不支持。規(guī)定服務(wù)器接收到的文件的類型。（文件是通過文件上傳提交的） |
| accept-charset | character_set | 規(guī)定服務(wù)器可處理的表單數(shù)據(jù)字符集。 |
| action | URL | 規(guī)定當(dāng)提交表單時(shí)向何處發(fā)送表單數(shù)據(jù)。 |
| autocompleteNew | onoff | 規(guī)定是否啟用表單的自動(dòng)完成功能。 |
| enctype | application/x-www-form-urlencodedmultipart/form-datatext/plain | 規(guī)定在向服務(wù)器發(fā)送表單數(shù)據(jù)之前如何對(duì)其進(jìn)行編碼。（適用于 method="post" 的情況） |
| method | getpost | 規(guī)定用于發(fā)送表單數(shù)據(jù)的 HTTP 方法。 |
| name | text | 規(guī)定表單的名稱。 |
| novalidateNew | novalidate | 如果使用該屬性，則提交表單時(shí)不進(jìn)行驗(yàn)證。 |
| target | _blank_self_parent_top | 規(guī)定在何處打開 action URL。 |
全局屬性
<form> 標(biāo)簽支持 HTML 的全局屬性。
事件屬性
<form> 標(biāo)簽支持 HTML 的事件屬性。
實(shí)例
帶有復(fù)選框的表單
此表單包含兩個(gè)復(fù)選框和一個(gè)提交按鈕。
帶有單選按鈕的表單
此表單包含兩個(gè)單選框和一個(gè)提交按鈕。
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
TML:完成頁(yè)面的內(nèi)容展示
CSS：完成頁(yè)面樣式的控制，美化頁(yè)面，完成頁(yè)面的布局。
表單：用于采集用戶輸入的數(shù)據(jù)。用于和服務(wù)器進(jìn)行交互。
form:用于定義表單的。可以定義一個(gè)范圍(代表用戶采集數(shù)據(jù)的范圍)
屬性：action:指定提交數(shù)據(jù)的url(指的就是把數(shù)據(jù)提交到哪里)
method:指定提交方式
分類：一共有7種，2種比較常用。
get:1.請(qǐng)求參數(shù)會(huì)在地址欄顯示
2.請(qǐng)求參數(shù)的長(zhǎng)度是有限制的。
3.請(qǐng)求不安全
post:1.請(qǐng)求參數(shù)不會(huì)在地址欄顯示，會(huì)封裝在請(qǐng)求體中。
2.請(qǐng)求參數(shù)的長(zhǎng)度沒有限制
3.較為安全
表單里面的數(shù)據(jù)要想被提交，必須指定它的name屬性
表單項(xiàng)標(biāo)簽
input:可以通過type屬性值，改變?cè)卣故镜臉邮健?/p>
type屬性：text:文本輸入框，默認(rèn)值
placeholder:指定輸入框的提示信息，當(dāng)輸入框的內(nèi)容發(fā)生變化，會(huì)自動(dòng)情況提示信息。
password:密碼輸入框
radio：1.單選框(要想讓多個(gè)單選框?qū)崿F(xiàn)單選的效果，則多個(gè)單選框的name屬性值必須一樣)
2.一般會(huì)給每一個(gè)單選框提供value屬性，指定其被選中后提交的值。
3.checked屬性可以指定默認(rèn)值
checkbox:復(fù)選框:
1.一般會(huì)給每一個(gè)單選框提供value屬性，指定其被選中后提交的值。
2.checked屬性可以指定默認(rèn)值
file:文件選擇框
hidden:隱藏域，用于提交一些信息
按鈕:
submit:提交按鈕。可以提交表單
button:普通按鈕
image:圖片提交按鈕
src屬性指定圖片的路徑
label:指定輸入項(xiàng)的文字描述信息
注意：lable的for屬性一般會(huì)和input的id屬性值對(duì)應(yīng)。如果對(duì)應(yīng)了，點(diǎn)擊lable區(qū)域，會(huì)讓input輸入框獲取焦點(diǎn)。
select:下拉列表
子元素：option,指定列表項(xiàng)
textarea:文本域
一、傳統(tǒng)表單(一)
1、表單是什么？
01.在網(wǎng)頁(yè)中主要負(fù)責(zé)數(shù)據(jù)采集功能的組件。
02.通常與數(shù)據(jù)庫(kù)相連。
03.由表單元素組成。
2、表單組件介紹：
01.文本(字段)
02.選擇
03.單選按鈕（組）
04.文本域
05.復(fù)選框
06.密碼（字段）
07.文件域
08.提交按鈕
09.重置按鈕
3、form 標(biāo)簽 （表單范圍）
...
action 屬性——指的是要用哪一些對(duì)應(yīng)的腳本來處理這些數(shù)據(jù)。
method 屬性——指的是數(shù)據(jù)交互的形式，其中有兩個(gè)屬性值 post 和 get 。
id 屬性—— 指的是它唯一的標(biāo)識(shí)
4、input 標(biāo)簽的 type 屬性
Password:
01.type 屬性值
type= "radio" --- 單選按鈕
type= "checkbox" --- 復(fù)選框
type= "text" --- 文本
type= "password" --- 密碼字段
type= "file" --- 文件域
type= "button" --- 普通按鈕
type= "submit" --- 提交按鈕
type= "reset" --- 重置按鈕
02. name 屬性
表單元素的名稱
注：同一組單選按鈕的的 name 值是相同的。
03. id 屬性
唯一標(biāo)識(shí)符
同一個(gè)網(wǎng)頁(yè)里id不能重復(fù)
04.label 標(biāo)簽(標(biāo)簽文字) --- 將文字與表單元素關(guān)聯(lián)
標(biāo)簽文字
注：label for 屬性的值是取于input id 屬性的值來進(jìn)行關(guān)聯(lián)的。
小結(jié)：
01.form 標(biāo)簽是表單本身。
02.input 標(biāo)簽是表單元素最常見的情況，它的 type 屬性是非常多樣化的，不同的 type 屬性值決定了 表單元素的類型。
03.label 標(biāo)簽是用來關(guān)聯(lián)文字的，它的 for 屬性的值跟 input id 屬性的值是對(duì)應(yīng)一致的。
二、傳統(tǒng)表單(二)
1、select 標(biāo)簽（選擇菜單）和 option 標(biāo)簽（選項(xiàng)）
選項(xiàng)1 選項(xiàng)2
01.value 屬性 --- 值，可能傳遞至數(shù)據(jù)庫(kù)。
02.selected 屬性 --- 默認(rèn)選項(xiàng)
2、textarea 標(biāo)簽 --- 大段、多行的文本區(qū)域
介紹
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
