# 表單與控件元素
[toc]
- 表單分為表單元素與控件元素二部分
- 表單元素僅一個: `<form>`
- 表單控件元素,根據類型不同,有多個
## 1. 表單元素`<form>`
### 1.1 常用屬性
| 序號 | 屬性 | 描述 |
| ---- | --------- | --------------------------------------- |
| 1 | `action` | 表單提交的 URL 地址(處理表單請求的腳本) |
| 2 | `method` | 表單提交類型:`GET/POST` |
| 3 | `enctype` | 設置表單提交數據的編碼方式 |
| 4 | `name` | 表單唯一名稱,與 ID 同義 |
| 5 | `target` | 打開請求 URL 的方式,如果`_blank` |
### 1.2 請求類型`method`
- web 請求方式有二種: 超鏈接與表單提交
- 超鏈接就是使用`<a>`標簽發起請求,其實就是`GET`請求
- 表單提交默認就是`GET`請求,但例用最多的是`POST`
- 請求類型屬性`action`的取值
| 序號 | 允許值 | 描述 |
| ---- | ------ | ----------------------------------------------------------- |
| 1 | `GET` | 默認值,表單數據以請求參數形式通過 URL 提交, 數據量最大 `2K` |
| 2 | `POST` | 表單數據放在請求體中發送,數據量更大也更安全 |
### 1.3 編碼方式`enctype`
| 序號 | 允許值 | 適用場景 | 描述 |
| ---- | ----------------------------------- | ------------- | -------------------------------------------------------- |
| 1 | `application/x-www-form-urlencoded` | 接收`value`值 | 默認值,使用 URL 編碼,GET/POST 均適合 |
| 2 | `multipart/form-data` | 文件上傳 | 采用二進制流處理,會把文件域中的內容封裝到請求參數中,適合 |
| 3 | `text/plain` | 電子郵件 | 如`action="mailto:URL` |
### 1.4 表單名稱`name`
| 序號 | 功能 | 描述 |
| ---- | ------------ | --------------------------------------------- |
| 1 | 標識表單元素 | 與`id`一樣,用來唯一標識該表單元素 |
| 2 | 綁定表單元素 | 用于表單控件元素的 form 屬性,用來綁定所屬表單 |
| 3 | 訪問表單元素 | 快捷訪問內部控件元素,如`form.input.value` |
### 1.5 打開方式`target`
| 序號 | 允許值 | 描述 |
| ---- | --------- | ----------------------------- |
| 1 | `_self` | 默認值,當前窗口打開提交的 URL |
| 2 | `_blank` | 新窗口打開提交的 URL |
| 3 | `_parent` | 父窗口打開提交的 URL |
| 4 | `_top` | 頂層窗口打開提交的 URL |
---
## 2. 表單控件元素`<input>`
### 2.1 常用屬性
| 序號 | 屬性 | 描述 |
| ---- | -------------- | -------------------------------------------------------- |
| 1 | `type` | 控件類型,如文本框, 復選框... |
| 2 | `name` | 請求參數的名稱,對應于腳本處理的變量名 |
| 3 | `value` | 請求參數的值,對應于腳本處理的變量值,使用預定義值控件無效 |
| 4 | `form` | 控件所屬表單 |
| 5 | `placeholder` | 僅限輸入框`text`和`password`,輸入框的提示信息 |
| 6 | `list` | 僅限輸入框`text`和`password`,下拉框智能提示 |
| 7 | `autocomplate` | 僅限輸入框`text`和`password`,自動完成(歷史記錄) |
| 8 | `maxlength` | 僅限輸入框`text/password`, 允許輸入最大字符數量 |
| 9 | `checked` | 僅限單選框`radio`, 復選框`checkbox`(布爾屬性) |
| 10 | `readonly` | 元素只讀,但通過 JavaScript 可修改(布爾屬性) |
| 11 | `disabled` | 元素禁用,(布爾屬性) |
| 12 | `autofocus` | 自動獲取焦點,一個表單僅限一個控件 |
| 13 | `src` | 僅限圖像域`images`, 圖像 URL 地址 |
| 14 | `width` | 僅限圖像域`images`, 圖像寬度 |
| 15 | `height` | 僅限圖像域`images`, 圖像高度 |
### 2.2 `type`類型
- **常用類型**
| 序號 | 類型 | 描述 |
| ---- | ------------------------- | ------------------- |
| 1 | `<input type="text">` | 單行文本框 (默認值) |
| 2 | `<input type="password">` | 密碼輸入框 |
| 3 | `<input type="radio">` | 單選框 |
| 4 | `<input type="checkbox">` | 復選框 |
| 5 | `<input type="image">` | 圖像域/提交表單 |
| 6 | `<input type="file">` | 文件上傳域 |
| 7 | `<input type="hidden">` | 隱藏域 |
- **html5 新增類型**
| 序號 | 類型 | 描述 |
| ---- | ------------------------------- | ------------ |
| 1 | `<input type="email">` | 電子郵件 |
| 2 | `<input type="data">` | 日期 |
| 2 | `<input type="data">` | 日期 |
| 4 | `<input type="datetime-local">` | 本地日期時間 |
| 5 | `<input type="tel">` | 電話號碼 |
| 6 | `<input type="url">` | URL 地址 |
| 7 | `<input type="number">` | 數值 |
| 8 | `<input type="range">` | 范圍拖動條 |
| 9 | `<input type="search">` | 搜索框/移動 |
| 10 | `<input type="color">` | 拾色器 |
### 2.3 常用事件屬性
| 序號 | 事件屬性 | 描述 |
| ---- | ----------- | ------------------------------ |
| 1 | `onfocus` | 獲取焦點時觸發 |
| 2 | `onblur` | 失去焦點時觸發 |
| 3 | `onchange` | 失去焦點,且值發生變化時觸發 |
| 4 | `oninput` | 值發生變化(不等失去焦點)時觸發 |
| 5 | `onkeydown` | 按下鍵盤時觸發 |
| 6 | `onkeyup` | 抬起鍵盤時觸發 |
| 7 | `onclick` | 鼠標單擊時觸發 |
| 8 | `onselect` | 選擇內容文本時觸發 |
### 2.4 示例

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>表單之input</title>
<style>
form {
padding: 20px;
width: 350px;
box-shadow: 0 0 8px #888;
border-radius: 10px;
box-sizing: border-box;
margin: auto;
background-color: lightskyblue;
display: grid;
gap: 15px;
}
form > section {
display: grid;
grid-template-columns: 60px 1fr;
}
h3 {
text-align: center;
}
input[type="image"] {
justify-self: center;
}
</style>
</head>
<body>
<h3>用戶注冊</h3>
<form
action="handle.php"
method="post"
enctype="application/x-www-form-urlencoded"
id="register"
>
<!-- 單行文本輸入框 -->
<section>
<label for="username">用戶名:</label>
<!-- 必選且自動獲取焦點 -->
<input
type="text"
name="username"
id="username"
maxlength="20"
placeholder="不少于6位"
required
autofocus
/>
</section>
<!-- 密碼輸入框 -->
<section>
<label for="password">密碼:</label>
<input
type="password"
name="password"
id="password"
size="10"
placeholder="不少于8位"
required
/>
</section>
<!-- 單選框 -->
<section>
<label for="secret">性別:</label>
<div>
<!-- 只允許返回一個值,多個input的name屬性值必須相同 -->
<input type="radio" name="gender" id="male" value="male" /><label
for="male"
>男</label
>
<input type="radio" name="gender" id="female" value="female" /><label
for="male"
>女</label
>
<!-- checked: 默認選項 -->
<input
type="radio"
name="gender"
id="secret"
value="female"
checked
/><label for="secret">保密</label>
</div>
</section>
<!-- 復選框 -->
<section>
<label for="programme">興趣:</label>
<div>
<!-- 允許返回多個值,屬性名采用數組格式,便于后端處理 -->
<input type="checkbox" name="hobby[]" id="game" checked /><label
for="game"
>游戲</label
>
<input type="checkbox" name="hobby[]" id="travel" checked /><label
for="travel"
>旅游</label
>
<input
type="checkbox"
name="hobby[]"
value="shoot"
id="shoot"
/><label for="shoot">攝影</label>
<input
type="checkbox"
name="hobby[]"
value="programme"
id="programme"
checked
/><label for="programme">編程</label>
</div>
</section>
<!-- 文件域 -->
<section>
<label for="userpic">頭像:</label>
<!-- 設置<form enctype="multipart/form-data">,且為POST提交 才有效-->
<input type="file" name="user_pic" id="userpic" />
<!-- 隱藏域: 限制上傳文件大小不超過8M -->
<input type="hidden" name="MAX_FILE_SIZE" value="8388608" />
</section>
<!-- 預定義復合框 -->
<section>
<label for="course">課程:</label>
<input type="text" name="course" list="course" />
<datalist id="course">
<!-- 此<option>使用單標簽,與<select>中不同 -->
<option value="HTML/CSS開發與實戰"> </option>
<option value="JavaScript基礎與實戰"> </option>
<option value="PHP開發基礎"> </option>
<option value="Laravel基礎與實戰"> </option>
</datalist>
</section>
<!-- 圖像域: 提交按鈕為圖像 -->
<!-- 返回點擊圖片的x/坐標,推薦加上name屬性,返回有語義坐標 -->
<!-- 測試提交,啟動一個本地Web服務器: php -S localhost:8888 -->
<input
type="image"
src="btn.png"
alt="submit"
name="submit"
width="100"
/>
</form>
<hr />
<!-- 表單控件元素不一定必須寫到<form>標簽內 -->
<!-- 表單控件使用form屬性,將它與所屬表單綁定 -->
<section>
<label for="email">郵箱:</label>
<input type="email" name="email" id="email" form="register" />
</section>
<section>
<label for="age">年齡:</label>
<input
type="number"
name="age"
id="age"
form="register"
min="18"
max="60"
step="2"
value="22"
/>
</section>
</body>
</html>
```
---
## 3. 控件標簽元素`<label>`
- `<label>`元素沒有`name`和`value`屬性,不會創建請求參數
- 它存在的意義就是關聯控件,當點擊它時將焦點自動落在關聯控件內部
- 語法: `<label for="關聯控件的id屬性值">`(也支持三大通用屬性)
- `<label>`有二種方式與控件元素進行關聯/綁定
| 序號 | 關聯方式 | 示例代碼 |
| ---- | -------- | ------------------------------------------------------------------ |
| 1 | 顯式關聯 | `<label for="email">Email:</label><input type="email" id="email">` |
| 1 | 隱式關聯 | `<label>Email:</label><input type="email"></label>` |
> 推薦使用**顯式關聯**, 案例參考`<input>`示例
---
## 4. 按鈕控件元素`<button>`
### 4.1 與`<input>`對比
| 序號 | `<button>` | 替代的`<input>` |
| ---- | -------------------------------------- | -------------------------------------- |
| 1 | `<button type="...">按鈕文本</button>` | `<input type="..." value="按鈕文本">` |
| 2 | `<button><img src="..."></button>` | `<input type="image" src="...">`圖像域 |
### 4.2 常用屬性
| 序號 | 屬性 | 描述 |
| ---- | ------------ | -------------------------------------------------- |
| 1 | `type` | 必須使用預定義的`submit`, `button`, `reset`之一 |
| 2 | `name` | 按鈕的唯一名稱,與 ID 等效 |
| 3 | `value` | 按鈕文本初始值,可通過 JavaScript 修改 |
| 4 | `disabled` | 禁用按鈕 |
| 5 | `form` | 按鈕所屬表單(此時按鈕`type`默認類型為`submit`提交) |
| 6 | `formaction` | 設置不同按鈕可將表單數據提交到不同的 URL 處理 |
| 7 | `form***` | 動態設置`<form>`屬性值,如`formmethod="GET"` |
### 4.3 示例

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>按鈕元素</title>
<style>
form {
padding: 20px;
width: 350px;
box-shadow: 0 0 8px #888;
border-radius: 10px;
box-sizing: border-box;
margin: auto;
background-color: lightskyblue;
display: grid;
gap: 15px;
}
form > section {
display: grid;
grid-template-columns: 60px 1fr;
}
h3 {
text-align: center;
}
section:last-of-type {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 10px;
}
button {
height: 30px;
border: none;
outline: none;
}
button:hover {
background-color: lightseagreen;
color: white;
cursor: pointer;
}
</style>
</head>
<body>
<h3>登錄/注冊</h3>
<form action="register.php" method="post">
<section>
<label for="email">郵箱:</label>
<input type="email" name="email" id="email" required autofocus />
</section>
<section>
<label for="password">密碼:</label>
<input type="password" name="password" id="password" required />
</section>
<section>
<!-- 注冊與登錄,使用不同的腳本進行處理,并動態設置提交類型,打開方式 -->
<button
type="submit"
formaction="login.php"
formmethod="POST"
formtarget="_blank"
>
登錄
</button>
<button
type="submit"
formaction="register.php"
formmethod="GET"
formtarget="_blank"
>
注冊
</button>
</section>
</form>
</body>
</html>
```
- `register.php`和`login.php`源碼
```php
<?php
// 查看表單提交的請求參數
print_r($_REQUEST);
```
---
## 5. 下拉列表元素`<select>`
- 下拉列表使用`<select>` + `<optgroup>` + `<option>`組合元素實現
- 參數名`name`定義在`<select>`中,參數值`value`,定義在`<option>`中
### 5.1 `<select>`屬性
| 序號 | 屬性 | 描述 |
| ---- | ---------- | ---------------------- |
| 1 | `name` | 請求參數名稱/變量名 |
| 2 | `multiple` | 是否允許多選(布爾屬性) |
| 3 | `size` | 允許同時顯示的列表項 |
| 3 | `disabled` | 是否禁用(布爾屬性) |
### 5.2 `<optgroup>`屬性
| 屬性 | 描述 |
| ------- | ------------ |
| `label` | 列表分組名稱 |
### 5.3 `<option>`屬性
| 序號 | 屬性 | 描述 |
| ---- | ---------- | ------------------ |
| 1 | `value` | 請求參數的值 |
| 2 | `label` | 默認選項文本值 |
| 3 | `selected` | 是否選中(布爾屬性) |
| 3 | `disabled` | 是否禁用(布爾屬性) |
### 5.4 `<select>`事件屬性
| 序號 | 事件屬性 | 描述 |
| ---- | ---------- | ---------------------------------- |
| 1 | `onchange` | 當下拉列表選項值發生變化時才會觸發 |
| 2 | `onclick` | 只要點擊就會觸發(選項值可以不改變) |
### 5.5 示例

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>下拉列表</title>
</head>
<body>
<form action="">
<!-- 當前默認選項值是"CSS3", 點擊CSS3不會觸發change事件,除此之外都會觸發 -->
<!-- click事件不在乎當前值是否發生變化, 只要點擊一定觸發, 注意與change事件的區別 -->
<select
name=""
id=""
size="8"
multiple
onchange="alert(this.value)"
onclick="alert(this.value)"
>
<optgroup label="前端">
<option value="html5">HTML5</option>
<option value="css3" selected>CSS3</option>
<option value="javascript" disabled>JavaScript</option>
<!-- 使用label屬性,可省略選項文本,并將option轉為單標簽 -->
<option value="es6" label="ECMScript6"> </option
><option value="jquery" label="jQuery"> </option
></optgroup>
<optgroup label="后端">
<option value="php" label="PHP"> </option
><option value="mysql" label="MySQL"> </option
><option value="javascript" label="Laravel"> </option
></optgroup>
</select>
</form>
</body>
</html>
```
---
## 6. 多行文本域元素`<textarea>`
### 6.1 常用屬性
| 序號 | 屬性 | 描述 |
| ---- | -------------- | ------------------------ |
| 1 | `cols` | 文本域可視寬度 |
| 2 | `rows` | 文本域可輸入的行數 |
| 3 | `name` | 文本域參數名稱 |
| 4 | `form` | 綁定所屬表單元素 |
| 5 | `minlength` | 允許輸入最小字符長度 |
| 6 | `maxlength` | 允許輸入最大字符長度 |
| 7 | `maxlength` | 允許輸入最大字符長度 |
| 8 | `placeholder` | 提示信息占位符 |
| 9 | `wrap` | 換行方式:`hard/soft默認` |
| 10 | `disabled` | 禁用(布爾屬性) |
| 11 | `autofocus` | 自動獲取焦點(布爾屬性) |
| 12 | `autocomplete` | 自動完成(布爾屬性) |
### 6.2 事件屬性
| 序號 | 事件 | 描述 |
| ---- | ---------- | ---------------- |
| 1 | `onclick` | 點擊時觸發 |
| 2 | `onchange` | 文本被修改時觸發 |
| 3 | `onselect` | 文本被選中時觸發 |
> 提示: `<textarea>`是雙標簽,沒有`value`屬性,標簽內部的文本就是參數值
### 6.3 示例

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>文本域</title>
<style>
body {
width: 80%;
margin: auto;
display: grid;
row-gap: 15px;
}
button {
height: 30px;
border: none;
outline: none;
background-color: lightseagreen;
color: white;
}
button:hover {
background-color: blueviolet;
cursor: pointer;
}
</style>
</head>
<body>
<!-- 表單內部為空,控件全部使用form屬性與之綁定 -->
<form action="" id="common"></form>
<!-- change:值改變時觸發, select:選中文本時觸發 -->
<textarea
name="reply"
id=""
cols="30"
rows="10"
minlength="5"
maxlength="50"
form="common"
placeholder="不超過50字符"
onchange="alert('內容改變了')"
onselect="this.style.color='red'"
></textarea>
<!-- 動態設置處理腳本與請求類型 -->
<button
type="submit"
form="common"
formaction="register.php"
formmethod="POST"
>
提交
</button>
</body>
</html>
```
---
## 7. 表單域分組元素`<fieldset>`
- 當表單字段非常多時,分組管理很有必要,例如將必填項與選填項分開
- 它只有一個子元素`<legend>`,設置分組標題
### 7.1 常用屬性
| 序號 | 屬性 | 描述 |
| ---- | ---------- | ----------------------------- |
| 1 | `name` | 分組名稱 |
| 2 | `form` | 分組所屬表單,默認是最近的表單 |
| 3 | `disabled` | 禁用分組(布爾屬性) |
> `name`,`form`屬性僅供參考,提交參數仍依賴內部控件中的`form`屬性
### 7.2 示例

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>表單域分組元素</title>
<style>
body {
display: grid;
row-gap: 15px;
}
fieldset {
color: lightseagreen;
border-radius: 6px;
border: 2px solid lightseagreen;
}
fieldset:hover {
background-color: lightcyan;
}
fieldset > section {
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 15px;
}
fieldset > legend {
text-align: center;
}
input {
border: none;
outline: none;
border-bottom: 1px solid #666;
background-color: transparent;
}
button {
height: 30px;
border: none;
outline: none;
border-radius: 6px;
background-color: lightseagreen;
color: white;
}
button:hover {
background-color: darkorchid;
cursor: pointer;
}
</style>
</head>
<body>
<!-- 提交設置通過<button>元素完成 -->
<form action="" id="register"></form>
<!-- 表單域分組1 -->
<fieldset name="base" form="register">
<legend>基本信息</legend>
<section>
<input
type="email"
name="email"
placeholder="您的郵箱"
form="register"
autofocus
/>
<input
type="password"
name="psw1"
placeholder="您的密碼"
form="register"
/>
<input
type="password"
name="psw2"
placeholder="重復密碼"
form="register"
/>
</section>
</fieldset>
<!-- 表單域分組2 -->
<fieldset name="other" form="register">
<legend>選填信息</legend>
<section>
<input
type="text"
name="nickname"
placeholder="您的呢稱"
form="register"
/>
<input type="number" name="age" min="10" max="70" step="1"
form="register" / placeholder="您的年齡"> <input type="url" name="site"
placeholder="個人站點"" form="register"/>
</section>
</fieldset>
<button
type="submit"
form="register"
formaction="register.php"
formmethod="POST"
formtarget="_blank"
>
提交
</button>
</body>
</html>
```
- 教學大綱
- HTML5基礎
- 1-html基礎知識
- 2-語義化結構元素
- 3-語義化文本元素
- 4-鏈接/列表/圖像元素
- 5-表格元素
- 6-表單與控件元素[重點]
- CSS3基礎
- 1-css與html文檔
- 2-css選擇器
- 3-細說盒模型
- Flex布局[精簡版]
- 1-Flex概論
- 2-Flex布局是什么
- 3-Flex基本概念
- 4-Flex容器屬性
- 5-Flex項目屬性
- Flex布局[細說版]
- 1-flex 布局概述
- 2-flex 容器與項目
- 3-flex 容器主軸方向
- 4-flex 容器主軸項目換行
- 5-flex 容器主軸與項目換行簡寫
- 6-flex 容器主軸項目對齊
- 7-flex 容器交叉軸項目對齊
- 8-flex 多行容器交叉軸項目對齊
- 9-flex 項目主軸排列順序
- 10-flex 項目交叉軸單獨對齊
- 11-flex 項目放大因子
- 12-flex 項目收縮因子
- 13-flex 項目計算尺寸
- 14-flex 項目縮放的簡寫
- Flex布局[案例版]
- 1-調整項目順序
- Grid布局[精簡版]
- 1. 常用術語
- 2. 容器屬性
- 3. 項目屬性
- 4. 布局實例
- 1. 經典三列布局
- 2. 媒體查詢
- Grid布局[細說版]
- 1-必知術語
- 2-容器創建與行列劃分
- 3-單元格常用單位
- 4-項目填充到單元格
- 5-項目填充到網格區域
- 6-對齊容器中的所有項目
- 7-對齊單元格中所有項目
- 8-對齊單元格中某個項目
- 9-容器中行與列之間的間距