??一、form表單是什么

表單是一個包含表單元素的區域，

表單用于向服務器傳輸資料，從而實作用戶與Web服務器的互動

表單元素是允許用戶在表單中輸入內容，比如：文本域（textarea）、下拉串列（select）、單選框（radio-buttons）、復選框（checkbox）等等，我們可以使用 <form> 標簽來創建表單:
<form 相關屬性>
...
input 元素
...
</form>

??二、form表單的屬性

屬性描述

accept-charset 規定在被提交表單中使用的字符集（默認：頁面字符集），IE只能識別_charset屬性，其他瀏覽器只能識別accept-charset屬性

action 規定向何處提交表單的地址（URL）（提交頁面），它可以是一個
URL地址(提交給程式)或一個電子郵件地址.

autocomplete 規定瀏覽器應該自動完成表單（默認：開啟），

enctype 規定被提交資料的編碼（默認：url-encoded），指明用來把表單提交給服務器時(當method值為”post”)的互聯網媒體形式.這個特性的預設值/默認值是”application/x-www-form-urlencoded”

method 規定在提交表單時所用的 HTTP 方法有post和get兩種（默認：GET），

name 規定識別表單的名稱（對于 DOM 使用：document.forms.name），

novalidate 規定瀏覽器不驗證表單，

target 規定 action 屬性中地址的目標（默認：_self），指定提交的結果檔案顯示的位置

對于method屬性有以下幾點補充：
//這get和post的區別實在form表單環境下
1. get是從服務器上獲取資料，post是向服務器傳送資料，
2. get是把引數資料佇列加到提交表單的ACTION屬性所指的URL
中，值和表單內各個欄位一一對應，在URL中可以看到，post是通
過HTTP post機制，將表單內各個欄位與其內容放置在HTML
HEADER內一起傳送到ACTION屬性所指的URL地址，用戶看不到
這個程序，
3. 對于get方式，服務器端用Request.QueryString獲取變數的值，
對于post方式，服務器端用Request.Form獲取提交的資料，
4. get傳送的資料量較小，不能大于2KB，post傳送的資料量較大，
一般被默認為不受限制，但理論上，IIS4中最大量為80KB，IIS5中
為100KB，
5. get安全性非常低，post安全性較高，但是執行效率卻比Post方法
好，

屬性	描述
accept-charset	規定在被提交表單中使用的字符集（默認：頁面字符集），IE只能識別_charset屬性，其他瀏覽器只能識別accept-charset屬性
action	規定向何處提交表單的地址（URL）（提交頁面），它可以是一個 URL地址(提交給程式)或一個電子郵件地址.
autocomplete	規定瀏覽器應該自動完成表單（默認：開啟），
enctype	規定被提交資料的編碼（默認：url-encoded），指明用來把表單提交給服務器時(當method值為”post”)的互聯網媒體形式.這個特性的預設值/默認值是”application/x-www-form-urlencoded”
method	規定在提交表單時所用的 HTTP 方法有post和get兩種（默認：GET），
name	規定識別表單的名稱（對于 DOM 使用：document.forms.name），
novalidate	規定瀏覽器不驗證表單，
target	規定 action 屬性中地址的目標（默認：_self），指定提交的結果檔案顯示的位置

??三、input中的各種Type屬性值

值描述

button 定義可點擊的按鈕（通常與 JavaScript 一起使用來啟動腳本），

checkbox 定義復選框，復選框常用于多項選擇，如選擇興趣、愛好等，可對其應用 checked屬性，指定默認選中項，

color 定義拾色器，color型別用于提供設定顏色的文本框，用于實作一個RGB顏色輸入，其基本形式是# RRGGBB，默認值為#000000，通過value屬性值可以更改默認顏色，單擊clor型別文本框，可以快速打開拾色器面板，方便用戶可視化選取一種顏色，

date 定義 date 控制元件（包括年、月、日，不包括時間），

datetime 定義 date 和 time 控制元件（包括年、月、日、時、分、秒、幾分之一秒，基于 UTC 時區），

datetime-local 定義 date 和 time 控制元件（包括年、月、日、時、分、秒、幾分之一秒，不帶時區），

email emai型別的標記是一種專門用于輸入E-mai地址的文本輸入框，用來驗證emai輸入框的內容是否符合E-mai地址格式;如果不符合，將提示相應的錯誤資訊，

file 當定義檔案域時，頁面中將出現一個“選擇檔案”按鈕和提示資訊文本，用戶可以通過單擊按鈕然后直接選擇檔案的方式，將檔案提交給后臺服務器，

hidden 定義隱藏輸入欄位，隱藏域對于用戶是不可見的，通常用于后臺的程式，初學者了解即可，

image 定義影像作為提交按鈕，影像形式的提交按鈕與普通的提交按鈕在功能上基本相同，只是它用影像替代了默認的按鈕，外觀上更加美觀，需要注意的是，必須為其定義src屬性指定影像的url地址，

month 定義 month 和 year 控制元件（不帶時區），

number number型別的 <input/標記用于提供輸入數值的文本框，在提交表單時，會自動檢查該輸入框中的內容是否為數字，如果輸入的內容不是數字或者數字不在限定范圍內則會出現錯誤提示，

password 密碼輸入框用來輸入密碼，其內容將以圓點或者" * "號的形式顯示

radio 單選按鈕用于單項選擇按鈕，如選擇性別、是否操作等，需要注意的是，在定義單選按鈕時，必須為同一組中的選項指定相同的name值，這樣“單選”才會生效，此外，可以對單選按鈕應用 checked屬性，指定默認選中項

range 定義用于精確值不重要的輸入數字的控制元件（比如 slider 控制元件），range型別的<inpu標記用于提供一定范圍內數值的輸入范圍，在網頁中顯示為滑動條，它的常用屬性與 number型別一樣，通過min屬性和max屬性，可以設定最小值與最大值，通過step屬性指定每次滑動的步幅，如果想改變mnge的vale值，可以通過直接拖動滑動塊或者單擊滑動條來改變，

reset 定義重置按鈕，當用戶輸入的資訊有誤時，可單擊重置按鈕取消已輸入的所有表單資訊，可以對其應用 value屬性，改變重置按鈕上的默認文本，（重置所有的表單內容為默認值），

search search型別是一種專門用于輸入搜索關鍵詞的文本框，它能自動記錄一些字符，如站點搜索或者Google搜索，在用戶輸入內容后，其右側會附帶一個洗掉圖示，單擊這個圖示按鈕可以快速清除內容，

submit 定義提交按鈕，提交按鈕是表單中的核心控制元件，用戶完成資訊的輸入后一般都需要單擊提交按鈕才能完成表單資料的提交，可以對其應用 value屬性，改變提交按鈕上的默認文本，

tel tel型別用于提供輸入電話號碼的文本框，由于電話號碼的格式千差萬別，很難實作一個通用的格式，因此，tel型別通常會和 pattern屬性配合使用，

text 默認 定義一個單行的文本欄位（默認寬度為 20 個字符），單行文本輸入框常用來輸入簡短的資訊，如用戶名、賬號等，常用的屬性有name、value、 maxlength

time 定義用于輸入時間的控制元件（不帶時區），

url Url型別的< input />標記是一種用于輸入URL地址的文本框，跟email屬性值類似，如果所輸入的內容是URL地址格式的文本，則會提交資料到服務器;如果輸入的值不符合URL地址格式，則不允許提交，并且會有提示資訊，

week 定義 week 和 year 控制元件（不帶時區），

Date pickers型別 Date picker型別是指時間日期型別，HML中提供了多個可供選取日期和時間的輸入型別，用于驗證輸入的日期

對于number值的補充：
number型別的輸入框可以對輸入的數字進行限制，規定允許的最大值和最小值、合法的數字間隔或默認值等，具體屬性說明如下，
●vale:指定輸入框的初始值
●max:指定輸入框可以接受的最大的輸入值，
min:指定輸入框可以接受的最小的輸入值，
●sep:輸入域合法的數字間隔，如果不設定，默認值是1，
對于Date pickers型別的補充：

Date：選取日、月、年
Month：選取月、年
Week：選取周、年
Time：選取時間(小時和分鐘)
Datetime：選取時間、日、月、年(UTC時間)
datetime-local：選取時間、日、月、年(本地時間)

UTC是 Universal Time Coordinated的英文縮寫，即“協調世界時”，又稱世界標準時間，簡單地說，UTC時間就是0時區的時間，例如，如果北京時間為早上8點，則UTC時間為0點，即UC時間比北京時間晚8小時，

各種值對應的效果示例圖如下：

?編輯

值	描述
button	定義可點擊的按鈕（通常與 JavaScript 一起使用來啟動腳本），
checkbox	定義復選框，復選框常用于多項選擇，如選擇興趣、愛好等，可對其應用 checked屬性，指定默認選中項，
color	定義拾色器，color型別用于提供設定顏色的文本框，用于實作一個RGB顏色輸入，其基本形式是# RRGGBB，默認值為#000000，通過value屬性值可以更改默認顏色，單擊clor型別文本框，可以快速打開拾色器面板，方便用戶可視化選取一種顏色，
date	定義 date 控制元件（包括年、月、日，不包括時間），
datetime	定義 date 和 time 控制元件（包括年、月、日、時、分、秒、幾分之一秒，基于 UTC 時區），
datetime-local	定義 date 和 time 控制元件（包括年、月、日、時、分、秒、幾分之一秒，不帶時區），
email	emai型別的標記是一種專門用于輸入E-mai地址的文本輸入框，用來驗證emai輸入框的內容是否符合E-mai地址格式;如果不符合，將提示相應的錯誤資訊，
file	當定義檔案域時，頁面中將出現一個“選擇檔案”按鈕和提示資訊文本，用戶可以通過單擊按鈕然后直接選擇檔案的方式，將檔案提交給后臺服務器，
hidden	定義隱藏輸入欄位，隱藏域對于用戶是不可見的，通常用于后臺的程式，初學者了解即可，
image	定義影像作為提交按鈕，影像形式的提交按鈕與普通的提交按鈕在功能上基本相同，只是它用影像替代了默認的按鈕，外觀上更加美觀，需要注意的是，必須為其定義src屬性指定影像的url地址，
month	定義 month 和 year 控制元件（不帶時區），
number	number型別的 <input/標記用于提供輸入數值的文本框，在提交表單時，會自動檢查該輸入框中的內容是否為數字，如果輸入的內容不是數字或者數字不在限定范圍內則會出現錯誤提示，
password	密碼輸入框用來輸入密碼，其內容將以圓點或者" * "號的形式顯示
radio	單選按鈕用于單項選擇按鈕，如選擇性別、是否操作等，需要注意的是，在定義單選按鈕時，必須為同一組中的選項指定相同的name值，這樣“單選”才會生效，此外，可以對單選按鈕應用 checked屬性，指定默認選中項
range	定義用于精確值不重要的輸入數字的控制元件（比如 slider 控制元件），range型別的<inpu標記用于提供一定范圍內數值的輸入范圍，在網頁中顯示為滑動條，它的常用屬性與 number型別一樣，通過min屬性和max屬性，可以設定最小值與最大值，通過step屬性指定每次滑動的步幅，如果想改變mnge的vale值，可以通過直接拖動滑動塊或者單擊滑動條來改變，
reset	定義重置按鈕，當用戶輸入的資訊有誤時，可單擊重置按鈕取消已輸入的所有表單資訊，可以對其應用 value屬性，改變重置按鈕上的默認文本，（重置所有的表單內容為默認值），
search	search型別是一種專門用于輸入搜索關鍵詞的文本框，它能自動記錄一些字符，如站點搜索或者Google搜索，在用戶輸入內容后，其右側會附帶一個洗掉圖示，單擊這個圖示按鈕可以快速清除內容，
submit	定義提交按鈕，提交按鈕是表單中的核心控制元件，用戶完成資訊的輸入后一般都需要單擊提交按鈕才能完成表單資料的提交，可以對其應用 value屬性，改變提交按鈕上的默認文本，
tel	tel型別用于提供輸入電話號碼的文本框，由于電話號碼的格式千差萬別，很難實作一個通用的格式，因此，tel型別通常會和 pattern屬性配合使用，
text `默認`	定義一個單行的文本欄位（默認寬度為 20 個字符），單行文本輸入框常用來輸入簡短的資訊，如用戶名、賬號等，常用的屬性有name、value、 maxlength
time	定義用于輸入時間的控制元件（不帶時區），
url	Url型別的< input />標記是一種用于輸入URL地址的文本框，跟email屬性值類似，如果所輸入的內容是URL地址格式的文本，則會提交資料到服務器;如果輸入的值不符合URL地址格式，則不允許提交，并且會有提示資訊，
week	定義 week 和 year 控制元件（不帶時區），
Date pickers型別	Date picker型別是指時間日期型別，HML中提供了多個可供選取日期和時間的輸入型別，用于驗證輸入的日期

??四、<label>標簽

<label> 標簽為 input 元素定義標簽（label），

label 元素不會向用戶呈現任何特殊的樣式，不過，它為滑鼠用戶改善了可用性，因為如果用戶點擊 label 元素內的文本，則會切換到控制元件本身，

<label> 標簽的 for 屬性應該等于相關元素的 id 元素，以便將它們捆綁起來，

1. 在html中，<label>標簽通常和<input>標簽一起使用，<label>標簽為input元素定義標注（標記）

2. 格式： <label for="關聯控制元件的id" form="所屬表單id串列">文本內容</label>

代碼展示：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>label標簽</title>
</head>
<body>
<form action="">
    
    <label for="r1">男</label>
    <input id="r1" type="radio" name="gender" value="https://www.cnblogs.com/zaixiazhouzhou/archive/2022/12/17/1">

    <label for="r2">女</label>
    <input id="r2" type="radio" name="gender" value="https://www.cnblogs.com/zaixiazhouzhou/archive/2022/12/17/0">

    <label for="r3">保密</label>
    <input id="r3" type="radio" name="gender" value="https://www.cnblogs.com/zaixiazhouzhou/archive/2022/12/17/2">
    
    
    <label>外星人
        <input id="r4" type="radio" name="gender" value="https://www.cnblogs.com/zaixiazhouzhou/archive/2022/12/17/3">
    </label>
</form>
</body>
</html>
輸出示例：

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/540217.html

標籤：其他

上一篇：高級前端進階（七）

下一篇：vue3專案，記錄我是如何用1h實作產品預估1天作業量的界面需求

【HTML基礎篇002】HTML之form表單超詳解

??一、form表單是什么

??二、form表單的屬性

??三、input中的各種Type屬性值

??四、<label>標簽