form表單細節

一、表單

表單<form> 標簽用於為用戶輸入創建 HTML 表單

表單能夠包含 input 元素，比如文本字段、復選框、單選框、提交按鈕等等。

表單還可以包含 menus、textarea、fieldset、legend 和 label 元素。

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

 

二、表單form 的屬性

（一）action屬性

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

屬性值：url 鏈接的地址

（二）name屬性

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

（三）method屬性

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

1、什么時候使用GET？

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

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

2、什么時候使用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 屬性，定義一個名字，后台才會正常接收輸入的數據；

 

三、表單描述標簽的使用

<label> 為input元素定義標注

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

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

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

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

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

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

 

四、表單約束屬性

（一）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去設置更好）

 

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

（一）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"> 一起使用。

 

六、常用的字段擴展類型

值	描述
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 控件（不帶時區）

 

七、大量文本和列表

（一）文本域 

textarea 標簽定義一個多行的文本輸入控件

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

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

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

（二）列表框

select  元素可以創建單選或是多選菜單。

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

optgroup標簽 定義列表項分組

<select>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

（三）multiple 屬性

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

multiple 的用法：

設置 multiple屬性

selectObject.multiple=true|false

返回multiple屬性

selectObject.multiple

 

八、選項框標准打開方式

（一）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">。

 

九、文件上傳

（一）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

 

十、日期在表單中的使用

（一）date 類型

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

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

2、也可使用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  年月日時分秒

 

十一、搜索表單和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>

 

十二、表單歷史數據自動提示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>