上一篇:Java 0基礎入門 (Html標簽的使用)
表單在網頁中主要負責數據采集功能。
一.表單實際應用場景
百度搜索
5173注冊
如上兩張圖,圖中的黑色線條是我畫上去的,如果按照黑線,在Excle中畫出這兩張表單,相信大家都可以也不是很難,那在Html中,我們同樣也是畫出這樣的表單,最后將黑線隱藏即可。
二.表單包含的控件
具體寫法:(插一句,Html代碼中,這樣的內容,是注釋內容,也就是代碼執行的時候并不執行,只是類似看文言文時,旁邊的注解一樣)
三.表單的基本結構
:指定提交后,由服務器上哪個處理程序處理,是一個路徑,絕對路徑,相對路徑都可以。
:指定向服務器提交的方法,一般為post或get方法, post方法比較安全,且能傳輸的數據量更大
四.表單的基本語法
表單輸入元素:input,當然也有其它的。
五.表單的執行原理(了解即可)
客戶端(比如:我們打開的網頁)請求登陸,填寫表單信息,點擊某按鈕提交→數據傳輸到服務器,服務器會執行后端代碼(后續會講到)html提交表單到服務器,驗證發來的信息,給出反饋(比如:通過;不通過)→客戶端接收服務器的反饋,在頁面上顯示出來。
舉個例子:
一個客戶去某店買東西,客戶(客戶端)說我是你們會員,提供了姓名,手機號(這就類似填寫表單的一個過程),然后店員(服務器)根據你提供的姓名和手機號,查到了你的會員信息,然后告訴你(反饋)已經查到,確實是本店會員。
通過舉例,希望大家能通俗的了解表單的執行原理。
六.表單的元素
1.文本框
type:指定input的類型,如果為text表示普通文本框
value:文本框中的初始值
:最大能夠輸入的字數
name:name屬性對于表單元素的作用,在于讓服務器能夠得到表單元素中輸入的值,例如.(“”),之后的文章中會講。
還有一個有用的屬性,同樣為初始值,區別于value,以灰色顯示,且在輸入內容時會自動被所輸入的內容覆蓋,清空輸入內容后,又會顯示出來,類似于一個提醒的作用。可自行嘗試下。
2.密碼框
type:指定input的類型,如果為表示密碼框
value:密碼框中的初始值
:最大能夠輸入的字數
name:name屬性對于表單元素的作用,在于讓服務器能夠得到表單元素中輸入的值,例如.(“”),之后的文章中會講。
3.按鈕
type的取值不同代表不同類型的按鈕,對于提交按鈕會提交表單,重置按鈕可以清空表單內容,但是其它類型的按鈕,具體實現什么功能,只能通過后面學習腳本以后才能進行處理,value屬性表示按鈕上顯示的文本,name屬性的主要作用體現在后期腳本的綁定上
4.按鈕
在 元素內部,您可以放置內容,比如文本或圖像。這是該元素與使用 input 元素創建的按鈕之間的不同之處。
控件 與 相比,提供了更為強大的功能和更豐富的內容。 與 標簽之間的所有內容都是按鈕的內容,其中包括任何可接受的正文內容,比如文本或多媒體內容。例如,我們可以在按鈕中包括一個圖像和相關的文本,用它們在按鈕中創建一個吸引人的標記圖像。
寫法:開
5.單選按鈕
input的type取值為radio時,表示單選按鈕
name屬性除了能夠讓服務器獲取選中的單選按鈕信息外,還能將單選按鈕進行分組
=””表示選中狀態,同一組單選按鈕,其中選中狀態的按鈕最多只有一個
value表示最后服務端真正能獲取到的值。并不是顯示在單選按鈕外邊的內容。
還可以在外邊嵌套標簽提升用戶體驗
6.復選框
input的type取值為時,表示復選框
name屬性除了能夠讓服務器獲取選中的復選框信息外,還能將復選框進行分組
=””表示選中狀態,同一組復選框,其中,選中狀態的可以任意多個
value表示最后服務端真正能獲取到的值。并不是顯示在復選框外邊的內容。
還可以在外邊嵌套標簽提升用戶體驗
7.文本域
用來輸入多行文本
寫法:
name:用于在服務端獲取數據時使用
cols:列數
rows:行數
值得注意的是:中的內容應該寫在標簽之間,而不是value屬性中!!!如上述寫法中,“12345”即為多行文本框的內容。
8.文件域
當input的type為file時,表示文件上傳按鈕,一般會和提交按鈕一起使用,此處不做太多說明,文件具體上傳時需要學習服務端編程后方可掌握。
9.列表框
:name屬性,列表名稱,用于服務器獲取選中項
是列表下面的每一個小項,value屬性是服務器能獲取到的具體的值,標簽之間是呈現給用戶的選項信息,=""表示該項選中。
10.隱藏域
方便“記住”一些供服務端使用的信息、但又不希望客戶看到的數據
主要就是type屬性為html提交表單到服務器,其他屬性與input框的屬性填寫相同。
七.表單中的一些屬性
只讀和禁用屬性
:希望某個框內的內容只允許用戶看,不能修改
:因沒達到使用的條件,限制用戶使用
上面的屬性也可用于其它表單元素,達到只讀或禁用的效果。
form 表單中屬性的元素不參與表單提交,也就是表單后,后臺無法獲取有屬性元素的值。
八.HTML5 新的 input 類型及支持的瀏覽器
HTML5 新的 input 類型及支持的瀏覽器
九.音頻標簽
寫法:
暫不支持此標簽
src:要播放的音頻的 URL。
:如果出現該屬性,則音頻在就緒后馬上播放。
loop:如果出現該屬性,則每當音頻結束時重新開始播放。
:若出現該屬性,則向用戶顯示控件,比如播放按鈕。
暫不支持此標簽,是在你使用的瀏覽器,不支持的情況下顯示。
具體瀏覽器的兼容性,見下圖
audio標簽各瀏覽器兼容情況
十.視頻標簽
寫法:
您的瀏覽器不支持video標簽
src:要播放的視頻的 URL。
="" 若出現該屬性,則向用戶顯示控件,比如播放按鈕。
loop="loop" 循環播放
="" 自動播放
width、:指定視頻窗口的大小
相比音頻標簽,可以添加width和指定視頻窗口大小