使用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 相关文章推荐
CSS3实现粒子旋转伸缩加载动画
Apr 22 HTML / CSS
css3media响应式布局实例
Jul 08 HTML / CSS
浅谈cookie和localStorage那些事
Aug 27 HTML / CSS
HTML5 video 视频标签使用介绍
Feb 03 HTML / CSS
深入探究HTML5的History API
Jul 09 HTML / CSS
12个不为大家熟知的HTML5设计小技巧
Jun 02 HTML / CSS
HTML5和CSS3实例教程总结(推荐)
Jul 18 HTML / CSS
canvas里面如何基于随机点绘制一个多边形的方法
Jun 13 HTML / CSS
HTML5自定义元素播放焦点图动画的实现
Sep 25 HTML / CSS
HTML5页面嵌入小程序没有返回按钮及返回页面空白的问题
May 28 HTML / CSS
html+css实现环绕倒影加载特效
Jul 07 HTML / CSS
纯CSS如何禁止用户复制网页的内容
Nov 01 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
E路文章系统PHP
2006/12/11 PHP
PHP开发中四种查询返回结果分析
2011/01/02 PHP
PHP+JS实现的商品秒杀倒计时用法示例
2016/11/15 PHP
PHP实现对数字分隔加千分号的方法
2019/03/18 PHP
php array_chunk()函数用法与注意事项
2019/07/12 PHP
使用onbeforeunload属性后的副作用
2007/03/08 Javascript
IE autocomplete internet explorer's autocomplete
2007/06/30 Javascript
JavaScript 设计模式学习 Singleton
2009/07/27 Javascript
jQuery Flash/MP3/Video多媒体插件
2010/01/18 Javascript
jquery checkbox全选、取消全选实现代码
2010/03/05 Javascript
javascript对数组的常用操作代码 数组方法总汇
2011/01/27 Javascript
jQuery实现页面顶部显示的进度条效果完整实例
2015/12/09 Javascript
详解AngularJS实现表单验证
2015/12/10 Javascript
javascript用正则表达式过滤空格的实现代码
2016/06/14 Javascript
Angular.js中ng-if、ng-show和ng-hide的区别介绍
2017/01/20 Javascript
react-router JS 控制路由跳转实例
2017/06/15 Javascript
[原创]jQuery实现合并/追加数组并去除重复项的方法
2018/04/11 jQuery
Angular resolve基础用法详解
2018/10/03 Javascript
Python Web开发模板引擎优缺点总结
2014/05/06 Python
python实现提取百度搜索结果的方法
2015/05/19 Python
Python3.6 + TensorFlow 安装配置图文教程(Windows 64 bit)
2020/02/24 Python
这76道Java面试题及答案,祝你能成功通过面试
2016/04/16 面试题
办公室文秘自我鉴定
2013/09/21 职场文书
护士自我评价
2014/02/01 职场文书
元旦晚会感言
2014/03/12 职场文书
消防标语大全
2014/06/07 职场文书
小学生美德少年事迹材料
2014/08/24 职场文书
八一建军节营销活动方案
2014/08/31 职场文书
党员领导干部民主生活会批评与自我批评发言
2014/09/28 职场文书
工作证明英文模板
2014/10/21 职场文书
会计求职简历自我评价
2015/03/10 职场文书
房地产公司财务总监岗位职责
2015/04/03 职场文书
教师节班会开场白
2015/06/01 职场文书
Python基础之pandas数据合并
2021/04/27 Python
win10+anaconda安装yolov5的方法及问题解决方案
2021/04/29 Python
彻底解决MySQL使用中文乱码的方法
2022/01/22 MySQL