<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

</head>

<body>

    <form action="文档结构和语义.html" method="post" oninput="updateSum();">

        <!--tabindex tab键切换的优先级 -->

        普通文本框<input type="text" tabindex="1" pattern="[a-z]{3,32}" />

        <!--pattern 正则表达式验证-->

        <br />

        一行文本<input type="tel" tabindex="3" /><br />

        一行文本<input type="search" autofocus list="searchList" tabindex="2" />

        <datalist id="searchList">

            <option>aaa</option>

            <option>bbb</option>

        </datalist>

        <br />

        绝对URL地址<input type="url" /><br />

        有效的e-mail地址<input type="email" placeholder="aaa@qq.com" required  id="email" /><br />

        日期及时间（使用UTC时间）<input type="datetime" /><br />

        不带时区的日期<input type="date" min="2010-08-01" max="2010-11-11" step="7" />

        <!--step=“7” 在min日期上以7天为单位增减-->

        <br />

        不带时区的月份<input type="month" /><br />

        不带时区的年及周<input type="week" /><br />

        不带时区的时间<input type="time" min="14:30" max="19:30" step="3600" /><br />

        时区的当期日期及时间<input type="datetime-local" /><br />

        数字<input type="number" max="1" min="0" step="0.1" /><br />

        一定范围内的数值<input type="range" /><br />

        十六进制RGB值<input type="color" /><br />

        <!--图形化表示已知范围内的测量标准，比如车子里的油表-->

        <meter value="0.5"></meter>

        <progress value="3" max="10"></progress>

        price:<input type="number"  id="price"/> quantity:<input type="number" id="quantity" />

        <output name="sum" id="sum" for="price quantity"></output><!--输出updateSum()计算的值 -->

        <input type="submit" name="name" value="提交" />

    </form>

    <script type="text/javascript">

        function updateSum() {

            document.getElementById("sum").value = parseFloat(document.getElementById("price").value) * parseFloat(document.getElementById("quantity").value);

        };

        window.onload = function () {

            //document.getElementById("email").addEventListener("invalid", function () {

            //    this.style.border = "dotted 2px red";

            //});

            document.getElementById("email").onchange = function() {

                if (!this.checkValidity()) {

                    this.style.border = "dotted 2px red";

                } else {

                    this.style.border = "";

                }

            };

            alert(document.querySelectorAll(":required")[0].tagName); //input

            alert(document.getElementById("email").nextSibling.tagName);// br

        };

    </script>

</body>

</html>

HTML5学习之智能表单（二）的更多相关文章

  1. Html5学习进阶四 表单元素和表单属性

    HTML5 的新的表单元素: HTML5 拥有若干涉及表单的元素和属性. 本章介绍以下新的表单元素: datalist keygen output 浏览器支持 Input type IE Firefo ...

  2. HTML5学习系列之表单与文件

    article元素 article元素代表文档.页面或应用程序中独立的.完整的.可以独自被外部引用的内容.它可以是一篇博客或报刊中的文章.一篇论坛帖子.一段用户评论或独立的插件,或者其他任何独立的内容 ...

  3. HTML5 学习总结（二）——HTML5新增属性与表单元素

    一.HTML5新增属性 1.1.contextmenu contextmenu的作用是指定右键菜单. <!DOCTYPE html> <html> <head> & ...

  4. HTML5 智能表单

    HTML5 智能表单 1.表单新增属性  ☀ autofocus 属性 <input type="text" autofocus/>设置 autofocus 属性,使文 ...

  5. HTML5智能表单

    HTML5 智能表单 1.表单新增属性  ☀ autofocus 属性 <input type="text" autofocus/>设置 autofocus 属性,使文 ...

  6. 第86天：HTML5应用程序标签和智能表单

    一.HTML5应用程序标签 1.datalist需要数据载体 input list属性指向数据源 2.progress进度条 -webkit-appearance: none;   /*如果要改默认样 ...

  7. BootStrap 智能表单系列 二 BootStrap支持的类型简介

    代码如下(链接地址:https://github.com/xiexingen/Bootstrap-SmartForm/blob/master/demo/form1-basic.html): <! ...

  8. HTML5_智能表单

    1.HTML5中为了方便排版,可以使from中的表单标签脱离from的嵌套.方法:from指定ID,所有表单标签均添加from=id属性. <form action="http://l ...

  9. SpringMVC学习系列 之 表单标签

    http://www.cnblogs.com/liukemng/p/3754211.html 本篇我们来学习Spring MVC表单标签的使用,借助于Spring MVC提供的表单标签可以让我们在视图 ...

随机推荐

  1. JAVA_HOME path classpath 以及cmd编译运行java代码

    JAVA_HOME PATH CLASSPATH 三者的区别:安装完jdk之后,首先在环境变量里面添加JAVA_HOME ,例如安装路径为C:\Program Files\Java\jdk1.6.0_ ...

  2. QT 信号与槽connect

    QT 信号与槽connect QT 信号与槽connect connect函数调用几个限制 connect函数代码 QT中信号与槽的连接使用的connect函数是一个静态函数,在类QObject中定义 ...

  3. Python自动化之sqlalchemy（修改和查询）

    修改 my_user = Session.query(User).filter_by(name="alex").first() my_user.name = "Alex ...

  4. IntelliJ IDEA 创建项目project和module的关系

    使用基于IntelliJ的IDE,如phpstorm.android studio都会对project和module的关系比较糊涂.用简单的一句话来概括是:IntelliJ系中的Project相当于E ...

  5. [转]IntelliJ Idea 常用快捷键 列表(实战终极总结！！！！)

    IntelliJ Idea 常用快捷键 列表(实战终极总结!!!!) ntelliJ Idea 常用快捷键 列表(实战终极总结!!!!) 1. -----------自动代码-------- 常用的有 ...

  6. Best Time to Buy and Sell Stock with Cooldown

    Say you have an array for which the ith element is the price of a given stock on day i. Design an al ...

  7. Griddle, griddle-react 一个REACT 表格组件

    Griddle, griddle-react 一个REACT 表格组件: http://griddlegriddle.github.io/Griddle/index.html

  8. Qt 信号槽如何传递参数（或带参数的信号槽）

                                    信号槽如何传递参数(或带参数的信号槽) 利用Qt进行程序开发时,有时需要信号槽来完成参数传递.带参数的信号槽在使用时,有几点需要注意的地 ...

  9. Centos7 修改SSH 端口

    修改/etc/ssh/sshd_config vi /etc/ssh/sshd_config #Port 22 //这行去掉#号,防止配置不好以后不能远程登录,还得去机房修改,等修改以后的端口能使用以 ...

  10. linux学习之一些琐碎知识点

    一.python 问:django中project和app之间到底有什么不同? 答:他们的区别就是一个是配置,另一个是代码. 一个project包含很多个django app以及对它们的配置.技术上, ...