表单：

在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. redis 简单命令操作

    一.概述: 在该系列的前几篇博客中,主要讲述的是与Redis数据类型相关的命令,如String.List.Set.Hashes和Sorted-Set.这些命令都具有一个共同点,即所有的操作都是针对与K ...

  2. 2 安装企业wiki：confluence

    jira sudo /etc/init.d/jira start 启动 jiarsudo /etc/init.d/jira stop 停止 jiar 方法一:$ sudo /etc/init.d/co ...

  3. Ubuntu16.04配置Android SDK环境

    下载地址:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html(注意32位与64位,我 ...

  4. js小工具---本地图片转换为base64编码数据

    今天用jmeter对图片对比进行性能测试,post请求为json请求,图片为Base64编码后的图片数据.所以需要将一张本地图片生成base64编码,找到一个js小工具,记录在这儿便于以后复用. 效果 ...

  5. 【分库分表】sharding-jdbc实践—分库分表入门

    一.准备工作 1.准备三个数据库:db0.db1.db2 2.每个数据库新建两个订单表:t_order_0.t_order_1 DROP TABLE IF EXISTS `t_order_x`; CR ...

  6. debug教程

    名称 解释 格式 a (Assemble) 逐行汇编 a [address] c (Compare) 比较两内存块 c range address d (Dump) 内存16进制显示 d [addre ...

  7. 在MySQL中使用explain查询SQL的执行计划

    1.什么是MySQL执行计划 要对执行计划有个比较好的理解,需要先对MySQL的基础结构及查询基本原理有简单的了解. MySQL本身的功能架构分为三个部分,分别是 应用层.逻辑层.物理层,不只是MyS ...

  8. nginx之rewrite匹配需求

    现在需求如下: nginx上配有aaa.example.com的虚拟主机,现在需要将访问http://aaa.example.com/api/x.x/client/的请求转到http://bbb.ex ...

  9. bat(续六)-windows批处理set命令

    windows批处理set命令 [设置变量]格式:set 变量名=变量值详细:被设定的变量以%变量名%引用 [取消变量]格式:set 变量名=详细:取消后的变量若被引用%变量名%将为空 [展示变量]格 ...

  10. 提高ubuntu系统性能的小技巧

    在UBUNTU系统里面,并不是你的物理内存全部耗尽之后,系统才使用swap分区!系统的swappiness设定值,对如何使用swap分区是有着很大的联系,并不是当swappiness=0的时候就不使用 ...