上節我們學習了a標籤,通過它可以把網際網路上的各個網頁連接起來,點擊超連結可以跳轉到一個新的網頁,也就是說,通過超連結我們可以在靜態網頁上進行簡單的交互。
這節我們學習html中另一個具有交互作用的元素--表單。
我們在登錄一個網站的時候,需要輸入帳號密碼,這個區域其實就是用表單元素實現的。我們作為用戶輸入帳號密碼驗證碼之後,這些輸入的數據就會提交到伺服器的資料庫,然後伺服器會把資料庫中保存的你的帳號密碼跟你這次輸入的帳號密碼進行比較,如果一樣,就登陸成功,如果不一樣就登錄失敗。
●html表單
表單是一個包含表單元素的區域。
表單標籤是<form></form>。form這個單詞本身就有表格的意思。
<form>標籤裡面是是允許用戶輸入內容的標籤,用的最多的是input標籤,input標籤上面有一個type屬性,這個屬性規定了input標籤的類型。input標籤的主要類型如下:文本域(textarea)、下拉列表、單選框(radio-buttons)、複選框(checkboxes)等等。
●html表單的格式
一個表單大概是下面這樣的格式:
<form>
...
input元素
...
</form>
在表單中,form標籤是父元素,input標籤寫在form標籤裡面,是子元素。
之前我們寫了一個叫my first html.html的網頁,我們接下來還是在之前的基礎上寫新的代碼,來演示下表單的效果。
代碼如下圖所示:
我把form表單的代碼貼出來:
<form action="" method="">
請輸入帳號:<input type="text" name="" id=""><br/>
請輸入密碼:<input type="password" name="" id=""><br/>
請選擇出生日期:<input type="date" name="" id=""><br/>
請選擇性別:<br/>
男<input type="radio" name="sex" id=""><br/>
女<input type="radio" name="sex" id=""><br/>
陰陽人<input type="radio" name="sex" id=""><br/>
你喜歡的樂器是:<br/>
薩克斯<input type="checkbox" name="" id="">
鋼琴<input type="checkbox" name="" id="">
大提琴<input type="checkbox" name="" id="">
吉他<input type="checkbox" name="" id="">
架子鼓<input type="checkbox" name="" id="">
笛子<input type="checkbox" name="" id="">
排簫<input type="checkbox" name="" id="">
古箏<input type="checkbox" name="" id="">
</form>
注意:
為了代碼好看點,我特意在排版時換了行,我們說html對代碼的格式要求不是很嚴格,你的html代碼在排版時縮進不縮進,換行不換行,都不會影響網頁的效果,也不會報錯。你的代碼在編輯器裡面排版的時候,按回車換行,只是在編輯器裡面你看到換行了,實際上網頁上並不會換行。別人用編程工具打開你的代碼,看到的也是你代碼原來排版的樣子,所以你在編輯器裡面不注意縮進和排版的話,代碼太亂,非常難看,不利於自己和別人閱讀。
如果你想換行,你必須要用具有換行屬性的html元素或者用<br/>標籤。
補充說明:
我們看到我這裡寫的form標籤有兩個屬性action和method。
action是規定提交表單時向何處發送表單數據。
method是規定用於發送表單數據的 HTTP 方法,有get和post兩種方法,現在先了解就行。
form標籤還有其他的屬性,不過用的比較多的是action和method,它們是跟後端進行交互的屬性,我們現在是學前端的東西,所以這兩個屬性目前我們知道就行了。後面跟後端聯繫起來的時候,我們再去用它們。
input標籤的type屬性就是input的類型,有很多種,上面我寫了5種,分別是text、password、date、radio、checkbox。
input標籤的不同的type值就代表不同類型的input表單。
text就是文本類型的輸入表單,在瀏覽器上的效果是一個空白的輸入框。
password就是用來輸入密碼的表單,在瀏覽器上的效果也是一個空白的輸入框,當我們在框裡面輸入密碼時,輸入的密碼字符會以星號或者圓點替代。
date是一個可以選擇日期的控制項。
在瀏覽器上點擊這個控制項是如下圖所示的效果:
radio是單選框,在瀏覽器上是一個圓形的按鈕,用滑鼠點擊它會選中它。既然是單選框,就好比是我們做單選題一樣,4個答案我們只能選一個,radio也是為了實現這樣的效果,為了實現這種效果,必須給每一個單選框的name屬性給相同的值,比如我這裡是為了選擇性別,所以我給3個單選框的name屬性的值都是sex,也就是說,同名的單選框會互斥,選中一個,其他的都不會被選中。
checkbox是複選框,在瀏覽器上的效果是正方形的按鈕,用滑鼠點擊它會選中它。複選框就好比是多選題,可以選中多個按鈕。
input元素的name 屬性用於對提交到伺服器後的表單數據進行標識,或者在客戶端通過 JavaScript 引用表單數據。只有設置了 name 屬性的表單元素才能在提交表單時傳遞它們的值。
我們保存vscode中的代碼,然後在瀏覽器打開my first html.html這個網頁,效果如下:
自己動手實踐一下,然後在瀏覽器中可以輸入帳號、密碼,點一點日期的input按鈕、單選框和複選框,體驗一下。