<!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. 2016年10月31日--网页 Windows对象操作

    Window.opener:打开当前窗口的源窗口,如果当前窗口是首次启动浏览器打开的,则opener是null. Window.open(URL,name,features,replace):open ...

  2. String封装——读时共享，写时复制

    碰到过一位一直怀疑C++标准库(STL)效率的人,他说STL效率太低,企业开发根本不会用.我是持反对意见的. 说这话的人,肯定没有做过大量的调查.没有调查就没有发言权. STL的效率是不低的,足够满足 ...

  3. PHP5.4开启zend opcache缓存

    PHP5.5整合了zend opcache,但是5.4以下的需要自己安装. 介绍一下开启opcache方法,环境为wamp(php5.4.16) 下载dll文件 把php_opcache.dll放进p ...

  4. Eclipse J2EE LUNA 部署tomcat

  5. php 使用redis锁限制并发访问类

    1.并发访问限制问题 对于一些需要限制同一个用户并发访问的场景,如果用户并发请求多次,而服务器处理没有加锁限制,用户则可以多次请求成功. 例如换领优惠券,如果用户同一时间并发提交换领码,在没有加锁限制 ...

  6. 【leetcode】Reverse Linked List II

    Reverse Linked List II Reverse a linked list from position m to n. Do it in-place and in one-pass. F ...

  7. Java使用for循环打印乘法口诀（正倒左右三角形）

    代码1: public void test1(){ for(int i = 1; i < 10 ; i ++){ for(int k = 1; k < i ; k ++){ System. ...

  8. effective OC2.0 52阅读笔记（二 对象、消息、运行期）

    第二章:对象.消息.运行期 6 理解属性这一概念 总结:OC解决硬编码偏移量问题的做法,一种方案是把实例变量当做一种存储偏移量所用的特殊变量,交由类对象保管,偏移量会在运行期查找,叫做稳固的“应用程序 ...

  9. 9.SpringMVC和json结合传递数据 && 10.SpringMVC获取controller中json的数据

  10. 在Debian上用Bind 配置DNS服务器

    1 什么是DNS 初学者可能不理解DNS到底是什么,干什么用.我是在1998年大学毕业时才听说这个词的.那时我在聊天室碰到潍坊信息港的一个网管,我恬不知耻地说我也是个网管,他说也维护DNS吗?我说,D ...