網(wǎng)站怎樣與用戶進(jìn)行交互？答案是使用HTML表單(form)。表單是可以把瀏覽者輸入的數(shù)據(jù)傳送到服務(wù)器端，這樣服務(wù)器端程序就可以處理表單傳過(guò)來(lái)的數(shù)據(jù)。

語(yǔ)法：

 form method= 傳送方式 action= 服務(wù)器文件 

講解：

1. form ： form 標(biāo)簽是成對(duì)出現(xiàn)的，以 form 開(kāi)始，以 /form 結(jié)束。

2.action ：瀏覽者輸入的數(shù)據(jù)被傳送到的地方,比如一個(gè)PHP頁(yè)面(save.php)。

3.method ： 數(shù)據(jù)傳送的方式（get/post）。post是加密傳輸；get為地址欄傳輸，也就是不加密傳輸。

 form method= post action= save.php  label for= username 用戶名: /label  input type= text name= username /  label for= pass 密碼: /label  input type= password name= pass /  /form 

注意:

1、所有表單控件（文本框、文本域、按鈕、單選框、復(fù)選框等）都必須放在 form /form 標(biāo)簽之間（否則用戶輸入的信息可提交不到服務(wù)器上哦！）。

2、method : post/get 的區(qū)別這一部分內(nèi)容屬于后端程序員考慮的問(wèn)題。

試一試：在編輯器中的第8行 form 標(biāo)簽中加入代碼：

method= post action= save.php 

你是不是輸入像如下代碼：

text：文本框 password：密碼框 raido：?jiǎn)芜x按鈕 checkbox：復(fù)選框 file：文件選擇框 submit：提交按鈕

當(dāng)你按了label中的文字，可以讓文字與控件聯(lián)系在一起用 for 屬性將label與另一個(gè)元素綁在一起， for 屬性值應(yīng)該和相關(guān)的元素 id 屬性值相同。

 1 !DOCTYPE HTML  2 html  3 head  4 meta http-equiv= Content-Type content= text/html; charset=utf-8  5 title 文本輸入框、密碼輸入框 /title  6 /head  7 body  8 form method= post action= save.php  9 賬戶: 11 br 12 密碼: 14 /form 15 /body 16 /html 

當(dāng)用戶要在表單中鍵入字母、數(shù)字等內(nèi)容時(shí)，就會(huì)用到文本輸入框。文本框也可以轉(zhuǎn)化為密碼輸入框。

語(yǔ)法：

 form  input type= text/password name= 名稱(chēng) value= 文本 /  /form 

1、type：

當(dāng)type= text 時(shí)，輸入框?yàn)槲谋据斎肟?

當(dāng)type= password 時(shí), 輸入框?yàn)槊艽a輸入框。

2、name：為文本框命名，以備后臺(tái)程序ASP 、PHP使用。

3、value：為文本輸入框設(shè)置默認(rèn)值。(一般起到提示作用)

舉例：

 form  input type= text name= myName  br/  input type= password name= pass  /form 

在瀏覽器中顯示的結(jié)果：

試一試：為表單插入姓名、密碼輸入框

1.在編輯器中第10行輸入代碼：

 input type= text name= myName / 

2.在編輯器中第13行輸入代碼：

 input type= password name= pass / 

屬性之間至少有一空格.

hidden 定義隱藏輸入字段
image 定義圖像作為提交按鈕
number 定義帶有 spinner 控件的數(shù)字字段
password 定義密碼字段。字段中的字符會(huì)被遮蔽
radio 定義單選按鈕
range 定義帶有 slider 控件的數(shù)字字段
reset 定義重置按鈕。重置按鈕會(huì)將所有表單字段重置為初始值
search 定義用于搜索的文本字段
submit 定義提交按鈕。提交按鈕向服務(wù)器發(fā)送數(shù)據(jù)
text 默認(rèn)。定義單行輸入字段，用戶可在其中輸入文本。默認(rèn)是 20 個(gè)字符
url 定義用于 URL 的文本字段

居然有人說(shuō)現(xiàn)在很少用value了，估計(jì)初學(xué)者都不知道placeholder是H5的新屬性，并且IE6到IE9是不支持原生的placeholder的。

如果僅僅使用placeholder而不解決兼容性問(wèn)題（要用placeholder得加入長(zhǎng)段兼容性代碼為代價(jià)），只能說(shuō)你是在隨便看看，而不是在工作。

(紅色字為評(píng)論區(qū)內(nèi)容，有的暫時(shí)看不懂)

 1 !DOCTYPE HTML  2 html  3 head  4 meta http-equiv= Content-Type content= text/html; charset=utf-8  5 title 文本域 /title  6 /head  7 body  8 form action= save.php method= post  9 label 個(gè)人簡(jiǎn)介： /label 10 textarea 在這里輸入內(nèi)容... /textarea 11 input type= submit value= 確定 name= submit / 12 input type= reset value= 重置 name= reset / 13 /form 14 /body 15 /html 

當(dāng)用戶需要在表單中輸入大段文字時(shí)，需要用到文本輸入域。

語(yǔ)法：

 textarea rows= 行數(shù) cols= 列數(shù) 文本 /textarea 

1、 textarea 標(biāo)簽是成對(duì)出現(xiàn)的，以 textarea 開(kāi)始，以 /textarea 結(jié)束。

2、cols ：多行輸入域的列數(shù)。

3、rows ：多行輸入域的行數(shù)。

4、在 textarea /textarea 標(biāo)簽之間可以輸入默認(rèn)值。

舉例：

 form method= post action= save.php  label 聯(lián)系我們 /label  textarea cols= 50 rows= 10 在這里輸入內(nèi)容... /textarea  /form 

在瀏覽器中顯示結(jié)果：

注意這兩個(gè)屬性可用css樣式的width和height來(lái)代替：col用width、row用height來(lái)代替。

來(lái)試一試：修改文本域的列數(shù)和行數(shù)

在編輯器中第10行 textarea 標(biāo)簽中補(bǔ)充代碼cols= 50 rows= 10 兩個(gè)屬性值，cols屬性控制文本域的列數(shù)，rows屬性控制文本域的行數(shù)。

標(biāo)簽的語(yǔ)義一定要根據(jù)單詞來(lái)記憶，這樣才會(huì)扎實(shí)透徹， pre preformattde：預(yù)定義格式(文本)的意思，這里的 textarea 是多行文本區(qū)域的意思，

根據(jù)意思就知道不同了，而且 textarea 中的默認(rèn)字樣，用戶可以自行更改的， pre 中的內(nèi)容，用戶只能看不能動(dòng)！

col與rows設(shè)定的值只會(huì)影響輸入框的大小，不會(huì)影響你輸入多少字

textarea 是文本域輸入
input 是輸入一行

 1 !DOCTYPE HTML  2 html  3 head  4 meta http-equiv= Content-Type content= text/html; charset=utf-8  5 title 單選框、復(fù)選框 /title  6 /head  7 body  8 form action= save.php method= post  9 label 性別: /label 10 label 男 /label 11 input type= radio value= 1 name= gender-man / 12 label 女 /label 13 input type= radio value= 2 name= gender-woman / 14 /form 15 /body 16 /html 

在使用表單設(shè)計(jì)調(diào)查表時(shí)，為了減少用戶的操作，使用選擇框是一個(gè)好主意，html中有兩種選擇框，即單選框和復(fù)選框，

兩者的區(qū)別是單選框中的選項(xiàng)用戶只能選擇一項(xiàng)，而復(fù)選框中用戶可以任意選擇多項(xiàng)，甚至全選。請(qǐng)看下面的例子:

語(yǔ)法：

 input type= radio/checkbox value= 值 name= 名稱(chēng) checked= checked / 

1、type:

當(dāng) type= radio 時(shí)，控件為單選框

當(dāng) type= checkbox 時(shí)，控件為復(fù)選框

2、value：提交數(shù)據(jù)到服務(wù)器的值（后臺(tái)程序PHP使用）

3、name：為控件命名，以備后臺(tái)程序 ASP、PHP 使用

4、checked：當(dāng)設(shè)置 checked= checked 時(shí)，該選項(xiàng)被默認(rèn)選中

如下面代碼：

在瀏覽器中顯示的結(jié)果：

注意:同一組的單選按鈕，name 取值一定要一致，比如上面例子為同一個(gè)名稱(chēng)“radioLove”，這樣同一組的單選按鈕才可以起到單選的作用。

來(lái)試一試：修改單選框代碼錯(cuò)誤（男、女可以同時(shí)選擇），使其具有單選作用。

1、在編輯器中第11行、13行代碼有錯(cuò)誤，請(qǐng)改正。

記住：

1、同一組單選框name命名要一致。

2、你是否輸入像下面的代碼：

 label 男 /label  input type= radio value= 1 name= gender /  label 女 /label  input type= radio value= 2 name= gender / 

 1 !DOCTYPE HTML  2 html  3 head  4 meta http-equiv= Content-Type content= text/html; charset=utf-8  5 title 下拉列表框 /title  6 /head  7 body  8 form action= save.php method= post  9 label 愛(ài)好: /label 10 select 11 option value= 看書(shū) 看書(shū) /option 12 option value= 旅游 旅游 /option 13 option value= 運(yùn)動(dòng) 運(yùn)動(dòng) /option 14 option value= 購(gòu)物 購(gòu)物 /option 15 /select 16 /form 17 /body 18 /html 

下拉列表在網(wǎng)頁(yè)中也常會(huì)用到，它可以有效的節(jié)省網(wǎng)頁(yè)空間。既可以單選、又可以多選。如下代碼：

講解：

1、value：

2、selected= selected ：

設(shè)置selected= selected 屬性，則該選項(xiàng)就被默認(rèn)選中。

在瀏覽器中顯示的結(jié)果：

來(lái)試一試：把“愛(ài)好”下拉列表的“旅游”選項(xiàng)設(shè)置為默認(rèn)選項(xiàng)

在編輯器中的第12行補(bǔ)充代碼 selected= selected 。

你是否輸入像下面的代碼：

【相關(guān)推薦】

1. 免費(fèi)html在線視頻教程

2. html開(kāi)發(fā)手冊(cè)

3. VeVb.com原創(chuàng)html5視頻教程

以上就是html基礎(chǔ)教程之與瀏覽者交互，表單標(biāo)簽的詳細(xì)內(nèi)容，html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。