歡迎光臨
你好
我是阿ken

文章目錄

7.1_認識表單
- 7.1.1_表單的構成
- 7.1.2_創建表單 ( < form> 標記 )
7.2_表單屬性
- 1. action 屬性
- 2. method 屬性
- 3. name 屬性
- 4. autocomplete 屬性
- 5. novalidate 屬性
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 元素的其他屬性
- - (1) autofocus 屬性
  - (2) form 屬性
  - (3) list 屬性
  - (4) multiple 屬性
  - (5) min、 max和step屬性
  - (6) pattern 屬性
  - (7) placeholder 屬性
  - (8) required 屬性
7.4 其他表單元素
- 7.4.1 textarea 元素
- 7.4.2 select 元素
- 7.4.3 datalist 元素
- 7.4.4 keygen 元素
- 7.4.5 output 元素
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: htmlcss@163.com>

表示當提交表單時，表單資料會以電子郵件的形式傳通出去，

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/>
昵&nbsp;&nbsp;稱:<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	email	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"/>&nbsp;
<input type="month"/>&nbsp;
<input type="week"/> &nbsp;
<input type="time"/>&nbsp;
<input type="datetime"/>&nbsp;
<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"/>&nbsp;&nbsp; (如果電子郵箱有多個，請使用逗號分隔) 
<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">
帳&nbsp;&nbsp;&nbsp;&nbsp;號: 
<input type="text" name="username" pattern="^ [a-zA-z] [a-zA-Z0-9_] { 4,15 }$" />(以字母開頭，允許 5 ~ 16 位元組，允許字母數字下劃線) 
<br/>
密&nbsp;&nbsp;&nbsp;&nbsp;碼: 
<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

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/254117.html

標籤：其他

上一篇：一行 JS 實作功能的代碼，讓你看起來像一個前端專家

下一篇：Font-AweSome在Vue中的使用

阿ken的HTML、CSS學習筆記_表單的應用（筆記七）

文章目錄

7.1_認識表單

7.1.1_表單的構成

7.1.2_創建表單 ( < form> 標記 )

7.2_表單屬性

1. action 屬性

2. method 屬性

3. name 屬性

4. autocomplete 屬性

5. novalidate 屬性

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 元素的其他屬性

(1) autofocus 屬性

(2) form 屬性

(3) list 屬性

(4) multiple 屬性

(5) min、 max和step屬性

(6) pattern 屬性

(7) placeholder 屬性

(8) required 屬性

7.4 其他表單元素

7.4.1 textarea 元素

7.4.2 select 元素

7.4.3 datalist 元素

7.4.4 keygen 元素

7.4.5 output 元素

7.5 CSS 控制表單樣式