1.表单内元素的form属性
在html4中,表单内的从属元素必须书写在表单内部,
而在html5中,可以把他们书写在页面上任何地方,
然后为该元素指定一个form属性,属性值为该表单的id,这样就可以声明该元素从属于表单了。
<form id="testform">
<input type="text">
</form>
<textarea form="testform"></textarea>
2.表单内元素的formaction属性
在HTML4中,一个表单内的所有元素只能通过表单的action属性被统一提交到另一个页面,
而在HTML5中可以为所有的提交按钮,增加不同的formaction属性,使单击不同的按钮时可以将表单提交到不同的页面。
<form id="testform">
<input type="submit" name="s1" value="v1" formaction="1.jsp">提交到1.jsp页面
<input type="submit" name="s2" value="v2" formaction="2.jsp">提交到2.jsp页面
<input type="submit" name="s3" value="v3" formaction="3.jsp">提交到3.jsp页面
</form>
3.表单内元素的formmethod属性和formenctype属性
在html4中,一个表单内只能有一个action属性用来对表单内所有元素统一指定提交页面,
所以每个表单内页只有一个method属性来统一指定提交方法。在HTML5中,可以使用formmethod属性
来对每一个表单元素分别指定不同的提交方法。
<form id="testform">
<input type="submit" name="s1" value="v1" formmethod="post" formaction="1.php">提交
<input type="submit" name="s2" value="v2" formmethod="get" formaction="2.php">提交
</form>
4.表单内元素的formenctype属性
在html4中,表单元素具有一个enctype属性,该属性用于指定在表单发送到服务器之前应该如何对表单内的数据进行编码。
在html5中,可以使用formenctyp属性对表单元素分别指定不用的编码方式。
<form id="formtest">
<input type="text" formenctype="text/plain">
(表单数据中的空格被转化成加号+,但不对表单中的特殊字符进行编码。)
<input type="text" formenctype="multipart/form-data">
(不对字符进行编码,在使用包含文件上传控件的表单时,必须使用该值)
<input type="text" formenctype="application/x-www-form-urlencoded">
(在发送前编码所有字符,当表单元素的formmethod属性给get时,浏览器则用当前的编码方式把表单数据转换成一个字符。)
</form>
5.表单内元素的formtarget属性
在html4中,表单元素具有一个target属性,该属性用于指定在何处打开表单提交后所需要加载的页面。
在html5中,可以对多个提交按钮分别使用formtarget属性来指定提交后在何处打开所需加载的页面。
_blank 新的窗口
_self 当前窗口
_parent 当前框架的父窗口打开
_top 当前窗口
framename 指定窗口
<form id="testform">
<input type="submit" name="s1" formtarget="_blank" value="v1" formmethod="post" formaction="1.php">提交
<input type="submit" name="s2" formtarget="_self" value="v2" formmethod="get" formaction="2.php">提交
</form>
6.表单内元素的autofocus属性
为文本框、选择框或按钮控件加上autofocus属性,当画面打开时,该控件自动获得光标焦点。
7.表单内元素的required属性
html5中新增的required属性可以应用在大多数输入元素上,在提交时,如果元素中内容为空白,则不允许提交,
同时在浏览器中显示信息提示文字。
<form action="123.php">
<input type="text" required="required">
<button type="submit">提交</button>
</form>
8.表单内元素的labels属性
在html5中,为所有可使用标签的表单元素,button、select元素等,定义一个labels属性,属性值为一个nodelist对象,
代表该元素所绑定的标签元素所构成的集合。
<form id="testform">
<label id="label" for="txt_name">姓名:</label>
<input id="txt_name">
<input type="button" id="btnValidate" value="验证" onclick="Validate()">
</form>
<script>
function Validate(){
var txtName=document.getElementById("txt_name");
var button=document.getElementById("btnValidate");
var form=document.getElementById("testform");
if(txtName.value.trim()==""){
var label=document.createElement("label");
label.setAttribute("for","txt_name");
form.insertBefore(label,button);
txtName.labels[1].innerHTML="请输入姓名 ";
txtName.labels[1].setAttribute("style","font-size:9px;color:red;");
}
}
</script>
- [html5] 学习笔记-表单新增的元素与属性(续)
本节主要讲解表单新增元素的controls属性.placeholder属性.List属性.Autocomplete属性.Pattern属性.SelectionDirection属性.Indetermi ...
- HTML5表单新增元素与属性
form属性 在html4中,表单的从属元素必须写在表单内部,而在HTML5中,可以把他们书写在任何地方,然后为该元素指定一个form属性,属性值为该表单的id,这样就可以声明该元素从属于指定表单了. ...
- HTML5表单新增属性
1.form 原来html里面,表单里的元素应该包裹在表单里,如 <form action="login.php" method="get"> &l ...
- IT兄弟连 HTML5教程 HTML5表单 新增的表单属性1
HTML5 Input表单为<form>和<input>标签添加了几个新属性,属性如表1. 1 autocomplete属性 autocomplete属性规定form或inp ...
- html5表单新增元素与属性2
1.标签的control属性 在html5中,可以在标签内部放置一个表单元素,并且通过该标签的control属性来访问该表单元素. <script> function setValue() ...
- HTML5 表单新增元素与属性
1 form 属性和 formaction 属性 本课时讲解在 HTML4 中,表单内的从属元素必须书写在表单内部,而在 HTML5 中,可以把他们书写在页面上任何地方,然后为该元素指定一个 form ...
- HTML5 表单新增属性
1. 表单内元素的form属性 在H5中可以把form放到页面的任何地方,然后为该元素指定一个form属性,属性值为该表单的id,这样就可以声明该元素从属于指定表单了 <form id=&quo ...
- IT兄弟连 HTML5教程 HTML5表单 新增的表单属性3
9 novalidate novalidate是属性规定在提交表单时不应该验证form和input域.novalidate属性适用于的<input>类型有:text.search.url ...
- HTML5 表单新增内容
一.H5 新增控件 1.datalist 元素 datalist 标签定义选项列表,请与 input 元素配合使用该元素.可为输入框提供一个可选的列表,可以直接选择列表项,也可以不选择列表中的项,自行 ...
随机推荐
- [RK3288]PMU配置(RK808)【转】
本文转载自:http://www.javashuo.com/content/p-6398007.html 硬件原理 pmic 电路原理 平台概述 RK808 PWM 介绍 驱动分析 dts 驱动流程 ...
- RedisCluster集群搭建
搭建集群方案 安装部署任何一个应用其实都很简单,只要安装步骤一步一步来就行了.下面说一下 Redis 集群搭建规划,由于集群至少需要6个节点(3主3从模式),所以,没有这么多机器给我玩,我本地也起不了 ...
- [Selenium] HTML5 中的 Geolocation
在 HTML5 ,新特性 Geolocation 用于定位用户位置信息. 由于用户位置信息是敏感信息,所以需要得到用户允许后,才能让程序通过 API 获取当前用户信息.WebDriver 程序每次重 ...
- [CQOI 2015] 任务查询系统
[题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=3932 [算法] 首先 , 我们可以将(Si , Ei , Pi)转化为在Si处加入P ...
- 如何在单独的窗口中打开 Excel 文件
如何在单独的窗口中打开 Excel 文件 文章编号:087583 2012/11/1 18:45:29 故障现象: 如何在单独的窗口中打开 Excel 文件? 解决方案: 比较安全的方法就是直 ...
- 启动和测试oracle是否安装成功
转自:https://www.cnblogs.com/justdo-it/articles/5112576.html 测试步骤1:请执行操作系统级的命令:tnsping orcl 测试步骤 2:请执行 ...
- 量子纠缠1——量子比特、Bell态、EPR佯谬
量子纠缠是量子物理的基本性质,他描述的是:当几个粒子相互作用后,无法单独描述各个粒子的性质,只能整体描述,本文主要介绍两个量子比特之间的纠缠. 量子比特(Qubit) 量子比特是量子计算的基本单位,就 ...
- Event Handling Guide for iOS--(二)---Gesture Recognizers
Gesture Recognizers 手势识别器 Gesture recognizers convert low-level event handling code into higher-leve ...
- 022--python 模块介绍和time模块
一.模块的含义 在计算机程序的开发过程中,随着程序代码越写越多,在一个文件里代码就会越来越长,越来越不容易维护. 为了编写可维护的代码,我们把很多函数分组,分别放到不同的文件里,这样,每个文件包含的代 ...
- UILabel和UIButton添加下划线
关于UILabel和UIButton有的时候需要添加下划线,一般有两种方式通过默认的 NSMutableAttributedString设置,第二种就是在drawRect中画一条下划线,本文就简单的选 ...