使用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的动画按钮代码教程
Nov 23 HTML / CSS
css3的transform中scale缩放详解
Dec 08 HTML / CSS
使用CSS3编写灰阶滤镜来制作黑白照片效果的方法
May 09 HTML / CSS
CSS3实现可翻转的hover效果
May 23 HTML / CSS
html5 localStorage本地存储_动力节点Java学院整理
Jul 06 HTML / CSS
使用Html5、CSS实现文字阴影效果
Jan 17 HTML / CSS
HTML5 b和i标记将被赋予真正的语义
Jul 16 HTML / CSS
HTML5 canvas画图并保存成图片的jcanvas插件
Jan 17 HTML / CSS
基于html5实现的图片墙效果
Oct 16 HTML / CSS
一些常用的HTML5模式(pattern) 总结
Jul 14 HTML / CSS
HTML5 canvas基本绘图之绘制曲线
Jun 27 HTML / CSS
详解HTML5 录音的踩坑之旅
Dec 26 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中数据的批量导入(csv文件)
2006/10/09 PHP
PHP函数常用用法小结
2010/02/08 PHP
php修改时间格式的代码
2011/05/29 PHP
shopex主机报错误请求解决方案(No such file or directory)
2011/12/27 PHP
基于PHP文件操作的详细诠释
2013/06/21 PHP
PHP浮点比较大小的方法
2016/02/14 PHP
php中的常用魔术方法汇总
2016/02/14 PHP
php curl操作API接口类完整示例
2019/05/21 PHP
javascript this用法小结
2008/12/19 Javascript
checkbox选中与未选中判断示例
2014/08/04 Javascript
Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)
2016/09/09 Javascript
js实现自动图片轮播代码
2017/03/22 Javascript
vue给对象动态添加属性和值的实例
2019/09/09 Javascript
Js图片点击切换轮播实现代码
2020/07/27 Javascript
js实现简易ATM功能
2020/10/27 Javascript
解决antd 表单设置默认值initialValue后验证失效的问题
2020/11/02 Javascript
[47:26]完美世界DOTA2联赛 LBZS vs Forest 第二场 11.07
2020/11/09 DOTA
python进阶教程之函数对象(函数也是对象)
2014/08/30 Python
用ReactJS和Python的Flask框架编写留言板的代码示例
2015/12/19 Python
Python数据分析之双色球统计单个红和蓝球哪个比例高的方法
2018/02/03 Python
关于Python中的向量相加和numpy中的向量相加效率对比
2019/08/26 Python
python+OpenCV实现车牌号码识别
2019/11/08 Python
Python多线程Threading、子线程与守护线程实例详解
2020/03/24 Python
Iconfont(矢量图标)+iconmoon(图标svg互转)配合javascript实现社交分享系统
2020/04/21 Python
Keras设置以及获取权重的实现
2020/06/19 Python
Django中Q查询及Q()对象 F查询及F()对象用法
2020/07/09 Python
在Python中字典按值排序的实现方法
2020/11/12 Python
绝对令人的惊叹的CSS3折叠效果(3D效果)整理
2012/12/30 HTML / CSS
使用CSS3的ruby-position固定注音位置的用法示例
2016/07/05 HTML / CSS
HTML5 Canvas draw方法制作动画效果示例
2013/07/11 HTML / CSS
法国一家多品牌成衣精品中/高档商店:Graduate Store
2019/08/28 全球购物
惠而浦美国官网:Whirlpool.com
2021/01/19 全球购物
对教师的评语
2014/04/28 职场文书
精神文明建设汇报材料
2014/12/24 职场文书
Mysql数据库命令大全
2021/05/26 MySQL
Python中npy和mat文件的保存与读取
2022/04/24 Python