使用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 11 HTML / CSS
HTML5 CSS3给网站设计带来出色效果
Jul 16 HTML / CSS
CSS中越界问题的经典解决方案【推荐】
Apr 19 HTML / CSS
css3 边框、背景、文本效果的实现代码
Mar 21 HTML / CSS
HTML5拖放功能_动力节点Java学院整理
Jul 13 HTML / CSS
HTML5之WebGL 3D概述(上)—WebGL原生开发开启网页3D渲染新时代
Jan 31 HTML / CSS
HTML中使用SVG与SVG预定义形状元素介绍
Jun 28 HTML / CSS
实例教程 HTML5 Canvas 超炫酷烟花绽放动画实现代码
Nov 05 HTML / CSS
一文彻底解决HTML5页面中长按保存图片功能
Jun 10 HTML / CSS
前端实现打印图像功能
Aug 27 HTML / CSS
关于canvas绘制模糊问题的解决方法
Sep 24 HTML / CSS
Html5页面上如何禁止手机虚拟键盘弹出
Mar 19 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
vBulletin HACK----关于排版的两个HACK
2006/10/09 PHP
PHP 时间转换Unix时间戳代码
2010/01/22 PHP
PHP对文件夹递归执行chmod命令的方法
2015/06/19 PHP
php中strlen和mb_strlen用法实例分析
2016/11/12 PHP
PHP htmlspecialchars()函数用法与实例讲解
2019/03/08 PHP
真正的JQuery.ajax传递中文参数的解决方法
2011/05/28 Javascript
JavaScript字符串插入、删除、替换函数使用示例
2013/07/25 Javascript
页面实时更新时间的JS实例代码
2013/12/18 Javascript
JS实现的页面自定义滚动条效果
2015/10/26 Javascript
javascript加减乘除的简单实例
2016/07/12 Javascript
javascript 将共享属性迁移到原型中去的实现方法
2016/08/31 Javascript
BootStrap Datepicker 插件修改为默认中文的实现方法
2017/02/10 Javascript
JavaScript实现带有子菜单和控件的slider轮播图效果
2017/11/01 Javascript
Node使用Sequlize连接Mysql报错:Access denied for user ‘xxx’@‘localhost’
2018/01/03 Javascript
JavaScript实现的简单加密解密操作示例
2018/06/01 Javascript
js实现视图和数据双向绑定的方法分析
2020/02/05 Javascript
JavaScript实现缓动动画
2020/11/25 Javascript
[00:09]DOTA2全国高校联赛 精彩活动引爆全场
2018/05/30 DOTA
python编写暴力破解FTP密码小工具
2014/11/19 Python
Python操作列表之List.insert()方法的使用
2015/05/20 Python
Python实现将DOC文档转换为PDF的方法
2015/07/25 Python
Python实现约瑟夫环问题的方法
2016/05/03 Python
详解Python中的type和object
2018/08/15 Python
解决python super()调用多重继承函数的问题
2019/06/26 Python
python适合人工智能的理由和优势
2019/06/28 Python
Django为窗体加上防机器人的验证码功能过程解析
2019/08/14 Python
python 实现查询Neo4j多节点的多层关系
2019/12/23 Python
详解win10下pytorch-gpu安装以及CUDA详细安装过程
2021/01/28 Python
HTML5各种头部meta标签的功能(推荐)
2017/03/13 HTML / CSS
温泉秘密:Onsen Secret
2020/07/06 全球购物
球队口号
2014/06/18 职场文书
学生会竞选演讲稿学习部
2014/08/25 职场文书
股东授权委托书范本
2014/09/13 职场文书
大学生活委员竞选稿
2015/11/21 职场文书
如何在Python中创建二叉树
2021/03/30 Python
python如何在word中存储本地图片
2021/04/07 Python