使用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 Pie工具推荐--让IE6-8支持一些优秀的CSS3特性
Sep 02 HTML / CSS
详解CSS透明opacity和IE各版本透明度滤镜filter的最准确用法
Dec 20 HTML / CSS
CSS3选择器新增问题的实现
Jan 21 HTML / CSS
详解rem 适配布局
Oct 31 HTML / CSS
详解canvas drawImage()方法绘制图片不显示的问题
Oct 08 HTML / CSS
一个不错的HTML5 Canvas多层点击事件监听实例
Apr 29 HTML / CSS
html5小技巧之通过document.head获取head元素
Jun 04 HTML / CSS
Canvas globalCompositeOperation
Dec 18 HTML / CSS
H5最强接口之canvas实现动态图形功能
May 31 HTML / CSS
一文彻底解决HTML5页面中长按保存图片功能
Jun 10 HTML / CSS
做一个能自适应高度的textarea的示例代码
Sep 06 HTML / CSS
H5页面适配iPhoneX(就是那么简单)
Dec 02 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 验证码制作(网树注释思想)
2009/07/20 PHP
Laravel 读取 config 下的数据方法
2019/10/13 PHP
70+漂亮且极具亲和力的导航菜单设计国外网站推荐
2011/09/20 Javascript
JS之Date对象和获取系统当前时间详解
2014/01/13 Javascript
javascript获取元素离文档各边距离的方法
2015/02/13 Javascript
JavaScript正则表达式中的ignoreCase属性使用详解
2015/06/16 Javascript
javascript的列表切换【实现代码】
2016/05/03 Javascript
angular2中router路由跳转navigate的使用与刷新页面问题详解
2017/05/07 Javascript
JavaScript之class继承_动力节点Java学院整理
2017/07/03 Javascript
前端常见跨域解决方案(全)
2017/09/19 Javascript
vue scroller返回页面记住滚动位置的实例代码
2018/01/29 Javascript
vue初尝试--项目结构(推荐)
2018/01/30 Javascript
Vue组件中的data必须是一个function的原因浅析
2018/09/03 Javascript
Node.js中读取TXT文件内容fs.readFile()用法
2018/10/10 Javascript
微信小程序 拍照或从相册选取图片上传代码实例
2019/08/28 Javascript
使用Vue调取接口,并渲染数据的示例代码
2019/10/28 Javascript
Vue使用自定义指令实现拖拽行为实例分析
2020/06/06 Javascript
用Python实现通过哈希算法检测图片重复的教程
2015/04/02 Python
python记录程序运行时间的三种方法
2017/07/14 Python
python的dataframe转换为多维矩阵的方法
2018/04/11 Python
python实现归并排序算法
2018/11/22 Python
pyspark操作MongoDB的方法步骤
2019/01/04 Python
python多进程下实现日志记录按时间分割
2019/07/22 Python
Python 解析库json及jsonpath pickle的实现
2020/08/17 Python
基于Python实现体育彩票选号器功能代码实例
2020/09/16 Python
CSS3移动端vw+rem不依赖JS实现响应式布局的方法
2019/01/23 HTML / CSS
总经理驾驶员岗位职责
2013/12/04 职场文书
会计专业毕业生求职信分享
2014/01/03 职场文书
责任书范本
2014/08/25 职场文书
爱与责任师德演讲稿
2014/08/26 职场文书
老人节标语大全
2014/10/08 职场文书
评估“风险”创业计划的几大要点
2019/08/12 职场文书
Python还能这么玩之用Python修改了班花的开机密码
2021/06/04 Python
Java实现简易的分词器功能
2021/06/15 Java/Android
CSS Transition通过改变Height实现展开收起元素
2021/08/07 HTML / CSS
MySQL限制查询和数据排序介绍
2022/03/25 MySQL