6-表單與控件元素[重點] · 前端教學筆記[更新中...]

# 表單與控件元素 [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 示例 ![input](https://img.kancloud.cn/9c/6d/9c6df52b60ced6c89ce17bc860ee6b8c_786x868.jpg) ```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 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 >  <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>  <input type="file" name="user_pic" id="userpic" />  <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 value="HTML/CSS開發與實戰"> </option> <option value="JavaScript基礎與實戰"> </option> <option value="PHP開發基礎"> </option> <option value="Laravel基礎與實戰"> </option> </datalist> </section>    <input type="image" src="btn.png" alt="submit" name="submit" width="100" /> </form> <hr />   <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 示例 ![button](https://img.kancloud.cn/01/d5/01d5376e429e1eeb68b49a8cb2abd48a_786x450.png) ```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 示例 ![select](https://img.kancloud.cn/e6/be/e6be1073ae4b8a034a9a8d3ed71311df_374x334.jpg) ```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="">   <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>  <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 示例 ![](https://img.kancloud.cn/ce/82/ce82a9b233ddaa2bcc2d0dd6cf7089c0_778x486.jpg) ```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 action="" id="common"></form>  <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 示例 ![fieldset](https://img.kancloud.cn/90/c2/90c21a04a2a6192ba702d2b8a83477ac_1102x440.jpg) ```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>  <form action="" id="register"></form>  <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>  <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> ```