DIV CSS 佈局教程網

HTML 表單
編輯:WEB前端代碼     

1、使用表單標簽

  網站使用 HTML 表單可與用戶進行交互,表單元素是允許用戶在表單中輸入內容,比如:文本框、文本域、單選框、復選框、下拉列表、按鈕等等,表單可以把浏覽者輸入的數據傳送到服務器端,這樣服務器端程序就可以處理表單傳過來的數據。表單使用表單標簽 <form> 來定義:

<form method="傳送方式" action="表單提交地址" name="表單名稱"></form>

 

  注意:<from> 是一對閉合標簽,成對出現。method 屬性規定數據傳送的方式(get/post)。action 屬性規定當提交表單時用戶輸入的數據被傳送向何處,比如一個 PHP 頁面(demo.php)。name 屬性可設置表單的名稱。所有的表單控件都必須放在<from></from>標簽之間,否則用戶輸入的信息提交不到服務器上。

  accept-charset 屬性規定服務器可處理的表單數據字符集。默認值是保留字符串 "UNKNOWN",表示編碼為包含 <form> 元素的文檔的編碼。

  enctype 屬性規定在將表單數據發送到服務器之前如何對其進行編碼。注意:只有 method="post" 時才使用 enctype 屬性。

  下面是2個新屬性:

  autocomplete 屬性規定表單是否應該啟用自動完成功能。自動完成允許浏覽器預測對字段的輸入。當用戶在字段開始鍵入時,浏覽器基於之前鍵入過的值,應該顯示出在字段中填寫的選項。注意:autocomplete 屬性 "on" 適用於表單,"off" 適用於特定的輸入字段,反之亦然。默認值為 on 規定啟用自動完成功能。浏覽器會基於用戶之前鍵入的值自動完成值。off 則規定禁用自動完成功能。用戶必須在每次使用時輸入值到每個字段中,浏覽器不會自動完成輸入。

  novalidate 屬性規定當提交表單時不對表單數據進行驗證。

  From 中的 Get 和 Post 方法:

  (1)、Get 方式將表單中數據的按照 var=value 的形式,添加到 action 所指向的 URL 後面,並且兩者使用“?”連接,而各個變量之間使用“&”連接;而 Post 方式是將表單中的數據放在 form 的數據體中,按照變量和值相對應的方式,傳遞到 action 所指向的 URL。如下 Get 方式傳送:

http://www.abc.com/demo.php?name=小白&password=12345678

   (2)、Get 方式是不安全的,因為在傳輸過程,數據被存放在請求的 URL 地址中,這樣容易造成信息洩漏。

  (3)、Get 方式傳輸的數據量非常小,一般限制在 2KB 左右,但是執行效率卻比 Post 方法好;而 Post 方式傳遞的數據量相對較大,它是等待服務器來讀取數據,不過也有字節限制,這是為了避免對服務器用大量數據進行惡意攻擊,因此建議盡量使用 Post 方法傳送數據,比如用戶注冊,使用 Get 方法請求數據,比如浏覽貼子。

 

2、文本框

  當用戶要在表單中鍵入字母、數字等內容時,就會用到文本輸入框,文本框也可以轉化為密碼輸入框。輸入域通過 <input> 標簽完成,該標簽規定了用戶可以在其中輸入數據的輸入字段。輸入字段可通過多種方式改變,取決於 type 屬性。如下:

 <form method="post" action="demo.php">
     <label for="name">用戶名:</label>
     <input type="text" name="username" id="name" value="小白"><br/>
     <label for="pass">密 碼:</label>
     <input type="password" name="password" id="pass" placeholder="請輸入密碼">
 </form>

  <input> 標簽用於定義輸入域,而 type 屬性規定了要顯示的輸入域的內容,type="text" 為默認值,定義一個單行的文本字段輸入,默認顯示寬度為 20 個字符。 name 屬性為文本框命名,以備後台程序調用。type="password" 定義密碼字段,密碼字段字符不會明文顯示,而是以星號或圓點替代。

  value 屬性可為文本框設置默認值,一般起到提示的作用,value 屬性對於不同 input 類型,用法也不同:

  (1)、對於 "text"、"password"、"hidden" 類型,定義輸入字段的初始(默認)值。

  (2)、對於 "button"、"submit"、"reset"、類型,定義按鈕上的文本。

  (3)、對於 "checkbox"、"radio"、"image" 類型,則定義與 input 元素相關的值,當提交表單時該值會發送到表單的 action URL。

  注意:value 屬性對於 <input type="checkbox"> 和 <input type="radio"> 是必需的,不適用於 <input type="file">。

  而 placeholder 屬性則可規定輸入字段預期值的簡短的提示信息,比如一個樣本值或者預期格式的短描述,該提示會在用戶輸入值之前顯示在輸入字段中,該值顯示為虛體,顏色淺,當用戶輸入時自動清除,而用於 <input type="text" value="小白"> 的 value 屬性的默認值顯示為實體,而且顏色深,在用戶輸入時需要自行清除。placeholder 屬性適用於下面的 input 類型:text、search、url、tel、email 和 password。

  <label> 標簽則為 input 元素定義標記,一般為輸入標題。<label> 標簽不會向用戶呈現任何特殊效果,它的作用是為鼠標用戶改進了可用性。如果你在該標簽內點擊文本,就會觸發此控件。就是說,當用戶單擊選中該 <label> 標簽時,浏覽器就會自動將焦點轉到和標簽相關的表單控件上(就自動選中和該 <label> 標簽相關連的表單控件上)。for 屬性規定 label 與哪個表單元素綁定,該屬性的值應當與綁定元素的 id 屬性值相同。如下:

 <form method="post" action="demo.php">
     <label for="male">男</label>
     <input type="radio" id="male" name="gender"><br/>
     <label for="female">女</label>
     <input type="radio" id="female" name="gender"><br/>
     <label for="email">郵箱</label>
     <input type="email" id="email" placeholder="請輸入郵箱地址">
 </form>

 

3、文本域

  文本域是一個多行的文本輸入控件,當用戶需要在表單中輸入大段文字時,需要用到文本輸入域。文本域通過 <textarea> 標簽完成,如下:

 <form method="post" action="demo.php">
     <label for="txt">發表意見:</label><br/>
     <textarea cols="50" rows="10" id="txt">在這裡輸入內容...</textarea>
 </form>

 

  注意:<textarea> 標簽是一對閉合標簽,成對出現,在開始標簽和結束標簽之間可以輸入默認值,cols 和 rows 屬性則定義文本域的行數和列數,更好的辦法是使用 CSS 的 width 和 height 屬性來定義文本與的大小,width 代替 cols,height 代替 rows。

 

4、選擇框

  選擇框可以讓用戶做出選擇,在使用表單設計調查表時,為了減少用戶的操作,使用選擇框是一個好主意,HTML 中有兩種選擇框,即單選框和復選框,兩者的區別是單選框中的選項用戶只能選擇一項,而復選框中用戶可以任意選擇多項,甚至全選。定義選擇框通過 <input> 標簽完成,不同的是輸入類型。

  (1)、單選框

  type="radio" 定義了單選框,也叫單選按鈕,允許用戶在一定數量的選擇中選取一個選項。如下:

 <form method="post" action="demo.php">
     <label for="love">喜 歡</label>
     <input type="radio" id="love" name="like" value="喜歡" checked><br/>
     <label for="noLove">不喜歡</label>
     <input type="radio" id="noLove" name="like" value="不喜歡"><br/>
     <label for="casual">無所謂</label>
     <input type="radio" id="casual" name="like" value="無所謂"><br/>
 </form>

 

  (2)、復選框

  type="checkbox" 定義了復選框,允許用戶可以選擇多個選項。如下:

 <form method="post" action="demo.php">
     <label for="tool1">自行車</label>
     <input type="checkbox" id="tool1" name="bike" value="自行車"><br/>
     <label for="tool2">汽 車</label>
     <input type="checkbox" id="tool2" name="car" value="汽車"><br/>
     <label for="tool3">飛 機</label>
     <input type="checkbox" id="tool3" name="plane" value="飛機" checked><br/>
     <label for="tool4">火 箭</label>
     <input type="checkbox" id="tool4" name="rocket" value="火箭" checked><br/>
     <label for="tool5">毛 線</label>
     <input type="checkbox" id="tool5" name="wool" value="毛線">
 </form>

 

  value 屬性值是必需的,為提交數據到服務器的值,供後台程序使用。name 屬性為輸入控件命名,供後台程序使用,checked 屬性規定在頁面加載時應該被預先選定的 <input> 元素。該屬性只適用於 <input type="radio"> 和 <input type="checkbox">。checked 屬性用於設置默認選項,即該選項會被默認選中。該屬性也可以在頁面加載後,通過 JavaScript 代碼進行設置。

  注意:同一組的單選按鈕,name 屬性取值一定要一致,比如上面例子為同一個名稱“like”,這樣同一組的單選按鈕才可以起到單選的作用。同一組的復選框,name 屬性取值可以一致,這樣方便為其定義樣式,或者通過 JS 獲取元素。

 

5、下拉列表框

  下拉列表在網頁中也常會用到,它可以有效的節省網頁空間。既可以單選、也可以多選。下拉列表框通過 <select> 標簽 和 <option> 標簽完成。

  (1)、下拉列表單選框

 <form method="post" action="demo.php">
     <label for="like">喜歡:</label>
     <select id="like" name="cars">
         <option value="奧迪">奧迪</option>
         <option value="寶馬">寶馬</option>
         <option value="奔馳">奔馳</option>
         <option value="賓利">賓利</option>
         <option value="路虎">路虎</option>
     </select>
 </form>

 

  (2)、下拉列表復選框

 <form method="post" action="demo.php">
     <label for="like">喜歡:</label>
     <select id="like" name="cars" multiple>
         <option value="奧迪">奧迪</option>
         <option value="寶馬">寶馬</option>
         <option value="奔馳">奔馳</option>
         <option value="賓利">賓利</option>
         <option value="路虎" selected>路虎</option>
     </select>
 </form>

 

  <select> 標簽定義下拉列表選項,而 <option> 標簽定義下拉列表中的選項。

  下拉列表單選框和下拉列表復選框,唯一的不同就是復選框使用了 multiple 屬性實現了多選功能,下拉列表可以進行多選操作就是在 <select> 標簽中設置了 multiple 屬性,該屬性用於規定可同時選擇多個選項,需要注意:下拉列表框根據選項的個數(單選/復選),會在網頁上呈現不同的顯示效果。在不同的操作系統,選擇多個選項的方法也不同,在 windows 操作系統下,需要按住 Ctrl 鍵來選擇多個選項,而在 Mac 系統下,需要按住 Command 鍵來選擇多個選項。

  <option> 標簽的 value 屬性值為向服務器提交的值,selected 屬性則表示該選項被默認選中,即首次在列表中時表現為選中狀態。該標簽需要與 <select> 標簽配合使用,否則這個標簽是沒有任何意義的。

  <select> 元素是一種表單控件,可用於在表單中接受用戶輸入。還元素有幾個重要屬性,required 屬性規定用戶在提交表單前必須選擇一個下拉列表中的選項。autofocus 屬性規定在頁面加載時下拉列表自動獲得焦點。size 屬性規定下拉列表中可見選項的數目。由於各屬性之間的差異,需要告訴用戶是否可以多項選擇,對用戶更友好的方式是使用復選框。

  如果有很多的選項組合,就可以使用 <optgroup> 標簽能夠很簡單的將相關選項組合在一起。該標簽經常用於把相關的選項組合在一起。如下:

 <form method="post" action="demo.php">
     <label for="like">喜歡:</label>
     <select>
         <optgroup label="國產">
             <option value="奇瑞">奇瑞</option>
             <option value="大眾">大眾</option>
             <option value="現代">現代</option>
             <option value="哈弗">哈弗</option>
             <option value="比亞迪">比亞迪</option>
         </optgroup>
         <optgroup label="進口">
             <option value="蘭博基尼">蘭博基尼</option>
             <option value="雷克薩斯">雷克薩斯</option>
             <option value="凱迪拉克">凱迪拉克</option>
             <option value="瑪莎拉蒂">瑪莎拉蒂</option>
             <option value="英菲尼迪">英菲尼迪</option>
         </optgroup>
     </select>
 </form>

 

  <optgroup> 標簽一個重要屬性 label 用於為選項組規定描述。

 

6、按鈕

  在表單中有兩種按鈕可以使用,分別為:提交按鈕和重置按鈕。還有一種按鈕叫做點擊按鈕。

  (1)、點擊按鈕

  type="button" 定義一個可點擊的按鈕,在用戶點擊按鈕時啟動一段 JavaScript。

 <input type="button" value="按鈕" onclick="show()">
 <script>
 function show(){
     alert("Hello world!");
 }
 </script>

 

  (2)、提交按鈕

  當用戶需要提交表單信息到服務器時,需要用到提交按鈕。type="submit" 用於定義提交按鈕。

 <form method="post" action="demo.php">
     <label for="urse">用戶名:</label>
     <input type="text" id="urse" name="ursename" placeholder="郵箱/手機號/用戶名"/><br/>
     <label for="password">密 碼:</label>
     <input type="password" id="password" name="pass" placeholder="請輸入密碼" /><br/>
     <input type="submit" value="提交信息">
 </form>

 

  button 和 submit 都是定義一個按鈕,不同的是 button 只是一個普通的按鈕,主要用於綁定事件,如果不給其綁定事件,那麼點擊按鈕不會有任何反應。而 submit 則是提交按鈕,主要用於提交表單,傳送數據,如果給 submit 綁定事件,那麼點擊按鈕觸發事件的同時,也會提交表單。

  (3)、重置按鈕

  當用戶需要重置表單信息到初始時的狀態時,比如用戶輸入信息後,發現輸入錯誤,那麼可以使用重置按鈕使輸入框恢復到初始狀態。只需要把 type 設置為 "reset" 就可以。

 <form method="post" action="demo.php">
     <label for="urse">用戶名:</label>
     <input type="text" id="urse" name="ursename" placeholder="郵箱/手機號/用戶名"/><br/>
     <label for="password">密 碼:</label>
     <input type="password" id="password" name="pass" placeholder="請輸入密碼" /><br/>
     <input type="submit" value="提交信息">
     <input type="reset" value="重置信息">
 </form>

  type="reset" 用於定義一個重置按鈕,需要謹慎使用該按鈕,當用戶點擊重置按鈕後,所有表單值都會恢復到默認值,這對於用戶來說,如果不慎點擊了重置按鈕將是一件十分令人惱火的事。

  在 HTML 中還有一種創建按鈕的方法就是使用 <button> 標簽。該元素與使用 <input> 元素創建的按鈕之間的不同之處就在於:使用 button 元素創建的按鈕,在該元素內部可以放入內容,比如文本或圖像,也就是該元素可以使用多媒體內容,<button> 與 </button> 標簽之間的所有內容都是按鈕的內容。該元素也可以定義點擊按鈕、提交按鈕和重置按鈕。但是他的缺點就是:不同的浏覽器對 <button> 元素的 type 屬性使用不同的默認值,因此要始終為 <button> 元素規定 type 屬性,不同浏覽器可能會提交不同的按鈕值,也就是浏覽器得到的 value 值不同,存在兼容性問題。所以要使用 <input> 元素在 HTML 表單中創建按鈕。

 

7、input 元素屬性和其他輸入類型

  除了前邊提到的一些屬性外,input 元素還有一些重要屬性,以及 HTML5 新增加的屬性。

  readonly 屬性規定輸入字段是只讀的。該屬性是一個布爾值。只讀字段是不能修改的。不過,用戶仍然可以使用 tab 鍵切換到該字段,還可以選中或拷貝其文本。readonly 屬性可以防止用戶對值進行修改,直到滿足某些條件為止,比如選中了一個復選框。然後,需要使用 JavaScript 消除 readonly 值,將輸入字段切換到可編輯狀態。

  size 屬性規定以字符數計的 <input> 元素的可見寬度。size 屬性適用於下面的 input 類型:text、search、tel、url、email 和 password。如需規定 <input> 元素中允許的最大字符數,需要使用 maxlength 屬性

  以下是 HTML5 中的新屬性:

  autocomplete="on|off" 屬性規定輸入字段是否應該啟用自動完成功能。默認值為 on,規定用戶啟用自動完成功能,off 則表示禁用。注意:autocomplete 屬性適用於下面的 <input> 類型:text、search、url、tel、email、password、date pickers(日期選擇器)、range 和 color。

  multiple 屬性規定允許用戶輸入到 <input> 元素的多個值。該值是一個布爾值,注意:multiple 屬性適用於以下 input 類型:email 和 file。

  pattern 屬性規定用於驗證 <input> 元素的值的正則表達式。可以使用使用全局的 title 屬性來描述模式以幫助用戶。pattern 屬性適用於下面的 input 類型:text、search、url、tel、email 和 password。

  required 屬性規定必需在提交表單之前填寫輸入字段。該屬性是一個布爾值,required 屬性適用於下面的 input 類型:text、search、url、tel、email、password、date pickers、number、checkbox、radio 和 file。

 

  下面是 input 元素的其他輸入類型:

  (1)、圖像作為按鈕

  type="image" 用於定義圖像作為提交按鈕,如下:

<input type="image" src="imges/submit.gif" alt="Submit" width="48" height="48">

  上面代碼中的 3 個屬性都只針對 type="image",src 屬性規定顯示為提交按鈕的圖像的 URL。alt 屬性定義圖像輸入的替代文本。width 和 height 規定 <input>元素的寬度/高度。

 

  (2)、隱藏字段

  type="hidden" 用於定義隱藏字段,隱藏字段對於用戶是不可見的。隱藏字段常常存儲默認值,或者由 JavaScript 改變它們的值。

 <form method="post" action="demo.php">
     姓名: <input type="text" name="user"><br/>
     <input type="hidden" name="country" value="China">
     <input type="submit" value="提交">
 </form>

 

  (3)、選擇文件

  type="file" 用於定義文件選擇字段和 "浏覽..." 按鈕,供文件上傳。

 <form method="post" action="demo.php">
     選擇一個文件: <input type="file" name="img" accept="image/*,audio/*,video/*"><br/>
     <input type="submit" value="提交">
 </form>

  accept 屬性僅適用於 <input type="file">。該屬性規定了可通過文件上傳提交的服務器接受的文件類型。如需要多個文件類型,每個值可以使用逗號分隔。注意:不要將該屬性作為驗證工具,應該在服務器上對文件上傳進行驗證。

 

以下都是 input 元素在 HTML5 中的新類型:

  (4)、Email

  type="email" 用於定義郵箱地址的字段,當提交表單時會自動對 email 字段的值進行驗證。

Email: <input type="email" name="usre">

 

  (5)、電話號碼

  type="tel" 用於定義用於輸入電話號碼的字段。

電話號碼: <input type="tel" name="mobile">

 

  (6)、拾色器

  type="color" 用於定義從拾色器中選取顏色。

選擇你喜歡的顏色: <input type="color" name="likecol">

 

  (7)、搜索字段

  type="search" 定義用於輸入搜索字符串的文本字段,比如站內搜索。

查查看: <input type="search" name="lookup">

  目前,浏覽器對於該類型的支持不是很好。

 

  (8)、URL

  type="url" 定義用於輸入 URL 的字段。

添加你的主頁: <input type="url" name="homepage">

 

  (9)、數字字段

  type="number" 定義用於輸入數字的字段,可以設置可接受數字的限制。

數量 ( 1 到 5 之間): <input type="number" name="num" min="1" max="5">

  min 和 max 屬性可用於規定 <input> 元素的最小/最大值。value 屬性可規定默認值。step 屬性可規定 <input> 元素的合法數字間隔。實例:如果 step="3",則合法數字應該是 -3、0、3、6,以此類推。該屬性可以與 min 和 max 屬性配合使用,以創建合法值的范圍。

 

  type="range" 定義用於精確值不重要的輸入數字的控件,比如 Slider.js,一個輕量級圖片播放控件。也可以設置可接受數字的限制。用來規定限制的屬性同 number 類型相同。

 

  (10)、日期

  type="time" 定義用於輸入時間的控件(不帶時區)。

  type="date"  定義 date 控件。

  type="datetime" 定義 date 和 time 控件(帶有時區)。

  type="datetime-local" 定義 date 和 time 控件(不帶時區)。

  type="month" 定義 month 和 year 控件(不帶時區)。

  type="week" 定義 week 和 year 控件(不帶時區)。

 

8、其他表單標簽

  (1)、表單邊框

  <fieldset> 標簽定義圍繞表單中元素的邊框。<legend>標簽用於定義 fieldset 元素的標題。

 <form method="post" action="demo.php">
     <fieldset>
         <legend>個人信息:</legend>
         姓名: <input type="text"><br/>
         籍貫: <input type="text"><br/>
         郵箱: <input type="email"><br/>
         家庭住址: <input type="text">
     </fieldset>
 </form>

 

在 HTML5 中還增加了3個新標簽:

  (2)、<datalist>

  <datalist> 標簽規定了 input 元素可能的選項列表。如下:

 <form method="post" action="demo.php">
     <input list="browser" name="explorer" autofocus>
     <datalist id="browser">
         <option value="IE">
         <option value="Firefox">
         <option value="Chrome">
         <option value="Safari">
         <option value="Opera">
     </datalist>
     <input type="submit">
 </form>

 

  <datalist> 標簽被用來為 <input> 元素提供"自動完成"的特性。用戶能看到一個下拉列表,裡邊的選項是預先定義好的,將作為用戶的輸入數據。注意:必需使用 <input> 元素的 list 屬性來綁定 <datalist> 元素。該屬性引用 <datalist> 元素,其中包含 <input> 元素的預定義選項,該屬性值為綁定到 <input> 元素的 datalist 的 id。

  autofocus 屬性用於規定當頁面加載時 <input> 元素應該自動獲得焦點。

 

  (3)、<output>

  <output> 標簽作為計算結果輸出顯示,比如執行腳本的輸出。如下:

 <form method="post" action="demo.php" oninput="sum.value=parseInt(x.value)+parseInt(y.value)">
     0<input type="range" id="x" value="50">100
     +<input type="number" id="y" value="50">=
     <output name="sum" for="x y"></output>
 </form>

 

  該標簽有一個重要屬性 for 規定一個或多個元素的 id 列表,以空格分隔,用於描述計算中使用的元素與計算結果之間的關系。name 屬性定義對象的唯一名稱,在表單提交時使用。

 

  (4)、<keygen>

  <keygen> 規定用於表單的密鑰對生成器字段。當提交表單時,私鑰存儲在本地,公鑰發送到服務器。如下:

 <form method="post" action="demo.php">
     用戶名: <input type="text" name="usre"><br/>
     加 密: <keygen name="security" keytype="rsa">
     <input type="submit">
 </form>

 

  該標簽有一個重要屬性 keytype 用於定義密鑰的安全算法,該屬性規定應該使用哪種密鑰生成算法,安全算法有3種:rsa為默認,規定 RSA 安全算法,RSA 密鑰強度可由用戶選擇。dsa 規定 DSA 安全算法,DSA 密鑰長度可由用戶選擇。ec 規定 EC 安全算法,EC 密鑰強度可由用戶選擇。注意:不同的浏覽器對密鑰生成算法的支持會有所變化。

 

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved