详解HTML5表单新增属性


Posted in HTML / CSS onDecember 21, 2016

1. 表单内元素的form属性

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

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

2. 表单内元素的formaction属性

在H4中,表单的提交方式

<form action="1.jsp">
</form>

提交整个表单

在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属性

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

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

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

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

HTML / CSS 相关文章推荐
css3 按钮样式简单可扩展创建
Mar 18 HTML / CSS
CSS3 @font-face属性使用指南
Dec 12 HTML / CSS
CSS3 text-shadow实现文字阴影效果
Feb 24 HTML / CSS
css3 transform及原生js实现鼠标拖动3D立方体旋转
Jun 20 HTML / CSS
CSS3实现全景图特效示例代码
Mar 26 HTML / CSS
用CSS3和table标签实现一个圆形轨迹的动画的示例代码
Jan 17 HTML / CSS
CSS实现雨滴动画效果的实例代码
Oct 08 HTML / CSS
CSS3 rgb and rgba(透明色)的使用详解
Sep 25 HTML / CSS
css3实现书本翻页效果的示例代码
Mar 08 HTML / CSS
html通过canvas转成base64的方法
Jul 18 HTML / CSS
html5的新玩法——语音搜索
Jan 03 HTML / CSS
HTML5 video播放器全屏(fullScreen)方法实例
Apr 24 HTML / CSS
如何开发一款堪比APP的微信小程序(腾讯内部团队分享)
Dec 22 #HTML / CSS
详解HTML5 LocalStorage 本地存储
Dec 23 #HTML / CSS
HTML5应用之文件上传
Dec 30 #HTML / CSS
详解HTML5中的标签
Jun 19 #HTML / CSS
HTML5 Canvas实现玫瑰曲线和心形图案的代码实例
Apr 10 #HTML / CSS
使用HTML5捕捉音频与视频信息概述及实例
Aug 22 #HTML / CSS
CSS3只让背景图片旋转180度的实现示例
Mar 09 #HTML / CSS
You might like
支持php4、php5的mysql数据库操作类
2008/01/10 PHP
如何使用php输出时间格式
2013/08/31 PHP
jquery创建div 实现代码
2009/04/27 Javascript
window.name代替cookie的实现代码
2010/11/28 Javascript
javascript 延迟加载技术(lazyload)简单实现
2011/01/17 Javascript
js仿百度贴吧验证码特效实例代码
2014/01/16 Javascript
浅谈JavaScript中Date(日期对象),Math对象
2015/02/05 Javascript
浅析JavaScript事件和方法
2015/02/28 Javascript
在JavaScript中处理字符串之fontcolor()方法的使用
2015/06/08 Javascript
Bootstrap与KnockoutJs相结合实现分页效果实例详解
2016/05/03 Javascript
js实现千分符和保留几位小数的简单实例
2016/08/01 Javascript
AugularJS从入门到实践(必看篇)
2017/07/10 Javascript
详解vue2.0+vue-video-player实现hls播放全过程
2018/03/02 Javascript
使用JQuery自动完成插件Auto Complete详解
2019/06/18 jQuery
[04:16]完美世界DOTA2联赛PWL S2 集锦第一期
2020/11/23 DOTA
Python中import导入上一级目录模块及循环import问题的解决
2016/06/04 Python
Python编写Windows Service服务程序
2018/01/04 Python
Centos7下源码安装Python3 及shell 脚本自动安装Python3的教程
2020/03/07 Python
python实现opencv+scoket网络实时图传
2020/03/20 Python
Python unittest生成测试报告过程解析
2020/09/08 Python
从一次项目重构说起CSS3自定义变量在项目的使用方法
2021/03/01 HTML / CSS
详解window.open被浏览器拦截的解决方案
2019/07/18 HTML / CSS
Clarks英国官方网站:全球领军鞋履品牌
2016/11/26 全球购物
简单介绍Object类的功能、常用方法
2013/10/02 面试题
编写函数,将一个3*3矩阵转置
2013/10/09 面试题
会计出纳岗位职责
2013/12/25 职场文书
电子专业求职信
2014/06/19 职场文书
物流专业求职信
2014/06/30 职场文书
2014年入党积极分子党校培训心得体会
2014/07/08 职场文书
2014年电教工作总结
2014/12/19 职场文书
搞笑老公保证书
2015/02/26 职场文书
2015年扫黄打非工作总结
2015/05/13 职场文书
你为什么是穷人?可能是这5个缺点造成
2019/07/11 职场文书
MybatisPlus代码生成器的使用方法详解
2021/06/13 Java/Android
Java各种比较对象的方式的对比总结
2021/06/20 Java/Android
Java实现HTML转为Word的示例代码
2022/06/28 Java/Android