选择简单表单的默认值 - HTML

在 HTML 表单中，可以设置表单元素的默认值。默认值是指表单元素在首次加载时显示的预设值。例如，文本框和单选框的默认值可以是一段文本或者某个选项。

HTML5 新增了 placeholder 属性，可以在文本框中设置默认占位符，但在本文中我们将重点介绍 value 属性。

设置默认值

要设置表单元素的默认值，可以使用 value 属性。例如，下面的代码片段将一个文本框的默认值设置为 "John Doe"。

<input type="text" name="username" value="John Doe">

对于单选框和复选框，value 属性同样适用。例如，下面的代码片段将一个单选框的默认值设置为 "male"。

<input type="radio" name="gender" value="male" checked> Male
<input type="radio" name="gender" value="female"> Female

在这个例子中，checked 属性指定了默认选项。这表示男性选项在首次加载时将被勾选。

清除默认值

如果表单元素需要清除默认值，可以使用 JavaScript。例如，在以下示例中，我们使用 defaultValue 属性将文本框的默认值重置为 "John Smith"。

<input type="text" name="username" value="John Doe" id="myInput">
<button onclick="resetInput()">Reset Input</button>

<script>
function resetInput() {
  document.getElementById("myInput").defaultValue = "John Smith";
}
</script>

总结

在 HTML 表单中，可以通过设置 value 属性为表单元素设置默认值。该属性对于单选框和复选框同样适用。如果需要清除默认值，可以使用 JavaScript 中的 defaultValue 属性。