【HTML5新增表单元素和表单属性】教程文章相关的互联网学习教程文章

HTML5里的placeholder属性【图】

HTML5里新引入很多有趣的新特征;有些体现在HTML里,有些是JavaScript API,全部非常的有用。其中我最喜欢的一个特征就是文本框(INPUT)里的placeholder属性。placeholder属性能够让你在文本框里显示提示信息,一旦你在文本框里输入了什么信息,提示信息就会隐藏。你以前可能无数次看到这种效果,但那些大部分是用JavaScript里实现的,而现在,HTML5提供了原生支持,而且效果更好! 观看演示HTML代码你也看见了,需要做的只是在文本...

html5的自定义data-*属性与jquery的data()方法的使用

人们总喜欢往HTML标签上添加自定义属性来存储和操作数据。但这样做的问题是,你不知道将来会不会有其它脚本把你的自定义属性给重置掉,此外,你这样做也会导致html语法上不符合Html规范,以及一些其它副作用。这就是为什么在HTML5规范里增加了一个自定义data属性,你可以拿它做很多有用的事情。你可以去读一下HTML5的详细规范,但这个自定义data属性的用法非常的简单,就是你可以往HTML标签上添加任意以 "data-"开头的属性,这些属...

HTML5微格式和相关的属性名称_html5教程技巧

2004年5月29日,在我退休的博客和所有的大话 ,当我调查40个设计师的网站,看看他们为公共页面元素使用的约定,如标题和横幅,导航,内容和页脚(那时候的结果 )。 这几乎不是科学研究,但在那年6月,我跟进了Eric Meyer的一些意见 ,并出版了一套命名约定。当我发现一个网站已经通过了这些命名约定时,我总是很高兴,我任然每一天都在用,甚至超过4年后的每一天。 那时候我的想法可以概括成这样 id和class属性名称必须反映元素的...

HTML5常用语法一览(列举不支持的属性)_html5教程技巧【图】

HTML头部标记标记 描述 HTML5标准定义页面中所有链接的基准URL设定显示在浏览器左上方的标题内容表明该文档是一个可用于检索的网关脚本 不支持文档本身的元信息,例如查询关键词,有效期等设定CSS层叠样式表内容设定外部资源的链接页面脚本内容元信息标记属性标记 描述 值 HTML5标准http-equiv生成一个HTTP标准域,把Content属性关联到HTTP头部content-type / expires / refresh / set-cookiename把content属性关联到一个名称author /...

使用css3属性如何丰富图片样式(圆角阴影渐变)_html5教程技巧【图】

在css3中,直接在图片上使用box-shadow 和 border-radius,浏览器并不能很好的渲染。但是如果把图片作为background-image,添加的样式浏览器可以很好的渲染。我将会介绍如何使用box-shadow, border-radius 和 transition创建不同图片样式效果。 问题 通过查看demo能注意到,我们为第一行图片设置了border-radius 和 内嵌box-shadow。firefox渲染了图片的border-radius,但是没有渲染内嵌box-shadow。chrome和Safari两种效果都没有渲...

HTML5标签、属性、事件及浏览器兼容性速查表附打包下载_html5教程技巧【图】

HTML 5 可以说是近十年来 Web 标准最巨大的飞跃。和以前的版本不同,HTML 5 并非仅仅用来表示 Web 内容,它的使命是将 Web 带入一个成熟的应用平台,在这个平台上,视频,音频,图象,动画,以及同电脑的交互都被标准化。尽管 HTML 5 的实现还有很长的路要走,但 HTML 5 正在改变 Web。为了方便大家学习HTML 5 ,本文与大家分享几份 HTML 5 标签、属性、事件及浏览器兼容性速查表。 HTML 5 Cheat Sheet 非常完整的一份HTML 5速查表...

HTML5自定义data-*data(obj)属性和jquery的data()方法的使用_html5教程技巧【图】

可能大家在使用jquery mobile时,经常会看到data-role、data-theme等的使用,比如:通过如下代码即可实现页眉的效果:代码如下: 我是标题通过手机浏览,效果如下: 为什么写一个data-role="header"就能实现底部为黑色、文字居中显示的效果呢?本文提供一种最简单的实现办法,让大家对这些用法有个直观的了解。我们写一个html页面,自定义一个data-chb="header"的属性,希望具备这个属性的div区域背景颜色为黑色,文字为白色,居...

html5buttonautofocus属性介绍及应用_html5教程技巧

在html 5中,可以设置当页面加载时,自动焦点到达某个控件中,这个就是autofocus属性了,如下: 代码如下: Hi! 浏览器支持该属性的有: fiefox 4+,safari 5+,chrome 6+,opera 11+,ie 10, 而android 2.3和safari mobile 5-都不支持 实例 当页面加载时,会获得焦点的一个按钮: 代码如下: 点击这里 亲自试一试 定义和用法 autofocus 属性规定当页面加载时按钮应当自动地获得焦点。 如果使用该属性,则按钮会获得焦点。 HTML 4.01...

html5指南-1.html5全局属性(html5globalattributes)深入理解_html5教程技巧【图】

今天开始一个全新的关于html5系列课程,是我读《The Definitive Guide to HTML5 》的学习笔记。我会把自己觉得里面不错的章节,或者有意义的内容进行整理,以供大家学习。 一个元素可以定义自己的属性,比如a标签定义href属性,这种叫局部属性(local attribute)。相对应的我们可以通过全局属性(global attribute)为所有元素设置共有的行为,当然你也可以为单独元素设置全局属性,只是这样做没有太大的意义。下面我将逐一介绍这...

html5新增的属性和废除的属性简要概述_html5教程技巧

HTML5中,在新增加和废除很多元素的同时,也增加和废除了很多属性。 新增的属性 1、表单相关的属性 对input(type=text)、select、textarea与button指定autofocus属性。它以指定属性的方式让元素在画面打开时自动获得焦点。 对input(type=text)、textarea指定placeholder属性,它会对用户的输入进行提示,提示用户可以输入的内容。 对input、output、select、textarea、button与fieldset指定form属性。它声明属于哪个表单,然后...

html5input属性使用示例_html5教程技巧【图】

今天才接确html5 +css3 实在是太赞了。 下面我就来介绍一下今天我用到的 input 属性。 html5 代码如下: 代码如下: placeholder 默认提示字符 autofocus 当页面加载时,会获得焦点的一个按钮 x-webkit-speech 语音搜索,webkit内核才支持 accept 规定可上传的文件类型(仅适用type=file) alt 规定图片输入控件代替文本 autocomplete 规定是否使用输入字段的自动完成功能 required 输入字段是必须的 step 输入数字的间隔 pattrn 对...

HTML5placeholder(空白提示)属性介绍_html5教程技巧【图】

原文地址:HTML5′s placeholder Attribute 演示地址: placeholder演示 原文日期: 2010年08月09日 翻译日期: 2013年8月6日 浏览器引入了许多的HTML5 特性: 有些是基于HTML的,有些是JavaScript APIs形式的,但都很有用。其中我最喜欢的一个就是为input元素引入了placeholder属性。 placeholder属性显示引导性文字直到输入框获取输入焦点,当有了用户输入内容后引导性内容将会自动隐藏。你肯定见过用JavaScript实现的这种技术成...

HTML5中新的全局属性(整理)_html5教程技巧

NEW:HTML 5 中新的全局属性。 属性描述accesskey规定访问元素的键盘快捷键class规定元素的类名(用于规定样式表中的类)。contenteditable规定是否允许用户编辑内容。contextmenu规定元素的上下文菜单。dir规定元素中内容的文本方向。draggable规定是否允许用户拖动元素。dropzone规定当被拖动的项目/数据被拖放到元素中时会发生什么。hidden规定该元素是无关的。被隐藏的元素不会显示。id规定元素的唯一 ID。lang规定元素中内容的...

HTML5自动聚焦(autofocus)属性使用介绍_html5教程技巧

原文 : HTML5 autofocus Attribut 原文发布时间: 2012年08月27日 翻译时间: 2013年8月6日 HTML5 推出了一大堆精彩的东西给我们。 过去我们要用JavaScript和Flash完成的任务,比如表单验证,输入框空白提示(INPUT placeholders),客户端文件上传下载(client side file naming),以及 音频/视频播放,现在都可以用基本的HTML来完成了。另一个简单的HTML功能是现在允许我们在页面加载完成后自动将输入焦点定位到需要的元素,通过一个叫...

HTML5的自定义属性data-*详细介绍和JS操作实例_html5教程技巧【图】

当然高级浏览器下可通过脚本进行定义和数据存取。在项目实践中非常有用。 例如:代码如下: 使用attribute方法存取 data-* 自定义属性的值使用attributes方法存取 data-* 自定义属性的值非常方便:代码如下:// 使用getAttribute获取 data- 属性var user = document . getElementById ( user ) ;var userName = plant . getAttribute ( data-uname ) ; // userName = 脚本之家var userId = plant . getAttribute ( data-uid ) ; // u...