<!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. C++中各种容器特点总结

    1.vector 内部数据结构:数组,可随机访问元素,在末尾增加或删除元素与元素数目无关,在其 他部分增加或删除元素随着元素数目呈线性变化. 2.deque 数组,按页/块来分配存储,每页/块包含固定 ...

  2. centos 安装gcc时，出错：Found 10 pre-existing rpmdb problem(s), 'yum check' output follows:

    别人折腾的系统. 刚开始,准备安装下tornado,报错,需要安装 gcc 和 python-devel gcc安装报错,如标题所示: 谷歌了一把: http://stackoverflow.com/ ...

  3. easyui只打开一个tab

    下面是JS代码: var curr = null; //curr为当前tab的标题,在else中赋值 function addtab(href, tabtitle) { if (curr) { $(' ...

  4. Closest Binary Search Tree Value I & II

    Closest Binary Search Tree Value Given a non-empty binary search tree and a target value, find the v ...

  5. Best Meeting Point

    Total Accepted: 701 Total Submissions: 1714 Difficulty: Medium A group of two or more people wants t ...

  6. WinForm开发框架--动态读取DLL模式

    1\ WinForm开发框架--动态读取DLL模式   http://www.2cto.com/kf/201306/217199.html 2\ 广州爱奇迪     http://www.iqidi. ...

  7. 使用Java数组实现双色球选号

    package com.hm.test; import java.util.Random; /** * 模拟双色球生成 * *1.从1到16中产生一个篮球的随机数 *2.从1到33中产生出6个红色的球 ...

  8. shell 监控局域网的主机是否up

    #!/bin/bash ;i<;i++)) ;do .$i>/dev/null #ping -c 172.31.0.30 ~172.31.0.59 ]] #if up $?==0 then ...

  9. K3中添加的一条新数据，其在数据库中的位置

    最近研究将K3系统与生产管理系统结合起来,减少工作量,但如何确定其各自后台数据库的构成,其对应数据各自位于那张表内,总结了一下: 1.从百度搜索,查看表结构,然后找到目标表    另:K3数据库中单独 ...

  10. C#获取IP和主机名

    System.Net.IPAddress addr; //获取IP addr = new System.Net.IPAddress ( Dns.GetHostByName ( Dns.GetHostN ...