在前端开发中，我们经常会需要在表单输入框中添加默认文本，以便用户更好地理解并填写表单。本文将介绍如何使用 HTML 和 CSS 实现这一功能，并提供示例代码和指导意义。
使用 placeholder 属性
HTML5 中引入了 placeholder 属性，该属性可以让开发者在输入框内添加默认文本。只需要在对应的 input 标签内添加 placeholder 属性并赋值即可：
<input type="text" placeholder="请输入姓名">
这样，当输入框为空时，输入框内就会显示 请输入姓名 这段默认文本，待用户开始输入后，文本自动消失。
需要注意的是，placeholder 属性并不是用来替代标签的，而是为了提醒用户输入信息。因此，在一些老旧的浏览器中可能无法支持该属性。
使用 label 元素
除了使用 placeholder 属性外，我们还可以通过 label 元素来实现这个功能。label 元素是一个非常有用的元素，它可以将表单元素与其描述绑定在一起，从而提高表单的可用性。
在使用 label 元素时，我们需要给 input 标签设置一个唯一的 id。然后，我们可以在 label 标签中使用 for 属性来将其与对应的 input 标签相关联，并在 label 内添加默认文本。
示例代码如下：
<label for="username">请输入用户名：</label> <input type="text" id="username">
这样，当用户点击 label 标签时，input 输入框就会获得焦点并开始输入。如果用户没有输入任何内容，则默认文本仍然显示在输入框中。
需要注意的是，使用 label 元素可以提高表单的可用性和可访问性，因为它使屏幕阅读器能够更好地理解表单元素的关系。
使用 CSS 实现
除了以上两种方法外，我们还可以使用 CSS 来实现默认文本的效果。我们可以在 input 标签中添加一个 value 属性，将其设置为默认文本。然后，我们可以使用 CSS 的 :focus 伪类来控制默认文本的显示。
示例代码如下：
<input type="text" value="请输入手机号">
input[type="text"] {
color: #999;
}
input[type="text"]:focus {
color: #000;
}这样，在输入框获得焦点时，默认文本就会消失，输入框变为黑色字体，方便用户填写信息。
需要注意的是，这种方法可能会对表单的可用性造成一定影响。因为在输入框不获得焦点时，默认文本始终存在。因此，我们需要根据实际情况选择合适的方法使用。
总结
本文介绍了三种在输入框中添加默认文本的方法：使用 placeholder 属性、使用 label 元素和使用 CSS。每一种方法都有其适用的场景，需要根据实际情况进行选择。在开发时，请考虑用户体验和可访问性，并选择最适合您的情况的方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/31532