<!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. 剑指Offer 斐波那契数列

    题目描述 大家都知道斐波那契数列,现在要求输入一个整数n,请你输出斐波那契数列的第n项. n<=39 思路: 不考虑递归 用递推的思路 AC代码: class Solution { public ...

  2. int *const && int const * && const int *的区别

    ANSIC允许声明常量,常量和变量不同,常量就是不可以改变的量,用关键字const来修饰 比如:const int a int const a 以上两种声明方式是一样的,我们不需要考虑const和in ...

  3. django的分页--不全也未实现

    一.Django内置分页 Paginator 二.自定义分页 分页功能在每个网站都是必要的,对于分页来说,其实就是根据用户的输入计算出应该在数据库表中的起始位置. 1.设定每页显示数据条数 2.用户输 ...

  4. Python读取中文txt文件错误：UnicodeEncodeError: 'gbk' codec can't encode character

    with open(file,'r') as f: line=f.readline() i=1 while line: line=line.decode('utf-8') line=f.readlin ...

  5. 工作之余，花2个月时间系统学习前端和PHP

    http://www.jikexueyuan.com/path/web/ http://www.jikexueyuan.com/path/php/

  6. 【云计算】docker相关开源项目、工具

    十大基于Docker的开发工具 作者                     郭蕾        发布于     2014年8月19日     |              注意:QCon全球软件开发 ...

  7. [k]web页面-browser兼容问题-1

    1:空的a标签在IE7/8下不能点击(2015-05-22) html代码: <ul class='oUl'><li><a href="#"> ...

  8. 【leetcode】Unique Binary Search Trees

    Unique Binary Search Trees Given n, how many structurally unique BST's (binary search trees) that st ...

  9. jdbc mysql crud dao模型 sql注入漏洞 jdbc 操作大文件

    day17总结 今日内容 l JDBC 1.1 上次课内容总结 SQL语句: 1.外键约束:foreign key * 维护多个表关系! * 用来保证数据完整性! 2.三种关系: * 一对多: * 一 ...

  10. javascript 搜索并高亮显示

    2015年12月22日 15:45:08 星期二 情景: 用来筛选列表中的数据, 由于单条数据很简短, 没有用php+mysql去实现筛选功能, 只用javascript进行筛选, 匹配的高亮, 或者 ...