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. 让 framset 框架中的页面全屏显示

    <script type="text/javascript"> window.onload=function(){ if(window.parent!=window){ ...

  2. Steamworks and Unity – P2P多人游戏

    之前我们讨论过“如何把Steamworks.Net和Unity整合起来”,这是一个很好的开始,现在我们研究深一点,谈一谈Steam中的多人游戏.这不是教程,但是可以指导你在你的游戏中如何使用Steam ...

  3. git读书笔记以及使用技巧

    [添加文件] git add  把文件修改添加到暂存区    git commit -m '' 把暂存区的所有内容提交到当前分支 [查看历史]    git log 查看提交历史 git log -- ...

  4. Kubernetes系列：(1) 初探

    1. 背景 在部门内容组织了一次K8s的培训,普及了下K8s的概念.框架.操作等,为便于后期查阅,也为了进一步深究K8s,因此开展K8s系列,周期不定- 2. 概念 (1) 含义:来自希腊语,意为&q ...

  5. java poi reader常用API汇总

    注意:(1)判断行的最大数量建议使用sheet.getLastRowNum();(2)判断每行最大列数建议使用row.getLastCellNum(); [JAVA]特别注意,POI中getLastR ...

  6. 如何取得GridView被隐藏列的值

    如何取得GridView被隐藏列的值         分类:             ASP.net              2009-06-25 12:47     943人阅读     评论(1 ...

  7. HTML标签 随笔2

    3-1  使用ul   添加新闻信息列表 ul-li是没有前后顺序的信息列表. 语法: <ul> <li>信息</li> <li>信息</li&g ...

  8. ViewPager应用引导界面

    如图设置的一种引导页的开启这个引用时先将图片进行一个动画当动画结束时进入到了引导页面 下面的小图片 当点击的时候ViewPager消失 再点击时ViewPager在显示出来 先看开启界面  上面的动画 ...

  9. 【MATLAB】十进制字节矩阵与比特流矩阵的互相转化

    for i=1:length(enc_out_data) data_bits_temp=dec2bin(enc_out_data(i),8); databits((i-1)*8+1:i*8)=doub ...

  10. broadcastemit

    http://code.angularjs.org/1.0.2/docs/api/ng.$rootScope.Scope#$broadcast scope可以以类似于DOM事件的方式进行事件传播.事件 ...