<!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. JavaScript实现XML与JSON互转代码（转载）

    下面来分享一个关于JavaScript实现XML与JSON互转例子,这里面介绍了国外的三款xml转json的例子,希望这些例子能给你带来帮助. 最近在开发在线XML编辑器,打算使用JSON做为中间格式 ...

  2. (ASP.Net)MVC4怎么设置@Html.TextBoxFor样式

    添加自定义样式和属性: @Html.TextBoxFor(s=>s.dd,new {@class="main",@style="width: 100px;" ...

  3. hdu1251

    统计难题 Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 131070/65535 K (Java/Others)Total Submi ...

  4. Linux之zsh

    0.安装zsh: sudo apt-get install zsh git wget 1.启用zsh:chsh -s /bin/zsh 2.github: https://github.com/rob ...

  5. 用Chrome在电脑上模拟微信浏览器

    1.先了解安卓微信和Ios微信的UA(User agent:用户代理) 安卓微信UA: mozilla/5.0 (linux; u; android 4.1.2; zh-cn; mi-one plus ...

  6. Table of Contents - jBPM

    Getting Started jBPM Installer Eclipse 安装 jBPM 插件 jBPM Core

  7. HTML的FORM的元素

    form是是HTML的一个重要元素. form的常用控件有 单行文本框<input type="text" value="text" name=" ...

  8. js模版引擎Mustache介绍

    Mustache通常被称为JavaScript模板的基础.另一个流行的解决方案Hanldebars实际上就是基于Mustache构建而成的.这并不意味着Mustache是一个不好的模板解决方案. 下面 ...

  9. 杭电ACM1170--Balloon Comes!

    地址  http://acm.hdu.edu.cn/showproblem.php?pid=1170 #include<stdio.h> int main() { int t,a,b; ] ...

  10. unity 多线程

    对于客户端来说,好的用户体验,需要保持一个快速响应的用户界面.于是便要求:网络请求.io操作等 开销比较大的操作必须在后台线程进行,从而避免主线程的ui卡顿.(注:协程也是主线程的一部分,进行大量的i ...