使用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中使用RGBA设置透明度的示例
Aug 04 HTML / CSS
css3 flex实现div内容水平垂直居中的几种方法
Mar 27 HTML / CSS
CSS3 实现的火焰动画
Dec 07 HTML / CSS
利用HTML5+css3+jquery+weui实现仿微信聊天界面功能
Jan 08 HTML / CSS
用HTML5实现手机摇一摇的功能的教程
Oct 30 HTML / CSS
用html5实现语音搜索框的方法
Mar 18 HTML / CSS
HTML5中的进度条progress元素简介及兼容性处理
Jun 02 HTML / CSS
H5 canvas实现贪吃蛇小游戏
Jul 28 HTML / CSS
详解canvas绘制多张图的排列顺序问题
Jan 21 HTML / CSS
div或img图片高度随宽度自适应的方法
Feb 06 HTML / CSS
AmazeUI的JS表单验证框架实战示例分享
Aug 21 HTML / CSS
HTML5 body设置全屏背景图片的示例代码
Dec 08 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函数array_flip()在重复数组元素删除中的作用
2013/06/27 PHP
php cookie使用方法学习笔记分享
2013/11/07 PHP
php使用curl和正则表达式抓取网页数据示例
2014/04/13 PHP
浅谈PHP检查数组中是否存在某个值 in_array 函数
2016/06/13 PHP
PHP的openssl加密扩展使用小结(推荐)
2016/07/18 PHP
PHP静态延迟绑定和普通静态效率的对比
2017/10/20 PHP
PHP设计模式之装饰器模式定义与用法详解
2018/04/02 PHP
把textarea中字符串里含有的回车换行替换成&amp;lt;br&amp;gt;的javascript代码
2007/04/20 Javascript
javascript div 遮罩层封锁整个页面
2009/07/10 Javascript
js 强制弹出窗口代码研究-又一款代码
2010/03/20 Javascript
Textbox控件注册回车事件及触发按钮提交事件具体实现
2013/03/04 Javascript
ExtJS下 Ext.Direct加载和提交过程排错小结
2013/04/02 Javascript
使用jQuery插件创建常规模态窗口登陆效果
2013/08/23 Javascript
jquery的父子兄弟节点查找示例代码
2014/03/03 Javascript
超级简单的jquery操作表格方法
2014/12/15 Javascript
详解Bootstrap四种图片样式
2016/01/04 Javascript
JS正则表达式比较常见用法
2016/01/26 Javascript
基于Bootstrap里面的Button dropdown打造自定义select
2016/05/30 Javascript
jquery二级目录选中当前页的css样式
2016/12/08 Javascript
javascript构造函数以及原型对象的理解
2017/01/13 Javascript
Bootstrap下拉菜单Dropdowns的实现代码
2017/03/17 Javascript
js注册时输入合法性验证方法
2017/10/21 Javascript
微信小程序实现登录注册tab切换效果
2020/12/29 Javascript
vue项目移动端实现ip输入框问题
2019/03/19 Javascript
jquery多级树形下拉菜单的实例代码
2019/07/09 jQuery
JavaScript鼠标拖拽事件详解
2020/04/03 Javascript
Python标准库之Sys模块使用详解
2015/05/23 Python
使用Python对SQLite数据库操作
2017/04/06 Python
PyTorch中permute的用法详解
2019/12/30 Python
python GUI库图形界面开发之PyQt5表格控件QTableView详细使用方法与实例
2020/03/01 Python
Street One瑞士:德国现代时装公司
2019/10/09 全球购物
八项规定整改措施
2014/02/12 职场文书
学员自我鉴定
2014/03/19 职场文书
小学优秀班干部事迹材料
2014/05/25 职场文书
新闻稿怎么写
2015/07/18 职场文书
Nginx 502 Bad Gateway错误原因及解决方案
2021/03/31 Servers