使用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自定义滚动条样式写法
Dec 25 HTML / CSS
CSS3 clip-path 用法介绍详解
Mar 01 HTML / CSS
CSS3属性选择符介绍
Oct 17 HTML / CSS
使用before和:after伪类制作css3圆形按钮
Apr 08 HTML / CSS
css3实现顶部社会化分享按钮示例
May 06 HTML / CSS
CSS3的RGBA中关于整数和百分比值的转换
Aug 04 HTML / CSS
基于css3 animate制作绚丽的动画效果
Nov 24 HTML / CSS
html5的canvas元素使用方法介绍(画矩形、画折线、圆形)
Apr 14 HTML / CSS
html5使用canvas绘制一张图片
Dec 15 HTML / CSS
HTML5中的音频和视频媒体播放元素小结
Jan 29 HTML / CSS
原生 JS+CSS+HTML 实现时序图的方法
Jul 31 HTML / CSS
canvas绘制图片drawImage使用方法
Sep 15 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
DC漫画《蝙蝠侠和猫女》图透 猫女怀孕老爷当爹
2020/04/09 欧美动漫
编写Smarty插件在模板中直接加载数据的详细介绍
2013/06/26 PHP
用js实现的检测浏览器和系统的函数
2009/04/09 Javascript
关于JS控制代码暂停的实现方法分享
2012/10/11 Javascript
jQuery实现异步获取json数据的2种方式
2014/08/29 Javascript
早该知道的7个JavaScript技巧
2016/06/21 Javascript
js实现日历的简单算法
2017/01/24 Javascript
非常实用的vue导航钩子
2017/03/20 Javascript
ES6扩展运算符的用途实例详解
2017/08/20 Javascript
BootStrap自定义popover,点击区域隐藏功能的实现
2018/01/23 Javascript
详解JS函数stack size计算方法
2018/06/18 Javascript
在小程序中使用Echart图表的示例代码
2018/08/02 Javascript
vue.js引入外部CSS样式和外部JS文件的方法
2019/01/06 Javascript
Vue学习笔记之计算属性与侦听器用法
2019/12/07 Javascript
[02:54]DOTA2英雄基础教程 撼地者
2014/01/14 DOTA
[07:06]2018DOTA2国际邀请赛寻真——卫冕冠军Team Liquid
2018/08/10 DOTA
Python 专题六 局部变量、全局变量global、导入模块变量
2017/03/20 Python
Python获取当前路径实现代码
2017/05/08 Python
Python利用turtle库绘制彩虹代码示例
2017/12/20 Python
python实现读取大文件并逐行写入另外一个文件
2018/04/19 Python
python如何解析配置文件并应用到项目中
2019/06/27 Python
命令行运行Python脚本时传入参数的三种方式详解
2019/10/11 Python
TensorFlow加载模型时出错的解决方式
2020/02/06 Python
thinkphp5 路由分发原理
2021/03/18 PHP
如何写出高性能的JSP和Servlet
2013/01/22 面试题
元旦晚会主持词
2014/03/24 职场文书
老师对学生的寄语
2014/04/09 职场文书
小学一年级学生评语
2014/04/22 职场文书
学校消防安全责任书
2014/07/23 职场文书
学习优秀党员杨宗兴先进事迹材料思想汇报
2014/09/14 职场文书
党员作风建设自查报告
2014/10/23 职场文书
开会通知短信大全
2015/04/20 职场文书
公司档案管理制度
2015/08/05 职场文书
2016年公务员六五普法心得体会
2016/01/21 职场文书
MySQL索引是啥?不懂就问
2021/07/21 MySQL
PHP RabbitMQ消息列队
2022/05/11 PHP