HTML--表單相關標籤
阿新 • • 發佈：2021-01-11
表單相關標籤
1、表單標籤<form>
- 在日常瀏覽網頁時，很多網站都會有：會員註冊、登入功能
- 想要把瀏覽器客戶端中的賬號、密碼等資訊，傳送給伺服器，就需要使用到表單
- 如果資料需要提交到伺服器，負責收集資料的標籤必須存放在表單標籤體內。格式如下：
<html>
<head></head>
<body>
<!--表單--> - form的常用屬性：
| 常用屬性 | 作用 |
|---|---|
| action | 請求路徑，確定表單提交到伺服器的地址（路徑） 【必備的屬性】 |
| method | 提交資料的方式。有兩種方式：GET或POST |
2、輸入域標籤
- 在<form>表單中，負責採集使用者資料的標籤，最常用的是<input>
- <input> 標籤用於獲得使用者輸入資訊，隨著type屬性值不同，採集方式也不同
- 語法格式：<input type=”” name=”” value=””>
| 屬性 | 說明 |
|---|---|
| type | 指定表單控制元件的型別。例：type=”text”，表示文字框； type=”radio”，表示單選框 |
| name | 設定input標籤的名稱。 可以通過名稱獲得當前input標籤元素 |
| value | 資料值。 通過value可以拿到要採集的資料 |
- type屬性值：（指定是哪種表單控制元件）
| type屬性 | 說明 | 示例 |
|---|---|---|
| text | 普通文字 | <input type=”text” > |
| password | 密碼輸入框,裡邊的密碼以黑色的小圓點顯示 | <input type=”password” > |
| radio | 單選框 | <input type=”radio” value=”男”>男 <input type=”radio” value=”女”>女 |
| checkbox | 多選框 | <input type=”checkbox” value=”遊戲”>遊戲<input type=”checkbox” value=”音樂”>音樂 |
| file | 上傳檔案 | <input type=”file” > |
| hidden | 隱藏域。儲存資料使用,不會在瀏覽器頁面顯示 | <input type=”hidden” > |
| button | 普通按鈕，配合js使用 | <input type=”button” value=”確定”> |
| reset | 重置按鈕，把表單的恢復到預設狀態(清空表單) | <input type=”reset” value=”重置”> |
| submit | 提交按鈕，把表單的資料,提交到伺服器 | <input type=”submit” value=”提交”> |
案例1：模擬使用者登入
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登入</title>
</head>
<body>
<!-- action：指定資料提交的伺服器地址
method：指定提交方式
-->
<form action="http://www.hanjiaxiaozhi.cn" method="post">
<!-- 文字框 -->
賬號：<input type="text" name="userName" value="初始值"><br>
<!-- 密碼框 -->
密碼：<input type="password" name="userPwd"> <br>
<!-- 提交按鈕 -->
<input type="submit" name="login" value="登入">
</form>
</body>
</html>
擴充套件：from表單中的屬性
- readonly：是否只讀
- disabled：是否可用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登入</title>
</head>
<body>
<form action="" method="">
賬號：<input type="text" name="username" value="請輸入使用者名稱" readonly="readonly"/>
<br/>
密碼：<input type="password" name="password" value="請輸入密碼" disabled="disabled"/>
<br/>
<hr/>
<br/>
賬號：<input type="text" name="username" placeholder="請輸入使用者名稱"/><br/>
密碼：<input type="password" name="password" placeholder="請輸入密碼"/>
<br/>
</form>
</body>
</html>
案例2：模擬會員註冊
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>模擬會員註冊</title>
</head>
<body>
<form action="" method="">
賬號：<input type="text"/>
<br/>
密碼：<input type="password"/>
<br/>
性別：男<input type="radio" name="sex" checked="checked"/>
女<input type="radio" name="sex"/>
<br/>
愛好：籃球<input type="checkbox"/>
足球<input type="checkbox"/>
羽毛球<input type="checkbox"/>
乒乓球<input type="checkbox"/>
<br/>
<input type="file"/><br/>
<input type="hidden" value="我是隱藏的你看不到我"/><br/>
<input type="button" value="點我試試"/><br/>
<input type="reset"/><br/>
<input type="submit"/><br/>
</form>
</body>
</html>
3、文字域標籤
-
前面學習的<input type=”text”>是表單文字框控制元件，只能輸入一行文字內容。
-
大家如果有瀏覽論壇的經驗，那麼在回覆帖子時，是可以輸入多行文字內容
-
在HTML中使用<textarea>文字域，進行多行文字輸入
-
語法格式：<textarea rows=”行” cols=”列”></textarea>
- rows屬性：文字域的顯示行（高）
- cols屬性：文字域的顯示列（寬）
-
參考程式碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登入</title>
</head>
<body>
<form action="#" method="get">
<!--
textarea:是form子標籤
屬性:
rows: 設定文字域顯示行 (高）
cols: 設定文字域顯示列 (寬)
-->
個人簡介：<textarea rows="3" cols="5"></textarea>
<br/>
<input type="submit">
</form>
</body>
</html>
4、下拉列表標籤
- 在HTML中<select>標籤屬於下拉列表。當在表單中使用選項操作時，使用select標籤。
- 語法：
<select name="">
<option> --請選擇-- </option>
<option> Java </option>
<option> HTML </option>
</select>
- 參考程式碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登入</title>
</head>
<body>
<form action="#" method="get">
<!--
下拉框：
作用：提供一個可供下拉選擇的元件
組成：
select: name屬性
option： value屬性
特殊屬性：selected="selected"
-->
城市：<select name="city">
<option>---請選擇城市---</option>
<option selected value="sh">上海</option>
<option value="bj">北京</option>
<option value="gz">廣州</option>
<option value="sz">深圳</option>
<option value="hz">杭州</option>
</select>
</form>
</body>
</html>
- <option>是<select>標籤的子標籤，option的屬性有：
| 屬性 | 說明 |
|---|---|
| value | 傳送給伺服器的資料值 |
| selected | 預設當前option列表項，為選中狀態 |
- 在使用select下拉列表時，可以選擇多個option選項。需要使用標籤的屬性：
- multiple屬性：不寫預設單選，取值為“multiple”表示多選。
- size屬性：多選時，可見選項的數目。
- 參考程式碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登入</title>
</head>
<body>
<form action="#" method="get">
<!--
下拉框：
作用：提供一個可供下拉選擇的元件
組成：
select: name屬性
option： value屬性
特殊屬性：selected="selected"
-->
城市：
<select name="city">
<option>---請選擇城市---</option>
<option selected value="sh">上海</option>
<option value="bj">北京</option>
<option value="gz">廣州</option>
<option value="sz">深圳</option>
<option value="hz">杭州</option>
</select>
<br/><br/>
城市(多選)：
<select name="address" multiple="multiple" size="3">
<option>---請選擇城市---</option>
<option selected value="sh">上海</option>
<option value="bj">北京</option>
<option value="gz">廣州</option>
<option value="sz">深圳</option>
<option value="hz">杭州</option>
</select>
</form>
</body>
</html>
5、表單的提交方式
- 表單標籤form的屬性method設定表單的提交方式
GET 預設值
提交的資料追加在請求路徑上。資料格式k = v，追加是使用?連線；之後每一對資料使用&連線。如：http://www.baidu.com/register.html?name=hanjiaxiaozhi&pwd=123&e=xx- 因為不同的瀏覽器對請求路徑長度有限制，
所以GET請求提交的資料有限。 不安全。（敏感資料會在位址列顯示,不適合做密碼等資料提交）
POST
- 提交的資料不再請求路徑上追加（及
不顯示在位址列上） - 提交的資料
大小不限制 - 資料相對
安全