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

本文轉載自查看原文 2018-10-14 11:26 1404 Web開發（HTML）

參考：

參考：http://www.w3school.com.cn/html/html_forms.asp

目錄：

1、<form> 元素
2、HTML <Form> 提交方法屬性（需要指定name屬性）
- 2.1 post方式和get方式的區別
3、<select> 元素（下拉列表）
4、<textarea> 元素
5、HTML5 表單元素
6、HTML5 <datalist> 元素
7、綜合舉例

　　HTML 表單用於搜集不同類型的用戶輸入。

1、<form> 元素

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

　　<form> 元素定義 HTML 表單。

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

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

　　表單還可以包含 menus、textarea、fieldset、legend 和 label 元素（<label>元素一般與<input type="radio">和<input type="checkbox">結合使用較多）。

<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> 元素（輸入屬性）

參考：http://www.w3school.com.cn/html/html_form_attributes.asp

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

　　輸出結果：

注釋：默認地，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類型使用（1、<form>表單的method屬性（見本文第2節說明）值要是post，不受大小限制；2、要加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"，則合法數字應該是 -3、0、3、6、等等。提示：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>

　　輸出結果：

　　注釋：表單本身並不可見。還要注意文本字段的默認寬度是 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>

　　輸出結果：

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

　　注釋：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>

　　輸出結果：

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

　　注釋：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.

　　注釋：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" 可顯示為滑動控件。

　　注釋：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>

　　輸出結果：

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

　　注釋： 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>

　　輸出結果：

　　注釋：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>

　　輸出結果：

　　注釋：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"。

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

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

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>

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

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

3、<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>

　　輸出結果：

4、<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 屬性預選擇某些選項。

5、HTML5 表單元素

　　HTML5 增加了如下表單元素：

<datalist>
<keygen>
<output>

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

6、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>

　　輸出結果：

7、綜合舉例

　　舉例：

  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>

　　輸出結果：

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 html下拉列表並設置其不能輸入 HTML基礎 select selected 下拉列表的默認值 HTML中下拉列表支持多選表單下拉列表、多行文本、隱藏域 HTML下拉列表框 HTML基礎 select size 下拉列表顯示的個數 HTML表格中套兩個下拉列表 [html/js]點擊標題出現下拉列表 js進階 9-10 html中如何遍歷下拉列表 HTML基礎（表單和輸入，框架）