html5 css3表单新特性

2如何给不支持新特性的浏览器打补丁1 2如何给不支持新特性的浏览器打补丁1Modernizr补丁下载

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css"></style>
<script type="text/javascript">
function showValue(newValue)
 {
 document.getElementById("range").innerHTML=newValue;
 }
</script>
</HEAD>

<BODY>
<p>
	<label for="email">Your Email address</label>
	<input id="email" name="email" type="email" placeholder="[email protected]" required aria-required="true">
</p>
<p>
	<label for="yearOfCrime">Year Of Crime</label>
	<input id="yearOfCrime" name="yearOfCrime" type="number" min="1929" max="2015" required aria-required="true">
</p>
<p>
	<label for="web">Your Web address</label>
	<input type="web" name="web" type="url" placeholder="www.mysite.co">
</p>
<p>
	<label for="search">Search the site...</label>
	<input id="search" name="search" type="search" placeholder="Wyat Earp" autofocus>
</p>
<p>
	<label for="tel">Thphone(so we berate you if you're wrong)</label>
	<input id="tel" name="tel" type="tel" placeholder="1-234-546758" autocomplete="off" required aria-required="true">
</p>
<p>
	 <label for="name">Your Name (first and last)</label>
	 <input id="name" name="name" pattern="([a-zA-Z]{3,30}\s*)+[a-zA- Z]{3,30}"
	 placeholder="Dwight Schultz" required aria-required="true">
</p>
<p>
	 <label for="color">Your favorite color</label>
	 <input id="color" name="color" type="color">
</p>
<p>
	 <label for="date">Your favorite date</label>
	 <input id="date" name="date" type="date">
</p>
<p>
	 <label for="week">Your favorite date</label>
	 <input id="week" name="week" type="week">
</p>
<p>
	 <label for="time">Your favorite time</label>
	 <input id="time" name="time" type="time">
</p>
<p>
	 <label for="datetime">Your favorite datetime</label>
	 <input id="datetime" name="datetime" type="datetime">
</p>
<p>
	 <label for="range1">Your favorite datetime</label>
	 <input id="range1" name="range1" type="range" min="1" max="10" value="5">
</p>
<p>
<input id="howYouRateIt" name="howYouRateIt" type="range" min="1" max="10"
value="5" onchange="showValue(this.value)"><span id="range">5</span>
</p>
</BODY>
</HTML>
时间: 2024-08-02 07:00:24

html5 css3表单新特性的相关文章

HTML5的表单新特性(2)

HTML5 表单新特性:等待了12年之久,我们迎来了HTML5主要修订版本.虽然此版本仍处于测试阶段并且没有宣布正式推出的日期,HTML5的网页设计师和程序员已经就开始关注,并对最新功能展开了热烈讨论. HTML5新特性的目的是改善嵌入,比如视频和音频等多媒体的支持,为开发者和终端用户供简单的编程和更好的用户体验.现在互联网世界都在等待,浏览器更新时能支持HTML5的新版本.HTML5已经被很多浏览器支持,比如Safari, Chrome, FireFox, Opera, IE9,它是向后兼容的

HTML5的表单新特性(3)

虽然目前各种浏览器对HTML5的支持程度参差不齐,但是不可否认HTML5将会成为未来的流行趋势. 一.HTML5表单新增属性 (1)placeholder 这个属性的用处是颇大的,可以向用户显示描述性说明或者提示信息.如果浏览器不支持的话,此属性 会忽略掉,显示浏览器默认的状态.当输入框中有值或者获得焦点的时候,不显示placeholder的值 eg:  您的名字: <input type="text" placeholder="请输入您的真实姓名" name

HTML5的表单新特性

HTML5 Web Forms 2.0是对目前Web表单的全面提升,它在保持了简便易用的特性的同时,增加了许多内置的控件或者控件属性来满足用户的需求,并且同时减少了开发人员的编程.在我看来,HTML5 主要在以下几个方面对目前的Web表单做了改进: 新的控件类型 还在为类型检查犯愁吗,还在为那一长串看不太明白的检验输入的正则表达式而苦恼吗,HTML5提供的一系列新的控件将天然的具备类型检查的功能.比如说URL输入框,Email输入框等. <input type="url">

HTML5_01之表单新特性

1.WebStorm快捷键: Ctrl+Alt+(向下方向键):快速复制当前行 Alt+(向上/下方向键):移动当前行 Ctrl+D:删除当前行 Ctrl+/:快速(取消)注释当前行 Ctrl+Alt+L:格式化当前文档2.HTML5九大新特性: ①表单新特性.②视频音频.③Canvas绘图.④SVG绘图.⑤地理定位.⑥拖放API.⑦WebWorker.⑧WebStorage.⑨WebSocket3.表单Input类型: ①已有type类型:  text(文本框).password(密码框).r

精美的HTML5/CSS3表单 带小图标

今天我们要来分享一款非常精美的HTML5/CSS3表单,准备地说,这是一款经过美化的input输入表单,每一个输入表单都可以定义其两侧的小图标,非常华丽.另外,这款表单应用还采用了3种不同的风格主题,你可以在演示页的菜单栏中选择一种样式.需要高版本的浏览器才能支持. 你也可以在这里在线演示 下面我们来简单分析一下这款表单的源代码,源代码由HTML代码.CSS代码及Javascript代码组成.一共3组样式,我们只对其中一组作解说. HTML代码: <ul data-for="prefix&

HTML5基础知识汇总_(2)自己定义属性及表单新特性

自己定义属性data-* 说起这个属性,事实上如今非经常见了;怎么说呢,由于在一些框架都能看到他的身影!!! 比方Jquery mobile,里面非常频繁的使用了这个属性; 这个属性是哪里来的-.当然是尾随最新的H5一起出来的-.. 兼容性在PC端仅仅能呢说一般般(眼下.比較老式浏览器居多),,手机端支持还是比較OK的; 虽说是自己定义属性,可是还是有一定的规格的,,比方前缀必须是data-[自己定义属性]; 比方 <div data-id="id"></div>

html5表单新特性

type=range 值区域范围 默认值(0-100) type=data  选择日期 type=color value='初始值' 颜色选择器控件 type=search 搜索框效果 type=image 创建一个图像控件该空间单击后将导致表单立即提交 type=email 提交表单时 会自动提交其值 type=url  用于包含地址的输入域,提交表单时会自动验证 type=tel 输入的内容为电话号码类型

HTML5的表单新属性(扩展)

新的 form 属性: autocomplete. novalidate  autocomplete控件是指用户在文本框输入前几个字母或是汉字的时候, autocomplete控件就能从存放数据的文本或是数据库里将所有以这些字母开头的数据提示给用户,供用户选择,提供方便. autocomplete 适用于 <form> 标签,以及以下类型的 <input> 标签:text, search, url, telephone, email, password, datepickers,

表单新特性

1 placeholder 文本站位 当用户还没有输入值时,输入型控件可能通过placeholder向用户显示描述性说明文字或者提示信息,这在目前网站中很常见,一些JS框架都会提供类似功能,简单的说下在旧版本中常用的解决方案,为输入控件创建一个label,然后通过CSS控制些label的位置使之覆盖在输入控件上面,当label获得焦点时,浏览器会把焦点指向输入控件.有了placeholder,新的浏览器就内置了这一功能,其特性值会以浅灰色样式显示在输入框中,当输入框获得焦点并有值后,该提示信息自