表单：

在html4中，表单内的从属元素必须写在表单内部。在html5中，可以吧他们书写在页面任何位置，然后指定form属性，属性值为表单ID，这样就指定表单了。

formaction,formmethod,formentype

<body>

    <form id="taskForm">

        <input

        type="text"

        value="v1"

        formnovalidate

        formtarget="_blank|_self|_parent|_top|framename"

        formenctype="application/x-www-form-urlencoded"

        formmethod="POST" formaction="http://localhost:8080/test01.jsp">submit

    </form>

    <footer>

            <button form="taskForm">submit</button>

    </footer>

</body>

表单required and labels:

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <form id="taskForm">

        <label for="txt_name">name:</label>

        <input id="txt_name" type="text" name="txt_name">

        <input id="btn_validate" type="button" value="validate" onclick="validateName()">

    </form>

    <script>

        function validateName() {

            var txtName = document.getElementById('txt_name');

            var button = document.getElementById('btn_validate');

            var form = document.getElementById('taskForm');

            if (txtName.value.trim() == '') {

                var label = document.createElement("label");

                label.setAttribute("for", "txt_name");

                form.insertBefore(label, button);

                txtName.labels[1].innerHTML="please input txt_name";

                txtName.labels[1].setAttribute('style', 'color:red')

            }

        }

    </script>

</body>

</html>

control属性

<form id="taskForm">

        <label id="label_zip">

            name:

            <input id="txt_zip" type="text" name="txt_zip" maxlength="6">

            <small>请输入6位数字</small>

        </label>

        <input id="btn_validate" type="button" value="设置默认值" onclick="setDefault()">

    </form>

    <script>

        function setDefault() {

            var labelZip = document.getElementById('label_zip');

            var labelbox = labelZip.control;

            labelbox.value = "123465";

        }

    </script>

dataList元素：

<input type="text" name="greeting" list="greeting" autocomplete>

        <datalist id="greeting" style="display: none">

            <option value="1">test1</option>

            <option value="2">test2</option>

            <option value="3">test3</option>

        </datalist>

image的width，height属性：

<input type="image" src="jkxy.png" width="20" height="20">

html5: 新特性（表单）的更多相关文章

  1. 表单验证—html5新特性表单验证

    一.表单 <body> <section id="register"> <div><img src="images/logo.j ...

  2. HTML5 学习笔记 表单属性

    HTML5新的表单属性 HTML5 的form和input 标签添加了几个新的属性 <form>新属性 autocomplete novalidate input 新属性 autocomp ...

  3. html5新特性contenteditable 属性更容易实现动态表单

    介绍html5新特性的一个属性:contenteditable 作用域全局.所有的块标签都可以,例如:span.p.div.td等标签.但是,不可以作用域<br/>类型的标签. conte ...

  4. HTML5初步——新的表单元素和属性

    HTML5初步--新的表单元素和属性 HTML5初步--新的表单元素和属性 <!DOCTYPE html> <html> <head> <meta chars ...

  5. html5新特性

    这一篇博文不会告诉你怎么去使用html5的新特性,只会给你总结一下新特性------对于好学的人可以把这篇文章当做一个目录 对于初接触的人来说是一个导向 对于已经接触过的人来说是一个检测你掌握程度的检 ...

  6. HTML5新特性及详解

    什么是HTML5:HTML5 是下一代的HTML,将成为 HTML.XHTML 以及 HTML DOM 的新标准. 为 HTML5 建立的一些规则: 新特性应该基于 HTML.CSS.DOM 以及 J ...

  7. HTML5新特性总结

    一.HTML5 中的一些有趣的新特性: 用于绘画的 canvas 元素 用于媒介回放的 video 和 audio 元素 对本地离线存储的更好的支持 新的特殊内容元素,比如 article.foote ...

  8. HTML5新特性之CSS+HTML5实例

    1.新的DOCTYPE和字符集 HTML5的一项准则就是化繁为简,Web页面的DOCTYPE被极大的简化. <!DOCTYPE html> 同时字符集声明也被简化了: <meta c ...

  9. html5新特性与用法大全了解一下

    有好多小伙伴私聊我问我html5新特性 和用法,下面我给大家具体介绍一下html5都新加了哪些新特性,下面我给大家总结一下. 1)新的语义标签 footer header 等等2)增强型表单 表单2. ...

  10. 关于自我总结的html5新特性

    最近本包子制订了一个学校计划,第一步就是了解并总结一下html5现在所含有的新特性,好吧,这只是一个了解,- -! 自己总结了一个word文档,里面很多东西自己都还没实际用过,下一步,本包子要写pc端 ...

随机推荐

  1. 20145301 实验三 "敏捷开发与XP实践"

    20145301 实验三 "敏捷开发与XP实践" 课程:Java程序设计  班级:1453 指导教师:娄嘉鹏 实验日期:2016.04.22 实验名称:敏捷开发与XP实践 一.实验 ...

  2. 北京电子科技学院（BESTI）实验报告2

    北京电子科技学院(BESTI)实验报告2 课程: 信息安全系统设计基础 班级:1452.1453 姓名:(按贡献大小排名)郑凯杰 .周恩德 学号:(按贡献大小排名)20145314 .20145217 ...

  3. 20145314郑凯杰《信息安全系统设计基础》第7周学习总结 part B

    20145314郑凯杰<信息安全系统设计基础>第7周学习总结 part B 上篇博客反思与深入 首先根据本周第一篇博客,娄老师给我的评论,我开始进行局部性的深入研究: 分为两个步骤,一是知 ...

  4. Xcode8编辑代码崩溃解决办法

    更新了Xcode8带来了一系列问题,最大的困扰就是不支持插件了,而且最关键的是一敲代码就崩溃(就是写一个字母就开始崩),在网上找了很多解决,发现是之前装的插件遗留下来的问题,将插件全部删掉就解决了,下 ...

  5. think in java

    1.public private protected

  6. mybatis缓存有关的设置和属性

    知识点:mybatis缓存相关的设置和属性 重点:每次执行增删改操作后,一二级缓存被清空,是因为标签设置默认属性为 flushCache="true" (1) <!-- 全局 ...

  7. Tornado异步(2)

    Tornado异步 因为epoll主要是用来解决网络IO的并发问题,所以Tornado的异步编程也主要体现在网络IO的异步上,即异步Web请求. 1. tornado.httpclient.Async ...

  8. apt get update无法正常使用解决方案（转载）

    apt get update无法正常使用 解决方法参考博客 [问题描述] 前几天执行apt相关命令(如apt-get update),都会长时间停在``等待报头'',超时后,显示连接超时. 换了快速指 ...

  9. 读取文件并找出年龄最大的N个人-兰亭集市笔试题

    C++ code: #include <iostream> #include <fstream> #include <map> #include <strin ...

  10. 简单搭建FastDFS分布式文件系统(简单易懂)

    一.什么是FastDFS FastDFS一个开源的轻量级分布式文件系统,它对文件进行管理,充分考虑了冗余备份.负载均衡.线性扩容等机制,并注重高可用.高性能等指标,功能包括:文件存储.文件同步.文件访 ...