<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>HTML5 Form Input Elements</title>

<style>

body {

    background-color:#fff;

    color:#000;

    font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;

    margin-left:20px;

}

h1 {

    color:#063;

}

form {

    margin-left:40px;

}

label {

    font-weight:bold;

}

label {

    display:inline-block;

    width:100px;

}

</style>

</head>

<body>

<h1>HTML5 Input Elements</h1>

<form method="post" enctype="multipart/form-data" name="form1">

  <p>

    <label for="search">Search:</label>

    <input type="search" name="search" id="search">

  </p>

  <p>

    <label for="phone">Phone:</label>

    <input type="text" name="phone" id="phone">

  </p>

  <p>

    <label for="website">Website:</label>

    <input type="url" name="website" id="website">

  </p>

  <p>

    <label for="email">Email:</label>

    <input type="email" name="email" id="email">

  </p>

  <p>

    <label for="tickets">Tickets required:</label>

    <input name="tickets" type="number" id="tickets">

  </p>

  <p>

    <label for="rating">Rating:</label>

    <input type="range" name="rating" id="rating">

  </p>

  <p>

    <label for="color">Color:</label>

    <input type="color" name="color" id="color">

  </p>

  <p>

    <input type="submit" name="send" id="send" value="Submit">

  </p>

</form>

</body>

</html>

用来做年龄输入啥的 还不错

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>HTML5 Slider</title>

<style>

body {

    background-color:#fff;

    color:#000;

    font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;

    margin-left:20px;

}

h1 {

    color:#063;

}

form {

    margin-left:40px;

}

label {

    font-weight:bold;

}

label {

    display:inline-block;

    width:150px;

}

</style>

</head>

<body>

<h1>HTML5 Slider</h1>

<form method="post" name="form1">

  <p>

    <label for="rating">Rating:</label>

    <input type="range" name="rating" id="rating" min="0" max="25" step="5" value="0">

  </p>

</form>

</body>

</html>

【html5】这些新类型 能提高生产力的更多相关文章

  1. [置顶] 提高生产力：Web开发基础平台WebCommon的设计和实现

    Web开发中,存在着各种各样的重复性的工作.为了提高开发效率,不在当码农,我在思考和实践如何搭建一个Web开发的基础平台. Web开发基础平台的目标和功能 1.提供一套基础的开发环境,整合了常用的框架 ...

  2. 提高生产力：Web开发基础平台WebCommon的设计和实现

    Web开发中,存在着各种各样的重复性的工作.为了提高开发效率,不在当码农,我在思考和实践如何搭建一个Web开发的基础平台. Web开发基础平台的目标和功能 1.提供一套基础的开发环境,整合了常用的框架 ...

  3. HTML5部分新标签属性及DOM扩展元素

    HTML5定义了一系列新元素,如新语义标签.智能表单.多媒体标签等. 我们日常讨论的H5其实是一个泛称,它指的是由HTML5 + CSS3 + Javascript等技术组合而成的一个应用开发平台. ...

  4. HTML5中新添加事件

    HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...

  5. HTML语义化：HTML5的新标签及IE5.5~9的部分兼容方案

    一.前言 本文将介绍HTML5中新增的语义化标签,及在IE5.5~9(IE9已经开始支持部分HTML5新标签了)支持这些新标签的兼容性处理. 目录一坨: 二.语义化标签:article.aside.t ...

  6. HTML5的新特性

    HTML5 中的一些有趣的新特性: 用于绘画的 canvas 元素 用于媒介回放的 video 和 audio 元素 对本地离线存储的更好的支持 新的特殊内容元素,比如 article.footer. ...

  7. 开发者必须知道的HTML5十五大新特性

    HTML5想必大家都很熟悉了,因为太多的媒体在讨论这一技术.然而,你能准确地说出HTML5带来了哪些新特性吗?本文总结了HTML5带来的15项你必须知道的新特性. 一起来看下: 1.新的文档类型  ( ...

  8. HTML5十五大新特性

    HTML5想必大家都很熟悉了.然而,你能准确地说出HTML5带来了哪些新特性吗?本文总结了HTML5带来的15项你必须知道的新特性. 一起来看下: 1.新的文档类型  (New Doctype) 目前 ...

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

    HTML5初步--新的表单元素和属性 HTML5初步--新的表单元素和属性 <!DOCTYPE html> <html> <head> <meta chars ...

随机推荐

  1. ps怎么给文字描边

    在设计的时候,单一的文字,往往对人没有多少的吸引力,这就需要我们在文字上加一些文字特效,比如说外发光,描边,投影,等等.在这里我们详细的介绍一下文字的输入,和文字描边的怎么增加,删除的经验.(这些方法 ...

  2. 管理后台-第二部分：Custom sections in Umbraco 7 – Part 2 the views（翻译文档）

    在上一篇文章中我们讨论了怎样在我们Umbraco7.0版本中去添加一个新的自定义的应用程序(或部分)和如何去定义一个树.现在我将给你展示你改何如添加视图,来使你的内容可以做一些更有意义的事情. The ...

  3. codeforces 676B B. Pyramid of Glasses(模拟)

    题目链接: B. Pyramid of Glasses time limit per test 1 second memory limit per test 256 megabytes input s ...

  4. Codeforces Round #197 (Div. 2) C,D两题

    开了个小号做,C题一开始看错范围,D题看了半小时才看懂,居然也升到了div1,囧. C - Xenia and Weights 给出一串字符串,第i位如果是1的话,表示有重量为i的砝码,如果有该种砝码 ...

  5. MongoDB - The mongo Shell, Data Types in the mongo Shell

    MongoDB BSON provides support for additional data types than JSON. Drivers provide native support fo ...

  6. CSS3--幽灵按钮特效(实例)

    先预览效果 其中用到了CSS3的Transition属性:设置动画时间.效果:Transform属性:设置元素旋转.位移:box-sizing属性:以特定的方式定义某个区域的特定元素: 制作小三角方法 ...

  7. part 3 Controllers in AngularJS

    What happens if the controller name is misspelled? When the controller name is misspelled, 2 things ...

  8. 在sql-server上建立mysql链接库

    EXEC sp_addlinkedserver @server = N'RESUME_MYSQL_CONN', @srvproduct=N'MySQL ODBC 5.1 Driver', @provi ...

  9. asp双表查询

    sql="select sum(***) as ** from ** as a,** as b where a.id=b.id" Rs(A.id) Rs(B.id) [提示.双表中 ...

  10. 各个手机APP客户端内置浏览器useragent

    手机QQ Mozilla/5.0 (Linux; Android 4.4.2; GT-I9500 Build/KOT49H) AppleWebKit/537.36 (KHTML, like Gecko ...