使用 html 的 value 和 text 属性可预填 input 和 textarea 内容；2. 通过 javaScript 动态设置元素 value 实现运行时填充；3. 结合模板引擎或 前端 框架进行数据绑定；4. 利用 reset()或赋空值清空或重置表单。
在 HTML 中填充表单元素（如 input 和 textarea）的内容，可以通过多种方式实现，包括使用 HTML 属性、javascript操作以及后端数据绑定。以下是常见且实用的方法。
1. 使用 HTML 的 value 和 text 属性
对于 input 元素，可以直接设置 value 属性来预填内容：
zuojiankuohaophpcninput type=”text” name=”username” value=” 默认用户名 ”>
对于 textarea，内容应写在开始和结束标签之间：
<textarea name=”message”> 这里是默认文本内容 </textarea>
这是最基础的方式，适合静态内容或服务端渲染时直接输出值。
立即学习 “ 前端免费学习笔记（深入）”；
2. 使用 JavaScript 动态填充
如果需要在页面加载后或用户操作时动态设置内容，可以使用 JavaScript。
示例：通过 ID 选择元素并设置值
// 填充 input
document.getElementById(‘myInput’).value = ‘ 新的输入值 ’;
// 填充 textarea
document.getElementById(‘myTextarea’).value = ‘ 多行文本内容 ’;
也可以使用 querySelector 或其他 dom 方法选择元素。
常见场景包括：表单重置、自动补全、从 API 获取数据后填充等。
3. 利用数据属性或模板引擎填充（服务端 / 框架场景）
在实际项目中，常通过后端语言（如 php、node.js、django 等）或 前端 框架（react、vue）将数据注入表单。
例如，在使用模板时：
<input type=”email” value=”{{user.email}}”>
<textarea>{{post.content}}</textarea>
或者在 Vue 中：
<input v-model=”formData.name”>
<textarea v-model=”formData.desc”></textarea>
数据变化时，表单内容会自动同步。
4. 表单重置与清空技巧
除了“填充”，有时也需要恢复或清空内容。
清空所有输入：
document.getElementById(‘myInput’).value = ”;
document.getElementById(‘myTextarea’).value = ”;
重置整个表单到初始状态：
document.getElementById(‘myForm’).reset();
注意：reset() 会恢复到页面加载时的初始值，因此前提是初始 value 已正确设置。
基本上就这些常用方法。根据场景选择合适的方式：静态内容用 HTML 属性，动态内容用 JavaScript，复杂应用结合框架处理。关键是确保元素能被正确选中并赋值。
