使用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 相关文章推荐
HTML5如何适配 iPhone IOS 底部黑条
Mar 09 HTML / CSS
关于CSS Tooltips(鼠标经过时显示)的效果
Apr 10 HTML / CSS
利用css3实现的简单的鼠标悬停按钮
Nov 04 HTML / CSS
一款纯css3制作的2015年元旦雪人动画特效教程
Dec 29 HTML / CSS
CSS3 边框效果
Nov 04 HTML / CSS
css3实现简单的白云飘动背景特效
Oct 28 HTML / CSS
HTML5实现的震撼3D焦点图动画的示例代码
Sep 26 HTML / CSS
HTML5调用手机摄像头拍照的实现思路及代码
Jun 15 HTML / CSS
HTML5新增的表单元素和属性实例解析
Jul 07 HTML / CSS
使用phonegap进行本地存储的实现方法
Mar 31 HTML / CSS
html5 canvas合成海报所遇问题及解决方案总结
Aug 03 HTML / CSS
使用CSS实现一个搜索引擎的原理解析
Sep 25 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
thinkphp普通查询与表达式查询实例分析
2014/11/24 PHP
PHP中使用break跳出多重循环代码实例
2015/01/21 PHP
JS创建优美的页面滑动块效果 - Glider.js
2007/09/27 Javascript
javascript级联下拉列表实例代码(自写)
2013/05/10 Javascript
jquery内置验证(validate)使用方法示例(表单验证)
2013/12/04 Javascript
浅析jquery的js图表组件highcharts
2014/03/06 Javascript
PHP PDO操作总结
2014/11/17 Javascript
js+canvas绘制矩形的方法
2016/01/28 Javascript
Knockoutjs 学习系列(一)ko初体验
2016/06/07 Javascript
js 点击a标签 获取a的自定义属性方法
2016/11/21 Javascript
JavaScript仿微博输入框效果(案例分析)
2016/12/06 Javascript
基于JS实现bookstore静态页面的实例代码
2017/02/22 Javascript
基于LayUI分页和LayUI laypage分页的使用示例
2017/08/02 Javascript
微信小程序实现美团菜单
2018/06/06 Javascript
JS实现区分中英文并统计字符个数的方法示例
2018/06/09 Javascript
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
2018/07/31 jQuery
深入理解JavaScript 中的执行上下文和执行栈
2018/10/23 Javascript
jQuery时间戳和日期相互转换操作示例
2018/12/07 jQuery
react组件从搭建脚手架到在npm发布的步骤实现
2019/01/09 Javascript
webpack 最佳配置指北(推荐)
2020/01/07 Javascript
在Python上基于Markov链生成伪随机文本的教程
2015/04/17 Python
Python首次安装后运行报错(0xc000007b)的解决方法
2016/10/18 Python
Python实现PS滤镜的万花筒效果示例
2018/01/23 Python
Keras预训练的ImageNet模型实现分类操作
2020/07/07 Python
手把手教你用Django执行原生SQL的方法
2021/02/18 Python
如何给HTML标签中的文本设置修饰线
2019/11/18 HTML / CSS
世界首屈一指的钓鱼用品商店:TackleDirect
2016/07/26 全球购物
欧舒丹俄罗斯官方网站:L’OCCITANE俄罗斯
2019/11/22 全球购物
山海经纬软件测试笔试题和面试题
2013/04/02 面试题
考试诚信承诺书
2014/05/23 职场文书
工地安全质量标语
2014/06/07 职场文书
2014小学二年级班主任工作总结
2014/12/05 职场文书
写给妈妈的感谢信
2015/01/22 职场文书
2015年酒店客房部工作总结
2015/04/25 职场文书
MySQL分库分表与分区的入门指南
2021/04/22 MySQL
Redis Cluster 字段模糊匹配及删除
2021/05/27 Redis