在现代Web开发中，前端技术已经足够强大，可以在不依赖后端服务器的情况下，实现复杂的用户交互。本文将介绍如何使用HTML和JavaScript创建表单，捕获用户输入，以及管理表单状态。
首先，需要创建一个HTML表单。表单是收集用户输入的一种方式，它允许用户输入文本、选择选项、上传文件等。以下是一个简单的表单示例：
<form>
First name: <input id='firstname' type='text' name='firstname'/><br/>
Last name: <input id='lastname' type='text' name='lastname'/><br/>
Password: <input id='password' type='password' name='pwd'/><br><br>
<input type='radio' id='male' name='sex' value='male'/>Male<br/>
<input type='radio' id='female' name='sex' value='female'/>Female<br/><br/>
<input type='checkbox' id='bike' name='vehicle' value='Bike'/>I have a bike<br/>
<input type='checkbox' id='car' name='vehicle' value='Car'/>I have a car <br/><br/>
<input type='button' id='ok' value='OK'/><br/>
<input type='button' id='cancel' value='Cancel'/><br/><br/>
</form>
这个表单包含了文本输入框、密码输入框、单选按钮、复选框和按钮。用户可以输入他们的姓名、密码，选择性别，勾选他们拥有的交通工具，并点击按钮提交表单。
要捕获用户在表单中的输入，可以使用JavaScript为表单元素添加事件监听器。以下是如何为按钮和文本输入框添加事件监听器的示例：
document.getElementById('ok').addEventListener('click', function() {
var firstname = document.getElementById('firstname').value;
var lastname = document.getElementById('lastname').value;
var password = document.getElementById('password').value;
// 处理表单提交逻辑
});
document.getElementById('firstname').addEventListener('blur', function() {
var firstname = this.value;
// 处理失去焦点事件
});
在上面的代码中，为"OK"按钮添加了一个点击事件监听器，当用户点击按钮时，会获取表单中输入的姓名、密码等信息。同时，为"firstname"文本输入框添加了一个失去焦点事件监听器，当用户在输入框中输入内容后点击其他地方时，会获取输入框中的内容。
有时候，需要在用户离开页面后恢复表单的状态，或者在用户提交表单后清空表单。可以通过设置表单元素的属性来实现这一点。以下是如何设置和清除表单状态的示例：
// 设置表单状态
document.getElementById('firstname').value = 'Marcia';
document.getElementById('lastname').value = 'JohnDoe';
document.getElementById('female').checked = true;
document.getElementById('bike').checked = false;
document.getElementById('car').checked = true;
// 清除表单状态
document.getElementById('firstname').value = '';
document.getElementById('lastname').value = '';
document.getElementById('password').value = '';
document.getElementById('male').checked = false;
document.getElementById('female').checked = false;
document.getElementById('bike').checked = false;
document.getElementById('car').checked = false;