1. 表单内元素的form属性

在H5中可以把form放到页面的任何地方,然后为该元素指定一个form属性,属性值为该表单的id,这样就可以声明该元素从属于指定表单了

<form id="testform">
<input type="text">
</form>
<textarea form="testform"></textarea>

2. 表单内元素的formaction属性

  1. 在H4中,表单的提交方式
<form action="1.jsp">
</form>

提交整个表单

  1. 在H5中,可以为表单的每一个属性添加提交到的jsp页面
<form action="1.jsp">
<input type="submit" action="1-1.jsp">提交到1页面</form>
<input type="submit" action="1-2.jsp">提交到2页面</form>
<input type="submit" action="1-3.jsp">提交到3页面</form>
</form>

3. 表单内元素的formmethod属性

可以对表单的每一个元素指定提交方法

<form action="1.jsp">
<input type="submit" action="1-1.jsp" formmethod="post">提交到1页面,post提交方法</form>
<input type="submit" action="1-2.jsp" formmethod="get">提交到2页面,get提交方法</form>
</form>

4. 表单内元素的formenctype属性

同上,作用与每一个元素,代码略

5. 表单的formtarget属性

同上,作用与每一个元素,代码略

6.元素的autofocus属性

为文本框、选择框和按钮控件等加上autofocus属性,画面打开时,将自动获得焦点。

<input type="text" action="1-3.jsp" autofocus>提交到3页面</form>

一个页面上只能有一个控件具有autofocus属性,不能滥用

7. required属性

可以用在大多数输入用的元素,若输入的值为空则不允许提交,游览器显示文字信息提示用户必须输入内容。

8. labels属性

可为表单所有元素添加一个lables属性,属性值为一个NodeList对象,代表该元素所绑定的标签元素所构成的集合。

<script type="text/javascript">
window.onload = function () {
var text = document.getElementById('text');
var btn = document.getElementById('btn');
var form = document.getElementById('form');
btn.onclick = function() {
if (text.value.trim() =="") {
//alert(text.labels.length)
if(text.labels.length==1) {
var label = document.createElement("label");
label.setAttribute("for","text");
form.insertBefore(label,btn);
text.labels[1].innerHTML = "请输入姓名";
text.labels[1].setAttribute(
"style","font-size:9px;color:red");
}
}
else if(text.labels.length>1)
form.removeChild(text.labels[1]);
} }
</script>
<form id="form">
<label id="label" for="text">姓名:</label>
<input id="text">
<input id="btn" type="button" value="验证">
</form>

当用户不输入任何值时,单击验证,文本框旁边会动态的添加一个标签元素,标签元素为“请输入姓名”;当用户在文本框中有输入时,文字为“请输入姓名”的标签将被删除。

9. 标签的control属性

可以在标签(label)内部放置一个表单元素,并通过该标签的control属性来访问该表单元素。

<script type="text/javascript">
function setValue() {
console.log(1);
var label =document.getElementById("label");
var textbox = label.control;
textbox.value = "231456"
}
</script>
<form>
<label id="label">
邮编:
<input id="txt_zip" maxlength="6">
<small>请输入6位数字</small>
</label>
<input type="button" value="设置默认值" onclick="setValue()">
</form>

在游览器中打开页面,单击“设置默认值”按键,文本框中会显示231456.

10. 文本框的placeholder属性

当文本框(text或者textarea)处于为选择状态时输入提示信息(灰色)

<input type="text" palceholder="hahah">

11. 文本框的list属性

结合h5新增的datalist元素,制作提示框

text:<input type="text" name="greeting" list="greetings">
<!-- 使用style="display:none";将datalist元素设置为不显示 -->
<datalist id="greetings" style="display:none">
<option value="你是人">你是人</option>
<option value="你是猪">你是猪</option>
<option value="你是狗">你是狗</option>
</datalist>

当你在文本框中输入“你”时,下面会出现三栏提示“你是人”、“你是猪”、“你是狗”,没有关键字将不出现提示

12. 文本框的autocomplete属性

autocomplete有三种值"on"、"off"、""(不指定)。不进行指定时,使用游览器的默认值。使用方法如下

<input type="text" name="greeting" list="greetings" autocomplete="on">

当你在文本框内输入如“我是人”点击提交后,返回前一页,再在文本框中输入“我”,就会出线提示“我是人”。

13. 文本框的pattern属性

相当于直接在html部分用正则表达式判断值输入是否符合要求。

请输入内容:<input type="text" pattern="[0-9][A-Z]{3}">

此段代码要求输入一个数字三个大写字母,如果输入不正确,则出现“请与所要求的内容保持一致(谷歌)”的提示。

14. 文本框的selectionDirection属性

针对input的text和textarea元素,当用户在这两个元素中用鼠标选取部分文字时,可以使用该元素来获取选择方向。

<script type="text/javascript">
function alertSelectionDirection() {
var control = document.forms[0]['text'];
var Direction = control.selectionDirection;
alert(Direction);
} </script>
<form>
<input type="text" name="text">
<input type="button" value="惦记我" onclick="alertSelectionDirection()" >
</form>

15. 复选框的indeterminate属性

对于复选框来说,过去只有选取和与非选取状态,html5中,可以在js中对该元素使用indeterminate属性,以说明复选框“尚未明确选取”状态。

<script>
var cb = document.getElementById("cb");
//将indeterminate的属性设置为true
cb.indeterminate = true;
</script>
<input type="checkbox" indeterminate id="cb">indeterminate属性测试

16. image提交按钮的height属性与width属性

  1. height:指定图片按钮中图片的高度;
  2. width:指定图片按钮中图片的宽度;
<input type="image" src="img/2.png" width="23" height="23">

17. textarea元素的maxlength属性与wrap属性

  1. maxlength :使用整数值进行设定,用于限定textarea元素中可输入文字的个数。
  2. wrap:可指定属性值为soft与hard.当属性为hard时,在没有用回车键而是文字超出一排规定范围而自动换行时,提交表单时会在换行处添加一个换行标志。
 

HTML5 表单新增属性的更多相关文章

  1. HTML5表单新增属性

    1.form 原来html里面,表单里的元素应该包裹在表单里,如 <form action="login.php" method="get"> &l ...

  2. HTML5表单新属性

    HTML5表单新属性 autofocus  自动聚焦 <input type="text" autofocus> placeholder占位文本 tel         ...

  3. html5中form表单新增属性以及改良的input标签元素的种类

    在HTML5中,表单新增了一些属性,input标签也有了更多的type类型,有些实现了js才能实现的特效,但目前有些浏览器不能全部支持.下面是一些h5在表单和input标签上的一些改动. <!D ...

  4. IT兄弟连 HTML5教程 HTML5表单 新增的表单属性1

    HTML5 Input表单为<form>和<input>标签添加了几个新属性,属性如表1. 1  autocomplete属性 autocomplete属性规定form或inp ...

  5. html5表单新增的元素与属性

    1.表单内元素的form属性 在html4中,表单内的从属元素必须书写在表单内部, 而在html5中,可以把他们书写在页面上任何地方, 然后为该元素指定一个form属性,属性值为该表单的id,这样就可 ...

  6. HTML5表单新增元素与属性

    form属性 在html4中,表单的从属元素必须写在表单内部,而在HTML5中,可以把他们书写在任何地方,然后为该元素指定一个form属性,属性值为该表单的id,这样就可以声明该元素从属于指定表单了. ...

  7. html5表单新增元素与属性2

    1.标签的control属性 在html5中,可以在标签内部放置一个表单元素,并且通过该标签的control属性来访问该表单元素. <script> function setValue() ...

  8. HTML5 表单新增元素与属性

    1 form 属性和 formaction 属性 本课时讲解在 HTML4 中,表单内的从属元素必须书写在表单内部,而在 HTML5 中,可以把他们书写在页面上任何地方,然后为该元素指定一个 form ...

  9. IT兄弟连 HTML5教程 HTML5表单 新增的表单属性3

    9  novalidate novalidate是属性规定在提交表单时不应该验证form和input域.novalidate属性适用于的<input>类型有:text.search.url ...

随机推荐

  1. PHP内核(一)内存管理

    本文链接:http://www.orlion.ml/tag/php-internal/ 一.内存管理基础 用c语言开发时,开发者要手动进行内存管理.PHP经常作为web服务器的模块,内存管理与预防内存 ...

  2. C#预处理器指令 ,你造吗??? (●'◡'●)

    什么是c#预处理指令?? 用于在 C# 源代码中嵌入的编译器命令. C#预处理器指令有哪些?? ↓↓↓这些就是预处理器指令啦 下面我们一一道来(●'◡'●) 1.#if ,#elif,#else,en ...

  3. Spring之LoadTimeWeaver——一个需求引发的思考---转

    原文地址:http://www.myexception.cn/software-architecture-design/602651.html Spring之LoadTimeWeaver——一个需求引 ...

  4. spring 源码分析之BeanPostProcessor

    1.官方解答: Factory hook that allows for custom modification of new bean instances, e.g. checking for ma ...

  5. eclipse使用tomcat进行部署时编译代码不一致的处理

    操作步骤: 1. 先add and remove 去除项目 2. clean 完成清除工程在tomcat的目录 3. project-->clean 4. add adn remove 重新添加 ...

  6. Vim多行缩进技巧

    按v进入visual状态,选择多行,用>或<缩进或缩出 通常根据语言特征使用自动缩进排版:在命令状态下对当前行用== (连按=两次), 或对多行用n==(n是自然数)表示自动缩进从当前行起 ...

  7. OpenJudge 2990:符号三角形 解析报告

    2990:符号三角形 总时间限制:  1000ms       内存限制:  65536kB 描述 符号三角形的第1行有n个由“+”和”-“组成的符号 ,以后每行符号比上行少1个,2个同号下面是”+“ ...

  8. 前端自动化开发之grunt

    上篇文章介绍了前端模块化开发工具seaJs,利用seaJs我们可以轻松实现前端的模块化编程,参见http://www.cnblogs.com/luozhihao/p/4818782.html 那么今天 ...

  9. codeMirror插件使用讲解

    codeMirror是一款十分强大的代码编辑插件,提供了十分丰富的API,最近在项目中用到了这款插件,于是在这里给大家分享下使用方法和心得: codeMirror调用非常方便 首先在页面中载入插件CS ...

  10. C#--访问修饰符