HTML表单元素维护自身状态的含义是什么？请提供示例

什么是“维护自身状态”？ #

HTML中的<input>、<textarea>、<select>这类表单元素，天生自带状态管理能力——它们会自行存储用户的输入或选择内容，用户操作时自动更新内部保存的状态值，完全不需要额外代码来追踪或存储这些数据。简单说：你在输入框里打字，输入框自己就记住了你打的内容；选了下拉框的选项，下拉框自己就知道你选了啥。

示例1：<input> 文本输入框 #

普通文本输入框是最直观的例子，用户输入的内容直接存在元素内部：

<label for="username">用户名：</label>
<input type="text" id="username" placeholder="输入你的用户名">

当你输入“Alice”后，这个值就保存在<input>的内部状态里。打开浏览器控制台，执行document.getElementById('username').value，就能直接获取到这个值——这就是元素自己维护的状态。

示例2：<textarea> 多行文本框 #

多行文本框会完整保存用户输入的所有内容，包括换行：

<label for="note">笔记：</label>
<textarea id="note" rows="3" cols="40" placeholder="写下你的笔记"></textarea>

你输入几行内容（比如“今天学习HTML表单\n状态维护很简单”），<textarea>会原样记住这些内容。通过document.getElementById('note').value就能拿到包含换行的完整文本。

示例3：<select> 下拉选择框 #

下拉框的选中状态同样由自身维护，用户切换选项时，内部状态会同步更新：

<label for="hobby">兴趣爱好：</label>
<select id="hobby">
  <option value="reading">阅读</option>
  <option value="coding">编程</option>
  <option value="sports">运动</option>
</select>

当你选择“编程”后，<select>的内部状态就记录了选中项的value。执行document.getElementById('hobby').value会返回"coding"，document.getElementById('hobby').selectedIndex则会返回选中项的索引（这里是1）。

额外说明 #

这种原生表单元素自行维护状态的模式，就是前端框架中“非受控组件”的原型。而像React的“受控组件”，则是把表单的状态从元素内部转移到组件的状态变量中，由框架统一管理——但原生HTML表单默认都是自己管状态的。

内容的提问来源于stack exchange，提问作者Sugarpearl