html5中placeholder的使用

简介:

定义和用法

placeholder 属性提供可描述输入字段预期值的提示信息(hint)。

该提示会在输入字段为空时显示,并会在字段获得焦点时消失。

注释:placeholder 属性适用于以下的 <input> 类型:text, search, url, telephone, email 以及 password。

看代码

1
2
3
4
5
6
7
8
9
<!DOCTYPE HTML>
< html >
< body >
< form  action = "#"  method = "get" >
< input  type = "search"  name = "user_search"  placeholder = "输入内容后我会消失"  />
< input  type = "submit"  />
</ form >
</ body >
</ html >

效果图

082333729.png

输入字体后效果图

082410938.png

当然了,在使用的时候需要引入html5.js这个文件


本文转自sucre03 51CTO博客,原文链接:http://blog.51cto.com/sucre/1320253,如需转载请自行联系原作者

相关文章
|
移动开发 HTML5
修改HTML5 input placeholder 颜色及修改失效的解决办法
修改HTML5 input placeholder 颜色及修改失效的解决办法
|
Web App开发 移动开发 JavaScript
|
Web App开发 移动开发 JavaScript
IE8 不支持html5 placeholder的解决方案
  IE8不支持html5 placeholder的解决方法。 /** * jQuery EnPlaceholder plug * version 1.0 2014.
1113 0
|
移动开发 JavaScript HTML5
HTML5 placeholder(空白提示) 属性
原文地址:HTML5′s placeholder Attribute  演示地址: placeholder演示  原文日期: 2010年08月09日 翻译日期: 2013年8月6日 浏览器引入了许多的HTML5 特性: 有些是基于HTML的,有些是JavaScript APIs形式的,但都很有用。
903 0
|
移动开发 JavaScript HTML5
HTML5实践 -- 实现跨浏览器HTML5文字占位符 - placeholder
  转载请注明原创地址:http://www.cnblogs.com/softlover/archive/2012/11/20/2779878.html      html5为web的form表单增强了一个功能,他就是input的占位符--placeholder。
941 0
|
24天前
|
前端开发 测试技术 定位技术
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现,强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
48 7
|
24天前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
32 6