HTML表单及其Input输入类型

TML 表单用于搜集不同类型的用户输入。HTML5 Input，拥有多个新的表单输入类型，提供了更好的输入控制和验证，今天将为大家带来HTML中的表单及其input输入类型。

一、HTML表单

1、HTML表单用于收集不同类型的用户输入，是一个包含表单元素的区域并且允许用户在表单中输入内容，比如文本域（textarea）、下拉列表、单选框（radio=buttons）、复选框（checkboxes）等。

2、表单使用标签<form>来设置，示例：

运行结果：

二、HTML表单属性：

1、HTML表单包含表单元素，表单元素是指不同类型的input元素、复选框、单选按钮、提交按钮等。

2、action属性

在上面的示例中出现了action属性，action属性定义在提交表单执行的动作，向服务器提交表单的通常做法是使用提交按钮。

通常，表单会被提交到web服务器上的网页，上面的例子中，则指定了某个服务器脚本来处理被提交表单。

如果省略 action 属性，则 action 会被设置为当前页面。

3、method 属性

method属性规定在提交表单时所用的 HTTP 方法（GET 或 POST）：

如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息，使用get。

如果表单正在更新数据，或者包含敏感信息（例如密码），使用post。

4、如果要正确地被提交，每个输入字段必须设置一个 name 属性，示例：

<!DOCTYPE html>

<html>

<body>

First name:<br>

<br>

Last name:<br>

</form>

<p>如果您点击提交，表单数据会被发送到名为 demo_form.asp 的页面。</p>

<p>first name 不会被提交，因为此 input 元素没有 name 属性。</p>

</body>

</html>

运行结果：

5、target 属性

target 属性规定提交表单后在何处显示响应，target 属性可设置以下值之一：

默认值为 _self，这意味着响应将在当前窗口中打开。

6、Autocomplete 属性

autocomplete 属性规定表单是否应打开自动完成功能。

启用自动完成功能后，浏览器会根据用户之前输入的值自动填写值，示例：

运行结果：

7、所有<form>属性的列表：

三、HTML表单元素：

1、<input>元素是最重要的表单元素，有很多的形态，根据不同的type属性，例如：

①　文本输入（text），示例：

<!DOCTYPE html>

<html>

<body>

<form>

First name:<br>

<br>

Last name:<br>

</form>

<p>请注意表单本身是不可见的。</p>

<p>同时请注意文本字段的默认宽度是 20 个字符。</p>

</body>

</html>

运行结果：

②　单选按钮输入（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>

运行结果：

③　提交按钮（submit），示例：

<!DOCTYPE html>

<html>

<body>

First name:<br>

<br>

Last name:<br>

</form>

<p>如果您点击提交，表单数据会被发送到名为 demo_form.asp 的页面。</p>

</body>

</html>

运行结果：

2、<select>元素

<select>元素定义下拉列表，示例：

<!DOCTYPE html>

<html>

<body>

<option value="volvo">Volvo</option>

</select>

</form>

</body>

</html>

运行结果：

3、<fieldset>元素

<fieldset>元素组合表单中的相关数据

<legend>元素为<fieldset>元素定义标题，示例：

<!DOCTYPE html>

<html>

<body>

<legend>Personal information:</legend>

First name:<br>

<br>

Last name:<br>

</fieldset>

</form>

</body>

</html>

运行结果：

4、<textarea> 元素

<textarea> 元素定义多行输入字段（文本域）、示例：

<!DOCTYPE html>

<html>

<body>

<form>

The cat was playing in the garden.

</textarea>

</form>

</body>

</html>

运行结果：

5、HTML5<datalist>元素

<datalist> 元素为 <input> 元素规定预定义选项列表。

用户会在他们输入数据时看到预定义选项的下拉列表。

<input> 元素的 list 属性必须引用 <datalist> 元素的 id 属性，示例：

<!DOCTYPE html>

<html>

<body>

</datalist>

</form>

</body>

</html>

运行结果：

四、HTML表单输入类型

输入类型	定义
text	定义供文本输入的单行输入字段
password	定义密码字段
submit	定义提交表单数据至表单处理程序的按钮
radio	定义单选按钮
checkbox	定义复选框

<input>中的type：

类型	定义
radio	定义单选按钮
checkbox	定义复选框
button	定义按钮
number	用于应该包含数字值的输入字段
date	用于应该包含日期的输入字段
color	用于应该包含颜色的输入字段
range	用于应该包含一定范围内的值的输入字段
month	允许用户选择月份和年份
week	允许用户选择周和年
time	允许用户选择时间（无时区）
datetime	允许用户选择日期和时间（有时区）
datetime-local	允许用户选择日期和时间（无时区）
email	用于应该包含电子邮件地址的输入字段
search	用于搜索字段（搜索字段的表现类似常规文本字段）
tel	用于应该包含电话号码的输入字段
url	用于应该包含 URL 地址的输入字段

输入限制：

这就是有关HTML表单的大概内容了，希望这篇HTML的表单及其input输入类型的知识点能对大家有所帮助。

sp内建的request对象拥有五个获取客户端资料的方法(QueryString/Form/Cookies/ServerVariables/ClientCertificate)。
语法：request.方法名称("参数")|request("参数")
如果采用后者，系统会自动选择相应的方法。
Form
这里再重新强调Form的一些属性:
Enctype=资料传送的MIME形态
Method=传送资料的方式Get/Post
Onrest=按下rest键调用的程序
Onsubmit=按下sumit键调用程序
Target=输出内容的frame窗口>
使用Form传送信息一般有三种方式：由html网页内的Form传信息给其他Asp；由Asp内的Form传信息给另外一个Asp；Asp内的信息传送给自身。
语法:Request.Form(参数)[(索引)]
其中参数表示Form中元素的名称，索引表示相同名称元素的顺序号。
例:
可循环读取名称为user的元素，其中Count是Form的系统属性，用于计算同名元素的个数，如果该元素不存在，则其值为零。如果没有指明要读取第几个同名元素，则系统会把全部同名元素的值都读取出来，并用“，”作间隔。
例：Request.form("user")=abc，bcd,cde
2、QueryString
语法:Request.QueryString(参数)[(索引)]
除了用Form传输资料外，还可通过在超链接后接“?”的方式传输信息，如:，这时可通过Request.QueryString("user")读取传输的信息；如果出现多个重名的参数，如:，则第一次
Resquest.QueryString("user")=abc，第二次
Resquest.QueryString("user")=bcd，第三次
Resquest.QueryString("user")=cde。
3、ServerVariables
语法:ServerVariables(参数名称)
我们知道Web/Browse的传输协议是http，http的报头会有一些客户端的信息，如
客户IP地址、浏览器的语言系统等。这时可通过Request.ServerVariables("***")获取相关信息，如Request.ServerVariables("Accept_Language")可获取客户端浏览器的语系。其他系统参数见下表：
SERVER_NAME server的机器名称或IP地址。
SERVER_PORT server正在运行的端口号
REQUEST_METHOD 发出request的方法(GET/POST/HEAD
SCRIPT_NAME 程序被调用的路径，如：CGI-bin/a.pl。
REMOTE_HOST 发出request请求的远端机器(client)的名称。
REMOTE_ADDR 发出request请求的远端机器(client)的IP地址。
REMOTE_IDENT 发出request的使用者名称(如是拨号上网，则为用户ID)，当NCSA IdentityCheck为enabled，而且client机器支持RFC 931时，该变量有效。
CONTENT_TYPE 数据的MIME类型，如：“text/html”。
HTTP_ACCEPT client可以接受的MIME类型列表。
HTTP_USER_AGENT client发出request的浏览器类型。
HTTP_REFERER 在读取CGI程序之前，client所指的文本URL。

Request.ServerVariables中的各种参数

Request.ServerVariables("Url")
返回服务器地址

Request.ServerVariables("Path_Info")
客户端提供的路径信息

Request.ServerVariables("Appl_Physical_Path")
与应用程序元数据库路径相应的物理路径

Request.ServerVariables("Path_Translated")
通过由虚拟至物理的映射后得到的路径

Request.ServerVariables("Script_Name")
执行脚本的名称

Request.ServerVariables("Query_String")
查询字符串内容

Request.ServerVariables("Http_Referer")
请求的字符串内容

Request.ServerVariables("Server_Port")
接受请求的服务器端口号

Request.ServerVariables("Remote_Addr")
发出请求的远程主机的IP地址

Request.ServerVariables("Remote_Host")
发出请求的远程主机名称

Request.ServerVariables("Local_Addr")
返回接受请求的服务器地址

Request.ServerVariables("Http_Host")
返回服务器地址

Request.ServerVariables("Server_Name")
服务器的主机名、DNS地址或IP地址

Request.ServerVariables("Request_Method")
提出请求的方法比如GET、HEAD、POST等等

Request.ServerVariables("Server_Port_Secure")
如果接受请求的服务器端口为安全端口时，则为1，否则为0

Request.ServerVariables("Server_Protocol")
服务器使用的协议的名称和版本

Request.ServerVariables("Server_Software")
应答请求并运行网关的服务器软件的名称和版本

Request.ServerVariables("All_Http")
客户端发送的所有HTTP标头，前缀HTTP_

Request.ServerVariables("All_Raw")
客户端发送的所有HTTP标头,其结果和客户端发送时一样，没有前缀HTTP_

Request.ServerVariables("Appl_MD_Path")
应用程序的元数据库路径

Request.ServerVariables("Content_Length")
客户端发出内容的长度

Request.ServerVariables("Https")
如果请求穿过安全通道（SSL），则返回ON如果请求来自非安全通道，则返回OFF

Request.ServerVariables("Instance_ID")
IIS实例的ID号

Request.ServerVariables("Instance_Meta_Path")
响应请求的IIS实例的元数据库路径

Request.ServerVariables("Http_Accept_Encoding")
返回内容如：gzip,deflate

Request.ServerVariables("Http_Accept_Language")
返回内容如：en-us

Request.ServerVariables("Http_Connection")
返回内容：Keep-Alive

Request.ServerVariables("Http_Cookie")
返回内容如：nVisiT%

2DYum=125;ASPSESSIONIDCARTQTRA=FDOBFFABJGOECBBKHKGPFIJI;ASPSESSIONIDCAQQTSRB=LKJJPLABABILLPCOGJGAMKAM;ASPSESSIONIDACRRSSRA=DK

HHHFBBJOJCCONPPHLKGHPB

Request.ServerVariables("Http_User_Agent")
返回内容：Mozilla/4.0(compatible;MSIE6.0;WindowsNT5.1;SV1)

Request.ServerVariables("Https_Keysize")
安全套接字层连接关键字的位数，如128

Request.ServerVariables("Https_Secretkeysize")
服务器验证私人关键字的位数如1024

Request.ServerVariables("Https_Server_Issuer")
服务器证书的发行者字段

Request.ServerVariables("Https_Server_Subject")
服务器证书的主题字段

Request.ServerVariables("Auth_Password")
当使用基本验证模式时，客户在密码对话框中输入的密码

Request.ServerVariables("Auth_Type")
是用户访问受保护的脚本时，服务器用於检验用户的验证方法

Request.ServerVariables("Auth_User")
代证的用户名

Request.ServerVariables("Cert_Cookie")
唯一的客户证书ID号

Request.ServerVariables("Cert_Flag")
客户证书标志，如有客户端证书，则bit0为0如果客户端证书验证无效，bit1被设置为1

Request.ServerVariables("Cert_Issuer")
用户证书中的发行者字段

Request.ServerVariables("Cert_Keysize")
安全套接字层连接关键字的位数，如128

Request.ServerVariables("Cert_Secretkeysize")
服务器验证私人关键字的位数如1024

Request.ServerVariables("Cert_Serialnumber")
客户证书的序列号字段

Request.ServerVariables("Cert_Server_Issuer")
服务器证书的发行者字段

Request.ServerVariables("Cert_Server_Subject")
服务器证书的主题字段

Request.ServerVariables("Cert_Subject")
客户端证书的主题字段
Request.ServerVariables("Content_Type")
客户发送的form内容或HTTPPUT的数据类型
4、Cookies
在客户端，Cookies记录了客户端浏览器很多的信息，我们可通过Request.Cookies("名称")命令获取它的值，也可通过Response.Cookies("名称")="值"在客户端记录一些信息，以便控制访问者。设置多重Cookies的方法为Response.Cookies("名称")("名称")="值"。
5、Cache
我们可以在浏览器上设置从Cache中抽取已经访问过的页面的信息，同样，在Asp程序中也可进行类似的设置。其中Response.Clear为清空客户端的内存。Response.Buffer=True设置可从Cache中读取资料(缺省时为False)。
6、ClientCertificate
ClientCertificate用于获取客户端浏览器的身份确认信息（符合X.509标准），但客户端浏览器必须支持SSL3.0或PCT1协议。这里需做两步工作，第一步：web server必须启动用户端认证选项；第二步：对客户端浏览器进行相应设置，这样，该方法才会生效，否则，传回empty值。
只用request(),相当每次取值时都要判断下是不是通过form或querystring来提交的，所以这种比较影响速度，一般最好后面如能确认参数的属性，就确认下来

DO.NET 也是 .NET 框架的组成部分。ADO.NET 用于处理数据访问。通过 ADO.NET，您可以操作数据库。

数据库连接 - 绑定到 DataList 控件

数据库连接 - 绑定到 Repeater 控件

什么是 ADO.NET？

ADO.NET 是 .NET 框架的组成部分
ADO.NET 由一系列用于处理数据访问的类组成
ADO.NET 完全基于 XML
ADO.NET 没有 Recordset 对象，这一点与 ADO 不同

创建数据库连接

在我们的实例中，我们将使用 Northwind 数据库。

首先，导入 "System.Data.OleDb" 命名空间。我们需要这个命名空间来操作 Microsoft Access 和其他 OLE DB 数据库提供商。我们将在 Page_Load 子例程中创建这个数据库的连接。我们创建一个 dbconn 变量，并为其赋值一个新的 OleDbConnection 类，这个类带有指示 OLE DB 提供商和数据库位置的连接字符串。然后我们打开数据库连接：

<%@ Import Namespace="System.Data.OleDb" %>

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>

注释：这个连接字符串必须是没有折行的连续字符串！

创建数据库命令

为了指定需从数据库取回的记录，我们将创建一个 dbcomm 变量，并为其赋值一个新的 OleDbCommand 类。这个 OleDbCommand 类用于发出针对数据库表的 SQL 查询：

<%@ Import Namespace="System.Data.OleDb" %>

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>

创建 DataReader

OleDbDataReader 类用于从数据源中读取记录流。DataReader 是通过调用 OleDbCommand 对象的 ExecuteReader 方法来创建的：

<%@ Import Namespace="System.Data.OleDb" %>

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" %>

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()

在线咨询

上一篇：手把手教你用Markdown写一份高质量的简历
下一篇：HTML表单3（下拉列表、多行文字输入）-零基础自学网页制作

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML表单及其Input输入类型

您的项目需求