【知识】HTML 5 <input> placeholder 属性

最新推荐文章于 2023-04-23 17:27:08 发布

原创最新推荐文章于 2023-04-23 17:27:08 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

【毕业设计】专栏收录该内容

17 篇文章

订阅专栏

本文介绍了HTML中input元素的placeholder属性，此属性用于为文本输入框提供提示信息，当输入框为空时显示提示，获得焦点时消失。适用于text、search等类型。

placeholder 属性

提供可描述输入字段预期值的提示信息（hint）。该提示会在输入字段为空时显示，并会在字段获得焦点时消失。

注释：placeholder 属性适用于以下的 <input> 类型：text, search, url, telephone, email 以及 password。

实例：

  	<div>
    		<input type="text"  placeholder="用户名" namer="username"/><br/>
    		<input type="text" placeholder="密码" name="password"/><br/>
    	</div>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

提拉米苏x

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

【HTML+CSS】HTML ＜input＞元素详解：类型与常用属性

Xiaoxin的博客

07-29

3249

在HTML中，元素是最常用的表单元素之一，它允许用户输入数据。元素极其灵活，通过不同的type属性，它可以转变为文本框、密码框、提交按钮、单选按钮、多选按钮等多种不同类型的输入控件。同时，它还支持多种属性来控制这些控件的行为和外观。本文将详细介绍HTML元素的各种类型及其常见属性。

HTML5中的placeholder属性

qq_32608019的博客

10-19

744

文本框(INPUT)里的placeholder属性。placeholder属性能够让你在文本框里显示提示信息，一旦你在文本框里输入了什么信息，提示信息就会隐藏。还可以利用CSS给placeholder里的文本信息进行样式修改

参与评论您还未登录，请先登录后发表或查看评论

html5 placeholder的属性

weixin_52808317的博客

03-19

199

我想介绍一下html5的placeholder的特殊属性，使得placeholder的文字可以显示在填充框内部 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width

jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果

12-10

页面中的输入框默认的提示文字一般使用placeholder属性就可以了，即： <input type="text" name="username" placeholder="请输入用户名" value="" id="username"/> 最多加点样式控制下默认文字的颜色 input::-webkit-input-placeholder{color:#AAAAAA;} 但是在低版本的浏览器却不支持这个placeholder属性，那么真的要在低版本浏览器也要实现跟placeholder一样的效果，就需要写个插件来兼容下，下面就细讲一下怎样用jquery来实现这个模拟效果。实现这个模拟效果，

html5--placeholder属性

liuhuabing760596103的专栏

10-18

605

html5--placeholder属性

chrome下input[type=text]的placeholder不垂直居中的问题解决

09-19

4231

但是在chrome下显示的search word并不能垂直居中。后来找了很久终于在stackoverflow上找到了对应的方法。参考：http://stackoverflow.com/questions/4919680/html5-placeholder-css-pa

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>大学生暑期社会实践报名表</title> </head> <body>  <h1 align="center">大学生暑期社会实践报名表</h1> <hr>  <form action="#" method="POST">  <label for="stuName">学生姓名：</label> <input type="text" id="stuName" name="username" placeholder="请输入真实姓名"> <br><br>  <label for="pwd">查询密码：</label> <input type="password" id="pwd" name="password" placeholder="设置6位查询密码"> <br><br>  <label>您的性别：</label> <input type="radio" id="male" name="gender" value="男" checked> <label for="male">男</label> <input type="radio" id="female" name="gender" value="女"> <label for="female">女</label> <br><br>  <label for="campus">所在校区：</label> <select id="campus" name="campus"> <option value="">--请选择--</option> <option value="north">北校区</option> <option value="south">南校区</option> <option value="east">东校区</option> </select> <br><br>  <label>意向岗位（多选）：</label> <br> <input type="checkbox" id="teach" name="job" value="支教"> <label for="teach">乡村支教</label> <br> <input type="checkbox" id="research" name="job" value="调研"> <label for="research">社会调研</label> <br> <input type="checkbox" id="tech" name="job" value="技术"> <label for="tech">技术支持</label> <br><br>  <label for="birthday">出生日期：</label> <input type="date" id="birthday" name="birthday"> <br><br>  <label for="resume">上传简历：</label> <input type="file" id="resume" name="file"> <br><br>  <label for="intro">个人优势/备注：</label><br> <textarea id="intro" name="intro" rows="5" cols="40" placeholder="请简述你的特长..."></textarea> <br><br>  <input type="submit" value="立即报名"> <input type="reset" value="重新填写"> </form> <br> <hr> <p align="center"><small>版权所有 © 2025 学生工作处</small></p > </body> </html>以上哪里有问题帮我修改并输出正确的

最新发布

12-09

<textarea id="intro" name="intro" rows="5" cols="40" placeholder="请简述你的特长..."></textarea> <br><br>  <input type="submit" value="立即报名" /> <input...

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'Update.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page">  </head> <body> <form action="updateStudent" method="post"> <table> <tr> <td> 姓名：<input type="text" name=sname/> </td> </tr> <tr> <td> 年龄：<input type="text" name=sage/> </td> </tr> <tr> <td> 学号：<input type="text" name=sid/> </td> </tr> <tr> <td> <input type="submit"/> <input type="reset"/> </td> </tr> </table> </form> </body> </html>还是三个空

11-14

> `<input type="text" name=sname/>` → `name` 属性没有加双引号！虽然看起来“应该能工作”，但在 JSP + Tomcat 环境中，**不加引号会导致参数无法正确提交**。 --- ## 为什么还是三个 null？真相揭晓 ### ...

深入前端：掌握<input>表单元素及属性

下面我将详细解释<input>标签及其常用属性。 ### input 标签的定义和类型 `<input>` 是HTML中的内联元素，用于创建交互式的控件，让用户可以在表单中输入数据。一个 `<input>` 元素通常包含 `type` 属性，该属性...

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>统计英文字母出现的频次</title> <style type="text/css"> #div0 { margin: 0 auto;padding: 0px 20px;width: 460px;height: 300px; border: 1px solid #8899AA;text-align: center; } [type="text"] {width: 350px;height: 20px;} input{margin: 5px;} </style> <script type="text/javascript"> </script> </head> <body> <div id="div0"> <h3>统计英文字母出现的频次</h3> <form action="" method="post"> <label>输入字符串：</label> <input type="text" id="strings" value="This is an example." placeholder="输入字符串"/><br> <input type="button" value="统计字母出现的频次" onclick="sumChars()" /> <input type="reset" name="" id="" value="清空" /> <h4>英文字母出现的频次统计结果</h4> <textarea id="result" rows="4" cols="40" readonly></textarea> </form> </div> </body> </html>在此代码基础上完成作业一

12-02

<input type="text" id="strings" value="This is an example." placeholder="输入字符串"/><br> <input type="button" value="统计字母出现的频次" onclick="sumChars()" /> <input type="reset" name="" id="" ...

HTML5 解决表单输入提示 placeholder 属性

etx2002的博客

04-01

709

HTML5自学笔记

m0_60121089的博客

03-10

413

HTML5 初识HTML Hyper Text Markup Language（超文本标记语言）超文本包括：文字、图片、音频、视频、动画等 W3C World Wide Web Consortium (万维网联盟)。成立于1994年，Web技术领域最权威和具影响力的国际中立性技术标准机构。 http://www.w3.org/ http://www.chinaw3c.org/ W3C标准包括结构化标准语言(HTML、 XML) 表现标准语言(CSS) 行为标准(DOM、ECMA

PHP学习——表单（综合小程序）

坏坏-5的博客

05-08

969

本篇主要是PHP的一个表单相关作业！

【HTML5】HTML5 新增 input 表单属性 ( required 属性 | placeholder 属性 | autofocus 属性 | autocomplete 属性 )

让学习成为一种习惯 ( 韩曙亮の技术博客 )

04-19

6908

一、HTML5 新增 input 表单属性 1、required 属性 2、placeholder 属性 3、autofocus 属性 4、autocomplete 属性 5、multiple 属性

input-placeholder

sbdd6556的博客

06-23

978

input标签的placeholder属性的作用是：在用户输入前，做出相应的提示。 <input name="uname" type="text" placeholder="用户名"> placeholder属性：在用户输入前提示用户

input中的placeholder属性

qq_1240545777的博客

03-19

8256

placeholder 属性提供可描述输入字段预期值的提示信息（hint）。该提示会在输入字段为空时显示，并会在字段获得焦点时消失。注释：placeholder 属性适用于以下的 <input> 类型：text, search, url, telephone, email 以及 password。使用：效果图：当因为用户名或密码错误，想子啊input中提示的时候，首先应该吧input....

修改input输入框的提示文本placeholder样式

我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。

08-15

6020

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv=...

＜Input /＞输入框及input的相关属性

outstanding木槿

04-23

5209

accept属性用来规定能够通过文件上传进行提交的文件类型。type="button"、"reset"、"submit"用于定义按钮上的显示的文本。readonly属性可与type="text"或"password"的input元素配合使用。type="text"、"password"、"hidden"用于定义输入字段的初始值。type="checkbox"、"radio"、"image"用于定义与输入相关联的值。该属性只能与type="text"或type="password"的input元素配合使用。

HTML <input> placeholder 属性

weixin_33717117的博客

05-11

209

1、用法 placeholder 属性用于给 <input>标签输入字段为空时，提供提示信息hint 2、举例 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-C...