上一篇：Java 0基礎(chǔ)入門 (Html標簽的使用)

表單在網(wǎng)頁中主要負責數(shù)據(jù)采集功能。

一.表單實際應(yīng)用場景

百度搜索

5173注冊

如上兩張圖，圖中的黑色線條是我畫上去的，如果按照黑線，在Excle中畫出這兩張表單，相信大家都可以也不是很難，那在Html中，我們同樣也是畫出這樣的表單，最后將黑線隱藏即可。

二.表單包含的控件

具體寫法：(插一句，Html代碼中,這樣的內(nèi)容，是注釋內(nèi)容，也就是代碼執(zhí)行的時候并不執(zhí)行，只是類似看文言文時，旁邊的注解一樣)

單行文本框：

單行文本框：

密碼框：

男女

跑步 打球

dsadasdas

隱藏域：

====請選擇====江蘇浙江上海

====請選擇====江蘇浙江上海山東安徽福建

提交按鈕 重置按鈕 普通按鈕

標題按鈕

三.表單的基本結(jié)構(gòu)

……

action：指定提交后，由服務(wù)器上哪個處理程序處理，是一個路徑，絕對路徑，相對路徑都可以。

method：指定向服務(wù)器提交的方法，一般為post或get方法, post方法比較安全，且能傳輸?shù)臄?shù)據(jù)量更大

四.表單的基本語法

用戶名：

密 碼：

表單輸入元素：input，當然也有其它的。

五.表單的執(zhí)行原理(了解即可)

客戶端(比如：我們打開的網(wǎng)頁)請求登陸，填寫表單信息，點擊某按鈕提交→數(shù)據(jù)傳輸?shù)椒?wù)器，服務(wù)器會執(zhí)行后端代碼(后續(xù)會講到)，驗證發(fā)來的信息，給出反饋(比如：通過；不通過)→客戶端接收服務(wù)器的反饋，在頁面上顯示出來。

舉個例子：

一個客戶去某店買東西，客戶(客戶端)說我是你們會員，提供了姓名，手機號(這就類似填寫表單的一個過程)，然后店員(服務(wù)器)根據(jù)你提供的姓名和手機號，查到了你的會員信息，然后告訴你(反饋)已經(jīng)查到，確實是本店會員。

通過舉例，希望大家能通俗的了解表單的執(zhí)行原理。

六.表單的元素

1.文本框

type：指定input的類型，如果為text表示普通文本框

value：文本框中的初始值

maxlength：最大能夠輸入的字數(shù)

name：name屬性對于表單元素的作用，在于讓服務(wù)器能夠得到表單元素中輸入的值，例如request.getParameter(“userName”)，之后的文章中會講。

還有一個有用的placeholder屬性，同樣為初始值，區(qū)別于value，以灰色顯示，且在輸入內(nèi)容時會自動被所輸入的內(nèi)容覆蓋，清空輸入內(nèi)容后，又會顯示出來，類似于一個提醒的作用。可自行嘗試下。

2.密碼框

type：指定input的類型，如果為password表示密碼框

value：密碼框中的初始值

maxlength：最大能夠輸入的字數(shù)

name：name屬性對于表單元素的作用，在于讓服務(wù)器能夠得到表單元素中輸入的值，例如request.getParameter(“userPwd”)，之后的文章中會講。

3.按鈕

type的取值不同代表不同類型的按鈕，對于提交按鈕會提交表單，重置按鈕可以清空表單內(nèi)容，但是其它類型的按鈕，具體實現(xiàn)什么功能，只能通過后面學習腳本以后才能進行處理，value屬性表示按鈕上顯示的文本，name屬性的主要作用體現(xiàn)在后期腳本的綁定上

4.button按鈕

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

控件 與 相比，提供了更為強大的功能和更豐富的內(nèi)容。 與 標簽之間的所有內(nèi)容都是按鈕的內(nèi)容，其中包括任何可接受的正文內(nèi)容，比如文本或多媒體內(nèi)容。例如，我們可以在按鈕中包括一個圖像和相關(guān)的文本，用它們在按鈕中創(chuàng)建一個吸引人的標記圖像。

寫法：開

5.單選按鈕

input的type取值為radio時，表示單選按鈕

name屬性除了能夠讓服務(wù)器獲取選中的單選按鈕信息外，還能將單選按鈕進行分組

checked=”checked”表示選中狀態(tài)，同一組單選按鈕，其中選中狀態(tài)的按鈕最多只有一個

value表示最后服務(wù)端真正能獲取到的值。并不是顯示在單選按鈕外邊的內(nèi)容。

還可以在外邊嵌套標簽提升用戶體驗

6.復選框

input的type取值為checkbox時，表示復選框

name屬性除了能夠讓服務(wù)器獲取選中的復選框信息外，還能將復選框進行分組

checked=”checked”表示選中狀態(tài)，同一組復選框，其中，選中狀態(tài)的可以任意多個

value表示最后服務(wù)端真正能獲取到的值。并不是顯示在復選框外邊的內(nèi)容。

還可以在外邊嵌套標簽提升用戶體驗

7.文本域

用來輸入多行文本

寫法：12345

name:用于在服務(wù)端獲取數(shù)據(jù)時使用

cols：列數(shù)

rows：行數(shù)

值得注意的是：textarea中的內(nèi)容應(yīng)該寫在標簽之間，而不是value屬性中！！！如上述寫法中，“12345”即為多行文本框的內(nèi)容。

8.文件域

當input的type為file時，表示文件上傳按鈕，一般會和提交按鈕一起使用，此處不做太多說明，文件具體上傳時需要學習服務(wù)端編程后方可掌握。

9.列表框

[選擇月份]

一月

二月

三月

四月

select：name屬性，列表名稱，用于服務(wù)器獲取選中項

option是列表下面的每一個小項，value屬性是服務(wù)器能獲取到的具體的值，標簽之間是呈現(xiàn)給用戶的選項信息，selected="selected"表示該項選中。

10.隱藏域

方便“記住”一些供服務(wù)端使用的信息、但又不希望客戶看到的數(shù)據(jù)

主要就是type屬性為hidden，其他屬性與input框的屬性填寫相同。

七.表單中的一些屬性

只讀和禁用屬性

readonly：希望某個框內(nèi)的內(nèi)容只允許用戶看，不能修改

disabled：因沒達到使用的條件，限制用戶使用

上面的屬性也可用于其它表單元素，達到只讀或禁用的效果。

form 表單中disabled屬性的元素不參與表單提交，也就是表單submit后，后臺無法獲取有disabled屬性元素的值。

八.HTML5 新的 input 類型及支持的瀏覽器

HTML5 新的 input 類型及支持的瀏覽器

九.音頻標簽

寫法：

暫不支持此標簽

src：要播放的音頻的 URL。

autoplay：如果出現(xiàn)該屬性，則音頻在就緒后馬上播放。

loop：如果出現(xiàn)該屬性，則每當音頻結(jié)束時重新開始播放。

controls：若出現(xiàn)該屬性，則向用戶顯示控件，比如播放按鈕。

暫不支持此標簽，是在你使用的瀏覽器，不支持的情況下顯示。

具體瀏覽器的兼容性，見下圖

audio標簽各瀏覽器兼容情況

十.視頻標簽

寫法：

您的瀏覽器不支持video標簽

src：要播放的視頻的 URL。

controls="controls" 若出現(xiàn)該屬性，則向用戶顯示控件，比如播放按鈕。

loop="loop" 循環(huán)播放

autoplay="autoplay" 自動播放

width、height:指定視頻窗口的大小

相比音頻標簽，可以添加width和height指定視頻窗口大小

總結(jié)

以上是生活随笔為你收集整理的form表单中根据值判断是否disabled_Java 0基础入门 （Html表单、表单元素）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。