HTML中的表單元素介紹
我要評論表單元素概述
表單（Form），用于收集用戶信息、提交用戶請求等
處理過程
- 1、設計表單，并放入一些輸入域
- 2、網站訪問者在自己的計算機上填寫上述輸入域，并提交到服務器端
- 3、服務器處理數據并返回確認信息
其執行過程可以用下圖表示：
語法：
開始標記：必需
內容：表單域元素
結束標記：必需
主要屬性：
1、accept：文件上傳所使用的MIME類型列表。
2、action：表單提交的地址，通常是包含服務方腳本的URL。如果為空則表示向當前頁面提交。
3、method：指出表單數據提交的方式。有兩個可能值：
GET：將表單數據附加在請求中的URL上（默認方式）。
POST：將表單數據封裝在發送到服務器的請求中，比get方式安全。
作用：定義一個區域可以加入表單對象。
表單元素的基本結構：
注意：get和post方式的區別
- 1、get是向服務器獲取/查詢數據的一種請求，post是向服務器提交數據的一種請求。
- 2、服務器端獲取值的方法
get方式提交的數據，服務端使用request.QueryString獲取變量的值。
post方式提交的數據，服務端使用request.Form獲取數據。
- 3、安全性
get方式的請求是把參數數據隊列附加在提交表單的ACTION屬性所指的URL后面，值和表單內各個字段一一對應，以?分割URL和傳輸數據，參數之間以&分割，由于可以在URL里面看到參數數據，所以get方式不安全。
post方式是將表單內各個字段與其內容放置在HTML HEADER一起傳送到ACTION屬性所指的URL地址，在URL里面看不到參數數據，所以post方式比較安全。
但是post方式執行效率要比get方式差一些。
- 4、大小
URL不存在參數上限的問題，HTTP協議規范沒有對URL長度進行限制。這個限制是特定的瀏覽器及服務器對它的限制。IE對URL長度的限制是2083字節(2K+35)。對于其他瀏覽器，如Netscape、FireFox等，理論上沒有長度限制，其限制取決于操作系統的支持。
理論上講，POST是沒有大小限制的，HTTP協議規范也沒有進行大小限制，說“POST數據量存在80K/100K的大小限制”是不準確的，POST數據是沒有限制的，起限制作用的是服務器的處理程序的處理能力。
對于ASP程序，Request對象處理每個表單域時存在100K的數據長度限制。但如果使用Request.BinaryRead則沒有這個限制。
由這個延伸出去，對于IIS 6.0，微軟出于安全考慮，加大了限制。我們還需要注意：
- 1).IIS 6.0默認ASP POST數據量最大為200KB，每個表單域限制是100KB。
- 2).IIS 6.0默認上傳文件的最大大小是4MB。
- 3).IIS 6.0默認最大請求頭是16KB。
IIS 6.0之前沒有這些限制。[參2]
總結：
1、get方式的安全性較post方式要差一些，所以，如果包含一些重要的信息，簡易使用post數據提交方式。
2、在做查詢統計的時候，使用get方式要更好一些；而在做數據的添加、修改或刪除操作時，建議使用post方式提交數據。
表單控件元素
表單控件元素是包含在表單元素中具有可視化外觀的HTML元素，用于訪問者輸入信息。
表單元素包括：
1、input：輸入元素。
2、textarea元素。
3、select和option。
4、其他元素。
一、input元素
input元素包括：
- 文本域控件
- 口令控件
- 提交按鈕和重置按鈕
- 復選框控件
- 單選按鈕
- 圖像按鈕和普通按鈕
- 隱藏控件和文本選擇控件
根據對type屬性的不同取值，可以建立多種顯示風格的表單控件，如文本區域、口領域、復選框等。
主要屬性：
type屬性：指定表單控件的類型，可取值text、password、submit、reset、CheckBox
radio、image、button、hidden、file。
value屬性：指定表單控件的數據。
name屬性：指定該控件的名稱。
1、文本域控件
type="text"
作用：用于創建一個單行文本輸入字段
值：由訪問者自由輸入的任何文本
與input元素的其他屬性配合：
maxlength屬性可以限制輸入的字符數。
readonly屬性可以讓文本控件只讀。
示例：
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>表單元素</title>
</head>
<body>
<form method="POST">
<div>
名字: <input type="text" name="姓名" value="填寫名字">
</div>
</form>
</body>
</html>
結果：
2、密碼框
type="password"
作用；用于創建一個單行文本輸入字段，并用*號屏蔽用戶的輸入。注意，當password輸入的數據提交時并不以任何形式加密
value值：由訪問者自由輸入的任何文本作為默認值。
示例：
例如：
<div>
密 碼: <input type="password">(至少包含6個字符)
</div>
<div>
確認密碼:<input type="password">(至少包含6個字符)
</div>
結果：
3、復選框控件
type="checkbox"
作用：創建一個可以在選中和未選中之間切換的控件，當該表單提交給一個腳本進行處理時，每個被選取的復選框將返回一個與該復選框的名稱相關聯的值。
value值：選中該控件的值，可以是任意文本。（提交給服務器的是value的值）
與input元素的其它屬性配合：
要以選取狀態顯示復選框，使用checked屬性。
基本語法
<INPUT type="checkbox" name="cb2" value="talk">
建議：name和id的值一致
示例：
<body>
<form name="form4" method="post" action="">
愛好：
<input type="checkbox" name="cb1" id="cb1" value="sports">
<!--for指的是input里面的id屬性,把“運動”和復選框關聯起來，實現點擊“運動”兩字也可以選中-->
<label for="cb1">運動</label>
<input type="checkbox" name="cb2" id="cb2" value="talk" checked="checked">
<label for="cb2">聊天</label>
<input type="checkbox" name="cb3" id="cb3" value="play">
<label for="cb3">玩游戲</label>
</form>
</body>
例如：
<div>
愛 好:
<input type="checkbox" name="sports" id="sports" checked="checked"/>
<label for="sports"> 運動</label>
<input type="checkbox" name="talk" id="talk" />
<label for="talk"> 聊天</label>
<input type="checkbox" name="play" id="play" />
<label for="play"> 玩游戲</label>
</div>
結果：
4、單選按鈕
type="radio"
作用：創建一個單選按鈕，用于互斥地選擇某種屬性值
value值:文本，當提交form時，如果選中了此單選按鈕，那么value就被發送到服務器
name：按鈕分組
與input元素的其它屬性配合：
要以選取狀態顯示復選框，使用checked屬性
基本語法
<input type="radio" value="男" checked="checked">
注意：單選按鈕的name屬性的值必須相等，才能實現互斥的效果。
示例：
<body>
<form name="form1" method="post" action="">
<BR>
性別：
<input type="radio" name="gen" class="input" value="1" checked="checked">男
<input type="radio" name="gen" class="input" value="2" >女
</form>
</body>
例如：
<div>
性 別:
<input type="radio" name="sex" checked="checked">男
<input type="radio" name="sex">女
</div>
結果：
默認第一個被選中。
5、提交按鈕
type="submit"
作用：傳送表單數據給服務器端腳本或其他程序處理。
value值：按鈕的標題文字。
基本語法：
<input type="submit" name="Submit" value="提交">
例如：
<div>
<input type="submit" value="提交" />
</div>
結果：
6、重置按鈕
type="reset"
作用：清空表單的內容并把所有表單控件設置為最初的默認值
value值：按鈕的標題文字
基本語法：
<input type="reset" name="Reset" value="重置">
注意：重置不是清空，而是把表單控件的值重置為value屬性中指定的初始值。
例如：
<div>
<input type="submit" value="提交" />
<input type="reset" value="重置" />
</div>
結果：
7、圖像按鈕
type="image"
作用：創建一個圖像按鈕，用于實現用戶自定義的按鈕風格。
src屬性：指向按鈕圖片的位置。
基本語法：
<input name="image" type="image" src="B7.jpg">
8、普通按鈕
type="button"
作用：用于控制執行客戶端腳本。
value值：文本，顯示在按鈕上的文字。
基本語法：
<input name="verify" type="button" value="檢查數據">
作用：
點擊按鈕，實現某種效果。
例如：
<div>
<input type="submit" value="提交" />
<input type="reset" value="重置" />
<input type="button" value="按鈕" />
</div>
結果：
9、隱藏控件
type="hidden"
作用：用于在表單中包含不希望用戶看見的信息。
value值：文本，指派給控件的值，當用戶提交表單時，該值與其他數據一起被發送。
基本語法：
<input type="hidden" name="hiddenField">
10、文件選擇控件
type="file"
作用：上傳文件
value值：文本，要上傳的文件在本地的路徑。
基本語法
<input type="file" name="file">
例如：
<div>
<input type="file" />
</div>
效果：
選擇文件后的效果：
二、textarea元素
作用：建立一個多行的文本輸入區域。
基本語法：
<TEXTAREA name="textarea" cols="40" rows="6">文本框中的內容</TEXTAREA>
主要屬性：
- cols屬性：指定文本區域的列數。
- rows屬性：指定文本區域的行數。
- Name屬性：指定該控件的名字
- Readonly: 使文本區域不能編輯。
注意：cols和rows只表示頁面顯示的字符個數，如果超過，則會自動顯示相應的橫向和縱向滾動條。
例如：
<div>
注冊條款:
<textarea name="user" rows="3" cols="5">
</textarea>
</div>
結果：
三、select元素
列表框元素，用于建立一個選擇菜單/列表，效果類似于C#中的ComboBox,實現下拉框的效果
語法：
開始標記：必需
內容：option元素
結束標記：必需
主要屬性：
size屬性：指定列表的高度。
multiple屬性：指定數據項可以多選。
name屬性：指定該控件的名字。
option元素
菜單項/列表項元素，代表一個選擇菜單/列表的選項
語法：
開始標記：必需
內容：文本
結束標記：可選
主要屬性：
value屬性：指定選中該項提交的值。
selected屬性：指定該項預先被選擇。
基本語法
<select name="指定列表名稱" size="行數">
<option value="可選項的值" selected>text</option>
<option value="可選項的值" >text</option>
......
</select>
說明：
size：確定列表中可同時看到的行數
selected：默認被選中的可選項
text：表示頁面上顯示的內容
value：提交給后臺的值
示例：
<div>
出生日期:
年: <select >
<option value="" selected="selected">[選擇年]</option>
<option value=0>2015</option>
<option value=1>2016</option>
<option value=2>2017</option>
<option value=3>2018</option>
</select>
月: <select >
<option value="" selected="selected">[選擇月]</option>
<option value=0>一月</option>
<option value=1>二月</option>
<option value=2>三月</option>
<option value=3>四月</option>
<option value=4>五月</option>
<option value=5>六月</option>
<option value=6>七月</option>
<option value=7>八月</option>
<option value=8>九月</option>
<option value=9>十月</option>
<option value=10>十一月</option>
<option value=11>十二月</option>
</select>
日: <select >
<option value="" selected="selected">[選擇日]</option>
<option value=0>1</option>
<option value=1>2</option>
<option value=2>3</option>
<option value=3>4</option>
<option value=4>5</option>
<option value=5>6</option>
<option value=6>7</option>
<option value=7>8</option>
<option value=8>9</option>
<option value=9>10</option>
<option value=10>11</option>
<option value=11>12</option>
<option value=12>13</option>
<option value=13>14</option>
<option value=14>15</option>
<option value=15>16</option>
<option value=16>17</option>
<option value=17>18</option>
<option value=18>19</option>
<option value=19>20</option>
<option value=20>21</option>
<option value=21>22</option>
<option value=22>23</option>
<option value=23>24</option>
<option value=24>25</option>
<option value=25>26</option>
<option value=26>27</option>
<option value=27>28</option>
<option value=28>29</option>
<option value=29>30</option>
<option value=30>31</option>
</select>
</div>
結果：
四、Label元素
語法：
開始標記：必需
內容：文本
結束標記：必需
如下圖所示：
主要屬性：
for：表示與該元素相聯系的控件的ID值
作用：
將文本域控件聯系在一起，將文本與控件聯系在一起后，用戶就可以單擊這個文本，效果就同單擊控件一樣。
示例：
<div>
<label for="userName">名 字: </label>
<input type="text" name="username" id="userName">
</div>
<div>
<label>姓 氏: <input type="text"></label>
</div>
結果：
這樣，點擊名字或姓氏的時候，其后面的文本框會自動獲取焦點。
五 、表單高級應用
1、只讀屬性
readonly：希望某個框內的內容只允許用戶看，不能修改。
例如：給名字文本框增加value值，value值只能看，不能修改
<div>
<label for="userName">名 字: </label>
<input type="text" name="username" id="userName" value="請輸入姓名" readonly="readonly">
</div>
結果：
2、禁用屬性
disable：因沒達到使用的條件，限制用戶使用。
例如：
<div>
<label>姓 氏:
<input type="text" value="王" disabled="disabled">
</label>
</div>
結果：
從圖中可以看出：姓氏文本框是灰色的，表示禁用。
到此這篇關于HTML表單元素的文章就介紹到這了。希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
- 這篇文章主要介紹了關于html的表單元素，文中講解了Action 屬性Method 屬性-下拉列表：< select > 元素-按鈕：< button> 元素等，具體操作步驟大家可查看下文2017-08-16
- 這篇文章主要介紹了關于html的表單元素，通過介紹value 屬性，readonly 屬性，disabled 屬性，size 屬性，maxlength 屬性，width 屬性等詳細解釋了表單元素的組成和應用，2017-08-16
- 下面小編就為大家帶來一篇HTML Form表單元素全面了解。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-26
- 點擊這里返回網頁教學網 HTML教程 欄目． 上文：標記語言——引用 原文出處 chapter 5 表單 互動性一直是互聯網的重點,讓使用者與網站能夠交換信息2008-10-17
之前碰到一個作業，給了一張圖片，讓按照圖片樣式做一個表單，但是一直表單無法居中，在網上找了各種例子之后，終于成功，今天就來介紹一下，感興趣的可以了解一下2021-05-25
這篇文章主要介紹了HTML如何對齊多個表單中的文本框的實現，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一2020-06-18- 表單提交是常見的一種操作，這篇文章主要介紹了html中表單提交的實現，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-06
- 本文通過實例代碼給大家介紹了HTML 表單組件的知識，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-10-31
HTML中禁用表單控件的兩種方法readonly與disabled
有時候我們會希望表單上的控件是不可修改的，比如在修改密碼的網頁中，顯示用戶名的文本框就應該是不可修改狀態的，下面與大家分享下禁用表中控件的兩種方法2014-08-24
最新評論