表单：

在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. 软件测试技术作业3---PrintPrimes()

    一.代码部分: private static void printPrimes (int n) { int curPrime; // Value currently considered for pr ...

  2. 照着官网来安装openstack pike之创建并启动instance

    有了之前组件(keystone.glance.nova.neutron)的安装后,那么就可以在命令行创建并启动instance了 照着官网来安装openstack pike之environment设置 ...

  3. Zoom Me FAQ

    Q: How to config custom shortcuts? A: Enter the preferences setting window from menu bar "Prefe ...

  4. [ARC061E]すぬけ君の地下鉄旅行 / Snuke's Subway Trip

    题目大意:Snuke的城镇有地铁行驶,地铁线路图包括$N$个站点和$M$个地铁线.站点被从$1$到$N$的整数所标记,每条线路被一个公司所拥有,并且每个公司用彼此不同的整数来表示. 第$i$条线路($ ...

  5. maven问题：如何启动maven项目

    maven是项目构建工具,用于解决jar间的依赖,启动maven项目的命令:tomcat:run 步骤如下: 1.在pom.xml文件中配置插件,此处配置的是tomcat8 2.右击项目名,找到Run ...

  6. Spring Boot CRUD+分页（基于Mybatis注解方式）

    步骤一:关于Mybatis Mybatis 是用来进行数据库操作的框架.其中分页使用Mybatis中的PageHelper插件. Mybatis与hibernate对比: 1.hibernate是一个 ...

  7. 多线程资源隔离之ThreadLocal

    上篇讲到多线程线程安全问题的解决思路,这篇将详细讲解资源隔离ThreadLocal的实践. ThreadLocal也叫线程局部变量,类似Map结构,以当前线程为key.既然是以资源隔离的思想保证线程安 ...

  8. Continue SQL query even on errors

    trymysql --force < sample_data.sql Mysql help section says -f, --force         Continue even if w ...

  9. [Network Architecture]DPN（Dual Path Network）算法详解(转)

    https://blog.csdn.net/u014380165/article/details/75676216 论文:Dual Path Networks 论文链接:https://arxiv.o ...

  10. Asp.Net MVC 请求原理分析

    分析Asp.Net MVC的请求过程,我们从以下几方面看: 配置:IIS网站的配置可以分为两个块:全局 Web.Config 和本站 Web.Config . Asp.Net Routing属于全局性 ...