html input输入框 默认值样式

### 设置 HTML `input` 输入框默认值样式

为了设置 HTML `input` 输入框的默认值及其样式，可以采用多种方法来实现这一目标。下面介绍几种常见的方式。

#### 使用 CSS 和 JavaScript 结合处理占位符文本

当希望给输入框提供提示信息作为默认显示内容时，可以通过结合CSS和JavaScript的方法，在用户未输入任何内容前展示特定文字，并在获取焦点或有实际输入后隐藏这些提示：

<input type="text" id="searchBox" placeholder="请输入关键字进行搜索"
       onfocus="if (this.value === '请输入关键字进行搜索') {this.value = '';}"
       onblur="if (this.value === '') {this.value = '请输入关键字进行搜索';}" />
<style>
    /* 定义初始状态下带有灰色字体样式的提示 */
    #searchBox {
        color: gray;
    }
</style>
<script>
// 当页面加载完成之后立即触发一次失去焦点事件，
// 这样可以在页面打开的时候就显示出预设的文字。
document.getElementById('searchBox').onload = function() {
    document.getElementById('searchBox').blur();
};
</script>

上述代码片段展示了如何通过简单的HTML属性配合少量脚本来创建具有自定义提示功能的文本框[^3]。

#### 利用现代浏览器支持的 `placeholder` 属性

对于较新的Web开发项目而言，可以直接利用HTML5引入的`placeholder`特性，它允许开发者轻松指定一个简短的帮助消息或示例值，该值会在控件为空白时不显眼地呈现出来直到用户开始编辑为止：

<!-- 现代做法 -->
<input type="email" name="user_email" placeholder="example@example.com">

这种方法不仅简洁明了而且兼容性良好，适用于大多数主流浏览器环境下的应用开发场景中[^2]。

#### 表单框架中的配置选项

如果是在基于React或其他前端库/框架构建的应用程序内工作，则可能更倾向于使用相应组件库所提供的API来进行更加语义化的操作。例如，在Ant Design（antd）这样的UI设计系统里，能够借助于表单项装饰器(`form.getFieldDecorator`)并为其传递`initialValue`参数的方式来快速设定初始状态的数据绑定关系以及视觉表现形式:

<Form.Item label="Username">
  {getFieldDecorator('username', {
      rules: [{ required: true, message: 'Please input your username!' }],
      initialValue: "default_username", // 设定默认用户名
  })(
     <Input />,
 )}
</Form.Item>

这段 React JSX 语法的例子说明了怎样在一个受控组件模式下初始化输入域的内容同时保持良好的用户体验[^1]。