HTML5初步——新的表单元素和属性

HTML5初步——新的表单元素和属性

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <title>HTML5 移动Web开发指南</title>
  6.     <style type="text/css">
  7.         h1, h2, h3, h4, h5, h6
  8.         {
  9.             text-align: center;
  10.         }
  11.  
  12.         input
  13.         {
  14.             width: 450px;
  15.         }
  16.  
  17.         input[type="range"]
  18.         {
  19.             -webkit-appearance: none !important;
  20.             -webkit-box-shadow: 0 1px 0 0px #424242, 0 1px 0 #060607 inset,
  21. 0px 2px 10px 0px black inset, 1px 0px 2px rgba(0, 0, 0, 0.4) inset,
  22. 0 0px 1px rgba(0, 0, 0, 0.6) inset;
  23.             margin-top: 2px;
  24.             background-color: #272728;
  25.             border-radius: 15px;
  26.             width: 400px;
  27.         }
  28.  
  29.         /*-webkit-slider-thumb:设置上面滑块的样式*/
  30.         input[type="range"]::-webkit-slider-thumb
  31.         {
  32.             -webkit-appearance: none !important;
  33.             cursor: default;
  34.             top: 1px;
  35.             height: 9px;
  36.             width: 20px;
  37.             background: none repeat scroll 0 0 #777;
  38.             border-radius: 15px;
  39.             -webkit-box-shadow: 0 -1px 1px black inset;
  40.         }
  41.     </style>
  42. </head>
  43. <body>
  44.     <header>
  45.         <section>
  46.             <h1>
  47.                 HTML5 移动Web开发指南</h1>
  48.         </section>
  49.     </header>
  50.     <fieldset>
  51.         <legend>HTML5 新元素--表单元素</legend>
  52.         <article>
  53.             <section>
  54.                 <pre>
  55.                 placeholder 属性：
  56.                                  一般用在文本框上
  57.                                  其主要作用是当文本框处于未输入状态而且内容为空时给文本框的提示内容
  58.                             效果：
  59.                                  当文本框获取焦点时，提示信息自己主动清空。失去焦点且未输入内容时，提示信息又自己主动出现
  60.                                  省去传统的文本框须要借助 onfocel 和 onblur 事件才干实现的效果
  61.                                  (兼容大部分的PC浏览器和Mobile浏览器。仅仅能说科技确实进步了)
  62.                 演示样例：<input type="text" placeholder="我是 placeholder,是用来起提示作用" />
  63.                </pre>
  64.             </section>
  65.             <section>
  66.                 <pre>
  67.                 autofocus 属性：
  68.                                指定控件自己主动获取焦点，须要注意的是一个HTML页面上仅仅能有一个控件具有改属性
  69.                 演示样例：<input type="text" autofocus="true" placeholder="我设置了 autofocus自己主动获取焦点属性" />
  70.                 </pre>
  71.             </section>
  72.             <section>
  73.                 <pre>
  74.                 list 和 datalist 元素：
  75.                                      list 元素的主要作用是提示文本框输入，提示的数据源则由 datalist 提供
  76.                                      眼下 list 和 datalist 元素仅仅有 Opera 浏览器支持，甚至没有不论什么一款移动浏览器支持该特性
  77.                 演示样例：<input type="text" placeholder="我加入了 list 属性 和 datalist 元素。可没多少人懂我" list="myDataList" />
  78.                <datalist id="myDataList">
  79.                    <option label="1">我是datalist1</option>
  80.                    <option label="2">我是datalist2</option>
  81.                    <option label="3">我是datalist3</option>
  82.                    <option label="4">我是datalist4</option>
  83.                </datalist>
  84.                </pre>
  85.             </section>
  86.             <section>
  87.                 <pre>
  88.                 search 类型文本框：
  89.                                  主要用来搜索关键词的文本框
  90.                                  该文本框和普通文本框唯一差别，在 Safari 和 Chrome 浏览器下，文本框的外观为圆角
  91.                 演示样例：<input type="search" placeholder="我是search 类型文本框" />
  92.                </pre>
  93.             </section>
  94.             <section>
  95.                 <pre>
  96.                  email 类型文本框：
  97.                                   是一个能够指定电子邮件内容的文本框，通经常使用在输入E-mail地址的输入文本框上
  98.                                   这样的文本框和普通文本框在外观上差点儿一样。但实际上在Safari移动版浏览器下是有差别的
  99.                                   其键盘会依据文本框类型不同而显示相相应的键盘
  100.                  演示样例：<input type="email" placeholder="我是 email 类型文本框" />
  101.                </pre>
  102.             </section>
  103.             <section>
  104.                 <pre>
  105.                 number 类型文本框：
  106.                                   是一种用于输入数字的文本框类型
  107.                                   它能够配合 min、max、及step属性使用
  108.                 演示样例：<input type="number" value="0" min="0" max="10" step="1" />
  109.                </pre>
  110.             </section>
  111.             <section>
  112.                 <pre>
  113.                 range 类型文本框：
  114.                                   是一种数值范围输入文本框类型，提供的是一种滑动输入方式
  115.                                   须要配合 min、max、range等属性的使用
  116.                 演示样例：<input type="range" value="1" min="0" max="100" step="1" />
  117.                </pre>
  118.             </section>
  119.             <section>
  120.                 <pre>
  121.                 tel 类型文本框：
  122.                                   是一种供用户输入电话号码的文本框类型
  123.                                   这样的文本框在移动版浏览器下，其键盘会依据文本框类型不同而显示相相应的键盘
  124.                 演示样例：<input type="tel" placeholder="我是 tel 类型文本框"  />
  125.                </pre>
  126.             </section>
  127.             <section>
  128.                 <pre>
  129.                 url 类型文本框：
  130.                                   是一种供用户输入Url地址的文本框类型
  131.                                   这样的文本框在移动版浏览器下，其键盘会依据文本框类型不同而显示相相应的键盘
  132.                 演示样例：<input type="url" placeholder="我是 url 类型文本框"  />
  133.                </pre>
  134.             </section>
  135.             <section>
  136.                <pre>
  137.                 在HTML5规范中。除了新增表单元素外，还有日期、时间类型的 input元素
  138.                 但这些类型都没有得到广泛的支持
  139.                 详细例如以下：
  140.                         日期和时间(含时区)：
  141.                         <input type="datetime" />
  142.                         日期和时间(不含时区)：
  143.                         <input type="datetime-local" />
  144.                         时间选择器文本框：
  145.                         <input type="time" />
  146.                         日期选择器文本框：
  147.                         <input type="date" />
  148.                         年的周号选择器文本框：
  149.                         <input type="week" />
  150.                         月份选择器文本框：
  151.                         <input type="month" />
  152.                </pre>
  153.             </section>
  154.         </article>
  155.     </fieldset>
  156.     <footer>
  157.         <section>
  158.             <h5>
  159.                 HTML5 新元素--表单元素
  160.             </h5>
  161.         </section>
  162.     </footer>
  163. </body>
  164. </html>

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveWltaXl1YW5nZ3Vhbmc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveWltaXl1YW5nZ3Vhbmc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

版权声明：本文博客原创文章。博客，未经同意，不得转载。

HTML5初步——新的表单元素和属性的更多相关文章

  1. Html5学习进阶四 表单元素和表单属性

    HTML5 的新的表单元素: HTML5 拥有若干涉及表单的元素和属性. 本章介绍以下新的表单元素: datalist keygen output 浏览器支持 Input type IE Firefo ...

  2. HTML5 表单元素和属性

    HTML5 表单元素和属性学习 版权声明:未经博主授权,内容严禁转载 ! 表单元素简介 无论实现提交功能还是展示页面功能,表单在HTML中的作用都十分重要. 在其他版本的HTML中,表单能够包含的元素 ...

  3. 疯狂的表单-html5新增表单元素和属性

    疯狂的表单 2015/11/27 16:44:07 从三方面来介绍html5表单的新特性 表单结构更灵活 要提交数据的控件可以布局在form标签之外,看下面的代码,表单元素可以写到form元素之外,只 ...

  4. HTML5 学习08——Input 类型、表单元素及属性

    注意:并不是所有的主流浏览器都支持新的input类型,不过您已经可以在所有主流的浏览器中使用它们了.即使不被支持,仍然可以显示为常规的文本域. (1)Input 类型: color color 类型: ...

  5. HTML5 的新的表单属性

    本章讲解涉及 <form> 和 <input> 元素的新属性. 新的 form 属性: autocomplete novalidate 新的 input 属性: autocom ...

  6. html5权威指南：表单元素

    一.表单标签: 表单标签:http://blog.csdn.net/mylovestart/article/details/8589002 html5新增表单元素: 1.datalist:http:/ ...

  7. 【HTML5开发系列】表单元素

    <form> 创建一个HTML表单 属性: action 表示提交表单时浏览器应该把用户填写的数据发送到什么地方 method 用来指定表单数据发送到服务器的方式.允许值有get和post ...

  8. javascript总结39:DOM 中常用的表单元素的属性

    1 常用操作元素: value 用于大部分表单元素的内容获取(option除外) type 可以获取input标签的类型(输入框或复选框等) disabled 禁用属性 checked 复选框选中属性 ...

  9. html 5中的新特性之强化表单元素及属性

    之前我们判断用户提交的是否是Email 的时候,往往使用js 进行判断,但在html5中可以有新的方式进行判断而且更简单 <!DOCTYPE html> <html lang=&qu ...

随机推荐

  1. 基于visual Studio2013解决面试题之1408桶排序

     题目

  2. hihoCoder 1014trie树（字典树）

    hihoCoder 1014 题目提示已经很清楚了~ 贴代码…… #include <iostream> #include <cstdio> #include <cstr ...

  3. iOS依据字符串计算UITextView高度

    iOS计算字符串高度,有须要的朋友能够參考下. 方法一:ios7.0之前适用 /** @method 获取指定宽度width,字体大小fontSize,字符串value的高度 @param value ...

  4. sql: oracle, for update和for update nowait的区别

    1. oracle for update和for update nowait的区别 http://www.cnblogs.com/quanweiru/archive/2012/11/09/276222 ...

  5. 最新 Druid 配置

    Druid是一个JDBC组件库,包括数据库连接池.SQL Parser等组件.DruidDataSource是最好的数据库连接池.下面我们就一起来在项目中配置Druid吧 1.Druid依赖配置 &l ...

  6. TCP/IP笔记 一.综述

    1. TCP/IP分层 TCP/IP 是四层的体系结构:应用层.运输层.网际层和网络接口层,如下图: OSI协议是国际标准的网络协议,但是由于OSI的实用性等问题造成OSI没有流行起来.目前国际上广泛 ...

  7. struts2 一个简洁的struts.xml

    struts.xml <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts PUB ...

  8. twitter分享问题（四）—— Unknown error（api v1过度到V1.1产生）

    unknow error! 今天为了使用GA(谷歌分析)追踪twitter分享,又测试了一下twitter分享功能,发现又出问题(使用sharekit分享).就是“unknow error”,之前也碰 ...

  9. Redis C客户端API - God's blog - 博客频道 - CSDN.NET

    Redis C客户端API - God's blog - 博客频道 - CSDN.NET Redis安装步骤: 1.redis server安装 wget http://redis.googlecod ...

  10. 使用 Nginx 创建服务器的负载均衡

    译序         Nginx 的负载均衡配置看上去很简单.以下是 Nginx 官方给的一个简单的负载均衡的例子: http {   upstream myproject {     server ...