HTML 如何为输入框设置默认值

在本文中，我们将介绍如何在HTML中为输入框设置默认值。

阅读更多：HTML 教程

1. 使用value属性

HTML的input元素有一个value属性，可以用来设置输入框的默认值。我们可以在输入框的标签中添加value属性，并给它赋一个默认值。

<input type="text" value="默认值">

上面的例子中，将会在输入框中显示”默认值”这个默认文本。

2. 使用placeholder属性

除了使用value属性，我们还可以使用placeholder属性来设置输入框的默认文本。

<input type="text" placeholder="默认文本">

上面的例子中，在输入框中会显示一个灰色的文本”默认文本”，一旦用户在输入框中开始输入，该文本将会自动消失。

3. 设置默认选中的radio按钮

如果我们有一组radio按钮，并且想要设置其中一个按钮作为默认选中状态，可以使用checked属性来实现。

<input type="radio" name="radioGroup" value="1" checked>选项1
<input type="radio" name="radioGroup" value="2">选项2
<input type="radio" name="radioGroup" value="3">选项3

上面的例子中，选项1会被默认选中，这是因为它的checked属性被设置为true。

4. 默认选择下拉框中的选项

如果我们有一个下拉框，并且想要设置默认选中的选项，可以将该选项的selected属性设置为true。

<select>
  <option value="1">选项1</option>
  <option value="2" selected>选项2</option>
  <option value="3">选项3</option>
</select>

上面的例子中，选项2会被默认选中，因为它的selected属性被设置为true。

5. 设置多行文本框的默认文本

对于多行文本框，我们可以使用textarea标签来创建。默认文本可以直接放置在textarea标签之间。

<textarea>默认文本</textarea>

上面的例子中，多行文本框中将会显示”默认文本”这个默认文本。

6. 使用JavaScript动态设置默认值

除了以上的方法，我们还可以使用JavaScript来动态设置输入框的默认值。通过JavaScript可以根据不同的条件来设置不同的默认值，增加页面的交互性和灵活性。

<input type="text" id="myInput">

<script>
  document.getElementById("myInput").value = "动态设置的默认值";
</script>

上面的例子中，通过JavaScript代码动态设置了输入框的默认值为”动态设置的默认值”。

总结

本文介绍了在HTML中设置输入框默认值的几种方法：使用value属性、placeholder属性、checked属性、selected属性、直接放置默认文本、以及使用JavaScript动态设置。根据不同的需求和场景，我们可以选择适合的方法来设置输入框的默认值。