使用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 rem(设置字体大小) 教程
Nov 21 HTML / CSS
使用CSS3实现SVG路径描边动画效果入门教程
Oct 21 HTML / CSS
CSS3动画特效在活动页中的应用
Jan 21 HTML / CSS
CSS3 实现穿梭星空动画
Nov 13 HTML / CSS
纯CSS3实现运行时钟的示例代码
Jan 25 HTML / CSS
使用html2canvas实现浏览器截图的示例代码
Jan 26 HTML / CSS
HTML5 的新的表单元素(datalist/keygen/output)使用介绍
Jul 19 HTML / CSS
html5.2 dialog简介详解
Feb 27 HTML / CSS
基于HTML5 WebGL的3D机房的示例
Mar 16 HTML / CSS
导出HTML5 Canvas图片并上传服务器功能
Aug 16 HTML / CSS
Canvas环形饼图与手势控制的实现代码
Nov 08 HTML / CSS
HTML中meta标签及Keywords
Apr 15 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 中使用随机数的三个步骤
2006/10/09 PHP
php获取mysql版本的几种方法小结
2008/03/25 PHP
一文掌握PHP Xdebug 本地与远程调试(小结)
2019/04/23 PHP
在Laravel中实现使用AJAX动态刷新部分页面
2019/10/15 PHP
Jquery时间验证和转换工具小例子
2013/07/01 Javascript
JavaScript调用客户端的可执行文件(示例代码)
2013/11/28 Javascript
js实现键盘操作实现div的移动或改变的原理及代码
2014/06/23 Javascript
JavaScript onkeydown事件入门实例(键盘某个按键被按下)
2014/10/17 Javascript
JS实现文档加载完成后执行代码
2015/07/09 Javascript
jQuery实现可关闭固定于底(顶)部的工具条菜单效果
2015/11/06 Javascript
javascript中利用柯里化函数实现bind方法
2016/04/29 Javascript
Angular.js 实现数字转换汉字实例代码
2016/07/14 Javascript
jQuery组件easyui对话框实现代码
2016/08/25 Javascript
angular.js指令中的controller、compile与link函数的不同之处
2017/05/10 Javascript
JavaScript实现自动跳转文本功能
2017/05/25 Javascript
判断滚动条滑到底部触发事件(实例讲解)
2017/11/15 Javascript
一文了解Vue中的nextTick
2019/05/06 Javascript
在微信小程序中使用mqtt服务的方法
2019/12/13 Javascript
Vue包大小优化的实现(从1.72M到94K)
2021/02/18 Vue.js
python机器学习理论与实战(二)决策树
2018/01/19 Python
Python request设置HTTPS代理代码解析
2018/02/12 Python
Django2.1集成xadmin管理后台所遇到的错误集锦(填坑)
2018/12/20 Python
Python学习笔记之读取文件、OS模块、异常处理、with as语法示例
2019/06/04 Python
Numpy 多维数据数组的实现
2020/06/18 Python
python中加背景音乐如何操作
2020/07/19 Python
Python连接mysql数据库及简单增删改查操作示例代码
2020/08/03 Python
Django-silk性能测试工具安装及使用解析
2020/11/28 Python
M1芯片安装python3.9.1的实现
2021/02/02 Python
Farfetch巴西官网:奢侈品牌时尚购物平台
2020/10/19 全球购物
.net软件工程师应聘上机试题
2015/03/10 面试题
幸福家庭事迹材料
2014/02/03 职场文书
家居装修公司创业计划书范文
2014/03/20 职场文书
2014业务员年终工作总结
2014/12/09 职场文书
教师岗位职责
2015/02/03 职场文书
2015年党建工作总结
2015/03/30 职场文书
Java SSM配置文件案例详解
2021/08/30 Java/Android