设置HTML元素的默认值是网页开发中的一项基础技能，它可以帮助我们构建更加用户友好的表单和交互界面，想象一下，当你打开一个表单时，所有的输入框都已经预填好了信息，这无疑会提升用户体验，如何给HTML元素设置默认值呢？就让我们一起这个简单却实用的技巧。

文本框（input type="text"）

对于文本框，设置默认值非常简单，你只需要在<input>标签中加入value属性，并赋予一个值即可，你想在用户打开表单时，文本框已经预填了“请输入你的名字”，你可以这样写：

<input type="text" name="name" value="请输入你的名字">

密码框（input type="password"）

密码框的默认值设置方法与文本框相同，也是通过value属性来实现，不过出于安全考虑，密码框的默认值在页面加载时不会显示出来，用户需要手动输入密码。

<input type="password" name="password" value="默认密码">

单选按钮（input type="radio"）

对于单选按钮，设置默认值稍微复杂一些，因为我们需要确保只有一个按钮被选中，这通常是通过设置checked属性来实现的，有三个单选按钮，你想默认选中第二个，可以这样写：

<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female" checked> 女
<input type="radio" name="gender" value="other"> 其他

复选框（input type="checkbox"）

复选框的默认值设置与单选按钮类似，也是通过checked属性来实现，如果你想让复选框在页面加载时就已经被选中，只需要在<input>标签中加上checked即可。

<input type="checkbox" name="terms" value="agree" checked> 我同意服务条款

下拉菜单（select）

对于下拉菜单，设置默认值需要在<option>标签中使用selected属性，这样，当页面加载时，带有selected属性的选项就会被选中。

<select name="country">
  <option value="china">中国</option>
  <option value="usa" selected>美国</option>
  <option value="uk">英国</option>
</select>

多选下拉菜单（select multiple）

多选下拉菜单的默认值设置与单选下拉菜单类似，也是通过selected属性来实现，不同的是，多选下拉菜单可以同时选中多个选项。

<select name="fruits" multiple>
  <option value="apple">苹果</option>
  <option value="banana" selected>香蕉</option>
  <option value="orange" selected>橙子</option>
</select>

文本域（textarea）

文本域的默认值设置稍微有些不同，因为它涉及到多行文本，你需要在<textarea>标签中直接写入默认文本。

<textarea name="message" rows="4" cols="50">
这是默认的文本内容，用户可以在这里输入他们想要的信息。
</textarea>

按钮（button）

对于按钮，如果你想设置一个默认行为，比如点击按钮时自动提交表单，你可以使用type属性，并将其值设置为submit。

<form action="/submit" method="post">
  <input type="text" name="username">
  <button type="submit">提交</button>
</form>

隐藏字段（input type="hidden"）

隐藏字段通常用于存储那些用户不直接看到，但需要在表单提交时发送的数据，设置隐藏字段的默认值同样简单，只需要在<input>标签中使用value属性。

<input type="hidden" name="token" value="12345">

通过上述方法，你可以为各种HTML元素设置默认值，从而提升用户体验和页面的交互性，这些技巧虽然简单，但在实际开发中却非常实用，它们，可以让你的网页设计更加专业和高效。