使用placeholder属性设置input文本框的提示信息


Posted in HTML / CSS onFebruary 19, 2020

实例

带有 placeholder 文本的搜索字段:

<form action="demo_form.asp" method="get">
  <input type="search" name="user_search" placeholder="Search W3School" />
  <input type="submit" />
</form>

定义和用法

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

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

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

下面看下使用placeholder属性设置input文本框的提示信息

input文本框中设置提示信息,可以使用placeholder属性

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <input type="text" placeholder="请输入用户名"value="" />
    </body>
</html>

使用placeholder属性设置input文本框的提示信息

结果就是这样,有当文本框内容为空时就显示提示信息,当输入内容时提示内容就消失了

placeholder和value属性的区别是,value属性设置的直接是文本框中的内容

总结

以上所述是小编给大家介绍的使用placeholder属性设置input文本框的提示信息,希望对大家有所帮助,也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
CSS心形加载的动画源码的实现
Mar 09 HTML / CSS
css3强大的动画效果animate使用说明及浏览器兼容介绍
Jan 09 HTML / CSS
网页切图的CSS和布局经验与要点
Apr 09 HTML / CSS
可自定义箭头样式的CSS3气泡提示框
Mar 16 HTML / CSS
解决CSS3的opacity属性带来的层叠顺序问题
May 09 HTML / CSS
css3学习系列之移动属性详解
Jul 04 HTML / CSS
使用css3做0.5px的细线的示例代码
Jan 18 HTML / CSS
教你使用Canvas处理图片的方法
Nov 28 HTML / CSS
用canvas做一个DVD待机动画的实现代码
Apr 12 HTML / CSS
解析html5 canvas实现背景鼠标连线动态效果代码
Jun 17 HTML / CSS
css3新特性的应用示例分析
Mar 16 HTML / CSS
HTML 里 img 元素的 src 和 srcset 属性的区别详解
May 21 HTML / CSS
html5实现滑块功能之type=&quot;range&quot;属性
Feb 18 #HTML / CSS
记一次高分屏下canvas模糊问题
Feb 17 #HTML / CSS
使用canvas压缩图片上传的方法示例
Feb 07 #HTML / CSS
div或img图片高度随宽度自适应的方法
Feb 06 #HTML / CSS
HTML5 实现图片上传预处理功能
Feb 06 #HTML / CSS
微信小程序canvas实现水平、垂直居中效果
Feb 05 #HTML / CSS
Html5定位终极解决方案
Feb 05 #HTML / CSS
You might like
一个php作的文本留言本的例子(五)
2006/10/09 PHP
探讨:如何通过stats命令分析Memcached的内部状态
2013/06/14 PHP
Symfony2联合查询实现方法
2016/03/18 PHP
PHP的PDO大对象(LOBs)
2019/01/27 PHP
PHP抽象类与接口的区别详解
2019/03/21 PHP
javascript实现的像java、c#之类的sleep暂停的函数代码
2010/03/04 Javascript
jquery弹出框的用法示例(一)
2013/08/26 Javascript
from表单多个按钮提交用onclick跳转不同action
2014/04/24 Javascript
解决WordPress使用CDN后博文无法评论的错误
2015/12/15 Javascript
jQueryUI DatePicker 添加时分秒
2016/06/04 Javascript
picLazyLoad 实现图片延时加载(包含背景图片)
2016/07/21 Javascript
jquery+css实现侧边导航栏效果
2017/06/12 jQuery
基于AngularJS实现的工资计算器实例
2017/06/16 Javascript
vue实现模态框的通用写法推荐
2018/02/26 Javascript
详解Vue Elememt-UI构建管理后台
2018/02/27 Javascript
JS实现字符串去重及数组去重的方法示例
2018/04/21 Javascript
Vue中对iframe实现keep alive无刷新的方法
2019/07/23 Javascript
vue使用codemirror的两种用法
2019/08/27 Javascript
vue使用i18n实现国际化的方法详解
2019/09/05 Javascript
vue中使用router全局守卫实现页面拦截的示例
2020/10/23 Javascript
[01:59]DOTA2首部纪录片《Free to play》预告片
2014/03/12 DOTA
[06:53]DOTA2每周TOP10 精彩击杀集锦vol.3
2014/06/25 DOTA
[52:12]FNATIC vs Infamous 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
把大数据数字口语化(python与js)两种实现
2013/02/21 Python
Python ORM框架SQLAlchemy学习笔记之映射类使用实例和Session会话介绍
2014/06/10 Python
Python实现爬虫从网络上下载文档的实例代码
2018/06/13 Python
python开发之anaconda以及win7下安装gensim的方法
2019/07/05 Python
Python中正则表达式对单个字符,多个字符和匹配边界等使用
2021/01/27 Python
html5如何在Canvas中实现自定义路径动画示例
2017/09/18 HTML / CSS
科颜氏加拿大官方网站: Kiehl’s加拿大
2016/08/16 全球购物
ProBikeKit澳大利亚:自行车套件,跑步和铁人三项装备
2016/11/30 全球购物
Expedia加拿大官方网站:加拿大最大的在线旅游提供商
2017/12/31 全球购物
历史学专业大学生找工作的自我评价
2013/10/16 职场文书
党员对照检查剖析材料
2014/10/13 职场文书
业务员岗位职责范本
2015/04/03 职场文书
Python实现猜拳与猜数字游戏的方法详解
2022/04/06 Python