1、html5的input标签的type类型新增介绍：

　　

2、表单新增属性介绍：

　　

3、代码示例：

<!doctype html>

<html>

    <head></head>

    <body>

        <form action="http://localhost/test.php" method="post" id="register"></form>

        <input type="text" name="user" value="" form="register" />

        <input type="password" name="pwd" value="" form="register" />

        <select name="year" form="register">

            <option value="1970">1970</option>

            <option value="1980">1980</option>

            <option value="1990">1990</option>

        </select>

        <input type="submit" value="注册" form="register" />

        <hr />

        <!--

            form: html5表单将form和它所提交的内容分开，这样有利于排版，但是需要在给提交的内容标签添加form属性。

                       例如：<input type="text" name="user" value="" form="register" />

        -->

        默认值:<input type="text" name="test" value="" pattern="\d{3}" placeholder="我是新的HTML5的默认值" 
　　　　　　　　　　form="register" /><br />

        邮箱：<input type="email" name="youxiang" value="" form="register" required="required" /><br />

        URL：<input type="url" name="url" value="" form="register" /><br />

        DATE:<input type="date" name="riqi" value="" form="register" /><br />

        TIME：<input type="time" name="shijian" value="" form="register" /><br />

        Month：<input type="month" name="yue" value="" form="register" /><br />

        WEEK：<input type="week" name="zhou" value="" form="register" /><br />

        数字：<input type="number" name="shuzi" value="" form="register" autofocus="autofocus" /><br />

        滑动条：<input type="range" name="huadong" value="" form="register" max="10" step="2" /><br />

        搜索：<input type="search" name="sousuo" value="" form="register" results="n"  /><br />

        颜色：<input type="color" name="yanse" value="" form="register" /><br />

        <hr />

        自动填充表单<br />

        <input type="text" name="auto" value="" list="movie" />

        <datalist id="movie">

            <option>人在囧途</option>

            <option>车在囧途</option>

            <option>泰囧</option>

        </datalist>

        <hr />

        输出表单output<br />

        <form action="" method="post" oninput="result.value=parseInt(no1.value)+parseInt(no2.value)">

            <input type="number" name="no1" value="" />

            <input type="number" name="no2" value="" />

            <output name="result"></output>

        </form>

    </body>

</html>

HTML5之表单新增类型介绍的更多相关文章

  1. HTML5 总结-表单-输入类型

    HTML5 Input 类型 HTML5 新的 Input 类型 HTML5 拥有多个新的表单输入类型.这些新特性提供了更好的输入控制和验证. 本章全面介绍这些新的输入类型: email url nu ...

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

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

  3. html5中form表单新增属性以及改良的input标签元素的种类

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

  4. IT兄弟连 HTML5教程 HTML5表单 新增的表单属性1

    HTML5 Input表单为<form>和<input>标签添加了几个新属性,属性如表1. 1  autocomplete属性 autocomplete属性规定form或inp ...

  5. HTML5 智能表单

    HTML5 智能表单 1.表单新增属性  ☀ autofocus 属性 <input type="text" autofocus/>设置 autofocus 属性,使文 ...

  6. HTML5智能表单

    HTML5 智能表单 1.表单新增属性  ☀ autofocus 属性 <input type="text" autofocus/>设置 autofocus 属性,使文 ...

  7. HTML5新表单新功能解析

    HTML5新增了很多属性功能.但是有兼容性问题,因为这些表单功能新增的.我这里做了一个简单的练习,方便参考.如果完全兼容的话,那我们写表单的时候就省了很多代码以及各种判断. <!DOCTYPE ...

  8. hTML5实现表单内的上传文件框，上传前预览图片，针刷新预览images

    hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images, 本例子主要是使用HTML5 的File API,建立一個可存取到该file的url, 一个空的img标签,ID为img0,把 ...

  9. 精美的HTML5/CSS3表单 带小图标

    今天我们要来分享一款非常精美的HTML5/CSS3表单,准备地说,这是一款经过美化的input输入表单,每一个输入表单都可以定义其两侧的小图标,非常华丽.另外,这款表单应用还采用了3种不同的风格主题, ...

随机推荐

  1. vim代码折叠命令

    1. 折叠方式 可用选项 'foldmethod' 来设定折叠方式:set fdm=*****. 有 6 种方法来选定折叠:           manual           手工定义折叠 ind ...

  2. BNU4286——Adjacent Bit Counts——————【dp】

    Adjacent Bit Counts Time Limit: 1000ms Memory Limit: 65536KB 64-bit integer IO format: %lld      Jav ...

  3. rpm重装python和yum

    前些天升级的python, yum就不能用了, 提示 "No module named yum", 然后搜索了一下, 说要重装python和yum, 也没多想, 就按照那些教程去做 ...

  4. Jvav Collection-List

    package 集合; import java.util.ArrayList; import java.util.Collection; /** * 集合和数组的区别: * 1.长度 * 数组长度固定 ...

  5. C# 数据库连接增删改查

    C# 连接数据库 using System.Data.sqlCliect; // 加在头 main函数里面用法(删) //连接字符串 string Connectionstring = "s ...

  6. Bash 终端快捷键

    在终端下输大量的命令,有些快捷键还是挺有帮助的. 跳跃 跳到最后 ctrl + e (end) 跳到最前 ctrl + a (abcde....) 向后跳一个单词 alt + 右方向键 向前跳一个单词 ...

  7. Celery-------项目目录

    在实际应用中Celery的目录是有规则的 要满足这样的条件才可以 目录Celery_task这个名字可以随意,但是这个目录下一定要有一个celery.py这个文件 from celery import ...

  8. Windows 10：开机显示C:\WINDOWS\system32\config\systemprofile\Desktop不可用 的解决方法

    今晨起来开机,开完机一看,弹出啦一个框框上面写着“C:\WINDOWS\system32\config\systemprofile\Desktop不可用...” 当我点击了确定之后,发现屏幕一片黑,只 ...

  9. CKEditor的使用

    需要配置的功能列表 //class: cke_button( 按钮 ) , ck_combo(下拉) /* 需要配置的功能列表 document:保存(save).新建(newpage).预览(pre ...

  10. Don't forget, a person's greatest emotional need is to feel appreciated.

    Don't forget, a person's greatest emotional need is to feel appreciated.莫忘记,人类情感上最大的需要是感恩.