表单：

在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. react build 后打包发布总结

    一,部署在apache  web服务器上(wamp   |   xammp) 1.后台接口需要做跨域设置 (1)在服务端利用Access-Control-Allow-Origin响应头解决.  设置A ...

  2. Mysql 数据类型及选择原则

    MySQL中的数据类型大的方面来分,可以分为:日期和时间.数值,以及字符串.下面就分开来进行总结. 数据库类型的选择对数据库的性能影响很大 1 . 数据类型会影响存储空间的开销 2 . 数据类型会影响 ...

  3. 【虚拟机】linux 桥接模式 固定静态IP

    1:在root用户下修改 2:进入root用户下 vim/etc/sysconfig/network-scripts/ifcfg-eth0 2.修改完保存退出 3.重启网络服务:service net ...

  4. Python Date 1–Hello world print

    对比学习Python与C str1 = 'hello python 2'# 字符串i = 3.1415926535 print(str1)print("hello python\n" ...

  5. 20145312《Java程序设计》课程总结

    20145312<Java程序设计>课程总结 每周读书笔记链接汇总 20145312<Java程序设计>第一周学习总结 20145312<Java程序设计>第二周学 ...

  6. vscode调试pomelo和pomelo使用vscode调试

    使用vscode 通过端口remote attach进行调试 pomelo. 0. 网上好多调试pomelo的都是webstorm.或者vscode调试node的教程.但没找到vscode调试pome ...

  7. Eye Protection FAQ

    Q: Why does smart protection not work? A: Please make sure the checkbox "Eye Protection" i ...

  8. linux用户态与内核态

    系统调用:如何中用户态切换到内核态 在linux中,系统调用是通过0x86体系结构中的软件中断实现的.这个软件中断与通常说的硬件中断不同之处在于,它是通过软件指令触发,而不是外部设备,这是程序员可以触 ...

  9. gcc编译出错---make[5]: *** [s-attrtab] Killed

    内存不足导致的编译出错,解决方法是增加swapfile. root@ubuntu:home# swapon -s Filename    Type            Size    Used    ...

  10. JSch 实现 SSH 端口转发

    package com.yinger.webservice.test; import java.sql.Connection; import java.sql.DriverManager; impor ...