TML 表單用于搜集不同類型的用戶輸入。HTML5 Input,擁有多個新的表單輸入類型,提供了更好的輸入控制和驗證,今天將為大家?guī)鞨TML中的表單及其input輸入類型。
一、HTML表單
1、HTML表單用于收集不同類型的用戶輸入,是一個包含表單元素的區(qū)域并且允許用戶在表單中輸入內(nèi)容,比如文本域(textarea)、下拉列表、單選框(radio=buttons)、復選框(checkboxes)等。
2、表單使用標簽<form>來設(shè)置,示例:
運行結(jié)果:
二、HTML表單屬性:
1、HTML表單包含表單元素,表單元素是指不同類型的input元素、復選框、單選按鈕、提交按鈕等。
2、action屬性
在上面的示例中出現(xiàn)了action屬性,action屬性定義在提交表單執(zhí)行的動作,向服務(wù)器提交表單的通常做法是使用提交按鈕。
通常,表單會被提交到web服務(wù)器上的網(wǎng)頁,上面的例子中,則指定了某個服務(wù)器腳本來處理被提交表單。
如果省略 action 屬性,則 action 會被設(shè)置為當前頁面。
3、method 屬性
method屬性規(guī)定在提交表單時所用的 HTTP 方法(GET 或 POST):
如果表單提交是被動的(比如搜索引擎查詢),并且沒有敏感信息,使用get。
如果表單正在更新數(shù)據(jù),或者包含敏感信息(例如密碼),使用post。
4、如果要正確地被提交,每個輸入字段必須設(shè)置一個 name 屬性,示例:
<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
First name:<br>
<input type="text" name="Firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
<p>如果您點擊提交,表單數(shù)據(jù)會被發(fā)送到名為 demo_form.asp 的頁面。</p>
<p>first name 不會被提交,因為此 input 元素沒有 name 屬性。</p>
</body>
</html>
運行結(jié)果:
5、target 屬性
target 屬性規(guī)定提交表單后在何處顯示響應(yīng),target 屬性可設(shè)置以下值之一:
默認值為 _self,這意味著響應(yīng)將在當前窗口中打開。
6、Autocomplete 屬性
autocomplete 屬性規(guī)定表單是否應(yīng)打開自動完成功能。
啟用自動完成功能后,瀏覽器會根據(jù)用戶之前輸入的值自動填寫值,示例:
運行結(jié)果:
7、所有<form>屬性的列表:
三、HTML表單元素:
1、<input>元素是最重要的表單元素,有很多的形態(tài),根據(jù)不同的type屬性,例如:
① 文本輸入(text),示例:
<!DOCTYPE html>
<html>
<body>
<form>
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
<p>請注意表單本身是不可見的。</p>
<p>同時請注意文本字段的默認寬度是 20 個字符。</p>
</body>
</html>
運行結(jié)果:
② 單選按鈕輸入(radio),示例:
<!DOCTYPE html>
<html>
<body>
<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form>
</body>
</html>
運行結(jié)果:
③ 提交按鈕(submit),示例:
<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
<p>如果您點擊提交,表單數(shù)據(jù)會被發(fā)送到名為 demo_form.asp 的頁面。</p>
</body>
</html>
運行結(jié)果:
2、<select>元素
<select>元素定義下拉列表,示例:
<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br><br>
<input type="submit">
</form>
</body>
</html>
運行結(jié)果:
3、<fieldset>元素
<fieldset>元素組合表單中的相關(guān)數(shù)據(jù)
<legend>元素為<fieldset>元素定義標題,示例:
<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
</body>
</html>
運行結(jié)果:
4、<textarea> 元素
<textarea> 元素定義多行輸入字段(文本域)、示例:
<!DOCTYPE html>
<html>
<body>
<form>
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
</form>
</body>
</html>
運行結(jié)果:
5、HTML5<datalist>元素
<datalist> 元素為 <input> 元素規(guī)定預(yù)定義選項列表。
用戶會在他們輸入數(shù)據(jù)時看到預(yù)定義選項的下拉列表。
<input> 元素的 list 屬性必須引用 <datalist> 元素的 id 屬性,示例:
<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>
</body>
</html>
運行結(jié)果:
四、HTML表單輸入類型
輸入類型 | 定義 |
text | 定義供文本輸入的單行輸入字段 |
password | 定義密碼字段 |
submit | 定義提交表單數(shù)據(jù)至表單處理程序的按鈕 |
radio | 定義單選按鈕 |
checkbox | 定義復選框 |
<input>中的type:
類型 | 定義 |
radio | 定義單選按鈕 |
checkbox | 定義復選框 |
button | 定義按鈕 |
number | 用于應(yīng)該包含數(shù)字值的輸入字段 |
date | 用于應(yīng)該包含日期的輸入字段 |
color | 用于應(yīng)該包含顏色的輸入字段 |
range | 用于應(yīng)該包含一定范圍內(nèi)的值的輸入字段 |
month | 允許用戶選擇月份和年份 |
week | 允許用戶選擇周和年 |
time | 允許用戶選擇時間(無時區(qū)) |
datetime | 允許用戶選擇日期和時間(有時區(qū)) |
datetime-local | 允許用戶選擇日期和時間(無時區(qū)) |
用于應(yīng)該包含電子郵件地址的輸入字段 | |
search | 用于搜索字段(搜索字段的表現(xiàn)類似常規(guī)文本字段) |
tel | 用于應(yīng)該包含電話號碼的輸入字段 |
url | 用于應(yīng)該包含 URL 地址的輸入字段 |
輸入限制:
這就是有關(guān)HTML表單的大概內(nèi)容了,希望這篇HTML的表單及其input輸入類型的知識點能對大家有所幫助。
sp內(nèi)建的request對象擁有五個獲取客戶端資料的方法(QueryString/Form/Cookies/ServerVariables/ClientCertificate)。
語法:request.方法名稱("參數(shù)")|request("參數(shù)")
如果采用后者,系統(tǒng)會自動選擇相應(yīng)的方法。
Form
這里再重新強調(diào)Form的一些屬性:
Enctype=資料傳送的MIME形態(tài)
Method=傳送資料的方式Get/Post
Onrest=按下rest鍵調(diào)用的程序
Onsubmit=按下sumit鍵調(diào)用程序
Target=輸出內(nèi)容的frame窗口>
使用Form傳送信息一般有三種方式:由html網(wǎng)頁內(nèi)的Form傳信息給其他Asp;由Asp內(nèi)的Form傳信息給另外一個Asp;Asp內(nèi)的信息傳送給自身。
語法:Request.Form(參數(shù))[(索引)]
其中參數(shù)表示Form中元素的名稱,索引表示相同名稱元素的順序號。
例:
可循環(huán)讀取名稱為user的元素,其中Count是Form的系統(tǒng)屬性,用于計算同名元素的個數(shù),如果該元素不存在,則其值為零。如果沒有指明要讀取第幾個同名元素,則系統(tǒng)會把全部同名元素的值都讀取出來,并用“,”作間隔。
例:Request.form("user")=abc,bcd,cde
2、QueryString
語法:Request.QueryString(參數(shù))[(索引)]
除了用Form傳輸資料外,還可通過在超鏈接后接“?”的方式傳輸信息,如:,這時可通過Request.QueryString("user")讀取傳輸?shù)男畔ⅲ蝗绻霈F(xiàn)多個重名的參數(shù),如:,則第一次
Resquest.QueryString("user")=abc,第二次
Resquest.QueryString("user")=bcd,第三次
Resquest.QueryString("user")=cde。
3、ServerVariables
語法:ServerVariables(參數(shù)名稱)
我們知道Web/Browse的傳輸協(xié)議是http,http的報頭會有一些客戶端的信息,如
客戶IP地址、瀏覽器的語言系統(tǒng)等。這時可通過Request.ServerVariables("***")獲取相關(guān)信息,如Request.ServerVariables("Accept_Language")可獲取客戶端瀏覽器 的語系。其他系統(tǒng)參數(shù)見下表:
SERVER_NAME server的機器名稱或IP地址。
SERVER_PORT server正在運行的端口號
REQUEST_METHOD 發(fā)出request的方法(GET/POST/HEAD
SCRIPT_NAME 程序被調(diào)用的路徑,如:CGI-bin/a.pl。
REMOTE_HOST 發(fā)出request請求的遠端機器(client)的名稱。
REMOTE_ADDR 發(fā)出request請求的遠端機器(client)的IP地址。
REMOTE_IDENT 發(fā)出request的使用者名稱(如是撥號上網(wǎng),則為用戶ID),當NCSA IdentityCheck為enabled,而且client機器支持RFC 931時,該變量有效。
CONTENT_TYPE 數(shù)據(jù)的MIME類型,如:“text/html”。
HTTP_ACCEPT client可以接受的MIME類型列表。
HTTP_USER_AGENT client發(fā)出request的瀏覽器類型。
HTTP_REFERER 在讀取CGI程序之前,client所指的文本URL。
Request.ServerVariables中的各種參數(shù)
Request.ServerVariables("Url")
返回服務(wù)器地址
Request.ServerVariables("Path_Info")
客戶端提供的路徑信息
Request.ServerVariables("Appl_Physical_Path")
與應(yīng)用程序元數(shù)據(jù)庫路徑相應(yīng)的物理路徑
Request.ServerVariables("Path_Translated")
通過由虛擬至物理的映射后得到的路徑
Request.ServerVariables("Script_Name")
執(zhí)行腳本的名稱
Request.ServerVariables("Query_String")
查詢字符串內(nèi)容
Request.ServerVariables("Http_Referer")
請求的字符串內(nèi)容
Request.ServerVariables("Server_Port")
接受請求的服務(wù)器端口號
Request.ServerVariables("Remote_Addr")
發(fā)出請求的遠程主機的IP地址
Request.ServerVariables("Remote_Host")
發(fā)出請求的遠程主機名稱
Request.ServerVariables("Local_Addr")
返回接受請求的服務(wù)器地址
Request.ServerVariables("Http_Host")
返回服務(wù)器地址
Request.ServerVariables("Server_Name")
服務(wù)器的主機名、DNS地址或IP地址
Request.ServerVariables("Request_Method")
提出請求的方法比如GET、HEAD、POST等等
Request.ServerVariables("Server_Port_Secure")
如果接受請求的服務(wù)器端口為安全端口時,則為1,否則為0
Request.ServerVariables("Server_Protocol")
服務(wù)器使用的協(xié)議的名稱和版本
Request.ServerVariables("Server_Software")
應(yīng)答請求并運行網(wǎng)關(guān)的服務(wù)器軟件的名稱和版本
Request.ServerVariables("All_Http")
客戶端發(fā)送的所有HTTP標頭,前綴HTTP_
Request.ServerVariables("All_Raw")
客戶端發(fā)送的所有HTTP標頭,其結(jié)果和客戶端發(fā)送時一樣,沒有前綴HTTP_
Request.ServerVariables("Appl_MD_Path")
應(yīng)用程序的元數(shù)據(jù)庫路徑
Request.ServerVariables("Content_Length")
客戶端發(fā)出內(nèi)容的長度
Request.ServerVariables("Https")
如果請求穿過安全通道(SSL),則返回ON如果請求來自非安全通道,則返回OFF
Request.ServerVariables("Instance_ID")
IIS實例的ID號
Request.ServerVariables("Instance_Meta_Path")
響應(yīng)請求的IIS實例的元數(shù)據(jù)庫路徑
Request.ServerVariables("Http_Accept_Encoding")
返回內(nèi)容如:gzip,deflate
Request.ServerVariables("Http_Accept_Language")
返回內(nèi)容如:en-us
Request.ServerVariables("Http_Connection")
返回內(nèi)容:Keep-Alive
Request.ServerVariables("Http_Cookie")
返回內(nèi)容如:nVisiT%
2DYum=125;ASPSESSIONIDCARTQTRA=FDOBFFABJGOECBBKHKGPFIJI;ASPSESSIONIDCAQQTSRB=LKJJPLABABILLPCOGJGAMKAM;ASPSESSIONIDACRRSSRA=DK
HHHFBBJOJCCONPPHLKGHPB
Request.ServerVariables("Http_User_Agent")
返回內(nèi)容:Mozilla/4.0(compatible;MSIE6.0;WindowsNT5.1;SV1)
Request.ServerVariables("Https_Keysize")
安全套接字層連接關(guān)鍵字的位數(shù),如128
Request.ServerVariables("Https_Secretkeysize")
服務(wù)器驗證私人關(guān)鍵字的位數(shù)如1024
Request.ServerVariables("Https_Server_Issuer")
服務(wù)器證書的發(fā)行者字段
Request.ServerVariables("Https_Server_Subject")
服務(wù)器證書的主題字段
Request.ServerVariables("Auth_Password")
當使用基本驗證模式時,客戶在密碼對話框中輸入的密碼
Request.ServerVariables("Auth_Type")
是用戶訪問受保護的腳本時,服務(wù)器用於檢驗用戶的驗證方法
Request.ServerVariables("Auth_User")
代證的用戶名
Request.ServerVariables("Cert_Cookie")
唯一的客戶證書ID號
Request.ServerVariables("Cert_Flag")
客戶證書標志,如有客戶端證書,則bit0為0如果客戶端證書驗證無效,bit1被設(shè)置為1
Request.ServerVariables("Cert_Issuer")
用戶證書中的發(fā)行者字段
Request.ServerVariables("Cert_Keysize")
安全套接字層連接關(guān)鍵字的位數(shù),如128
Request.ServerVariables("Cert_Secretkeysize")
服務(wù)器驗證私人關(guān)鍵字的位數(shù)如1024
Request.ServerVariables("Cert_Serialnumber")
客戶證書的序列號字段
Request.ServerVariables("Cert_Server_Issuer")
服務(wù)器證書的發(fā)行者字段
Request.ServerVariables("Cert_Server_Subject")
服務(wù)器證書的主題字段
Request.ServerVariables("Cert_Subject")
客戶端證書的主題字段
Request.ServerVariables("Content_Type")
客戶發(fā)送的form內(nèi)容或HTTPPUT的數(shù)據(jù)類型
4、Cookies
在客戶端,Cookies記錄了客戶端瀏覽器很多的信息,我們可通過Request.Cookies("名稱")命令獲取它的值,也可通過Response.Cookies("名稱")="值"在客戶端記錄一些信息,以便控制訪問者。設(shè)置多重Cookies的方法為Response.Cookies("名稱")("名稱")="值"。
5、Cache
我們可以在瀏覽器上設(shè)置從Cache中抽取已經(jīng)訪問過的頁面的信息,同樣,在Asp程序中也可進行類似的設(shè)置。其中Response.Clear為清空客戶端的內(nèi)存。Response.Buffer=True設(shè)置可從Cache中讀取資料(缺省時為False)。
6、ClientCertificate
ClientCertificate用于獲取客戶端瀏覽器的身份確認信息(符合X.509標準),但客戶端瀏覽器必須支持SSL3.0或PCT1協(xié)議。這里需做兩步工作,第一步:web server必須啟動用戶端認證選項;第二步:對客戶端瀏覽器進行相應(yīng)設(shè)置,這樣,該方法才會生效,否則,傳回empty值。
只用request(),相當每次取值時都要判斷下是不是通過form或querystring來提交的,所以這種比較影響速度,一般最好后面如能確認參數(shù)的屬性,就確認下來
DO.NET 也是 .NET 框架的組成部分。ADO.NET 用于處理數(shù)據(jù)訪問。通過 ADO.NET,您可以操作數(shù)據(jù)庫。
數(shù)據(jù)庫連接 - 綁定到 DataList 控件
數(shù)據(jù)庫連接 - 綁定到 Repeater 控件
什么是 ADO.NET?
ADO.NET 是 .NET 框架的組成部分
ADO.NET 由一系列用于處理數(shù)據(jù)訪問的類組成
ADO.NET 完全基于 XML
ADO.NET 沒有 Recordset 對象,這一點與 ADO 不同
創(chuàng)建數(shù)據(jù)庫連接
在我們的實例中,我們將使用 Northwind 數(shù)據(jù)庫。
首先,導入 "System.Data.OleDb" 命名空間。我們需要這個命名空間來操作 Microsoft Access 和其他 OLE DB 數(shù)據(jù)庫提供商。我們將在 Page_Load 子例程中創(chuàng)建這個數(shù)據(jù)庫的連接。我們創(chuàng)建一個 dbconn 變量,并為其賦值一個新的 OleDbConnection 類,這個類帶有指示 OLE DB 提供商和數(shù)據(jù)庫位置的連接字符串。然后我們打開數(shù)據(jù)庫連接:
<%@ Import Namespace="System.Data.OleDb" %>
<script runat="server">
sub Page_Load
dim dbconn
dbconn=New OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0;
data source=" & server.mappath("northwind.mdb"))
dbconn.Open()
end sub
</script>
注釋:這個連接字符串必須是沒有折行的連續(xù)字符串!
創(chuàng)建數(shù)據(jù)庫命令
為了指定需從數(shù)據(jù)庫取回的記錄,我們將創(chuàng)建一個 dbcomm 變量,并為其賦值一個新的 OleDbCommand 類。這個 OleDbCommand 類用于發(fā)出針對數(shù)據(jù)庫表的 SQL 查詢:
<%@ Import Namespace="System.Data.OleDb" %>
<script runat="server">
sub Page_Load
dim dbconn,sql,dbcomm
dbconn=New OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0;
data source=" & server.mappath("northwind.mdb"))
dbconn.Open()
sql="SELECT * FROM customers"
dbcomm=New OleDbCommand(sql,dbconn)
end sub
</script>
創(chuàng)建 DataReader
OleDbDataReader 類用于從數(shù)據(jù)源中讀取記錄流。DataReader 是通過調(diào)用 OleDbCommand 對象的 ExecuteReader 方法來創(chuàng)建的:
<%@ Import Namespace="System.Data.OleDb" %>
<script runat="server">
sub Page_Load
dim dbconn,sql,dbcomm,dbread
dbconn=New OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0;
data source=" & server.mappath("northwind.mdb"))
dbconn.Open()
sql="SELECT * FROM customers"
dbcomm=New OleDbCommand(sql,dbconn)
dbread=dbcomm.ExecuteReader()
end sub
</script>
綁定到 Repeater 控件
然后,我們綁定 DataReader 到 Repeater 控件:
實例
<%@ Import Namespace="System.Data.OleDb" %>
<script runat="server">
sub Page_Load
dim dbconn,sql,dbcomm,dbread
dbconn=New OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0;
data source=" & server.mappath("northwind.mdb"))
dbconn.Open()
sql="SELECT * FROM customers"
dbcomm=New OleDbCommand(sql,dbconn)
dbread=dbcomm.ExecuteReader()
customers.DataSource=dbread
customers.DataBind()
dbread.Close()
dbconn.Close()
*請認真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。