HTML | DOM 表单对象

在 HTML 中，我们可以使用<form>元素来创建表单。表单可以用来接受输入，例如用户填写基本信息或向服务器发送数据。DOM 表单对象可用于操作 HTML 表单中的元素，如获取表单数据、验证表单中输入的数据等。

获取表单对象

使用document.forms方法可以获取当前 HTML 页面中所有的表单对象。我们可以通过索引或表单名来获取指定表单对象。

// 通过索引获取表单
var form = document.forms[0];

// 通过表单名获取表单
var form = document.forms['formName'];

获取表单元素

使用表单对象的elements属性可以获取表单中的所有元素。我们可以通过元素的 ID 或索引来获取指定的表单元素。

// 通过元素 ID 获取表单元素
var elem = form.elements['username'];

// 通过索引获取表单元素
var elem = form.elements[0];

获取和设置元素值

可以通过表单元素的value属性来获取和设置表单元素的值。对于单选按钮和多选框，value属性表示选中状态。

// 获取表单元素的值
var value = elem.value;

// 设置表单元素的值
elem.value = 'new value';

操作单选按钮和多选框

对于单选按钮和多选框，我们可以通过表单元素的checked属性来判断是否被选中，或者选中它。

// 判断单选按钮或多选框是否被选中
var isChecked = elem.checked;

// 选中单选按钮或多选框
elem.checked = true;

提交表单数据

"提交表单" 意味着将表单数据发送到服务器。可以通过表单对象的submit()方法来提交表单。也可以直接对表单元素的值进行操作，然后使用 AJAX 等技术将数据发送到服务器。

// 使用 submit 方法提交表单
form.submit();

// 使用 AJAX 技术提交表单数据
var xhr = new XMLHttpRequest();
xhr.open('POST', '/server-url');
xhr.send(new FormData(form));

验证表单输入

可以通过表单元素的required属性和pattern属性来验证表单输入。若值未填或不符合指定的模式，表单元素会出现验证提示。

<!-- 验证必填元素 -->
<input type="text" name="username" required>

<!-- 使用正则表达式验证输入格式 -->
<input type="text" name="mobile" pattern="\d{11}" placeholder="请输入11位手机号码">

以上是一些关于 HTML | DOM 表单对象的常见操作。在实际开发中，组合使用这些技术可以实现更丰富的表单功能。