使用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个性化字体_动力节点Java学院整理
Jul 12 HTML / CSS
CSS3 选择器 属性选择器介绍
Jan 21 HTML / CSS
IE矩阵Matrix滤镜旋转与缩放及如何结合transform
Nov 29 HTML / CSS
CSS3 中filter(滤镜)属性使用详解
Apr 07 HTML / CSS
详解background属性的8个属性值(面试题)
Nov 02 HTML / CSS
CSS3实现的渐变幻灯片效果
Dec 07 HTML / CSS
html5 button autofocus 属性介绍及应用
Jan 04 HTML / CSS
HTML5之WebGL 3D概述(下)—借助类库开发及框架介绍
Jan 31 HTML / CSS
Html5新特性用canvas标签画多条直线附效果截图
Jun 30 HTML / CSS
浅谈html5 响应式布局
Dec 24 HTML / CSS
Html5移动端div固定到底部实现底部导航条的几种方式
Mar 09 HTML / CSS
html解决浏览器记住密码输入框的问题
May 07 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中全面阻止SQL注入式攻击分析小结
2012/01/30 PHP
ThinkPHP3.2.2的插件控制器功能简述
2014/07/09 PHP
PHP排序算法类实例
2015/06/17 PHP
php从数据库读取数据,并以json格式返回数据的方法
2018/08/21 PHP
php实现二叉树中和为某一值的路径方法
2018/10/14 PHP
tp5.1 实现setInc字段自动加1
2019/10/18 PHP
javascript 鼠标拖动图标技术
2010/02/07 Javascript
使用Jquery打造最佳用户体验的登录页面的实现代码
2011/07/08 Javascript
JAVASCRIPT车架号识别/验证函数代码 汽车车架号验证程序
2012/01/08 Javascript
一行代码告别document.getElementById
2012/06/01 Javascript
解决自定义$(id)的方法与jquery选择器$冲突的问题
2014/06/14 Javascript
基于socket.io和node.js搭建即时通信系统
2014/07/30 Javascript
Bootstrap表单使用方法详解
2017/02/17 Javascript
jQuery完成表单验证的实例代码(纯代码)
2017/09/30 jQuery
在 vue-cli v3.0 中使用 SCSS/SASS的方法
2018/06/14 Javascript
JS使用tween.js动画库实现轮播图并且有切换功能
2018/07/17 Javascript
CKEditor扩展插件:自动排版功能autoformat插件实现方法详解
2020/02/06 Javascript
javascript设计模式 ? 建造者模式原理与应用实例分析
2020/04/10 Javascript
python获取beautifulphoto随机某图片代码实例
2013/12/18 Python
Python中MYSQLdb出现乱码的解决方法
2014/10/11 Python
python实现折半查找和归并排序算法
2017/04/14 Python
Python将文本去空格并保存到txt文件中的实例
2018/07/24 Python
对dataframe数据之间求补集的实例详解
2019/01/30 Python
解决python写入带有中文的字符到文件错误的问题
2019/01/31 Python
PyQtGraph在pyqt中的应用及安装过程
2019/08/04 Python
Pandas实现dataframe和np.array的相互转换
2019/11/30 Python
python学习笔记之多进程
2020/08/06 Python
CSS3中媒体查询结合rem布局适配手机屏幕
2019/06/10 HTML / CSS
接口中的方法可以是abstract的吗
2015/07/23 面试题
大学生军训自我评价分享
2013/11/09 职场文书
函授毕业个人自我评价
2014/02/20 职场文书
2014年四风问题自我剖析材料
2014/09/15 职场文书
法定代表人免职证明
2015/06/24 职场文书
圣诞晚会主持词
2015/07/01 职场文书
python四种出行路线规划的实现
2021/06/23 Python
vue 数字翻牌器动态加载数据
2022/04/20 Vue.js