在 Web 开发中，我们经常会遇到需要用户输入邮箱地址的情况。为了提高用户体验，我们可以在输入框中预填写默认值，让用户更快速地完成输入。在 HTML 中，我们可以使用<input>标签的defaultValue属性来设置输入框的默认值。
什么是 defaultValue 属性
defaultValue属性是<input>标签的一个属性，用于设置输入框的默认值。当用户没有输入任何内容时，输入框会显示defaultValue属性中设置的值。用户可以直接开始输入，也可以选择保留默认值。
如何使用 defaultValue 属性
在<input>标签中，我们可以通过设置defaultValue属性来指定输入框的默认值。下面是一个简单的示例代码：
<input type="email" defaultValue="example@example.com">
在上面的示例中，我们创建了一个类型为email的输入框，并设置了默认值为example@example.com。当用户打开页面时，输入框会显示这个默认值。
defaultValue 属性的注意事项
defaultValue属性只在用户没有输入内容时生效。如果用户开始输入内容，输入框会显示用户输入的值，而不是默认值。当用户清空输入框内容时，输入框会恢复显示
defaultValue属性中设置的默认值。如果想要在用户输入内容后保持默认值不变，可以使用
value属性来替代defaultValue属性。
示例代码
下面是一个更完整的示例代码，演示如何结合 JavaScript 使用defaultValue属性：
// www.javascriptcn.com code example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Email Input Default Value Demo</title>
</head>
<body>
<input type="email" id="emailInput" defaultValue="example@example.com">
<button onclick="resetEmail()">Reset Email</button>
<script>
function resetEmail() {
document.getElementById('emailInput').value = document.getElementById('emailInput').defaultValue;
}
</script>
</body>
</html>在上面的示例中，我们创建了一个邮箱输入框，并添加了一个按钮。当用户点击按钮时，邮箱输入框的值会被重置为默认值example@example.com。
结语
通过使用defaultValue属性，我们可以为用户提供更好的输入体验，让用户更快速地完成输入。在实际项目中，可以根据具体需求和设计要求来合理地设置输入框的默认值，提升用户体验。希望本文对您有所帮助！