使用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实现文字向右循环闪过效果实例(可用于移动端)
Jun 15 HTML / CSS
html+css3实现的登录界面
Dec 09 HTML / CSS
使用HTML5 Canvas API中的clip()方法裁剪区域图像
Mar 25 HTML / CSS
使用phonegap检测网络状态的方法
Mar 30 HTML / CSS
HTML5 解析规则分析
Aug 14 HTML / CSS
HTML5安全介绍之内容安全策略(CSP)简介
Jul 10 HTML / CSS
html5与css3小应用
Apr 03 HTML / CSS
html5 datalist标签使用示例(自动完成组件)
May 04 HTML / CSS
HTML5新增form控件和表单属性实例代码详解
May 15 HTML / CSS
css3 filter属性的使用简介
Mar 31 HTML / CSS
CSS3实现列表无限滚动/轮播效果
Jun 23 HTML / CSS
CSS 一行代码实现头像与国旗的融合
Oct 24 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 Mssql操作简单封装支持存储过程
2009/12/11 PHP
php 高效率写法 推荐
2010/02/21 PHP
Yii框架关联查询with用法分析
2014/12/02 PHP
十个PHP高级应用技巧果断收藏
2015/09/25 PHP
ThinkPHP5实现作业管理系统中处理学生未交作业与已交作业信息的方法
2016/11/12 PHP
js的with语句使用方法
2007/09/21 Javascript
JS画5角星方法介绍
2013/09/17 Javascript
jQuery随机密码生成的方法
2015/03/09 Javascript
jQuery实现首页顶部可伸缩广告特效代码
2015/04/15 Javascript
教你如何终止JQUERY的$.AJAX请求
2016/02/23 Javascript
完美实现八种js焦点轮播图(上篇)
2016/07/18 Javascript
Angular2 环境配置详细介绍
2016/09/21 Javascript
javascript内存分配原理实例分析
2017/04/10 Javascript
微信小程序实战之自定义toast(6)
2017/04/18 Javascript
vue使用原生js实现滚动页面跟踪导航高亮的示例代码
2018/10/25 Javascript
javascript中函数的写法实例代码详解
2018/10/28 Javascript
vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)
2019/08/12 Javascript
如何基于原生javaScript生成带图片的二维码
2019/11/21 Javascript
微信小程序后端实现授权登录
2020/02/24 Javascript
JavaScript Window浏览器对象模型原理解析
2020/05/30 Javascript
JavaScript实现答题评分功能页面
2020/06/24 Javascript
vue实现下拉菜单树
2020/10/22 Javascript
[00:42]《辉夜杯》—职业组预选赛12月3日15点 正式打响
2015/12/03 DOTA
python实现在windows服务中新建进程的方法
2015/06/30 Python
将Python代码打包为jar软件的简单方法
2015/08/04 Python
python中利用xml.dom模块解析xml的方法教程
2017/05/24 Python
python多进程读图提取特征存npy
2019/05/21 Python
python中pip的使用和修改下载源的方法
2019/07/08 Python
对DJango视图(views)和模版(templates)的使用详解
2019/07/17 Python
浅谈pytorch、cuda、python的版本对齐问题
2020/01/15 Python
Python处理PDF与CDF实例
2020/02/26 Python
PyTorch中torch.tensor与torch.Tensor的区别详解
2020/05/18 Python
python爬虫把url链接编码成gbk2312格式过程解析
2020/06/08 Python
世界首屈一指的在线男士内衣权威:HisRoom
2017/08/05 全球购物
机电一体化大学生求职信
2013/11/08 职场文书
学雷锋活动总结报告
2014/06/26 职场文书