Web開發——HTML基礎（HTML表單/下拉列表/多行輸入）

時間  2019-11-11
標籤 web 開發 html 基礎 表單 下拉 列表 輸入 欄目 HTML 简体版
原文   原文鏈接

參考：javascript

目錄：php

　　HTML 表單用於蒐集不一樣類型的用戶輸入。css

一、<form> 元素

　　HTML 表單用於收集用戶輸入。html

　　<form> 元素定義 HTML 表單。html5

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

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

　　表單還能夠包含 menus、textarea、fieldset、legend 和 label 元素（<label>元素通常與<input type="radio">和<input type="checkbox">結合使用較多）。web

<label>元素舉例：正則表達式

　　<label>標籤是<input>的描述，它自己不會有特殊效果，但它和其它<input>標籤使用能夠提高用戶的使用體驗，用戶不用非得點    擊到按鈕，而是點擊文字便可選中，如「記住密碼」，<label>和<input>進行了關聯，可是提交的依然是value的值，<label>中的內容不會被提交（經過<label>標籤的for屬性指向<input>標籤的id來進行關聯）。瀏覽器

 1 <html>
 2     <body>
 3         <p>請點擊文本標記之一，就能夠觸發相關控件：</p>
 4         
 5         <form>
 6             <label for="male">Male</label>
 7             <input type="radio" name="sex" id="male" />
 8             <br />
 9             <label for="female">Female</label>
10             <input type="radio" name="sex" id="female" />
11         </form>
12     </body>
13 </html>

<legend>元素舉例（一般和<fieldset>元素結合使用）：

 1 <form>
 2     <fieldset>
 3         <legend>Student Information</legend>
 4             Name: <input type="text" name="Name">
 5             <br />
 6             Sex: 
 7                 <label for="boy1">boy</label>
 8                 <input type="radio" name="Sex" id="boy1">
 9                 <label for="girl1">girl</label>
10                 <input type="radio" name="Sex" id="girl1">
11     </fieldset>
12 </form>

　　輸出結果：

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

　　<form>表單元素屬性：

屬性 值 描述
accept MIME_type HTML 5 中不支持。
accept-charset charset_list 規定服務器可處理的表單數據字符集。
action URL 規定當提交表單時向何處發送表單數據。
autocomplete⭐
  • on
  • off
 規定是否啓用表單的自動完成功能。
enctype 見說明

規定在發送表單數據以前如何對其進行編碼（如X進制）。

enctype 屬性可能的值：

  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain

method

（見本文第2節說明）
  • get（默認的提交方式）
  • post
 規定用於發送 form-data 的 HTTP 方法。
name form_name 規定表單的名稱。
novalidate⭐ novalidate 若是使用該屬性，則提交表單時不進行驗證。
target                                           
  • _blank
  • _self
  • _parent
  • _top
  • framename                                        
 規定在何處打開 acti                                                                                                

　　HTML <form> 元素，已設置全部可能的屬性，實例：

1 <form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8"
2 ectype="application/x-www-form-urlencoded" autocomplete="off" novalidate>
3 　　<!--form elements--> 
4 </form>

 　　輸出結果：略。

1.1 <input> 元素（輸入屬性）

（1）屬性包括

　　value 屬性：value 屬性規定輸入字段的初始值：

1 <form action="">
2     First name:<br>
3     <input type="text" name="firstname" value="John">
4     <br>
5     Last name:<br>
6     <input type="text" name="lastname">
7 </form>

　　readonly 屬性：readonly 屬性規定輸入字段爲只讀（不能修改），readonly 屬性不須要值。它等同於 readonly="readonly"。：

1 <form action="">
2     First name:<br>
3     <input type="text" name="firstname" value="John" readonly>
4     <br>
5     Last name:<br>
6     <input type="text" name="lastname">
7 </form>

　　輸出結果：

First name:
 
Last name:

　　disabled 屬性：disabled 屬性規定輸入字段是禁用的。被禁用的元素是不可用和不可點擊的。被禁用的元素不會被提交。disabled 屬性不須要值。它等同於 disabled="disabled"。

1 <form action="">
2     First name:<br>
3     <input type="text" name="firstname" value ="John" disabled>
4     <br>
5     Last name:<br>
6     <input type="text" name="lastname">
7 </form>

　　輸出結果：

First name:
 
Last name:

　　size 屬性：size 屬性規定輸入字段的尺寸（以字符計）：

1 <form action="">
2     First name:<br>
3     <input type="text" name="firstname" value ="John" size="40">
4     <br>
5     Last name:<br>
6     <input type="text" name="lastname">
7 </form>

　　輸出結果：

First name:
 
Last name:

　　maxlength 屬性：maxlength 屬性規定輸入字段容許的最大長度。如設置 maxlength 屬性，則輸入控件不會接受超過所容許數的字符。該屬性不會提供任何反饋。若是須要提醒用戶，則必須編寫 JavaScript 代碼。

　　註釋：輸入限制並不是萬無一失。JavaScript 提供了不少方法來增長非法輸入。如需安全地限制輸入，則接受者（服務器）必須同時對限制進行檢查。

1 <form action="">
2     First name:<br>
3     <input type="text" name="firstname" maxlength="10">
4     <br>
5     Last name:<br>
6     <input type="text" name="lastname">
7 </form>

　　輸出結果：

First name:
 
Last name:

　　image屬性（這種方式使用的很少，image提交可能會出現提交兩次的問題）：

1 <form action="/example/html5/demo_form.asp" method="get">
2     First name: <input type="text" name="fname" /><br />
3     Last name: <input type="text" name="lname" /><br />
4     <input type="image" src="/i/eg_submit.jpg" alt="Submit" width="128" height="128"/>
5 </form>
6 
7 <p><b>註釋：</b>默認地，image 輸入類型會發生點擊圖像按鈕時的 X 和 Y 座標。</p>

　　輸出結果：

First name: 
Last name: 

註釋：默認地，image 輸入類型會發生點擊圖像按鈕時的 X 和 Y 座標。

（2）HTML5 <input>元素屬性

屬性 值 描述
accept mime_type 規定經過文件上傳來提交的文件的類型。
align
  • left
  • right
  • top
  • middle
  • bottom
 不同意使用。規定圖像輸入的對齊方式。
alt text 定義圖像輸入的替代文本。
autocomplete⭐
  • on
  • off
 規定是否使用輸入字段的自動完成功能。
autofocus⭐ autofocus

規定輸入字段在頁面加載時是否得到焦點。

（不適用於 type="hidden"）
checked checked 規定此 input 元素首次加載時應當被選中。
disabled disabled 當 input 元素加載時禁用此元素。
form⭐ formname 規定輸入字段所屬的一個或多個表單。
formaction⭐ URL

覆蓋表單的 action 屬性。

（適用於 type="submit" 和 type="image"）
formenctype⭐ 見註釋

覆蓋表單的 enctype 屬性。

（適用於 type="submit" 和 type="image"）
formmethod⭐
  • get
  • post

覆蓋表單的 method 屬性。

（適用於 type="submit" 和 type="image"）
formnovalidate⭐ formnovalidate

覆蓋表單的 novalidate 屬性。

若是使用該屬性，則提交表單時不進行驗證。
formtarget⭐
  • _blank
  • _self
  • _parent
  • _top
  • framename

覆蓋表單的 target 屬性。

（適用於 type="submit" 和 type="image"）
height⭐
  • pixels
  • %
 定義 input 字段的高度。（適用於 type="image"）
list⭐ datalist-id 引用包含輸入字段的預約義選項的 datalist 。
max⭐
  • number
  • date

規定輸入字段的最大值。

請與 "min" 屬性配合使用，來建立合法值的範圍。
maxlength⭐ number 規定輸入字段中的字符的最大長度。
min⭐
  • number
  • date

規定輸入字段的最小值。

請與 "max" 屬性配合使用，來建立合法值的範圍。
multiple⭐ multiple 若是使用該屬性，則容許一個以上的值。
name⭐ field_name 定義 input 元素的名稱。
pattern⭐ regexp_pattern

規定輸入字段的值的模式或格式。

例如 pattern="[0-9]" 表示輸入值必須是 0 與 9 之間的數字。
placeholder⭐ text 規定幫助用戶填寫輸入字段的提示。
readonly⭐ readonly 規定輸入字段爲只讀。
required⭐ required 指示輸入字段的值是必需的。
size⭐ number_of_char 定義輸入字段的寬度。
src⭐ URL 定義以提交按鈕形式顯示的圖像的 URL。
step⭐ number 規定輸入字的的合法數字間隔。
type⭐
  • button
  • checkbox
  • file
  • hidden
  • image
  • password
  • radio
  • reset（清空輸入的內容）
  • submit
  • text
  • 增長類型以下所示

規定 input 元素的類型。

注意file類型使用（一、<form>表單的method屬性（見本文第2節說明）值要是post，不受大小限制；二、要加enctype="multipart/form-data"屬性，即說明文件以二進制方式顯示、傳輸）：

 

1 <form  method="post" enctype="multipart/form-data">
2     <input type="file" name="fileField" />
3     <input type="submit" value="上傳" />
4 </form>

 
value value 規定 input 元素的值。
width⭐                                                          
  • pixels
  • %                                                                         
 定義 input 字段的寬度。（適用於 type="image"）                                             

增長：<input type="search"> 用於搜索字段（搜索字段的表現相似常規文本字段）

　　<input> 元素是最重要的表單元素。

　　<input> 元素有不少形態，根據不一樣的 type 屬性。

　　這是本章中使用的類型：

類型 描述
text（默認） 定義常規文本輸入。在<form>表單元素中，<input type="text">和<input>是相同的效果
radio 定義單選按鈕輸入（選擇多個選擇之一）
submit                                   定義提交按鈕（提交表單）                                                                                                                                                                                                                                             

　　增長類型：password：password 字段中的字符會被作掩碼處理（顯示爲星號或實心圓）。

　　增長類型：checkbox：定義複選框。複選框容許用戶在有限數量的選項中選擇零個或多個選項。

　　增長類型：button：定義按鈕。

　　增長類型：image

HTML5 輸入類型

　　HTML5 增長了多個新的輸入類型type屬性：

  • color：用於應該包含顏色的輸入字段。根據瀏覽器支持，顏色選擇器會出現輸入字段中。
  • date：用於應該包含日期的輸入字段。根據瀏覽器支持，日期選擇器會出現輸入字段中。
  • datetime：容許用戶選擇日期和時間（有時區）。根據瀏覽器支持，日期選擇器會出現輸入字段中。
  • datetime-local：容許用戶選擇日期和時間（無時區）。
  • email：用於應該包含電子郵件地址的輸入字段。
  • month：容許用戶選擇月份和年份。
  • number：用於應該包含數字值的輸入字段。您可以對數字作出限制。根據瀏覽器支持，限制可應用到輸入字段。
  • range：用於應該包含必定範圍內的值的輸入字段。根據瀏覽器支持，輸入字段可以顯示爲滑塊控件。
  • search：用於搜索字段（搜索字段的表現相似常規文本字段）。
  • tel：用於應該包含電話號碼的輸入字段。目前只有 Safari 8 支持 tel 類型。
  • time：容許用戶選擇時間（無時區）。根據瀏覽器支持，時間選擇器會出現輸入字段中。
  • url：用於應該包含 URL 地址的輸入字段。根據瀏覽器支持，在提交時可以自動驗證 url 字段。某些智能手機識別 url 類型，並向鍵盤添加 ".com" 以匹配 url 輸入。
  • week：容許用戶選擇周和年。根據瀏覽器支持，日期選擇器會出現輸入字段中。

　　註釋：老式 web 瀏覽器不支持的輸入類型，會被視爲輸入類型 text。

　　HTML5 爲 <input> 增長了以下屬性：

  • autocomplete：autocomplete 屬性規定表單或輸入字段是否應該自動完成。當自動完成開啓，瀏覽器會基於用戶以前的輸入值自動填寫值。提示：您能夠把表單的 autocomplete 設置爲 on，同時把特定的輸入字段設置爲 off，反之亦然。autocomplete 屬性適用於 <form> 以及以下 <input> 類型：text、search、url、tel、email、password、datepickers、range 以及 color。
  • autofocus：autofocus 屬性是布爾屬性。若是設置，則規定當頁面加載時 <input> 元素應該自動得到焦點。
  • form：form 屬性規定 <input> 元素所屬的一個或多個表單。提示：如需引用一個以上的表單，請使用空格分隔的表單 id 列表。
  • formaction：formaction 屬性規定當提交表單時處理該輸入控件的文件的 URL。formaction 屬性覆蓋 <form> 元素的 action 屬性。formaction 屬性適用於 type="submit" 以及 type="image"。
  • formenctype：formenctype 屬性規定當把表單數據（form-data）提交至服務器時如何對其進行編碼（僅針對 method="post" 的表單）。formenctype 屬性覆蓋 <form> 元素的 enctype 屬性。formenctype 屬性適用於 type="submit" 以及 type="image"。
  • formmethod：formmethod 屬性定義用以向 action URL 發送表單數據（form-data）的 HTTP 方法。formmethod 屬性覆蓋 <form> 元素的 method 屬性。formmethod 屬性適用於 type="submit" 以及 type="image"。
  • formnovalidate：novalidate 屬性是布爾屬性。若是設置，則規定在提交表單時不對 <input> 元素進行驗證。formnovalidate 屬性覆蓋 <form> 元素的 novalidate 屬性。formnovalidate 屬性可用於 type="submit"。
  • formtarget：formtarget 屬性規定的名稱或關鍵詞指示提交表單後在何處顯示接收到的響應。formtarget 屬性會覆蓋 <form> 元素的 target 屬性。formtarget 屬性可與 type="submit" 和 type="image" 使用。
  • height 和 width：height 和 width 屬性規定 <input> 元素的高度和寬度。height 和 width 屬性僅用於 <input type="image">。註釋：請始終規定圖像的尺寸。若是瀏覽器不清楚圖像尺寸，則頁面會在圖像加載時閃爍。
  • list：list 屬性引用的 <datalist> 元素中包含了 <input> 元素的預約義選項。
  • min 和 max：min 和 max 屬性規定 <input> 元素的最小值和最大值。min 和 max 屬性適用於如需輸入類型：number、range、date、datetime、datetime-local、month、time 以及 week。
  • multiple：multiple 屬性是布爾屬性。若是設置，則規定容許用戶在 <input> 元素中輸入一個以上的值。multiple 屬性適用於如下輸入類型：email 和 file。
  • pattern (regexp)：pattern 屬性規定用於檢查 <input> 元素值的正則表達式。pattern 屬性適用於如下輸入類型：text、search、url、tel、email、and password。提示：請使用全局的 title 屬性對模式進行描述以幫助用戶。提示：請在咱們的 JavaScript 教程中學習更多有關正則表達式的知識。
  • placeholder：placeholder 屬性規定用以描述輸入字段預期值的提示（樣本值或有關格式的簡短描述）。該提示會在用戶輸入值以前顯示在輸入字段中。placeholder 屬性適用於如下輸入類型：text、search、url、tel、email 以及 password。
  • required：required 屬性是布爾屬性。若是設置，則規定在提交表單以前必須填寫輸入字段。required 屬性適用於如下輸入類型：text、search、url、tel、email、password、date pickers、number、checkbox、radio、and file.
  • step：step 屬性規定 <input> 元素的合法數字間隔。示例：若是 step="3"，則合法數字應該是 -三、0、三、六、等等。提示：step 屬性可與 max 以及 min 屬性一同使用，來建立合法值的範圍。step 屬性適用於如下輸入類型：number、range、date、datetime、datetime-local、month、time 以及 week。

併爲 <form> 增長如需屬性：

  • autocomplete：（上述重複）
  • novalidate：novalidate 屬性屬於 <form> 屬性。若是設置，則 novalidate 規定在提交表單時不對錶單數據進行驗證。

1.2 文本輸入

　　<input type="text"> 定義用於文本輸入的單行輸入字段：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <!--<meta charset="utf-8">-->
 5         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 6         <meta http-equiv="Content-Language" content="zh-cn" />
 7         <title>My test page</title>
 8         
 9     </head>
10     
11     <body>
12 
13         <form>
14             Text input 1:<br />
15             <input type="text" name="textinput1"></input>
16             <br />
17             Text input 2:<br />
18             <input type="text" name="textinput2"></input>
19         </form>
20         
21         <br />
22         <form>
23             Text input 3:
24             <input type="text" name="textinput3"></input>
25             <br />
26             Text input 4:
27             <input type="text" name="textinput4"></input>
28         </form>
29         
30     </body>
31 </html>

　　輸出結果：

Text input 1:

Text input 2:

 

Text input 3:
Text input 4:

 　　註釋：表單自己並不可見。還要注意文本字段的默認寬度是 20 個字符。

1.3 密碼輸入

　　<input type="password">，password 字段中的字符會被作掩碼處理（顯示爲星號或實心圓）。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <!--<meta charset="utf-8">-->
 5         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 6         <meta http-equiv="Content-Language" content="zh-cn" />
 7         <title>My test page</title>
 8         
 9     </head>
10     
11     <body>
12 
13         <form>
14             Text input 1:<br />
15             <input type="text" name="textinput1"></input>
16             <br />
17             Password input 2:<br />
18             <input type="password" name="psd"></input>
19         </form>
20 
21     </body>
22 </html>

　　輸出結果：

 Text input 1:

Password input 2:

1.4 單選按鈕輸入

　　<input type="radio"> 定義單選按鈕。

　　單選按鈕容許用戶在有限數量的選項中選擇其中之一（<input type="radio">增長name屬性，name相同的radio即爲一組，增長checked屬性爲默認選中的意思）：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <!--<meta charset="utf-8">-->
 5         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 6         <meta http-equiv="Content-Language" content="zh-cn" />
 7         <title>My test page</title>
 8         
 9     </head>
10     
11     <body>
12 
13         <form>
14             <input type="radio" name="sex" value="male" checked>Male</input>
15             <br />
16             <input type="radio" name="sex" value="female">Female</input>
17         </form>
18         
19     </body>
20 </html>

　　checked屬性能夠寫成checked或者checked="checked"。

　　輸出結果：

Male
Female 

1.5 複選按鈕Checkbox

　　<input type="checkbox"> 定義複選框。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <!--<meta charset="utf-8">-->
 5         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 6         <meta http-equiv="Content-Language" content="zh-cn" />
 7         <title>My test page</title>
 8         
 9     </head>
10     
11     <body>
12 
13         <form action="/demo/demo_form.asp">
14             <input type="checkbox" name="vehicle" value="Bike">I have a bike 15             <br>
16             <input type="checkbox" name="vehicle" value="Car">I have a car 
17             <br><br>
18             <input type="submit">
19         </form> 
20 
21     </body>
22 </html>

　　輸出結果：

I have a bike
I have a car

1.6 提交按鈕

　　<input type="submit"> 定義用於向表單處理程序（form-handler）提交表單的按鈕。

　　表單處理程序一般是包含用來處理輸入數據的腳本的服務器頁面。

　　表單處理程序在表單的 action 屬性中指定：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <!--<meta charset="utf-8">-->
 5         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 6         <meta http-equiv="Content-Language" content="zh-cn" />
 7         <title>My test page</title>
 8         
 9     </head>
10     
11     <body>
12 
13         <form action="action_page.php">
14             Text input 1
15             <input type="text" name="textinput1" value="Mickey"></input>    <!--value爲顯示默認值-->
16             <br />
17             Text input 2
18             <input type="text" name="textinput2" value="Mouse"></input>     <!--value爲顯示默認值-->
19             <br /><br />
20             <input type="submit" value="Submit"></input>
21         </form>
22         
23     </body>
24 </html>

　　輸出結果：

Text input 1
Text input 2

1.7 <button> 元素

　　<button> 元素定義可點擊的按鈕：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <!--<meta charset="utf-8">-->
 5         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 6         <meta http-equiv="Content-Language" content="zh-cn" />
 7         <title>My test page</title>
 8         
 9     </head>
10     
11     <body>        
12         <form>
13             <button type="button" onclick='alert("Hello, world!")'>Click Me!</button>
14         </form>
15         
16     </body>
17 </html>

　　輸出結果（點擊「Click Me!」按鈕後，會出現網頁中的alert提示）：

1.8 HTML5新增輸入類型

（1）輸入類型：number

　　<input type="number"> 用於應該包含數字值的輸入字段。

　　您可以對數字作出限制。

　　根據瀏覽器支持，限制可應用到輸入字段。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <!--<meta charset="utf-8">-->
 5         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 6         <meta http-equiv="Content-Language" content="zh-cn" />
 7         <title>My test page</title>
 8         
 9     </head>
10     
11     <body>
12         <p>
13         根據瀏覽器支持：<br>
14         數值約束會應用到輸入字段中。
15         </p>
16         
17         <form action="/demo/demo_form.asp">
18           數量（1 到 5 之間）：
19           <input type="number" name="quantity" min="1" max="5">
20           <br />
21           Quantity: 
22           <input type="number" name="points" min="0" max="100" step="10" value="30">
23           <br />
24           <input type="submit">
25         </form>
26     
27         <p><b>註釋：</b>IE9 及早期版本不支持 type="number"。</p>
28     </body>
29 </html>

　　輸出結果：

根據瀏覽器支持：
數值約束會應用到輸入字段中。

數量（1 到 5 之間）：
Quantity:

　　註釋：IE9 及早期版本不支持 type="number"。

（2）輸入類型：date

　　<input type="date"> 用於應該包含日期的輸入字段。

　　根據瀏覽器支持，日期選擇器會出現輸入字段中。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <!--<meta charset="utf-8">-->
 5         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 6         <meta http-equiv="Content-Language" content="zh-cn" />
 7         <title>My test page</title>
 8         
 9     </head>
10     
11     <body>
12         <p>
13             根據瀏覽器支持：<br>
14             當您填寫輸入字段時會彈出日期選擇器。
15         </p>
16 
17         <form action="/demo/demo_form.asp">
18             生日：
19             <input type="date" name="bday">
20             <br />
21             Enter a date before 1980-01-01:
22             <input type="date" name="bday" max="1979-12-31"><br />
23             Enter a date after 2000-01-01:
24             <input type="date" name="bday" min="2000-01-02"><br />
25             <input type="submit">
26         </form>
27 
28         <p><b>註釋：</b>Firefox 或者
29             Internet Explorer 11 以及更早版本不支持 type="date"。</p>
30     </body>
31 </html>

　　輸出結果：

根據瀏覽器支持：
當您填寫輸入字段時會彈出日期選擇器。

生日：
Enter a date before 1980-01-01:
Enter a date after 2000-01-01:

　　註釋：Firefox 或者 Internet Explorer 11 以及更早版本不支持 type="date"。

（3）輸入類型：color

　　<input type="color"> 用於應該包含顏色的輸入字段。

　　根據瀏覽器支持，顏色選擇器會出現輸入字段中。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <!--<meta charset="utf-8">-->
 5         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 6         <meta http-equiv="Content-Language" content="zh-cn" />
 7         <title>My test page</title>
 8         
 9     </head>
10     
11     <body>
12         <p>
13             Depending on browser support:<br>
14             A color picker can pop-up when you enter the input field.
15         </p>
16 
17         <form action="action_page.php">
18             Select your favorite color:
19             <input type="color" name="favcolor" value="#ff0000">
20             <input type="submit">
21         </form>
22 
23         <p><b>Note:</b> type="color" is not supported in Internet Explorer.</p>
24     </body>
25 </html>

　　輸出結果：

Depending on browser support:
A color picker can pop-up when you enter the input field.

Select your favorite color:

　　註釋：type="color" is not supported in Internet Explorer.

（4）輸入類型：range

　　<input type="range"> 用於應該包含必定範圍內的值的輸入字段。

　　根據瀏覽器支持，輸入字段可以顯示爲滑塊控件。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <!--<meta charset="utf-8">-->
 5         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 6         <meta http-equiv="Content-Language" content="zh-cn" />
 7         <title>My test page</title>
 8         
 9     </head>
10     
11     <body>
12         <p>
13             根據瀏覽器支持：<br>
14             輸入類型 "range" 可顯示爲滑動控件。
15         </p>
16 
17         <form action="/demo/demo_form.asp" method="get">
18             Points:
19             <input type="range" name="points" min="0" max="10">
20             <input type="submit">
21         </form>
22 
23         <p><b>註釋：</b>IE9 及早期版本不支持 type="range"。</p>
24     </body>
25 </html>

　　輸出結果：

根據瀏覽器支持：
輸入類型 "range" 可顯示爲滑動控件。

Points:

　　註釋：IE9 及早期版本不支持 type="range"。

（5）輸入類型：month

　　<input type="month"> 容許用戶選擇月份和年份。

　　根據瀏覽器支持，日期選擇器會出現輸入字段中。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <!--<meta charset="utf-8">-->
 5         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 6         <meta http-equiv="Content-Language" content="zh-cn" />
 7         <title>My test page</title>
 8         
 9     </head>
10     
11     <body>
12         <p>
13             根據瀏覽器支持：<br>
14             當您填寫輸入字段時會彈出日期選擇器。
15         </p>
16 
17         <form action="/demo/demo_form.asp">
18             生日（月和年）：
19             <input type="month" name="bdaymonth">
20             <input type="submit">
21         </form>
22 
23         <p><b>註釋：</b>Firefox 或者
24             Internet Explorer 11 以及更早版本不支持 type="month"。</p>
25     </body>
26 </html>

　　輸出結果：

根據瀏覽器支持：
當您填寫輸入字段時會彈出日期選擇器。

生日（月和年）：

　　註釋：Firefox 或者 Internet Explorer 11 以及更早版本不支持 type="month"。

（6）輸入類型：week

　　<input type="week"> 容許用戶選擇周和年。

　　根據瀏覽器支持，日期選擇器會出現輸入字段中。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <!--<meta charset="utf-8">-->
 5         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 6         <meta http-equiv="Content-Language" content="zh-cn" />
 7         <title>My test page</title>
 8         
 9     </head>
10     
11     <body>
12         <p>
13             根據瀏覽器支持：<br>
14             當您填寫輸入字段時會彈出日期選擇器。
15         </p>
16 
17         <form action="action_page.php">
18             Select a week:
19             <input type="week" name="year_week">
20             <input type="submit">
21         </form>
22 
23         <p><b>註釋：</b>
24             Internet Explorer 不支持 type="week"。</p>
25     </body>
26 </html>

　　輸出結果：

根據瀏覽器支持：
當您填寫輸入字段時會彈出日期選擇器。

Select a week:

　　註釋： Internet Explorer 不支持 type="week"。

（7）輸入類型：time（無時區）

　　<input type="time"> 容許用戶選擇時間（無時區）。

　　根據瀏覽器支持，時間選擇器會出現輸入字段中。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <!--<meta charset="utf-8">-->
 5         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 6         <meta http-equiv="Content-Language" content="zh-cn" />
 7         <title>My test page</title>
 8         
 9     </head>
10     
11     <body>
12         <p>
13             根據瀏覽器支持：<br>
14             當您填寫輸入字段時會彈出日期選擇器。
15         </p>
16 
17         <form action="/demo/demo_form.asp">
18             請選取一個時間：
19             <input type="time" name="usr_time">
20             <input type="submit">
21         </form>
22 
23         <p><b>註釋：</b>Firefox 或者
24             Internet Explorer 11 以及更早版本不支持 type="time"。</p>
25     </body>
26 </html>

　　輸出結果：

根據瀏覽器支持：
當您填寫輸入字段時會彈出日期選擇器。

請選取一個時間：

　　註釋：Firefox 或者 Internet Explorer 11 以及更早版本不支持 type="time"。

（8）輸入類型：datetime（有時區）

　　<input type="datetime"> 容許用戶選擇日期和時間（有時區）。

　　根據瀏覽器支持，日期選擇器會出現輸入字段中。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <!--<meta charset="utf-8">-->
 5         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 6         <meta http-equiv="Content-Language" content="zh-cn" />
 7         <title>My test page</title>
 8         
 9     </head>
10     
11     <body>
12         <p>
13             根據瀏覽器支持：<br>
14             當您填寫輸入字段時會彈出日期選擇器。
15         </p>
16 
17         <form action="action_page.php">
18             生日（日期和時間）：
19             <input type="datetime" name="bdaytime">
20             <input type="submit">
21         </form>
22 
23         <p><b>註釋：</b>Chrome、Firefox 或 Internet Explorer 不支持 type="datetime"。</p>
24     </body>
25 </html>

　　輸出結果：

根據瀏覽器支持：
當您填寫輸入字段時會彈出日期選擇器。

生日（日期和時間）：

　　註釋：Chrome、Firefox 或 Internet Explorer 不支持 type="datetime"。

（9）輸入類型：datetime-local（無時區）

　　<input type="datetime-local"> 容許用戶選擇日期和時間（無時區）。

　　根據瀏覽器支持，日期選擇器會出現輸入字段中。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <!--<meta charset="utf-8">-->
 5         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 6         <meta http-equiv="Content-Language" content="zh-cn" />
 7         <title>My test page</title>
 8         
 9     </head>
10     
11     <body>
12         <p>
13             根據瀏覽器支持：<br>
14             當您填寫輸入字段時會彈出日期選擇器。
15         </p>
16 
17         <form action="/demo/demo_form.asp">
18             生日（日期和時間）：
19             <input type="datetime-local" name="bdaytime">
20             <input type="submit" value="Send">
21         </form>
22 
23         <p><b>註釋：</b>Firefox 或者
24             Internet Explorer 不支持 type="datetime-local"。</p>
25     </body>
26 </html>

　　輸出結果：

根據瀏覽器支持：
當您填寫輸入字段時會彈出日期選擇器。

生日（日期和時間）：

　　註釋：Chrome、Firefox 或 Internet Explorer 不支持 type="datetime"。

（10）輸入類型：email

　　<input type="email"> 用於應該包含電子郵件地址的輸入字段。

　　根據瀏覽器支持，可以在被提交時自動對電子郵件地址進行驗證。

　　某些智能手機會識別 email 類型，並在鍵盤增長 ".com" 以匹配電子郵件輸入。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <!--<meta charset="utf-8">-->
 5         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 6         <meta http-equiv="Content-Language" content="zh-cn" />
 7         <title>My test page</title>
 8         
 9     </head>
10     
11     <body>
12         <form action="/demo/demo_form.asp">
13             E-mail:
14             <input type="email" name="email">
15             <input type="submit">
16         </form>
17 
18         <p>
19             <b>註釋：</b>IE9 及更早版本不支持 type="email"。</p>
20     </body>
21 </html>

　　輸出結果：

E-mail:

　　註釋：IE9 及更早版本不支持 type="email"。

（11）輸入類型：search

　　<input type="search"> 用於搜索字段（搜索字段的表現相似常規文本字段）。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <!--<meta charset="utf-8">-->
 5         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 6         <meta http-equiv="Content-Language" content="zh-cn" />
 7         <title>My test page</title>
 8         
 9     </head>
10     
11     <body>
12         <form action="/demo/demo_form.asp">
13             搜索谷歌：
14             <input type="search" name="googlesearch">
15             <input type="submit">
16         </form>
17     </body>
18 </html>

　　輸出結果：

搜索谷歌：

（12）輸入類型：tel

　　<input type="tel"> 用於應該包含電話號碼的輸入字段。

　　目前只有 Safari 8 支持 tel 類型。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <!--<meta charset="utf-8">-->
 5         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 6         <meta http-equiv="Content-Language" content="zh-cn" />
 7         <title>My test page</title>
 8         
 9     </head>
10     
11     <body>
12         <form action="action_page.php">
13             Telephone:
14             <input type="tel" name="usrtel">
15             <input type="submit">
16         </form>
17 
18         <p><b>註釋：</b>Safari 8 及更新版本支持 type="tel"。</p>
19     </body>
20 </html>

　　輸出結果：

Telephone:

　　註釋：Safari 8 及更新版本支持 type="tel"。

（13）輸入類型：url

　　<input type="url"> 用於應該包含 URL 地址的輸入字段。

　　根據瀏覽器支持，在提交時可以自動驗證 url 字段。

　　某些智能手機識別 url 類型，並向鍵盤添加 ".com" 以匹配 url 輸入。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <!--<meta charset="utf-8">-->
 5         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 6         <meta http-equiv="Content-Language" content="zh-cn" />
 7         <title>My test page</title>
 8         
 9     </head>
10     
11     <body>
12         <form action="action_page.php">
13             請添加您的首頁：
14             <input type="url" name="homepage">
15             <input type="submit">
16         </form>
17 
18         <p><b>Note:</b>IE9 及其更早版本不支持 type="url"。</p>
19     </body>
20 </html>

　　輸出結果：

請添加您的首頁：

　　註釋：IE9 及其更早版本不支持 type="url"。

二、HTML <Form> 提交方法屬性（須要指定name屬性）

method（見本文第2節說明）                                  
  • get（默認的提交方式）
  • post                                                            
 規定用於發送 form-data 的 HTTP 方法。                                                                

　　提示：表單域須要間name屬性才能夠把數據提交到服務器（只有不想提交的纔不寫name屬性，如button）。

2.1 post方式和get方式的區別

（1）安全性：

  • get方式不夠安全，以url方式提交
  • post方式以請求實體提交，不會顯示在地址欄，相對安全

（2）提交大小限制

  • get方式提交的內容大小有限，一個地址欄放不了多少東西，1K左右
  • post方式提交的內容大小無限制，能夠放大文件（如音頻、視頻、圖像等）

　　默認採用的是get提交方式：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 6         <meta http-equiv="Content-Language" content="zh-cn" />
 7         <title>My test page</title>
 8         
 9         <script src="jquery-3.3.1.js"></script>
10         <script type="text/javascript">
11         </script>
12         
13         <style type="text/css">
14         </style>
15 
16     </head>
17     
18     <body>
19         <form method="get">　　　　<!--等價於<form>，由於method屬性默認爲get方式-->
20             Username: <input type="text" name="Name">
21             Password: <input type="password" name="Pwd">
22             
23             <input type="submit">
24         </form>
25     </body>
26 </html>

　　輸出結果（當輸入用戶名和密碼，點擊提交後，在網頁的上方能夠看到提交的內容）：

　　輸入用戶名和密碼提交後：

三、<select> 元素（下拉列表）

　　<select> 元素定義下拉列表：

　　<option> 元素定義待選擇的選項。

　　列表一般會把首個選項顯示爲被選選項。

　　您可以經過添加 selected 屬性來定義預約義選項。

<form>元素中下拉列表<select>元素的屬性：

屬性 值 描述
autofocus⭐ autofocus 規定在頁面加載後文本區域自動得到焦點。
disabled disabled 規定禁用該下拉列表。
form⭐ form_id 規定文本區域所屬的一個或多個表單。
multiple multiple 規定可選擇多個選項。
name name 規定下拉列表的名稱。
required⭐ required 規定文本區域是必填的。
size                                    number                                        規定下拉列表中可見選項的數目。                                                                                                                                                                                                       

<form>元素中下拉列表<select>元素中的<option>屬性：

屬性 值 描述
disabled disabled 規定此選項應在首次加載時被禁用。
label text 定義當使用 <optgroup> 時所使用的標註。
selected selected 規定選項（在首次顯示在列表中時）表現爲選中狀態。
value                                  text                                             定義送往服務器的選項值。                                                                                                                                                                                                               

註釋：<option> 標籤能夠在不帶有任何屬性的狀況下使用，可是一般須要使用 value 屬性，此屬性會指示出被送往服務器的內容。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <!--<meta charset="utf-8">-->
 5         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 6         <meta http-equiv="Content-Language" content="zh-cn" />
 7         <title>My test page</title>
 8         
 9     </head>
10     
11     <body>
12     
13         <p>您能夠經過 selected 屬性預選擇某些選項。</p>
14         
15         <form action="/demo/demo_form.asp">
16             <select name="cars">
17                 <option value="volvo">Volvo</option>
18                 <option value="saab">Saab</option>
19                 <option value="fiat">Fiat</option>
20                 <option value="audi">Audi</option>
21             </select>
22             <br /><br />
23             <input type="submit" value="Submit"></input>
24         </form>
25         
26     </body>
27 </html>

　　輸出結果：

您能夠經過 selected 屬性預選擇某些選項。



　　<optgroup>爲<option>分組，經過<optgroup>的label屬性制定分組的名稱：

 1 <form>
 2     <select name="" id="">
 3         <optgroup label="中國">
 4             <option value="1">上海</option>
 5             <option value="2" disabled="disabled">北京</option>            <!--置灰，不可選-->
 6             <option value="3" selected="selected">深圳</option>            <!--默認選中-->
 7         </optgroup>
 8         
 9         <optgroup label="外國">
10             <option value="4">美國</option>
11             <option value="5">英國</option>
12             <option value="6">法國</option>
13         </optgroup>
14     </select>
15 </form>

　　輸出結果：

四、<textarea> 元素

<textarea>多行文本（多行文本域）

　　標籤訂義多行的文本輸入，文本區中可容納無限數量的文本，能夠經過cols和rows屬性來規定textarea的尺寸，不過最好的辦法是使用CSS的height和width屬性。textarea中間有空格即認爲有內容，就會使得required屬性失效（若是配置required屬性的話）。

屬性 值 描述
autofocus⭐ autofocus 規定在頁面加載後文本區域自動得到焦點。
cols number 規定文本區內的可見寬度。
disabled disabled 規定禁用該文本區。
form⭐ form_id 規定文本區域所屬的一個或多個表單。
maxlength⭐ number 規定文本區域的最大字符數。
name name_of_textarea 規定文本區的名稱。
placeholder⭐ text 規定描述文本區域預期值的簡短提示。
readonly readonly 規定文本區爲只讀。
required⭐ required 規定文本區域是必填的。
rows number 規定文本區內的可見行數。
wrap⭐                                
  • hard
  • soft                                   
 規定當在表單中提交時，文本區域中的文本如何換行。                                                                                                                                                                             

提示：能夠經過 <textarea> 標籤的 wrap 屬性設置文本輸入區內的換行模式。有關 wrap 屬性的詳細信息。註釋：在文本輸入區內的文本行間，用 "%OD%OA" （回車/換行）進行分隔。

　　<textarea> 元素定義多行輸入字段（文本域）：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <!--<meta charset="utf-8">-->
 5         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 6         <meta http-equiv="Content-Language" content="zh-cn" />
 7         <title>My test page</title>
 8         
 9     </head>
10     
11     <body>
12     
13         <p>您能夠經過 selected 屬性預選擇某些選項。</p>
14         
15         <form>
16             <!--<textarea></textarea>中間的內容即爲textarea中顯示的內容，保留空格-->
17             <textarea name="message" rows="10" cols="30">
18 　　　　　　　　　　The cat was playing in the garden.
19             </textarea>
20             
21         </form>
22         
23     </body>
24 </html>

　　輸出結果：

您能夠經過 selected 屬性預選擇某些選項。

五、HTML5 表單元素

　　HTML5 增長了以下表單元素：

  • <datalist>
  • <keygen>
  • <output>

　　註釋：默認地，瀏覽器不會顯示未知元素。新元素不會破壞您的頁面。

六、HTML5 <datalist> 元素

　　舉例（經過 <datalist> 設置預約義值的 <input> 元素）：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <!--<meta charset="utf-8">-->
 5         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 6         <meta http-equiv="Content-Language" content="zh-cn" />
 7         <title>My test page</title>
 8         
 9     </head>
10     
11     <body>        
12         <form action="/demo/demo_form.asp">
13             <input list="browsers" name="browser">
14             <datalist id="browsers">
15                 <option value="Internet Explorer">
16                 <option value="Firefox">
17                 <option value="Chrome">
18                 <option value="Opera">
19                 <option value="Safari">
20             </datalist>
21             <input type="submit">
22         </form>
23         
24     </body>
25 </html>

　　輸出結果：

七、綜合舉例

 　　舉例：

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="utf-8">
  5         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  6         <meta http-equiv="Content-Language" content="zh-cn" />
  7         <title>My test page</title>
  8         
  9         <script src="jquery-3.3.1.js"></script>
 10 
 11     </head>
 12     
 13     <body>
 14         <form>
 15             <table>
 16                 <tr>
 17                     <td>用戶名：</td>
 18                     <td><input type="text"></input></td>
 19                 </tr>
 20                 <tr>
 21                     <td>密碼：</td>
 22                     <td><input type="password"></input></td>
 23                 </tr>
 24                 <tr>
 25                     <td>確認密碼：</td>
 26                     <td><input type="password"></input></td>
 27                 </tr>                
 28                 <tr>
 29                     <td>請選擇城市：</td>
 30                     <td>
 31                         <form action="">
 32                             <select name="citys">
 33                                 <option value="Shanghai">上海</option>
 34                                 <option value="Beijing">北京</option>
 35                                 <option value="Shenzhen">深圳</option>
 36                                 <option value="Hefei">合肥</option>
 37                             </select>
 38                         </form>
 39                     </td>
 40                 </tr>
 41                 <tr>
 42                     <td>請選擇性別：</td>
 43                     <td>
 44                         <!-- <form> -->
 45                             <label for="male">Male</label>
 46                             <input type="radio" name="sex" id="male" />
 47                             <label for="female">Female</label>
 48                             <input type="radio" name="sex" id="female" />
 49                             <label for="uncertain">Uncertain</label>
 50                             <input type="radio" name="sex" id="uncertain" />
 51                         <!-- </form> -->
 52                     </td>
 53                 </tr>
 54                 <tr>
 55                     <td>請選擇職業：</td>
 56                     <td>
 57                         <!-- <form> -->
 58                             學生<input type="radio" name="career">
 59                             教師<input type="radio" name="career">
 60                             其餘<input type="radio" name="career">
 61                         <!-- </form> -->
 62                     </td>
 63                 </tr>
 64                 <tr>
 65                     <td>請選擇愛好：</td>
 66                     <td>
 67                         <!-- <form> -->
 68                             <fieldset>
 69                                 <legend>你的愛好</legend>
 70                                     <label for="basketball">籃球</label>
 71                                     <input type="checkbox" name="hobby" id="basketball">
 72                                     <label for="run">跑步</label>
 73                                     <input type="checkbox" name="hobby" id="run">
 74                                     <label for="reading">閱讀</label>
 75                                     <input type="checkbox" name="hobby" id="reading"> 
 76                                     <label for="surfTheInternet">上網</label>
 77                                     <input type="checkbox" name="hobby" id="surfTheInternet">                                         
 78                             </fieldset>
 79                         <!-- </form> -->
 80                     </td>
 81                 </tr>
 82                 <tr>
 83                     <td>備註：</td>
 84                     <td>
 85                         <!-- <form> -->
 86                             <input type="textarea" placeholder="這裏是備註內容">
 87                         <!-- </form> -->
 88                     </td>
 89                 </tr>
 90                 <tr>
 91                     <td></td>
 92                     <td>
 93                         <input type="submit" value="提交">
 94                         <input type="reset" value="重置">
 95                     </td>
 96                 </tr>
 97             </table>
 98         </form>
 99         
100     </body>
101 </html>

 　　輸出結果：

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程