歡迎光臨
你好
我是阿ken
文章目錄
- 7.1_認識表單
- 7.2_表單屬性
- 7.3_input 元素及屬性
-
- 7.3.1_input 元素的 type 屬性
-
- (1) 單行文本輸入框 < input type="text"/>
- (2) 密碼輸入框 < input type="password"/>
- (3) 單選按鈕 < input type="radio"/>
- (4) 複選框 < input type="checkbox"/>
- (5) 普通按鈕 < input type="button"/>
- (6) 提交按鈕 < input type="submit"/>
- (7) 重置按鈕 < input type="reset" />
- (8) 圖像形式的提交按鈕 < input type= "image" />
- (9) 隱藏域 < input type=" hidden" />
- (10) 文件域 < input type="file" />
- (11) email 類型 < input type="email" />
- (12) url 類型 < input type="url" />
- (13) tel 類型 < input type="tel" />
- (14) search 類型 < input type="search" />
- (15) color 類型 < input type="color" />
- (16) number 類型 < input type="number" />
- (17) range 類型 < input type= "range" />
- (18) Date pickers 類型< input type= "date, month, week..." />
- 7.3.2_input 元素的其他屬性
- 7.4 其他表單元素
- 7.5 CSS 控制表單樣式
想做個無畏的騎士
那也要做個沉着謹慎有腦子的騎士
7.1_認識表單
對於 " 表單 " 讀者可能比較陌生，其實它們在互聯網上隨處可見，如註冊頁面中的用戶名和密碼輸入、性別選擇、提交按鈕等都是用表單相關的標記定義的。簡單地說，" 表單 " 是網頁上用於輸入信息的區域，用來實現網頁與用戶的交互、溝通。接下來我們將帶領讀者認識並創建表單。
7.1.1_表單的構成
在網頁中，一個完整的表單通常由表單控件 (也稱爲表單元素)、提示信息和表單域 3 個部分構成。
對於表單構成中的表單控件、提示信息和表單域的具體解釋如下：
-
表單控件: 包含了具體的表單功能項，如單行文本輸入框、密碼輸入框、複選框、提交按鈕、搜索框等。
-
提示信息: 一個表單中通常還需要包含一些說明性的文字，提示用戶進行填寫和操作。
-
表單域: 相當於一個容器，用來容納所有的表單單控件和提示信息，可以通過它定義、處理表單數據所用程序的 url 地址及數據提交到服務器的方法。如果不定義表單域，表單中的數據就無法傳送到後臺服務器。
7.1.2_創建表單 ( < form> 標記 )
在 HTML5 中，< form> < /form> 標記被用於定義表單域，即創建一個表單，以實現用戶信息的收集和傳遞，< form> < /form> 中的所有內容都會被提交給服務器。創建表單的基本語法格式如下：
<form action="url地址" method="提交方式" name="表單名稱">
<!--各種表單控件-->
</form>
在上面的語法中，< form> 與 < /form> 之間的表單控件是由用戶自定義的，action、method 和 name 爲表單標記 < form> 的常用屬性，分別用於定義 url 地址、提交方式及表單名稱。
案例：演示表單的創建，
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>創建表單</title>
</head>
<body>
<form action="http://www.mysite.cn/index.asp" method="post">
<!--表單域-->
賬號: <!--提示信息-->
<input type="text" name="zhanghao" /> <!--表單控件-->
密碼: <!--提示信息-->
<input type="password" name="mima"/> <!--表單控件-->
<input type="submit" value="提交"/> <!--表單控件-->
</form>
</body>
</html>
上述代碼運行結果即爲一個完整的表單結構，對於其中的表單標記和標記的屬性，在本章後面的小節中將會具體講解，這裏瞭解即可。
7.2_表單屬性
在 HTML5 中，表單擁有多個屬性，通過設置表單屬性可以實現提交方式、自動完成、表單驗證等不同的表單功能。
接下來我們將對 form 標記的的相關屬性進行講解，具體如下。
1. action 屬性
_
在表單收集到信息後，需要將信息傳遞給服務器進行處理，action 屬性用於指定接收並處理表單數據的服務器程序的 url 地址。例如:
<form action="form_action.asp">
表示當提交表單時，表單數據會傳送到名爲 " form_action.asp " 的頁面去處理。
action 的屬性值可以是相對路徑或絕對路徑，還可以爲接收數據的 E-mail 郵箱地址。
例如:
<form action=mailto: [email protected]>
表示當提交表單時，表單數據會以電子郵件的形式傳通出去。
2. method 屬性
_
method 屬性用於設置表單數據的提交方式，其取值爲 get 或 post。在 HTML5 中，可以通過 form 標記的 method 屬性指明表單處理服務器處理數據的方法，示例代碼如下。
_
<form action="form_action.asp" method="get">
在上面的代碼中，get 爲 method 屬性的默認值，採用 get 方法，瀏覽器會與表單處理服務器建立連接，然後直接在一個傳輸步驟中發送所有的表單數據。
如果採用 post 方法，瀏覽器將會按照下面兩步來發送數據。首先，瀏覽器將與 action 屬性中指定的表單處理服務器建立聯繫，然後，瀏覽器按分段傳輸的方法將數據發送給服務器。
另外，採用 get 方法提交的數據將顯示在瀏覽器的地址欄中，保密性差，且有數據量的限制。而 post 方式的保密性好，並且無數據量的限制，所以使用 method= " post " 可以大量的提交數據。
3. name 屬性
_
name 屬性用於指定表單的名稱，以區分同一個頁面中的多個表單。
4. autocomplete 屬性
_
autocomplete 屬性用於指定表單是否有自動完成功能。所謂 " 自動完成 " 是指將表單控件輸入的內容記錄下來， 當再次輸入時，會將輸入的歷史記錄顯示在一個下拉列表裏，以實現自動完成輸入。
_
autocomplete 屬性有 2 個值，對它們的解釋如下：
-
on: 表單有自動完成功能。
-
of: 表單無自動完成功能。
案例：爲頁面中的 < form> 標記指定 autocomplete 屬性，並將該屬性的值指定爲 on，
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>autocomplete 屬性的使用</title>
</head>
<body>
<form id="forBox" autocomplete="on">
用戶名: <input type="text" id="autofirst" name="autofirst"/><br/><br/>
暱 稱:<input type="text" id="autosecond" name="autosecond" /><br/><br/>
<input type="submit" value="提交"/>
</form>
</body>
</html>
運行後效果如圖7-4所示。
這時，在 " 用戶名 " 的文本輸入框中輸入 " 12221 " 單擊 " 提交 " 按鈕。然後，再單擊 " 用戶名 " 文本輸入框時，效果如圖所示：
通過上圖可以看出，設置 autocomplete 屬性值爲 " on " 可以使表單控件擁有自動完成功能。值得一提的是， autocomplete 屬性不僅可以用於 form 元素，還可以用於所有輸入類型的 input 元素。
5. novalidate 屬性
novalidate 屬性指定在提交表單時取消對錶單進行有效的檢查。爲表單設置該屬性時，可以關閉整個表單的驗證，這樣可以使 form 內的所有表單控件不被驗證。
案例：演示 novalidate 屬性的用法，
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> novalidate 屬性取消表單驗證</title>
</head>
<body>
<form action="form_action.asp" method="get" novalidate="true">
請輸入電子郵件地址:
<input type="email" name="user_email"/>
<input type="submit" value="提交"/>
</form>
</body>
</html>
在上述代碼中，對 form 標記應用 " novalidate = " true " 樣式，來取消表單驗證。
運行上述案例，並在文本框中輸入郵件地址 " 123456 " 此時，單擊 " 提交 " 按鈕，表單將不對輸入的表單數據進行任何驗證，即可進行提交操作。
—————————————————————————
注意:
< form> 標記的屬性並不會直接影響表單的顯示效果。要想讓一個表單有意義，就必須在 < form> 與 < /form> 之間添加相應的表單控件。
7.3_input 元素及屬性
< input /> 元素是表單中最常見的元素，網頁中常見的單行文本框、單選按鈕、複選框等都是通過它定義的。在 HTML5 中，< input /> 標記擁有多種輸入類型及相關屬性。
input 元素的相關屬性
| 屬性 | 屬性值 | 描述 |
|---|---|---|
| type | text | 單行文本輸入框 |
| type | password | 密碼輸入框 |
| type | radio | 單選按鈕 |
| type | checkbox | 複選框 |
| type | button | 普通按鈕 |
| type | submit | 提交按鈕 |
| type | reset | 重置按鈕 |
| type | image | 圖像形式的提交按鈕 |
| type | hidden | 隱藏域 |
| type | file | 文件域 |
| type | E-mal地址的輸入域 | |
| type | url | URL地址的輸入城 |
| type | number | 數值的輸入域 |
| type | range | 一定範圍內數字值的輸入域 |
| type | Date pickers (date, month, week, time, datetime, datetime-local) | 日期和時間的輸入類型 |
| type | search | 搜索域 |
| type | color | 顏色輸入類型 |
| type | tel | 電話號碼輸入類型 |
| name | 由用戶自定義 | 控件的名稱 |
| value | 由用戶自定義 | input 控件中的默認文本值 |
| size | 正整數 | input 控件在頁面中的顯示寬度 |
| readonly | readonly | 該控件內容爲只讀(不能編輯修改) |
| disabled | disabled | 第一次加載頁面時禁用該控件(顯示爲灰色) |
| checked | checked | 定義選擇控件默認被選中的項 |
| maxlength | 正整數 | 控件允許輸入的最多字符數 |
| autocomplete | on/off | 設定是否自動完成表單字段內容 |
| autofocus | autofocus | 指定頁面加載後是否自動獲取焦點 |
| form | form元素的id | 設定字段隸屬於哪一個或多個表單 |
| list | datalist 元素的id | 指定字段的候選數據值列表 |
| multiple | multiple | 指定輸入框是否可以選擇多個值 |
| min、max和step | 數值 | 規定輸入框所允許的最大值、最小值及間隔 |
| pattern | 字符串 | 驗證輸入的內容是否與定義的正則表達式匹配 |
| placeholder | 字符串 | 爲 input 類型的輸入框提供一種提示 |
| required | required | 規定輸入框填寫的內容不能爲空 |
7.3.1_input 元素的 type 屬性
在 HTML5 中，< input> 元素擁有多個 type 屬性值，用於定義不同的控件類型。下面我們將對不同的 input 控件進行講解。
(1) 單行文本輸入框 < input type=“text”/>
單行文本輸入框常用來輸入簡短的信息，如用戶名、賬號、證件號碼等，常用的屬性有 name、value、maxlength。
(2) 密碼輸入框 < input type=“password”/>
密碼輸入框用來輸入密碼，其內容將以圓點的形式顯示。
(3) 單選按鈕 < input type=“radio”/>
單選按鈕用於單項選擇。如選擇性別、是否操作等。需要注意的是，在定義單選按鈕時，必須爲同一組中的選項指定相同的 name 值，這樣 “ 單選 “ 纔會生效。此外，可以對單選按鈕應用 checked 屬性，指定默認選中項。
(4) 複選框 < input type=“checkbox”/>
複選框常用於多項選擇，如選擇興趣、愛好等，可對其應用checked屬性，指定默認選中項。
(5) 普通按鈕 < input type=“button”/>
普通按鈕常常配合 javascript 腳本語言使用，讀者瞭解即可。
(6) 提交按鈕 < input type=“submit”/>
提交按鈕是表單中的核心控件，用戶完成信息的輸入後，一般都需要單擊提交按鈕才能完成表單數據的提交。可以對其應用 value 屬性，改變提交按鈕上的默認文本。
(7) 重置按鈕 < input type=“reset” />
當用戶輸入的信息有誤時，可單擊重置按鈕取消已輸入的所有表單信息。可以對其應用 value 屬性，改變重置按鈕上的默認文本。
(8) 圖像形式的提交按鈕 < input type= “image” />
圖像形式的提交按鈕與普通的提交按鈕在功能上基本相同，只是它用圖像替代了默認的按鈕，外觀上更加美觀。需要注意的是，必須爲其定義 src 屬性指定圖像的 url 地址。
(9) 隱藏域 < input type=" hidden" />
?
隱藏域對於用戶是不可見的，通常用於後臺的程序，讀者瞭解即可。
(10) 文件域 < input type=“file” />
當定義文件域時，頁面中將出現一個文本框和一個 “ 瀏覽… " 按鈕，用戶可以通過填寫文件路徑或直接選擇文件的方式，將文件提交給後臺服務器。
案例：演示，
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>input 控件</title>
</head>
<body>
<form action="#" method="post">
用戶名: <!--text單行文本輸入框-->
<input type="text" va1ue="張三" maxlength="6"/><br/><br/>
密碼: <!--password密碼輸入框-->
<input type="password" size="40"/><br/><br/>
性別: <!--radio單選按鈕-->
<input type="radio" name="sex" checked="checked" />男
<input type="radio" name="sex" />女<br /><br />
興趣: <!--checkbox複選框-->
<input type="checkbox" />唱歌
<input type="checkbox" />跳押
<input type="checkbox" />游泳<br /><br />
上傳頭像:
<input type="file" /><br /><br /><!--fi1e文件域-->
<input type="submit" /> <!--submit提交按鈕-->
<input type="reset" /> <!--reset重置按鈕-->
<input type="button" value="普通按鈕" /><!--button普通按鈕-->
<input type="images/login.gif" /> <!--image圖像域-->
<input type="hidden" />
<!--hidden隱藏域-->
</form>
</body>
</html>
在上述代碼中，通過對 < input /> 元素應用不同的 type 屬性值，來定義不同類型的 input 控件，並對其中的一些控件應用 < input /> 標記的其他可選屬性。
例如，在代碼中，通過 maxlength 和 value 屬性定義單行文本輸入框中允許輸入的最多字符數和默認顯示文本，通過 size 屬性定義密碼輸入框的寬度，通過 name 和 checked 屬性定義單選按鈕的名稱和默認選中項。
(11) email 類型 < input type=“email” />
email 類型的 input 元素是一種專門用於輸入 E-mail 地址的文本輸入框，用來驗證 email 輸入框的內容是否符合 E-mail 郵件地址格式；如果不符合，將提示相應的錯誤信息。
(12) url 類型 < input type=“url” />
url 類型的 input 元素是一 種用於輸入 URL 地址的文本框。如果所輸入的內容是 URL 地址格式的文本，則會提交數據到服務器；如果輸入的值不符合 URL 地址格式，則不允許提交，並且會有提示信息。
(13) tel 類型 < input type=“tel” />
tel 類型用於提供輸入電話號碼的文本框，由於電話號碼的格式幹差萬別，很難實現一個通用的格式。因此，tel 類型通常會和 pattern 屬性配合使用，關於 pattern 屬性將在下面的小節中進行講解。
(14) search 類型 < input type=“search” />
search 類型是一種專門用於輸入搜索關鍵詞的文本框，它能自動記錄一些字符， 如站點搜索或者 Google 搜索。在用戶輸入內容後，其右側會附帶一一個刪除圖標，單擊這個圖標按鈕可以快速清除內容。
(15) color 類型 < input type=“color” />
color 類型用於提供設置顏色的文本框，用於實現一個 RGB 顏色輸入。其基本形式是 #RRGGBB，默認值爲 #000000，通過 value 屬性值可以更改默認顏色。單擊 color 類型文本框，可以快速打開拾色器面板，方便用戶可視化選取一種顏色。
案例：通過設置input元素的type屬性來演示不同類型的文本框的用法，
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>input類型</title>
</head>
<body>
<form action="#" method="get">
請輸入您的郵箱: <input type="email" name="formmail"/><br/>
請輸入個人網址: <input type="url" name="user_url"/><br/>
請輸人電話號碼: <input type="tel" name="telphone" pattern="^\d{ 11 } $"/><br/>
輸人搜索關鍵詞: <input type="search" name="searchinfo"/><br/>
請選取一種顏色: <input type="color" value="#FF3E96"/>
<input type="color" name="color" name="color1"/>
<input type="submit" value="提交"/>
</form>
</body>
</html>
在上述代碼中，通過 input 元素的 type 屬性將文本櫃分別設置爲 email 類型、url 類型、tel 類型、search 類型以及 color 類型。其中，第 11 行代碼，通過 pattern 屬性設置 tel 文本框中的輸入長度爲 11 位。
- 注意:
_
需要注意的是，不同的瀏覽器對 url 類型的輸入框的要求有所不同，在多數瀏覽器中，要求用戶必須輸入完整的 URL 地址，並且允許地址前有空格的存在。
例如，在輸入網址時輸入” http://www.itcast.cn/ “， 則可以提交成功。
(16) number 類型 < input type=“number” />
number 類型的 input 元素用於提供輸入數值的文本框。在提交表單時，會自動檢查該輸入框中的內容是否爲數字。如果輸入的內容不是數字或者數字不在限定範圍內，則會出現錯誤提示。
number 類型的輸入框可以對輸入的數字進行限制，規定允許的最大值和最小值、合法的數字間隔或默認值等，具體屬性說明如下。
-
value: 指定輸入框的默認值。
-
max: 指定輸入框可以接受的最大的輸入值。
-
min: 指定輸入框可以接受的最小的輸入值。
-
step: 輸入域合法的間隔，如果不設置，默認值是 1。
案例：演示 number 類型的 input 元素的用法，
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>number類型的使用</title>
</head>
<body>
<form action="#" method="get">
請輸入數值:
<input type="number" name="number1" value="1" min="1" max="20" step="4"/>
<br/>
<input type="submit" value="提交"/>
</form>
</body>
</html>
在上述代碼中，將 input 元素的 type 屬性設置爲 number 類型，並且分別設置 min、max 和 step 屬性的值。
運行後可知 number 類型文本框中的默認值爲 “ 1 ” ；讀者可以手動在輸入框中輸入數值或者通過單擊輸入框的數值按鈕來控制數據。
(17) range 類型 < input type= “range” />
range 類型的 input 元素用於提供一定範圍內數值的輸入範圍，在網頁中顯示爲滑動條。它的常用屬性與 number 類型一樣，通過 min 屬性和 max 屬性，可以設置最小值與最大值，通過 step 屬性指定每次滑動的步幅。
(18) Date pickers 類型< input type= “date, month, week…” />
Date pickers 類型是指時間日期類型，HTML5 中提供了多個可供選取日期和時間的輸入類型，用於驗證輸入的日期。
時間和日期類型：
| 時間和日期類型 | 說明 |
|---|---|
| date | 選取日、月、年 |
| month | 選取月、年 |
| week | 選取周和年 |
| time | 選取時間(小時和分鐘) |
| datetime | 選取時間、日、月、年(UTC時間) |
| datetime-local | 選取時間、日、月、年(本地時間) |
在上表中，UTC 是 Universal Time Coordinated 的英文縮寫，即 “ 協調世界時 ” ，又稱世界標準時間。簡單地說，UTC 時間就是 0 時區的時間。
例如如果北京時間爲早上 8 點，則 UTC 時間爲 0 點，即 UTC 時間比北京時間晚 8 小時。
案例：在 HTML5 中添加多個 input 元素，分別指定這些元素的 type 屬性值爲時間日期類型，
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>時間日期類型的使用</title>
</head>
<body>
<form action="#" method="get">
<input type="date"/>
<input type="month"/>
<input type="week"/>
<input type="time"/>
<input type="datetime"/>
<input type="datetime-local"/>
<input type="submit" value="提交"/>
</form>
</body>
</html>
用戶可以直接向輸入框中輸入內容，也可以單擊輸入框之後的按鈕進行選擇。
- 注意:
_
對於瀏覽器不支持的 input 元素輸入類型，將會在網頁中顯示爲一個普通輸入框。
7.3.2_input 元素的其他屬性
除了 type 屬性之外，< input/> 標記還可以定義很多其他的屬性， 以實現不同的功能。
(1) autofocus 屬性
在訪問 Google 主頁時，頁面中中的文字輸入框會自動獲得光標焦點，以便輸入關鍵詞。在 HTML5 中，autofocus 屬性用於指定頁面加載後是否自動獲取焦點。
案例：演示 : autofocus 屬性的使用，
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>autofocus屬性的使用</title>
</head>
<body>
<form action="#" method="get">
請輸入搜索關鍵詞:
<input type="text" name="user_name" autocomplete="off" autofocus="autofocus"/>
<br/>
<input type="submit" value="提交" />
</form>
</body>
</html>
在上述代碼中，首先向表單中添加一個 < input /> 元素，然後通過 “ autocomplete= " off " 將自動完成功能設置爲關閉狀態。同時，將 autofocus 屬性設置爲 autofocus , 指定在頁面加載完畢後自動獲取焦點。
運行後可以看出，< input /> 元素輸入框在頁面加載後自動獲取焦點，並且關閉了自動完成功能。
(2) form 屬性
在 HTML5 之前，如果用戶要提交一個表單，必須把相關的控件元素都放在表單內部，即 < form> 和 < /form> 標籤之間。在提交表單時，會將頁面中不是表單子元素的控件直接忽略掉。
HTML5 中的 form 屬性，可以把表單內的子元素寫在頁面中的任一位置， 只需爲這個元素指定 form 屬性並設置屬性值爲該表的 id 即可。此外，form 屬性還允許規定一個表單控件屬於多個表單。
案例：演示 form 屬性的使用，
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>autofocus 屬性的使用</title>
</head>
<body>
<form action="#" method="get" id="user_form">
請輸入您的姓名:
<input type="text" name="first_name"/>
<input type="submit" value="提交" />
</form>
<p>下面的輸入框在form元素外，但因爲指定了form屬性爲表單的id,所以該輸入框仍然屬於表單的一部分。</p>
請輸入您的呢稱:
<input type="text" name="last_name" form="user_form"/><br/>
</body>
</html>
上述案例中，分別添加兩個 < input /> 元素，並且第二個 < input /> 元素不在 < form> < /form> 標記中。另外，指定第二個 < input /> 元素的 form 屬性值爲該表單的 id。
此時，如果在輸入框中分別輸入姓名和暱稱，則 first_name 和 last_name 將分別被賦值爲輸入的值。例如，在姓名處輸入“張三”，暱稱處輸入“小張”
然後單擊 " 提交 " 按鈕，在測覽器的地址欄中可以看到 " first_name=張三&last_name=小張 " 的字樣，表示服務器端接收到 " name = " 張三 " 和 " name = " 小張 " 的數據。
如果第二個 < input/> 標籤沒有 form= " user_form " ，重複上述步驟，則服務器端只接收到 " name = " 張三 " 的數據。
- 注意:
_
form 屬性適用於所有的 input 輸入類型。在使用時，只需引用所屬表單的 id 即可。
(3) list 屬性
在上面的小節中，已經學習瞭如何通過 datalist 元素實現數據列表的下拉效果。而 list 屬性用於用於指定輸入框所綁定的 datalist 元素，其值是某個 datalist 元素的 id。
案例：來進步學習 list 屬性的使用，
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>list 屬性的使用</title>
</head>
<body>
<form action="#" method="get">
請輸入網址:
<input type="url" list="url_list" name="weburl"/>
<datalist id="url_list">
<option label="新浪" value="http://www.sina.com.cn"></option>
<option label="搜狐" value="http://www.sohu.com"></option>
<option label="阿ken的博客" value="https://blog.csdn.net/kenken_"></option>
</datalist>
<input type="submit" value="提交"/>
</form>
</body>
</html>
上述案例中，分別向表單中添加 input 和 datalist 元素，並且將 < input /> 元素的 list 屬性指定爲 datalist 元素的 id 值。
單擊輸入框，就會彈出已定義的網址列表，
(4) multiple 屬性
multiple 屬性指定輸入框可以選擇多個值，該屬性適用於 email 和 file 類型的 input 元素。muliple 屬性用於 email 類型的 input 元素時，表示可以向文本框中輸入多個 E-mail 地址，多個地址之間通過逗號隔開; multiple 屬性用於 file 類型的 input 元素時，表示可以選擇多個文件。
案例: 演示 muliple 屬性的使用，
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>multiple 屬性的使用</title>
</head>
<body>
<form action="#" method="get">
電子郵箱:
<input type="email" name="myemal1" multiple="multiple"/> (如果電子郵箱有多個，請使用逗號分隔)
<br/><br/>
上傳照片:
<input type="file" name="selfile" multiple="multiple"/>
<br/><br/>
<input type="submit" value="提交"/>
</form>
</body>
</html>
在上述案例中，分別添加 email 類型和 file 類型的input元素，並且使用 mulitiple 屬性指定輸入框可以選擇多個值。
如果想要向文本框中輸入多個E-mal地址，可以將多個地址之間通過逗號分隔: 如果想要選擇多張照片，可以按下ctrl鍵選擇多個文件，
(5) min、 max和step屬性
HTML5 中的 min、max 和 step 屬性用於爲包含數字或日期的 input 輸入類型規定限值，也就是給這些類型的輸入框加一個數值的約束， 適用於date、pickers、 number 和 range 標籤。具體屬性說明如下：
-
max: 規定輸入框所允許的最大輸入值。
-
min: 規定輸入框所允許的最小輸入值。
-
step: 爲輸入框規定合法的數字間隔，如果不設置，默認值是1。
由於前面介紹 input 元素的 number 類型時，已經講解過 min、max 和 step 屬性的使用，這裏不再舉例說明。
(6) pattern 屬性
pattern 屬性用於驗證 input 類型輸入框中，用戶輸入的內容是否與所定義的正則表達式相匹配。pattern 屬性適用於的類型是: text、search、url、tel、email 和 password 的 < input/> 標記。
常用的正則表表達式和說明
| 正則表達式 | 說明 |
|---|---|
| ^ [0-9]*$ | 數字 |
| ^\d{ n }$ | n 位的數字 |
| ^\d{ n, }$ | 至少 n 位的數字 |
| ^\d( m,n )$ | m - n 位的數字 |
| ^(0豎線[1-9] [0-9] *)$ | 零和非零開頭的數字 |
| ^([1-9][0-9]*)+(.[0-9] { 1,2 } ?$ | 非零開頭的最多帶兩位小數的數字 |
| ^(-豎線+)?\d+(.\d+)?$ | 正數、負數和小數 |
| ^\d+$或 ^ [1-9]\d*豎線0 $ | 非負整數 |
| ^-[1-9]\d*豎線0$或 ^((-\d+)豎線(0+)) $ | 非正整數 |
| ^ [\u4e00-\u9fa5] { 0, }$ | 漢字 |
| ^ [A-Za-z0-9]+$ 或^ [A-Za-z0-9]{ 4,40 }$ | 英文和數字 |
| ^ [A-Za-z]+$ | 由26個英文字母組成的字符串 |
| ^ [A-Za-z0-9]+$ | 由數字和26個英文字母組成的字符串 |
| ^ \w+$ 或^\w{ 3,20 }$ | 由數字、26個英文字母或者下劃線組成的字符串 |
| ^\u4E00-\u9FA5A-Za-z0-9_ ]+$ | 中文、英文、數字包括下劃線 |
| ^\w+([-+.]\w+)* @\w+([-.]\w+)* \ .\w+([-.])\w+)*$ | E-mail 地址 |
| (a-zA-z]+://[ ^\s ]* 或^http://([\w-]+.)+[\w-]+(/[\w-./?%&=]* )?$ | URL地址 |
| ^\d{ 15 }豎線\d{ 18 }$ | 身份證號(15位、18位數字) |
| ^([0-9]){ 7,18 }(x豎線X)?$ 或 ^ \d{ 8,18 }豎線[0-9x]{ 8,18 }豎線[0-9X]{ 8,18 }?$ | 以數字、字母x結尾的短身份證號碼 |
| ^ [a-zA-Z] [ a-zA-Z0-9_]{ 4,15 }$ | 賬號是否合法(字母開頭，允許5~16字節，允許字母數字下劃線) |
| ^ [a-zA-Z]\w{ 5,17 }$ | 密碼(以字母開頭，長度爲6~18.只能包含字母、數字和下劃線)年 |
案例: 演示瞭解 pattern 屬性以及常用的正則表達式，
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>pattern 屬性</title>
</head>
<body>
<form action="#" method="get">
帳 號:
<input type="text" name="username" pattern="^ [a-zA-z] [a-zA-Z0-9_] { 4,15 }$" />(以字母開頭，允許 5 ~ 16 字節，允許字母數字下劃線)
<br/>
密 碼:
<input type="paasword" name="pwd" pattern=" ^[a-zA- Z]\w{ 5,17 }$" /> (以字母開頭，長度在6~18，只能包含字母、數字和下劃線) <br/>
身份證號:
<input type="text" name="mycard" pattern="^\d{ 15 }|\d{ 18 }$" /> (15位、18位數字)
<br/>
E-mail 地址:
<input type="email" name="myemail" pattern="^\w+([-+.J]\w+)*@\w+([-.]\ W+)*\.\w+([-.]\w+)*$"/>
<input type="submit" value="提交"/>
</form>
</body>
</html>
在上述案例中，第 9 ~ 12 行代碼分別用於插入 " 賬號 " " 密碼 " " 身份證號 " " E-mail 地址 " 的輸入框，並且通過 pattern 屬性來驗證輸入的內容是否與所定義的正則表達式相匹配。
當輸入的內容與所定義的正則表達式格式不相匹配時，單擊 " 提交 " 按鈕，
(7) placeholder 屬性
placeholder 屬性用於爲 input 類型的輸入櫃提供相關提示信息，以描述輸入框期待用戶輸入何種內容。在輸入框爲空時顯式出現，而當輸入框獲得焦點時則會消失。
案例：演示 placeholder 屬性的使用，
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>placeholder 屬性</title>
</head>
<body>
<form action="#" method="get">
請輸入郵政編碼:
<input type="text" name="code" pattern="[0-9]{ 6 }" placeholder="請輸入6位數的郵政編碼"/>
<input type="submit" value="提交"/>
</form>
</body>
</html>
在上述案例中，使用 pattern 屬性來驗證輸入的郵政編碼是否是6位數的數字，使用 placeholder 屬性來提示輸入框中需要輸入的內容。
- 注意:
_
placeholder 屬性適用於 type 屬性值爲 text、search、url、tel、email 及 password 的< input/>標記。
(8) required 屬性
HTML5 中的輸入類型，不會自動判斷用戶是否在輸入框中輸入了內容，如果開發者要求輸入框中的內容是必須填寫的，那麼需要爲 input 元素指定 required 屬性。required 屬性用於規定輸入框填寫的內容不能爲空，否則不允許用戶提交表單。
案例：演示 required 屬性的使用，
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>required 屬性</title>
</head>
<body>
<form action="#" method="get">
請輸入姓名:
<input type="text" name="user_name" required=" required"/>
<input type="submit" value="提交"/>
</form>
</body>
</html>
在上述案例中，爲 < input/> 元素指定了 required 屬性。當輸入櫃中內容爲空時，單擊 " 提交按鈕 “，將會出現提示信息，用產必須在輸入內容後，才允許提交表單。
7.4 其他表單元素
在7.3節中，介紹了一系列的input控件。除了input元素外，HTML5 表單元素還包括textarea、select、 datalist、 keygen、 output 等，本節將對它們進行詳細講解。
7.4.1 textarea 元素
當定義 input 控件的 type 屬性值爲 text 時，可以創建一個單行文本輸入框。 但是，如果需要輸入大量的信息，單行文本輸入框就不再適用，爲此 HTML 語言提供了< textarea> < /textarea> 標記。通過 textarea 控件可以輕鬆地創建多行文本輸入框，其基本語法格式如下：
<textarea cols="每行中的字符數" rows="顯示的行數">
文本內容
</textarea>
在上面的語法格式中，cols 和 rows 爲 < textarea> 標記的必須屬性，其中 cols 用來定義多行文本輸入框每行中的字符數，rows 用來定義多行文本輸入框顯示的行數，它們的取值均爲正整數。
值得一提的是， < textarea> 元素除了 cols 和 rows 屬性外，還擁有幾個可選屬性，分別爲disabled、name 和 readonly,
textarea 可選屬性
| 屬性 | 屬性值 | 描述 |
|---|---|---|
| name | 由用戶自定義 | 控件的名稱 |
| readonly | readonly | 該控件內容爲只讀(不能編輯修改) |
| disabled | disabled | 第一次加載頁面時禁用該控件(顯示爲灰色) |
案例：演示 textarea 元素的使用，
<!doctype html>
<html>
<head?
<meta charset="utf-8">
<title>textarea控件</title>
</head>
<body>
<form action="#" method="post">
評論: <br/>
<textarea co1s="60" rows="8">
評論的時候，請遵紀守法並注意語言文明，多給文檔分享人一些支持。
</textarea><br />
<input type="submit" value="提交"/>
</form>
</body>
</html>
在上述案例中，通過 < textarea> < /textarea> 標記定義一個多行文本輸入框，並對其應用 clos 和 rows 屬性來設置多行文本輸入框每行中的字符數和顯示的行數。在多行文本輸入框之後，通過將 input 控件的 type 屬性值設置爲 submit ，定義了一個提交按鈕。同時，爲了使網頁的格式更加清晰，在代碼中的某些部分應用了換行標記 < br />。
- 注意:
_
各瀏覽器對 cols 和 rows 屬性的理解不同，當對 textarea 控件應用 cols 和 rows 屬性時，多行文本輸入框在各瀏覽器中的顯示效果可能會有差異。所以在實際工作中，更常用的方法是使用 CSS 的 width 和 height 屬性來定義多行文本輸入框的寬高。
7.4.2 select 元素
用於製作包含多個選項的下拉菜單
使用 select 元素定義下拉菜單的基本語法格式如下：
<select>
<option>選項1</option>
<option>選項2</option>
<option>選項3</opt1on>
</select>
在上面的語法中，< select> < /select> 標記用於在表單中添加一個下拉菜單，< option> < /option> 標記嵌套在 < select> < /select> 標記中，用於定義下拉菜單中的具體選項，每對 < select> < /select> 中至少應包含一對 < option> < /option>。
值得一提的是，在 HTML5 中，可以爲 < select> 和 < option> 標記定義屬性，以改變下拉菜單的外觀顯示效果，具體如表所示：
< select>和< option>標記的常用屬性
| 標記名 | 常用屬性 | 描述 |
|---|---|---|
| < select> | size | 指定下拉菜單的可見選項數(取值爲正整數) |
| < select> | multiple | 定義multiple="muliple"時，下拉菜單將具有多項選擇的功能，方法爲按住 Ctrl 鍵的同時選擇多項 |
| < option> | selected | 定義 selected = " selected " 時，當前項即爲默認選中項 |
案例：演示幾種不同的下拉菜單效果，
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>select控件</title>
</head>
<body>
<form action="#" method="post">
所在校區: <br />
<!--最基本的下拉菜單-->
<select>
<option>-請選擇-</option>
<option>北京</option>
<option>上海</option>
<option>廣州</option>
<option>武漢</option>
<option>成都</option>
</select><br /><br />
特長(單選):<br />
<select>
<option>唱歌</option>
<option selected="selected">畫面</option>
<!--設置默認選中項-->
<option>跳舞</option>
</select><br/><br />
愛好(多選): <br />
<select multiple="multiple" size="4">
<!--設置多選和可見選項數-->
<option>讀書</option>
<option selected="selected">寫代碼</option>
<!--設置默認選中項-->
<option>旅行</option>
<option selected="selected">聽音樂</option>
<!--設置默認選中項-->
<option>踢球</option>
</select><br /><br />
<input type="submit" value="提交"/>
</form>
</body>
</html>
在上述案例中，通過 < select>、< option> 標記及相關屬性創建了 3 個不同的下拉菜單，其中第1個爲最基本的下拉菜單，第 2 個爲設置了默認選項的單選下拉菜單，第 3 個爲設置了兩個默認選項的多選下拉菜單。在下拉菜單之後，通過 input 控件定義了一個提交按鈕。同時，爲了使網頁的格式更加清晰，在代碼中的某些部分應用了換行標記< br />。
上面實現了不同的下拉菜單效果，但是，在實際網頁製作過程中，有時候需要對下拉菜中的遠項進行分組。這樣當存在很多選項時，要想找到相應的選項就會更加容易，如圖7-5所示即爲選項分組後的F拉菜單中選項的展示效果。
案例：演示 使用 < optgroup> < /optgroup> 爲下拉菜單中的選項分組的方法和效果，
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>爲下拉菜單中的選項分組</title>
</head>
<body>
<form action="#" method="post">
城區: <br />
<select>
<optgroup label="北京">
<option>東城區</option>
<option>西城區</option>
<option>朝陽區</option>
<option>海淀區</option>
</optgroup>
<optgroup label="上海">
<option>浦東新區</option>
<option>徐彙區</option>
<option>虹口區</option>
</optgroup>
</select>
</form>
</body>
</html>
在上述案例中，< optgroup> < /optgroup> 標記用於定義選項組，必須嵌套在 < select> < /select> 標記中，一對 < select> < /select> 中通常包含多對 < optgroup> < /optgroup>。在 < optgroup> 與 < /optgroup> 之間爲 < option> < /option> 標記定義的具體選項。需要注意的是，< optgroup> 標記有一個必需屬性 label，用於定義具體的組名。
7.4.3 datalist 元素
datalist 元素用於定義輸入框的選項列表，
列表通過 datalist 內的option元素進行創建。如果用戶不希望從列表中選擇某項，也可以自行輸入其他內容。datalist 元素通常與 input 元素配合使用來定義 input 的取值。在使用 < datalist> 標記時，需要通過 id 屬性爲其指定一個唯一的標識，然後爲 input 元素指定 list 屬性，將該屬性值設置爲 option 元素對應的 id 屬性值即可。
案例：演示 datalist 元素的使用，
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>datalist 元素</title>
</head>
<body>
<form action="#" method="post">
請輸入用戶名:
<input type="text" list="namelist"/>
<datalist id="namelist">
<option>admin</option>
<option>lucy</option>
<option>lily</option>
</datalist>
<input type="submit" value="提交" />
</form>
</body>
</html>
鼠標指針放在文本框上會出現倒立的三角，然後將指針單擊一下倒立的三角，
在上述案例中，首先向表單中添加一個input 元素，並將其 list 屬性值設置爲 “namelist” 。然後，添加 id 名爲 " namelist " 的 datalist 元素，並通過 datalist 內的 option 元素創建列表。
7.4.4 keygen 元素
keygen 元素用於表單的密鑰生成器，能夠使用戶驗證更爲安全、可靠。當提交表單時會生成兩個鍵: 一個是私鑰，它存儲在客戶端; 另一個是公鑰，它被髮送到服務器，驗證用戶的客戶端證書。如果新的瀏覽器能夠對 keygen 元素的支持度再增強一些， 則有望使其成爲一種有用的安全標準。
keygen 元素的常用屬性
| 屬性 | 說明 |
|---|---|
| autofocus | 使 keygen 字段在頁面加載時獲得焦點 |
| challenge | 如果使用，則將keygen 的值設置爲在提交時詢問 |
| disabled | 禁用 keytag 字段 |
| form | 定義該 keygen 字段所屬的一個或多個表單 |
| keytype | 定義 keytype 。 rsa 生成 RSA 密鑰 |
| name | 定義 keygen 元素的唯一名稱。 nane屬性用於在提交表單時蒐集字段的值 |
案例：演示 keygen 元素的使用，
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>keyge元素</title>
<body>
<form action="#" method="get">
請輸入用戶名:
<input type="text" name="user_name"/><br/>
請選擇加密強度:
<keygen name="security"/><br/>
<input type="submit" value="提交" />
</form>
</body>
</html>
在上述案例中，使用 keygen 元素並且設置其 name 屬性值爲 " security " 來定義提交表單時蒐集字段的值。
已廢棄
該特性已經從 Web 標準中刪除，雖然一些瀏覽器目前仍然支持它，但也許會在未來的某個時間停止支持，請儘量不要使用該特性。
7.4.5 output 元素
output 元素用於不同類型的輸出，可以在瀏覽器中顯示計算結果或腳本輸出。
output 元素常用屬性
| 屬性 | 說明 |
|---|---|
| for | 定義輸出域相關的一個或多個元素 |
| form | 定義輸入字段所屬的一個或多個表單 |
| name | 定義對象的唯名稱 |
關於 output 元素及其相關屬性，讀者只需瞭解即可，不必做過多研究。
7.5 CSS 控制表單樣式
使用表單的目的是爲了提供更好的用戶體驗，在網頁設計時，不僅需要設置表單相應的功能，而且希望表單控件的樣式更加美觀，使用 CSS 可以輕鬆控制表單控件的樣式。
案例：講解 CSS 對錶單樣式的控制
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 控制表單樣式</title>
</head>
<body>
<form action="#" method="post">
<p>
<span>賬號: </span>
<input type="text" name="username" value="admin" class="num" pattern="^[a-zA-Z] [a-zA-Z0-9_]{ 4,15 }$"/>
</p>
<p>
<span>密碼: </span>
<input type="password" name="pwd" class="pass" pattern="^[a-zA-Z]\w{ 5, 17 }$"/>
</p>
<p>
<input type="button" class="btn01" value="登錄"/>
<input type="button" class="btn02" value="註冊"/>
</p>
</form>
</body>
</html>
在上述案例中，使用表單 form 嵌套 < p> 標記進行整體佈局，並分別使用 < span> 標記和 < input> 標記來定義提示信息及不同類型的表單控件。
接下來用 CSS 對其進行修飾，具體代碼如下：
<style type="text/css">
body{
font-size: 12px;
font-family: "宋體";
} /*全局控制*/
body, form, input, p{
padding: 0;
margin: 0;
border: 0;
} /*重置瀏覽覽器的默認樣式*/
form{
width: 320px;
height: 150px;
padding-top: 20px;
margin: 50px auto; /*使表單在瀏覽器中居中*/
background:#f5f8fd; /*爲表單添加背景顏色*/
border-radius: 20px; /*設置圓角邊框*/
border:3px solid #4faccb;
}
p{
margin-top: 15px;
text-align: center;
}
P span{
width: 40px;
display: inline-block;
text-align: right;
}
.num, .pass{
/*對文本框設置共同的寬、高、邊框、內邊距*/
width: 152px;
height: 18px;
border: 1px solid #38albf;
padding: 2px 2px 2px 22px;
}
.num{
/*定義第一個文本框的背景、文本顏色*/
background: url(images/1.jpg) no-repeat 5px center #FFE;
color: #999;
}
.pass{
background: url(imags/2.jpg) no-repeat 5px center #FFF;
}
.btn01, .btn02{
width: 60px;
height: 25px;
border-radius: 3px; /*設置圓角邊框*/
border: lpx solid #6b5d50;
margin-left: 30px;
}
.btn01{
background: #3bb7ea; /*設置第一個按鈕的背景色*/
}
.btn02{
background: #fb8c16; /*設置第二個按鈕的肯景色/
}
</style>
上面的案例中使用 CSS 輕鬆實現了對錶單控件的字體、邊框、背景和內邊距的控制。
在使用 CSS 控制表單樣式時，還需要注意以下幾個問題：
-
(1) 由於 form 是塊元素，重置瀏覽器的默認樣式時，需要清除其內邊距 padding 和外邊距 margin , 如上面 CSS 樣式代碼中的第二個選擇器 —— 並集選擇器。
-
(2) input 控件默認有邊框效果，當使用 < input /> 標記定義各種按鈕時，通常需要清除其邊框，如上面 CSS 樣式代碼中的第二個選擇器 —— 並集選擇器。
-
(3) 通常情況下需要對文本框和密碼框設置 2 ~ 3 像素的內邊距，以使用戶輸入的內容不會緊貼輸入框，如上面 CSS 樣式代碼中的第 26 行代碼所示。
如果你看到並認識了現在的我
那麼可能你將不會相信前段時間我依舊是那個沒有主見、缺乏謹慎思考的未成年小孩兒
但隨着時間推移
心裏那股自己要成爲自己的英雄的那種信念越來越強烈
謝謝拜訪
我是阿ken