在HTML5中，表单新增了一些属性，input标签也有了更多的type类型，有些实现了js才能实现的特效，但目前有些浏览器不能全部支持。下面是一些h5在表单和input标签上的一些改动。

<!DOCTYPE html>
<html>
   <head>
      <title>表单测试</title>
      <meta charset="utf-8" />
        <!-- 在不支持h5的浏览器中，可以用CSS样式进行改写 -->
        <style>
            input[type="search"] {-webkit-appearance: textfield;}
        </style>
        <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
   </head>
   <body>
        <!-- 在html5中，input标签可以不写在form里，但要给form一个id（如：login），然后在input中加一个form="login"属性。
         如果在同一表单中，做操作时，可以在input中加入formaction="1.php"属性将表单提交到不同的PHP处理文件中。
         也可以增加formmethod="get"属性使不同的文本框提交的方法不同。-->
        <!-- 如果要使整个表单验证失效，可以再form中加入novalidate属性；也可以在input中加入formnovalidate属性，使单个文本框失效（不可以与required一起使用） -->
      <form action="demo.php">

            <!-- 当文本框是text或者textarea类型时，在未输入状态下，使用placeholder属性可以显示输入提示 -->
            TEXT:<input type="text" placeholder="请输入用户名" name="username"/><br/>
            <!-- search类型的input用来输入搜索关键词
                 autofocus属性用来自动获取光标焦点，但一个页面只能有一个。
                 input标签中的list属性，用于给出下拉选择（类似于select），要与datalist元素一起使用，datalist设置一个id值，
                 input中加入list="id值即可"-->
            SEARCH:<input list="listtest" type="search" autofocus name="ser"/><br/>
            <datalist id="listtest">
                <option>www.baidu.com</option>
                <option>www.sina.com</option>
                <option>www.google.com</option>
            </datalist>
            <!-- tel类型的input用来输入电话，title是提示信息，pattern中可以写电话的正则.
                 autocomplete属性用于自动完成，可以关闭-->
            TEL:<input type="tel" autocomplete="off" name="num" title="只能输入11位数字！" pattern="^1[34578]\d{9}$" /><br/>
            <!-- URL类型的input用来输入URL的文本框-->
            URL:<input type="url" required name="url" title="请输入正确的URL"/><br/>
            <!-- email类型的input用来输入邮箱的文本框，但是它并不检测email地址是否存在，而且文本框可以为空，除非加了required属性。 -->
            EMAIL:<input type=email required name="email"/><br/>

            <!-- datetime用来输入UTC日期和时间，并且在提交时对输入的日期格式进行检测 -->
            datetime:<input type="datetime" name="datetime"/><br/>
            <!-- date类型：以日历的形式方便输入 -->
            date:    <input type="date" value="2016-07-05" name="date"/><br/>
            <!-- month类型是用来输入月份的文本框，并在提交时对月份格式检查 -->
            month:   <input type="month" value="2016-07" name="month"/><br/>
            <!-- week用来输入周号，他的格式类似于：2014-W10，代表2014年的第10周 -->
            week:    <input type="week" value="2016-W28" name="week"/><br/>
            <!-- time用来输入时间 -->
            time:    <input type="time" value="18:18" name="time"/><br/>
            <!-- datetime-local专门用来输入本地日期和时间的文本框 -->
            datetime-local:<input type="datetime-local" value="2016-07-05T18:18" name="local"/><br/>

            <!-- number类型用来输入数字，提交时检测。有min、max、step（数字相差的步数）属性 -->
            number:<input type="number" name="num" min="10" max="30" step="3"/><br/>
            <!-- range只允许输入一段范围内数值的文本框，具有min、max、step属性，默认范围是0到100 -->
            <!-- output元素定义不同类型的输出，比如计算结果或脚本输出。它必须从属于某个表单，写在表单内部，或者对他添加form属性。output和range结合如下 -->
            range:<input type="range" onchange="range.value=value" min="10" max="30" step="3"/>
            <output id="range">20</output><br/>
            <!-- color提供了一个颜色选择器 -->
            color:<input type="color" name="color"/><br/>
            <!-- 文件上传文本框，multiple属性使其可以选择多个文件；accept属性限制了选择文件的种类 -->
            file:<input type="file" multiple accept="image/*" id="file0" name="file"/><br/>
            <img src="" id="img0">
            <!-- 此段js实现了上传预览 -->
            <script>
                $("#file0").change(function(){
                    var objUrl = getObjectURL(this.files[0]) ;
                    console.log("objUrl = "+objUrl) ;
                    if (objUrl) {
                        $("#img0").attr("src", objUrl) ;
                    }
                }) ;
                //建立一個可存取到該file的url
                function getObjectURL(file) {
                    var url = null ;
                    if (window.createObjectURL!=undefined) { // basic
                        url = window.createObjectURL(file) ;
                    } else if (window.URL!=undefined) { // mozilla(firefox)
                        url = window.URL.createObjectURL(file) ;
                    } else if (window.webkitURL!=undefined) { // webkit or chrome
                        url = window.webkitURL.createObjectURL(file) ;
                    }
                    return url ;
                }
            </script>

            <input type="submit" name="dosubmit" value="提交">
        </form>
   </body>
</html>

html5中form表单新增属性以及改良的input标签元素的种类的更多相关文章

  1. HTML5的form表单属性

    form:HTML4中,表单内的从属元素必须书写在<form></form>之内,但是在HTML5中,表单的从属元素可以处于页面的任何位置,然后为其添加form属性,属性值为f ...

  2. [html5] 学习笔记-表单新增元素与属性

    本节讲的是表单元素的form,formaction属性,frommethod,formenctype属性,formtarget,autofocus属性,required,labels属性. 1.for ...

  3. MVC中Form表单的提交

    概述 Web页面进行Form表单提交是数据提交的一种,在MVC中Form表单提交到服务器.服务端接受Form表单的方式有多种,如果一个Form有2个submit按钮,那后台如何判断是哪个按钮提交的数据 ...

  4. laravel中form表单，ajax传值没反应

    laravel中form表单,ajax传值没反应时,可能是令牌有问题. form中添加: {{csrf_token()}} ajax中添加: data: {'page': page, '_token' ...

  5. html/form表单常用属性认识

    1.form表单常用属性练习 <style> .form1 { margin: auto; height: 900px; width: 500px; text-align: center; ...

  6. HTML5 表单新增属性

    1. 表单内元素的form属性 在H5中可以把form放到页面的任何地方,然后为该元素指定一个form属性,属性值为该表单的id,这样就可以声明该元素从属于指定表单了 <form id=&quo ...

  7. [html5] 学习笔记-表单新增的元素与属性（续）

    本节主要讲解表单新增元素的controls属性.placeholder属性.List属性.Autocomplete属性.Pattern属性.SelectionDirection属性.Indetermi ...

  8. django中form表单的提交：

    一,关于表单: 表单在百度百科的解释:   表单在网页中主要负责数据采集功能.一个表单有三个基本组成部分: 表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法. 表单域 ...

  9. html中form表单的使用方法和介绍

    from表单的使用方法 一.表单赏析 二.了解表单功能:用于搜集不同类型的用户输入的内容 有了表单,网页的内容可以由用户自己创建,那么对于网页来说,我们既是网页创建都者,也是网页的消费者. 三.常用的 ...

随机推荐

  1. squid.con 配置文件详解

    博客转载:http://www.articleswriting.net/article/6477447043/;jsessionid=42C9702B475ECF99EB861214186390E8 ...

  2. fabricjs 高级篇（自定义类型）

    原文:https://www.sitepoint.com/fabric-js-advanced/ <html> <head> <script src='./js/fabr ...

  3. EffectiveJava（2）应对多个构造函数应当使用构建器

    ** 应对多个构造函数应当使用构建器 ** 静态工厂和构造器都不能很好的扩展到大量的可选参数,遇到大量参数有大量可选域时,只能重复生成可选参数递增的构造方法,这种构造模式叫做重叠构造器模式 javaB ...

  4. C#如何改变字符串编码

    public string UTF8ToGB2312(string str)        {            try            {                    Encod ...

  5. SQL 关键字 'USER' 附近有语法错误怎么办

    如下图所示,我想要访问我的Database1.mdf的user这张表,提示如下错误   user在SQL Server中是系统保留字,将user修改为[user]就可以了.但是直接在VS中是无法修改的 ...

  6. Linux非阻塞IO（二）网络编程中非阻塞IO与IO复用模型结合

    上文描述了最简易的非阻塞IO,采用的是轮询的方式,这节我们使用IO复用模型.   阻塞IO   过去我们使用IO复用与阻塞IO结合的时候,IO复用模型起到的作用是并发监听多个fd. 以简单的回射服务器 ...

  7. Win10 导航窗口不能移动文件win10 资源管理器 无法拖动文件到左侧驱动器

    Win10 导航窗口不能移动文件怎么办 Win10左侧导航栏不能移动文件怎么办 win10 资源管理器 无法拖动文件到左侧驱动器怎么办 在同一个文件夹可以拖动来移动文件,拖到地址栏的面包屑也可以移动文 ...

  8. hdu4888 多校B 最大流以及最大流唯一推断+输出方案

    题意.给一个矩阵,告诉你每行和.每列和.而且限制所填数不大于k,问矩阵是否唯一. 经典建图不说了.第一次遇到推断最大流唯一性的.学习了:用dfs来推断残网中是否还存在环,若存在,则表明绕这个环走一圈, ...

  9. Codeforces 463C Gargari and Bishops 题解

    题目出处: http://codeforces.com/contest/463/problem/C 感觉本题还是挺难的.须要好好总结一下. 计算对角线的公式: 1 右斜对角线,也叫主对角线的下标计算公 ...

  10. 并发编程概述 委托（delegate） 事件（event） .net core 2.0 event bus 一个简单的基于内存事件总线实现 .net core 基于NPOI 的excel导出类，支持自定义导出哪些字段 基于Ace Admin 的菜单栏实现 第五节：SignalR大杂烩(与MVC融合、全局的几个配置、跨域的应用、C/S程序充当Client和Server)

    并发编程概述   前言 说实话,在我软件开发的头两年几乎不考虑并发编程,请求与响应把业务逻辑尽快完成一个星期的任务能两天完成绝不拖三天(剩下时间各种浪),根本不会考虑性能问题(能接受范围内).但随着工 ...