<!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. Spring学习总结一——SpringIOC容器一

    什么是spring spring是一个开源的轻量级的应用开发框架,它提供了IOC和AOP应用,可以减少组件之间的耦合度,即 解耦,spring容器可以创建对象并且管理对象之间的关系. 一:实例化spr ...

  2. [转]在PHP语言中使用JSON

    本文转自:http://www.ruanyifeng.com/blog/2011/01/json_in_php.html 作者: 阮一峰 日期: 2011年1月14日 目前,JSON已经成为最流行的数 ...

  3. 剑指Offer28 最小的K个数(Partition函数应用+大顶堆)

    包含了Partition函数的多种用法 以及大顶堆操作 /*********************************************************************** ...

  4. hihocoder 1037 数字三角形

    #1037 : 数字三角形 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 问题描述 小Hi和小Ho在经历了螃蟹先生的任务之后被奖励了一次出国旅游的机会,于是他们来到了大洋彼岸 ...

  5. 多线程的练习----妖,等待唤醒,代码重构,lock到condition

    × 目录 [1]需求 [2]妖的出现和解决 [3]等待唤醒 [4]代码重构 [5]改成Lock Condition ------------------------------------- 1,需求 ...

  6. js使用CSS将图片转换成黑白(灰色、置灰)

    详细内容请点击 可能早就知道,像汶川这种糟糕的日子网站全灰在IE下是可以轻松实现的(filter: gray;),不过,当时,其他浏览器是无解的. 不过,时代发展,如今,CSS3的逐步推进,我们也开始 ...

  7. 学习Slim Framework for PHP v3 ( 二)

    昨天说到能够成功将本地的URL通过在index.php 中添加get(pattern,clouser)路由到指定的处理类中,处理后(这里指存入数据库中),然后返回response在浏览器中显示. 昨天 ...

  8. 【转载】Asp.net Mvc 入门视频教程

    专辑: http://www.youku.com/playlist_show/id_2416830.html 订阅: http://www.youku.com/playlist/rss/id/2416 ...

  9. Part 86 to 88 Talking about Multithreading in C#

    Part 86   Multithreading in C# What is a Process: Process is what the operating system uses to facil ...

  10. 番外篇 之 C#委托

    对于上一节 番外篇之C#多线程的反思 反思一:   Thread th = new Thread(参数); ////参数的总结 ////首先,第一情况,对于 Thread th = new Threa ...