JS DOM编程笔记 - 原生表单（二四）

今天我们来学习 JavaScript 表单 API：访问表单、获取元素的值、验证表单数据和提交表单。

基础表单

在 HTML 中创建表单，使用 <form> 元素：

<form action="/signup" method="post" id="signup">
</form>

<form> 元素有两个重要的属性：action 和 method。

• action 指定处理表单提交的 URL。

• method 指定用于提交表单的 HTTP 方法。是 post 或 get。

一般，当我们要从服务器获取数据时使用get方法，当想要修改服务器上的某些内容时使用post方法。

JavaScript 使用 HTMLFormElement 对象来表示表单。 HTMLFormElement 也具有action、method对应于 HTML 的属性。

HTMLFormElement 元素还提供了以下有用的方法：

• submit() – 提交表单
• reset() – 重置表单

form API

我们可以使用getElementById()方法来查找 <form> 元素

const form = document.getElementById('signup');

一个HTML页面可能有多个表单，document.forms 属性返回页面上的表单集合 (HTMLFormControlsCollection)：

document.forms

下面，访问页面上第一个表单元素

document.forms[0]

提交表单

一般表单有一个提交按钮。点击提交，浏览器会将表单数据发送到服务器。要创建提交按钮，我们使用类型为submit 的 <input> 或 <button> 元素：

<input type="submit" value="提交">

或者