<!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. iOS的内购

    内购: 向苹果付钱购买与APP的使用相关的产品(游戏中的道具,装备等): 苹果将收到的钱按比例,转给APP方: 不同于APP中的第三方支付(不经过苹果):

  2. [原创]使用java批量修改文件编码（ANSI-->UTF-8）

    从网上下载的项目,有时候.java文件的编码是ANSI.导入到自己的MyEclipse后,查看项目源码的时候,总是乱码. 一个个.java去修改的话, 既麻烦又不现实.所以写了下面这个工具类,进行批量 ...

  3. ubuntu下如何用命令行运行deb安装包

    如果ubuntu要安装新软件,已有deb安装包(例如:iptux.deb),但是无法登录到桌面环境.那该怎么安装?答案是:使用dpkg命令. dpkg命令常用格式如下: sudo dpkg -I ip ...

  4. JS中try....catch

    1.事情还有得挽回,换条路走try { 执行某个逻辑} catch (e) { 出问题,换个逻辑执行} 2.体面的退出try { 正常流程} catch (e) { 弹个框告诉用户不好意思出了点问题 ...

  5. Webclent基本操作

    /** * @Title: webclientTest.java * @Package webclient * @Description: TODO(用一句话描述该文件做什么) * @author A ...

  6. django的cookie 和session

    Cookie 1.获取cookie: request.COOKIES['key'] request.get_signed_cookie(key, default=RAISE_ERROR, salt=' ...

  7. 2.2---找链表倒数第K个结点

    答案,注意,一种是递归,另一种是迭代,那么巧妙利用双指针: 迭代: public static LinkedListNode nthToLast(LinkedListNode head, int n) ...

  8. Fibonacci 1

    Fibonacci 1 题面 \[F_0=0,F_1=1,F_n=F_{n-1}+F_{n-2}\] 给定\(n\),求 \[S(n)=\sum_{i=1}^{n}F_nF_{n-1}\] 数据格式 ...

  9. 一个简单的log

    #pragma once #include <windows.h> #include <process.h> class CLogger { public: static CR ...

  10. Oracle: SQL组合不同字段作为一个查询条件

    前端程序传过来的值是有三个字段组合之后的结果,后端程序处理,并且将查询的数据反馈给前端. PS:不能直接使用字段RPT_NO的,因为在这条记录中RPT_NO恰好等于其他三个字段的组合值. 正确的做法是 ...