<!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. 自定义的UITabbar上面的按钮的x坐标的计算方法

    ; i < 4; i++) {//4是按钮的个数 NSString *backImage = backgroud[i]; NSString *heightImage = heightBackgr ...

  2. 转载事务在C#方法里的应用

    问题:一个系统的数据库更新或者插入的时候若遭遇到断电等能引起数据库不能正常工作的情况的话,其更新或插入的将是不完整的数据,或者是错误的数据.故需要引入事务处理. 实例:数据更新的事务处理. 解决方案: ...

  3. Sharepoint 2013 系列篇(安装部署)--上篇

    前言 sharepoint的部署是按照物理拓扑图的架构来部署,按照物理拓扑图架构分为一层拓扑图架构,二层拓扑图架构,三层拓扑图架构,多层拓扑图架构. 按照分层的拓扑图部署是按照需求来划分的,一层拓扑图 ...

  4. 在Eclipse中导入文件和文件夹

    一. 将JAVA文件夹导入Eclipse中的方法: 方法一:直接将java文件夹复制,然后粘贴到项目下: 方法二:(1)打开Eclipse,点击项目的空白处,现在import: (2)现在Existi ...

  5. php curl破解防盗链

    function get_content($url){ $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, $url); $header = array( ...

  6. js完美解决IE6不支持position:fixed的bug

    详细内容请点击 <!DOCTYPE html><html><head><meta http-equiv="Content-Type" co ...

  7. 【转载】从 LinkedIn 的数据处理机制学习数据架构

    http://www.36dsj.com/archives/40584 译者:伯乐在线-塔塔 网址:http://blog.jobbole.com/69344/ LinkedIn是当今最流行的专业社交 ...

  8. 破解软件感悟－PE文件格式之Import Table（引入表）（四）

    先来看一个可执行文件的实例:本例程打开一PE文件,将所有引入dll和对应的函数名读入一编辑控件,同时显示 IMAGE_IMPORT_DESCRIPTOR 结构各域值. C:\QQDownload\bl ...

  9. Intent的4种传值方法总结

    xml 代码: <Button     android:id="@+id/button1"     android:layout_width="wrap_conte ...

  10. js 平滑定位

    <script type="text/javascript"> function intval(v){ v = parseInt(v); return isNaN(v) ...