表單
表單元素
<form>元素
- 表示設定表單
- action屬性 – 設定接收表單的指定伺服器端的地址路徑
-
method屬性 – 表示傳送給伺服器端的方式
- get屬性值（預設值） – 將提交的資料新增到位址列中進行提交（有限制，不安全）
- post屬性值 – 將提交的資料繫結在表單中進行提交（沒有限制，相對安全）
- name屬性 – 提交表單時要設定name屬性，不然無法提交表單
<body>
<!--
form元素 - 表示設定表單
* action屬性 - 設定接收表單的指定伺服器端的地址路徑
* method屬性 - 表示傳送給伺服器端的方式
* get屬性值（預設值） - 將提交的資料新增到位址列中進行提交（有限制，不安全）
* post屬性值 - 將提交的資料繫結在表單中進行提交（沒有限制，相對安全）
* name屬性 - 提交表單時要設定name屬性，不然無法提交表單
-->
<form action="#" method="post">
<input type="text" name="txt">
<input type="submit">
</form>
</body>輸入框
<input>元素
- 表示設定表單中的搜尋框
-
type屬性 – 表示定義什麼型別的輸入框
- text屬性值 – 文字框
- password屬性值 – 密碼框
- email屬性值 – 郵件輸入框(會有格式要求)
- url屬性值 – 網址輸入框(會有格式要求)
- number屬性值 – 定義數字控制元件(只能輸入數字)
<body>
<!--
input元素 - 表示設定表單中的搜尋框
* type屬性 - 表示定義什麼型別的輸入框
* text屬性值 - 文字框
* password屬性值 - 密碼框
* email屬性值 - 郵件輸入框(會有格式要求)
* url屬性值 - 網址輸入框(會有格式要求)
* number屬性值 - 定義數字控制元件(只能輸入數字)
* search - 搜尋框(在移動端瀏覽器有效)
* tel - 電話框(在移動端瀏覽器有效)
-->
<form action="#">
<input type="text">
<input type="password">
<input type="email">
<input type="url">
<input type="number">
<input type="search">
<input type="tel">
</form>
</body>輸入框的屬性
- value屬性 – 可以用來 設定 或 獲取 輸入框中的資料內容
- placeholder屬性 – 可以提供使用輸入框的相關資訊
- autofocus屬性 – 可以自動獲取焦點，不用點選輸入框就可以先選擇輸入框
- disabled屬性 – 表示當前輸入框不可用
- readonly屬性 – 表示當前輸入框只能讀，不能輸入內容
<form action="#">
<!--
value屬性 - 可以用來 設定 或 獲取 輸入框中的資料內容
placeholder屬性 - 可以提供使用輸入框的相關資訊
autofocus屬性 - 可以自動獲取焦點，不用點選輸入框就可以先選擇輸入框
disabled屬性 - 表示當前輸入框不可用
readonly屬性 - 表示當前輸入框只能讀，不能輸入內容
-->
<input type="text" value="輸入內容">
<input type="text" placeholder="輸入使用者名稱">
<input type="text" autofocus>
<input type="text" disabled>
<input type="text" readonly>
</form>
</body>表單控制元件
<input>元素 – 可以設定表單中的控制元件
- type屬性 – 定義控制元件的型別
- date屬性值 – 定義日期控制元件
- month屬性值 – 定義月份控制元件
- week屬性值 – 定義週期控制元件
- color屬性值 – 定義選擇顏色的控制元件
<body>
<form action="#">
<!--
<input>元素 - 可以設定表單中的控制元件
* type屬性 - 定義控制元件的型別
* date屬性值 - 定義日期控制元件
* month屬性值 - 定義月份控制元件
* week屬性值 - 定義週期控制元件
* color屬性值 - 定義選擇顏色的控制元件
* rang屬性值 - 定義滑動條控制元件
-->
<input type="date">
<input type="month">
<input type="week">
<input type="time">
<input type="color">
<input type="range">
</form>
</body>按鈕
<input>元素 – 可以設定表單中按鈕，用於實現提交表單、或其他功能
- type屬性 – 設定按鈕的型別
- submit屬性值 – 設定提交按鈕(提交表單)
- reset屬性值 – 設定重置按鈕(重置輸入框中的內容)
- button屬性值 – 設定普通按鈕
<button>元素 – 表示設定按鈕
- 該元素不是表單中的元件
- 該元素如果被使用在表單中，也具有提交表單的功能
<body>
<form action="#">
<!--
<input>元素 - 可以設定表單中按鈕，用於實現提交表單、或其他功能
* type屬性 - 設定按鈕的型別
* submit屬性值 - 設定提交按鈕(提交表單)
* reset屬性值 - 設定重置按鈕(重置輸入框中的內容)
* button屬性值 - 設定普通按鈕
* 普通按鈕沒有特殊顯示，可以通過value屬性來設定
-->
<input type="submit">
<input type="reset">
<input type="button" value="按鈕">
<!--
<button>元素 - 表示設定按鈕
* 該元素不是表單中的元件
* 該元素如果被使用在表單中，也具有提交表單的功能
-->
<button>按鈕</button>
</form>
</body>影像元件
<input>元素 – 可以定義影像元件
- type屬性 – 設定影像元件
- image屬性值 – 定義影像元件
- src屬性 – 引入影像的路徑
- 通過影像元件引入的圖片具有提交表單的作用
<body>
<form action="#">
<!--
<input>元素 - 可以定義影像元件
* type屬性 - 設定影像元件
* image屬性值 - 定義影像元件
* src屬性 - 引入影像的路徑
* 通過影像元件引入的圖片具有提交表單的作用
-->
<input type="image" src="imgs/180731.jpg">
</form>
</body>單選框和多選框
- 單選框 – type屬性 的 radio屬性值 表示設定單選框
- 多選框 – type屬性 的 checkbox屬性值 表示設定多選框
- 通過 name屬性 將多個多選框分為一組
- checked屬性 – 表示預設被選擇項
<body>
<form action="#">
<!--
單選框 - type屬性 的 radio屬性值 表示設定單選框
* 通過 name屬性 將多個單選框分為一組
* checked屬性 - 表示預設被選擇項
-->
<input type="radio" name="input-rad" checked>我是誰
<input type="radio" name="input-rad">我在那
<input type="radio" name="input-rad">我要幹啥
<br>
<!--
多選框 - type屬性 的 checkbox屬性值 表示設定多選框
* 通過 name屬性 將多個多選框分為一組
* checked屬性 - 表示預設被選擇項
-->
<input type="checkbox" name="inout-che">手機
<input type="checkbox" name="inout-che" checked>電腦
<input type="checkbox" name="inout-che">遊戲機
</form>
</body>檔案域
檔案域 – 表示允許使用者在頁面中開啟選擇本地檔案、上傳本地檔案
- accept屬性 – 設定當前接收檔案的型別
- multiple屬性 – 可以同時接收多個檔案
- enctype屬性 – 設定提交表單時的方式
- application/x-www-form-urlencoded屬性值（預設值） – 表示以資料的方式提交表單
- multipart/form-data屬性值 – 表示將表單以檔案的方式提交（在檔案域中使用時可以實現檔案上傳）
- 實現檔案上傳
- enctype屬性的屬性值只能為 multipart/form-data
- method屬性的屬性值只能為 post
<body>
<!--
檔案域
* 允許使用者在頁面中開啟選擇本地檔案、上傳本地檔案
* accept屬性 - 設定當前接收檔案的型別
* multiple屬性 - 可以同時接收多個檔案
* enctype屬性 - 設定提交表單時的
方式
* application/x-www-form-urlencoded屬性值（預設值） - 表示以資料的方式提交表單
* multipart/form-data屬性值 - 表示將表單以檔案的方式提交（在檔案域中使用時可以實現檔案上傳）
* 實現檔案上傳
* enctype屬性的屬性值只能為 multipart/form-data
* method屬性的屬性值只能為 post
-->
<form action="#" method="post" enctype="multipart/form-data">
<input type="file" accept="image/jpeg" multiple>
<input type="submit">
</form>
</body>文字域和隱藏域
-
<textarea>元素 – 表示表單中的文字域
- cols屬性 – 表示文字域中的列
- rows屬性 – 表示文字域中的行
- 隱藏域 – 通過type屬性的 hidden屬性值設定
- 在頁面中沒有任何顯示效果
<body>
<form action="#">
<!--
textarea元素 - 表示表單中的文字域
* cols屬性 - 表示文字域中的列
* rows屬性 - 表示文字域中的行
-->
<textarea cols="30" rows="10"></textarea>
<br>
<!--
隱藏域 - 通過type屬性的 hidden屬性值設定
* 在頁面中沒有任何顯示效果
-->
<input type="hidden">
</form>
</body>下拉選單
-
<select>元素 – 表示定義表單中的下拉選單
- multiple屬性 – 可以將單選列表變成多選列表
- size屬性 – 表示多選列表的顯示個數
-
<option>元素 – 表示下拉選單中的選項
- selected屬性 – 表示當前列表中預設被選中的選項
-
<optgroup>元素 – 另一種多選列表，可以對選項進行分類
<body>
<form action="#">
<!--
select元素 - 表示定義表單中的下拉選單
* multiple屬性 - 可以將單選列表變成多選列表
* size屬性 - 表示多選列表的顯示個數
option元素 - 表示下拉選單中的選項
* selected屬性 - 表示當前列表中預設被選中的選項
optgroup元素 - 另一種多選列表，可以對選項進行分類
-->
<!-- 單選列表 -->
<select>
<option selected>手機</option>
<option>電腦</option>
<option>遊戲機</option>
</select>
<!-- 多選列表 -->
<select multiple size="3">
<option selected>手機</option>
<option>電腦</option>
<option>遊戲機</option>
</select>
<!-- 另一種多選列表 -->
<select multiple>
<optgroup>
<option selected>我是誰</option>
<option>我在那</option>
<option>我要幹啥</option>
</optgroup>
<optgroup>
<option selected>你誰呀</option>
<option>你要幹啥</option>
<option>站那別動</option>
</optgroup>
</select>
</form>
</body>組合表單元素
-
<fieldse>t元素 – 表示對錶單中的元件進行分組 -
<legend>元素 – 表示對分組的元件設定標題 -
<fieldset>元素 和<legend>元素 需要配合使用
<body>
<form action="#">
<!--
fieldset元素 - 表示對錶單中的元件進行分組
legend元素 - 表示對分組的元件設定標題
* fieldset元素 和 legend元素 需要配合使用
-->
<fieldset>
<legend>查詢</legend>
<input type="text">
<input type="submit">
</fieldset>
</form>
</body>表單驗證
-
表單驗證 – 在表單提交前對錶單中資料進行驗證
- 符合驗證 – 提交表單
- 不符合驗證 – 給出提示，按條件修改
-
驗證屬性
- required屬性 – 表示驗證當前元件中的內容是否為空
- minlength屬性 – 表示當前元件中的內容（文字）最小長度（字或字母的個數）
- maxlength屬性 – 表示當前元件中的內容（文字）最大長度（字或字母的個數）
- min屬性 – 表示當前元件中的內容是否小於min的值（使用在數字輸入框）
- max屬性 – 表示當前元件中的內容是否大於min的值（使用在數字輸入框）
- step屬性 – 表示當前元件中的內容每次增加或減少的數值（使用在數字輸入框）
-
表單中也有一些輸入框自帶驗證效果
- 郵件輸入框 – 按照郵箱地址的要求輸入
- 網址輸入框 – 按照網址的要求輸入
- 數字輸入框 – 只能輸入數字
- 顏色輸入框 – 只能規定顏色