HTML表单是页面与WEB服务器交互过程中最重要的信息来源,有了它我们才能在Web上进行各种各样的应用,才能和服务器进行方便快捷的交互,其在网页中的作用不可小视,负责获取用户填写数据,并通过浏览器向服务器传送数据。
一个表单有三个基本组成部分:
表单标签:这里面包含了处理表单的数据所用程序的URL以及数据提交到服务器的方法,表单名等。
语法:<form action="服务器程序URL(提交到给谁处理)" method=" get/post" enctype=" MIME信息" target="文档显示方式" >表单详细设置</form>
- action属性:定义在提交表单时执行的动作,向服务器提交表单的通常做法是使用提交按钮。通常,表单会被提交到 web 服务器上的网页或指定了某服务器脚本来处理被提交表单:
<form action="action_page.php">
,如果省略 action 属性,则 action 会被设置为当前页面。 - method 属性:规定在提交表单时所用的 HTTP 方法(GET 或 POST)。(何时使用get方法,如果表单提交是被动的(比如搜索引擎查询),并且没有敏感信息。当您使用 GET 时,表单数据在页面地址栏中是可见的,注意GET 最适合少量数据的提交。浏览器会设定容量限制。何时使用 POST?如果表单正在更新数据,或者包含敏感信息(例如密码)。POST 的安全性更加,因为在页面地址栏中被提交的数据是不可见的。)
- name 属性:如果要正确地被提交,每个输入字段必须设置一个 name 属性。
示例:
<form action="action_page.php">
First name:<br>
<input type="text" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
// 本例中只会提交Last name的输入字段,First name输入字段由于没有name属性因此不会提交
- target属性:规定action属性中地址的目标(默认_self)
- enctype属性:规定被提交数据的编码(默认:url-encoded)。可能的值:
application/x-www-form-urlencoded
multipart/form-data
text/plain
注:我们还可以使用<fieldset>
组合表单数据,<legend>
元素为 <fieldset>
元素定义标题,示例:
<form action="action_page.php">
<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>
页面效果:
当点击提交按钮时服务器接收到的用户输入为"firstname=Mickey&lastname=Mouse"
表单域:包括了文本框(text),密码框(password),隐藏域(hidden),复选框(checkbox),单选框(radio),文件上传框(file),
多行文本框( 基本语法:<textarea name="" col="" row="" wrap="" ></textraea>
)
下拉选择框(基本语法:<select name=""><option value="" selected(表示默认选择本项显示在下拉菜单上)>广州</option></select>
)等。
表单按钮:包括提交按钮(submit),复位按钮(reset),一般按钮(button), 图片按钮(image)
HTML5 中表单元素新增了许多新控件及其API,方便我们做更复杂的应用,而不用借助于JavaScript,HTML5表单功能扩展:
1、表单结构更加自由
在HTML4中,表单内的从属元素必须书写在表单内部,而在HTML5中,可以把它们书写在页面上任何地方,然后为该元素指定一个form属性,属性值为该表单的id,这样就可以声明该元素从属于指定表单了。
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
姓名:<input type="text" name="realname" form="form1"/>
<form id="form1" method="get">
<button>提交</button>
</form>
</body>
</html>
运行结果:
2、新增表单元素
HTML5 增加了如下表单元素:
<datalist>
<keygen>
<output>
<progress>
<meter>
datalist元素:<datalist>
元素为 <input>
元素规定预定义选项列表,用户会在他们输入数据时看到预定义选项的下拉列表,<input>
元素的 list 属性必须引用 <datalist>
元素的 id 属性。
<form action="action_page.php">
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
页面效果:
注意: Safari或IE9(以及更早的版本)不支持datalist标签。
keygen元素:<keygen>
元素的作用是提供一种验证用户的可靠方法。
<keygen>
元素是密钥对生成器(key-pair generator)。当提交表单时,会生成两个键,一个是私钥,一个公钥。私钥(private key)存储于客户端,公钥(public key)则被发送到服务器。公钥可用于之后验证用户的客户端证书(client certificate)。
<form action="demo_keygen.asp" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>
页面效果:
输入以后点击提交:
注意: Safari和IE浏览器不支持keygen标签。
output元素:<output>
标签定义不同类型的输出,比如脚本的输出,参数有
- for:定义输出域相关的一个或多个元素。
- form:定义输入字段所属的一个或多个表单。
- name:定义对象的唯一名称。(表单提交时使用)
示例:
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id=