前端學習筆記一一HTML表單標籤（form）

form表單細節

1、表單

1.表單<form> 標籤用於爲用戶輸入建立 HTML 表單

2.表單可以包含 input 元素，好比文本字段、複選框、單選框、提交按鈕等等。

3.表單還能夠包含 menus、textarea、fieldset、legend 和 label 元素。

4.表單用於向服務器傳輸數據。

2、表單form 的屬性

（一）action屬性

 action 屬性規定當提交表單時，向何處發送表單數據

屬性值：url 連接的地址

（二）name屬性

name屬性規定表單的名稱。 name 屬性提供了一種在腳本中引用表單的方法。

（三）method屬性

method 屬性規定在提交表單時所用的HTTP方法（GET 或是 POST）

一、何時使用GET？

method屬性的默認值是GET，若是表單的提交是被動的（好比搜索引擎查詢），而且沒有敏感信息；

當使用GET的時候，表單數據是提交到頁面的地址欄中的。

二、何時使用post？

地址欄中能夠儲存的數據是有限的，若是想要儲存更多數據，更安全的儲存數據就須要使用 post

表單正在更新數據，或是包含敏感信息（例如密碼）最好使用post；

post 安全性更好，由於在頁面地址欄中提交的數據使不可見的（若是上傳的數據比較多或是要上傳圖片，就要使用post）。

（四）legend元素

<length> 元素爲 <fieldset> 元素定義標籤

<fieldset>標籤 能夠將表單內的相關元素分組，還能夠在相關表單元素周圍繪製邊框。

<form>
 <fieldset>
  <legend>Personalia:</legend>
Name: <input type="text"><br>
Email: <input type="text"><br>
 </fieldset>
</form>

input元素必需要加上 name 屬性，定義一個名字，後臺纔會正常接收輸入的數據；

3、表單描述標籤的使用

<label> 爲input元素定義標註

<label for="wenzi">文字</label>
<input type="text" id='wenz'>

label 元素不會向用戶呈現任何特殊效果。不過，它爲鼠標用戶改進了可用性。

若是在 label 元素內點擊文本，就會觸發此控件，使該控件得到焦點。當用戶選擇該標籤時，瀏覽器就會自動將焦點轉到和標籤相關的表單控件上。

<label> 標籤的 for 屬性應當與相關元素的 id 屬性相同。

爲了實現一樣的效果，會有另外一種寫法：不須要 for 和 id 屬性；

<label>文字 <input type="text">
</label>

4、表單約束屬性

（一）required 屬性

required 屬性是一個布爾屬性，規定必須在提交表單以前填寫輸入字段，必填字段。（required是H5的新屬性）

注意：required 屬性適用於下面的 input 類型：text、search、url、tel、email、password、date pickers、number、checkbox、radio 和 file。

（二）placeholder屬性

placeholder 屬性規定可描述輸入字段預期值的簡短的提示信息（ 在輸入框裏面的提示文字，內容不會被提交），例如一個樣本值或是預期格式的簡短的描述。

placeholder 定義的提示會在用戶輸入值以前顯示在輸入字段中。

注意：placeholder 屬性適用於下面的 input 類型：text、search、url、tel、email 和 password。

（三）value屬性

value 屬性爲 input 元素設定值。對於不一樣的輸入類型，value屬性的用法也不一樣。

type類型爲button、reset、submit。定義按鈕上顯示的文本；

type類型爲text、password、hidden。定義輸入字段的初始值（默認值）；

type類型爲checkbox、radio、image。定義輸入相關聯的值；

注意：<input type="checkbox"> 和 <input type="radio"> 中必須設置 value 屬性。

注意：value 屬性沒法與 <input type="file"> 一同使用。

（四）maxlength屬性

maxlength 屬性規定輸入字段的最大長度，以字符個數計算。

maxlength 屬性與 <input type="text"> 或 <input type="password"> 配合使用（有輸入長度）

（五）size屬性

size 屬性規定以字符數計的 <input> 元素的可見寬度。

size  限制表單的長度（不建議用，用CSS去設置更好）

5、表單訪問限制（表單禁用）

（一）readonly 屬性

readonly 屬性規定輸入字段爲只讀，沒法輸入，可使用value來設置默認值，能夠提交到後臺，可是用戶沒法修改。

只讀字段沒法修改，不過用戶仍然可使用tab鍵切換到該字段，還能夠選中或拷貝其文本。

readonly 屬性能夠防止用戶對值進行修改，直到知足某些條件爲止（好比選中了一個複選框）。而後，須要使用 JavaScript 消除 readonly 值，將輸入字段切換到可編輯狀態。

readonly 屬性可與<input type="text"> 或 <input type="password"> 配合使用。

（二）disabled屬性

disabled 屬性定義應該禁用input元素（只能看，不能提交到後臺）

被禁用的 input元素既不可用，也不可點擊。能夠設置 disabled 屬性，直到知足某些其餘的條件爲止（好比選擇了一個複選框等等）。而後，就須要經過 JavaScript 來刪除 disabled 值，將 input 元素的值切換爲可用。

注意：disabled 屬性沒法與 <input type="hidden"> 一塊兒使用。

6、經常使用的字段擴展類型

值	描述
button	定義可點擊按鈕（多數狀況下，用於經過 JavaScript 啓動腳本）。
checkbox	定義複選框。
file	定義輸入字段和 "瀏覽"按鈕，供文件上傳。
hidden	定義隱藏的輸入字段，雖然隱藏了卻依然存在。
image	定義圖像做爲提交按鈕。
password	定義密碼字段。該字段中的字符被掩碼。
radio	定義單選按鈕。
reset	定義重置按鈕。重置按鈕會清除表單中的全部數據。
submit	定義提交按鈕。提交按鈕會把表單數據發送到服務器。
text	定義單行的輸入字段，用戶可在其中輸入文本。默認寬度爲 20 個字符。

H5新標籤                                  | 值 | 描述 | |-|-| | color | 定義拾色器 | | date |  定義 date 控件（包括年、月、日，不包括時間） | | datetime |  定義 date 和 time 控件（包括年、月、日、時、分、秒、幾分之一秒，基於 UTC 時區） | | datetime-local |  定義 date 和 time 控件（包括年、月、日、時、分、秒、幾分之一秒，不帶時區） | | email |  定義用於 e-mail 地址的字段 | | month |  定義 month 和 year 控件（不帶時區） | | number |  定義用於輸入數字的字段 | | range | 定義用於精確值不重要的輸入數字的控件（好比 slider 控件） | | search | 定義用於輸入搜索字符串的文本字段 | | tel | 定義用於輸入電話號碼的字段 | | time | 定義用於輸入時間的控件（不帶時區） | | url | 定義用於輸入 URL 的字段 | | week | 定義 week 和 year 控件（不帶時區） |

7、大量文本和列表

（一）文本域

textarea 標籤訂義一個多行的文本輸入控件

文本域中可容納無限數量的文本，其中的文本的默認字體是等寬字體（Courier）

文本域中的默認值，要放在一對textarea 標籤中

能夠經過 cols 和 rows 屬性來規定 textarea 的尺寸大小，不過更好地·辦法是使用CSS的height 和 width屬性

（二）列表框

select 元素能夠建立單選或是多選菜單。

 option標籤用於定義列表中的可用選項，即列表項；

optgroup標籤 定義列表項分組

1 <select>
 2   <optgroup label="Swedish Cars">
 3     <option value="volvo">Volvo</option>
 4     <option value="saab">Saab</option>
 5   </optgroup>
 6   <optgroup label="German Cars">
 7     <option value="mercedes">Mercedes</option>
 8     <option value="audi">Audi</option>
 9   </optgroup>
10 </select>

（三）multiple 屬性

multiple屬性定義多選，multiple 屬性能夠設置或是返回是否能夠有多個選項被選中。

multiple 的用法：

設置 multiple屬性

selectObject.multiple=true|false

返回multiple屬性

selectObject.multiple

8、選項框標準打開方式

（一）radio 類型

radio 單選框 ，當用戶點擊一個單選按鈕時，該按鈕會變爲選中狀態，其餘全部按鈕會變爲非選中狀態。

<form> 男性： <input type="radio" checked="checked" name="Sex" value="male" />
<br /> 女性： <input type="radio" name="Sex" value="female" />
</form>

（二）checkbox 類型

<input type="checkbox"> 定義了複選框. 用戶須要從若干給定的選擇中選取一個或若干選項，能夠多個同時選中。

<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car </form>

（三）checked 屬性

checked 屬性是一個布爾屬性。

checked 屬性規定在頁面加載時應該被預先選定的 <input> 元素。

checked 屬性適用於 <input type="checkbox"> 和 <input type="radio">。

9、文件上傳

（一）file 類型

file類型 定義輸入字段和 "瀏覽"按鈕，供文件上傳

（二）enctype 屬性

form 標籤中定義的enctype 屬性規定在發送到服務器以前應該如何對錶單數據進行編碼。

默認地，表單數據會編碼爲 "application/x-www-form-urlencoded"。

就是說，在發送到服務器以前，全部字符都會進行編碼（空格轉換爲 "+" 加號，特殊符號轉換爲 ASCII HEX 值）

屬性值：

application/x-www-form-urlencoded  在發送前編碼全部字符（默認）

multipart/form-data  不對字符進行編碼。在使用包含文件上傳控件的表單時，必須使用該值！

text/plain  空格轉換爲 "+" 加號，但不對特殊字符編碼

<form action="demo-post_enctype.php" method="post" enctype="multipart/form-data"><input type="file" name="fname"><br>
  <input type="submit" value="提交">
</form>

（三）accept 屬性

accept 規定上傳文件的類型，若是多個類型可使用逗號隔開，例如：accept="image/png,image/jpg"（這能上傳png類型的圖片）

accept 屬性只能與 <input type="file"> 配合使用。它規定可以經過文件上傳進行提交的文件類型。

注意：請避免使用該屬性。應該在服務器端驗證文件上傳。

（四）multiple 屬性

file 文件上傳 配合 multiple屬性能夠上傳多個文件；

multiple 屬性規定輸入字段可選擇多個值。

若是使用該屬性，則字段可接受多個值。

注意：multiple 屬性使用歐冠與如下 <input> 類型：email 和 file

10、日期在表單中的使用

（一）date 類型

date 得到日期，包括年月日。

一、使用mix和max定義開始和結束時間 如：min="2030-02-02"

二、也可以使用step屬性設置步長（間隔幾天才能夠選中）

<input type="date" max='2030-02-02' min='2019-01-01' step='5'>

（二）datetime 類型

定義 date 和 time 控件，得到日期和時間，包括年、月、日、時、分、秒、幾分之一秒。

（三）time 類型

得到時間，定義用於輸入時間的控件（不帶時區）。

（四）week 類型

week類型 得到年份和週數

（五）month 類型

month 類型 得到年和月

（六）datetime-local 類型

datetime-local  年月日時分秒

11、搜索表單和datalist數據列表

（一）search 類型

search類型 能夠定義搜索框，但須要input type=search外面包上一層帶action屬性的form。

（二）datalist 標籤

<datalist> 標籤規定了<input> 元素可能的選項列表。

<datalist> 爲input 元素提供‘自動完成’的特性。用戶能看到一個下拉列表，裏面是預先定義好的內容。這些內容將做爲用戶輸入的數據。

爲 datalist 元素添加 id，其餘 input 元素經過 list 屬性指向 datalist 的id，從而綁定 datalist 元素

一對 option 標籤中的是提示文字，若是不想有提示文字，能夠將 option 變成單標籤

<form action="demo-form.php" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="Internet Explorer">兼容性很差</option>> <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>
<input type="submit">
</form>

12、表單歷史數據自動提示autocomplete

autocomplete屬性

type=search 會有許多默認樣式和行爲，會默認下拉框顯示歷史搜索記錄，在不一樣的瀏覽器或是設備上會有不一樣顯示效果。 

autocomplete 屬性規定表單是否應該啓用自動完成功能。

自動完成容許瀏覽器預測對字段的輸入。當用戶在字段開始輸入時，瀏覽器基於以前輸入過的歷史記錄，顯示出字段中填寫的選項。

注意：除了 Opera，其餘主流瀏覽器都支持 autocomplete 屬性

注意：autocomplete "on" 適用於表單，"off" 適用於特定的輸入字段，反之亦然。

屬性值：

off 輸入的時候沒有歷史提示，規定禁用自動完成功能。用戶必須在每次使用時輸入值到每一個字段中，瀏覽器不會自動完成輸入

on 輸入的時候會有歷史提示，默認。規定啓用自動完成功能。瀏覽器會基於用戶以前鍵入的值自動完成值

<form action="demo-form.php" method="get" autocomplete="on"> 
First name:<input type="text" name="fname"><br> 
E-mail: <input type="email" name="email"><br>
  <input type="submit">
</form>