使用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 圆角效果
Jul 15 HTML / CSS
分享30个新鲜的CSS3打造的精美绚丽效果(附演示下载)
Dec 28 HTML / CSS
css3的图形3d翻转效果应用示例
Apr 08 HTML / CSS
CSS3绘制六边形的简单实现
Aug 25 HTML / CSS
Css3新特性应用之视觉效果实例
Dec 12 HTML / CSS
CSS3中的弹性布局em运用入门详解 1em等于多少像素
Feb 08 HTML / CSS
html5+CSS3+JS实现七夕言情功能代码
Aug 28 HTML / CSS
HTML5实现QQ聊天气泡效果
Jun 26 HTML / CSS
在HTML5 Canvas中放入图片和保存为图片的方法
May 03 HTML / CSS
很酷的HTML5电子书翻页动画特效
Feb 25 HTML / CSS
详解如何在登录过期后跳出Ifram框架
Sep 10 HTML / CSS
CSS实现两列布局的N种方法
Aug 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
ADODB的数据库封包程序库
2006/12/31 PHP
php5.2以下版本无json_decode函数的解决方法
2014/05/25 PHP
改写ThinkPHP的U方法使其路由下分页正常
2014/07/02 PHP
PHP实现多图上传(结合uploadify插件)思路分析
2016/11/30 PHP
IE iframe的onload方法分析小结
2010/01/07 Javascript
解析javascript 数组以及json元素的添加删除
2013/06/26 Javascript
javascript实现文字图片上下滚动的具体实例
2013/06/28 Javascript
js写的评论分页(还不错)
2013/12/23 Javascript
在JS数组特定索引处指定位置插入元素
2014/07/27 Javascript
JS实现同时搜索百度和必应的方法
2015/01/27 Javascript
jqueryUI里拖拽排序示例分析
2015/02/26 Javascript
jQuery实现在textarea指定位置插入字符或表情的方法
2015/03/11 Javascript
深入理解JavaScript中的箭头函数
2015/07/28 Javascript
javascript中substring()、substr()、slice()的区别
2015/08/30 Javascript
JS基于面向对象实现的拖拽库实例
2015/09/24 Javascript
jquery实现表单获取短信验证码代码
2017/03/13 Javascript
在Vue中如何使用Cookie操作实例
2017/07/27 Javascript
javascript流程控制语句集合
2017/09/18 Javascript
JavaScript实现随机数生成器(去重)
2017/10/13 Javascript
解决Vue打包之后文件路径出错的问题
2018/03/06 Javascript
jQuery中的for循环var与let的区别
2018/04/21 jQuery
jQuery解析json格式数据示例
2018/09/01 jQuery
只有 20 行的 JavaScript 模板引擎实例详解
2020/05/11 Javascript
浅析使用Python操作文件
2017/07/31 Python
python+opencv实现的简单人脸识别代码示例
2017/11/14 Python
Python将主机名转换为IP地址的方法
2019/08/14 Python
python数据爬下来保存的位置
2020/02/17 Python
详解如何在PyCharm控制台中输出彩色文字和背景
2020/08/17 Python
Pycharm安装python库的方法
2020/11/24 Python
python switch 实现多分支选择功能
2020/12/21 Python
HTML5页面直接调用百度地图API获取当前位置直接导航目的地的实现代码
2018/03/02 HTML / CSS
求职者怎样写自荐信
2014/04/13 职场文书
行政复议答复书
2015/07/01 职场文书
课程设计感想范文
2015/08/11 职场文书
2019幼儿园感恩节活动策划书
2019/11/28 职场文书
Nginx stream 配置代理(Nginx TCP/UDP 负载均衡)
2021/11/17 Servers