1.背景介紹

表單在網頁中主要負責數據采集功能。一個表單有三個基本組成部分：

表單標簽：這里面包含了處理表單數據所用CGI程序的URL以及數據提交到服務器的方法。

表單域：包含了文本框、密碼框、隱藏域、多行文本框、復選框、單選框、下拉選擇框和文件上傳框等。

表單按鈕：包括提交按鈕、復位按鈕和一般按鈕；用于將數據傳送到服務器上的CGI腳本或者取消輸入，還可以用表單按鈕來控制其他定義了處理腳本的處理工作。

2.知識剖析-------常用表單元素

form 表示 HTML 表單

input 表示用來收集用戶輸入數據的控件

textarea 表示可以輸入多行文本的控件

select:定義一個選擇列表，即下拉列表。

option:定義下拉列表中的選項。

optgroup:定義選項組。選項組內需要放選項option。下拉列表select通常對應一個選項組，故此標簽不常用。

button 表示可用來提交或重置的表單按鈕(或一般按鈕)

label 表示表單元素的說明標簽

3.常用表單元素詳解

（1）form 表單解析

action 表單需要提交的頁面

method 表單需要提交的方式 get/post

name 表單名稱，建議書寫，用于程序識別表單

TARGET="..."指定提交的結果文檔顯示的位置：

_blank ：在一個新的、無名瀏覽器窗口調入指定的文檔；

_self ：在指向這個目標的元素的相同的框架中調入文檔；

_parent ：把文檔調入當前框的直接的父FRAMESET框中；這個值在當前框沒有父框時等價于_self；

_top ：把文檔調入原來的最頂部的瀏覽器窗口中(因此取消所有其它框架)；這個值等價于當前框沒有你框時的_self.

（2）input 表單的屬性

autofocues 讓光標聚焦在input上，可以讓用戶直接輸入

disable 禁用input,(禁止用戶輸入)

（3）button添加按鈕

button 按鈕的type 屬性有如下幾個值:

submit 表示按鈕的作用是提交表單,默認

reset 表示按鈕的作用是重置表單

button 表示按鈕為一般性按鈕,沒有任何作用

（4）Type 表單元素(主要為 Input)的類型

input 表單的屬性用于 限制表單的內容 + 表單的樣式

text 簡單的文本框，input的默認行為

(password 密碼框輸入的所有字符都會顯示星號)

search 搜索框（search表單會顯示一個叉來取消搜索內容）

number range 只能輸入數字的按鈕，range 用于設置數字范圍

checkbox 、radio 復選框，單選框

image 生成一個圖片按鈕

type="file"定義文件上傳框input type="file" name="myfile" size="15" maxlength="100"

4.編碼實戰

要提交數據的控件可以布局在form標簽之外，看下面的代碼，表單元素可以寫到form元素之外，只需在元素中加入form="form1"屬性，也可提交到form元素指定的服務器地址

? 5.拓展思考? ? ? ? ? ? ?

? 還有哪些HTML5新增的表單元素? ?

email 類型用于驗證email的格式，當提交表單時會自動驗證email域的值? ? ?

url 類型用于驗證 URL 地址的格式，當提交表單時會自動驗證url域的值

number 類型會根據你的設置提供選擇數字的功能，min屬性設置最小值、max屬性設置最大值，value屬性設置當前值，step屬性設定每次增長的值，某些瀏覽器還不支持

range 類型用于應該包含一定范圍內數字值的輸入域，其會以一個滑塊的形式展現，min屬性設置最小值、max屬性設置最大值，value屬性設置當前值，如果沒有設置，則其默認值的范圍是1-100

search 類型用于搜索域，比如站點搜索或 Google 搜索，為其加上results="s"屬性，則會在搜索框前面加上一個搜索圖標

color類型會提供一個顏色拾取器，供用戶選擇顏色，并將用戶選擇的顏色填充到此元素

日期和時間類型：HTML5 擁有多個可供選取日期和時間的新輸入類型：

date - 選取日、月、年

month - 選取月、年

week - 選取周和年

time - 選取時間（小時和分鐘）

datetime - 選取時間、日、月、年（UTC 時間）

datetime-local - 選取時間、日、月、年（本地時間）

6.參考文獻

參考一：HTML5中的表單元素（簡書）

參考二：表單（百度文庫）