HTML - placeholder 属性_HTML 菜鸟教程

HTML placeholder 属性用于定义一个简短的提示，以帮助用户输入数据。

当输入字段中没有值时，它会出现，当用户开始在字段中输入值时，它会自动消失。提示只是一个示例值或预期格式的简要说明。placeholder 属性适用于搜索、文本、数字、电子邮件、密码输入类型。

语法


<tag placeholder = "value"></tag>

适用于

下面列出的元素允许使用 HTML placeholder 属性

元素	描述
<input>	HTML <input> 标签用于接收来自用户的各种类型的输入。
<textarea>	HTML <textarea> 标签用于表示多行纯文本编辑控件。

HTML placeholder 属性的示例

以下示例将说明 HTML 占位符属性，我们应该在何处以及如何使用此属性！

文本输入的placeholder 属性

在以下示例中，我们将使用placeholder 属性和输入 type=text。


<!DOCTYPE html>
<html lang="en">

<head>
	 <title>HTML 'placeholder' Attribute</title>
	 <style>
			input {
				 width: 200px;
				 padding: 7px;
			}

			button {
				 padding: 7px;
			}
	 </style>
</head>

<body>
	 <h3>
			Example of HTML 'placeholder' Attribute
	 </h3>
	 <form onsubmit="return false;">
			<h3>Login page</h3>
			<input type="text" 
						 placeholder="Username(email or mobile)">
			<br>
			<br>
			<input type="password" 
						 placeholder="Password">
			<br>
			<br>
			<button>Login</button>
	 </form>
</body>

</html>

textarea 元素的placeholder 属性

考虑另一种情况，我们将在 textarea 字段中使用placeholder 属性。


<!DOCTYPE html>
<html lang="en">

<head>
	 <title>HTML 'placeholder' Attribute</title>
	 <style>
			input {
				 width: 200px;
				 padding: 7px;
			}

			button {
				 padding: 7px;
			}
	 </style>
</head>

<body>
	 <h3>
			Example of the HTML 'placeholder' Attribute
	 </h3>
	 <form>
			<textarea cols="30" rows="5" 
								placeholder="Write your feedback...."></textarea>
			<br>
			<button>Submit</button>
	 </form>
</body>

</html>

支持的浏览器

浏览器
是否支持	10.0	10.0	4.0	5.0	11.0

<< HTML - pattern 属性 HTML - poster 属性 >>