HTML输入框默认文字|极客教程

HTML输入框默认文字

HTML输入框是网页开发中常用的一种表单元素，用于用户输入文本信息。在某些情况下，我们希望在输入框中显示一些默认文字，以提示用户应该输入什么信息。这些默认文字通常会在用户点击输入框时自动消失，也可以在用户开始输入文字时自动清空。

在本文中，我们将详细讨论如何在HTML输入框中设置默认文字，并提供一些示例代码进行演示。

设置默认文字

要在HTML输入框中设置默认文字，可以使用placeholder属性。该属性用于定义在用户输入内容之前应该显示的文本。

以下是一个简单的示例代码，演示如何在HTML输入框中设置默认文字：

<input type="text" placeholder="请输入您的姓名">

在上面的代码中，我们创建了一个文本输入框，并设置了默认文字为”请输入您的姓名”。当用户点击输入框时，这段文字会显示在输入框中。

示例代码

为了更好地演示如何设置默认文字，我们可以编写一个简单的HTML文件，包含多个不同类型的输入框，并为它们设置不同的默认文字。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML输入框默认文字示例</title>
</head>
<body>
<h2>示例：HTML输入框默认文字</h2>
<form>
<label for="name">姓名：</label>
<input type="text" id="name" name="name" placeholder="请输入您的姓名"><br><br>

<label for="email">邮箱：</label>
<input type="email" id="email" name="email" placeholder="请输入您的邮箱"><br><br>

<label for="age">年龄：</label>
<input type="number" id="age" name="age" placeholder="请输入您的年龄"><br><br>

<label for="message">留言：</label>
<textarea id="message" name="message" placeholder="在这里留下您的留言"></textarea><br><br>

<input type="submit" value="提交">
</form>
</body>
</html>

在上面的示例代码中，我们创建了一个包含姓名、邮箱、年龄和留言输入框的表单。每个输入框都设置了不同的默认文字，以便提示用户应该输入的内容。