HTMLFormElement

基线广泛可用

此功能已得到良好确立，并在许多设备和浏览器版本中运行。它自 2015 年 7 月.

报告反馈

实例属性

**HTMLFormElement** 接口表示 DOM 中的 <form> 元素。它允许访问（在某些情况下修改）表单的各个方面，以及访问其组件元素。

此接口还继承了其父级 HTMLElement 的属性。: HTMLFormElement.elements 只读
一个 HTMLFormControlsCollection，包含属于此表单元素的所有表单控件。: HTMLFormElement.length 只读
一个 long，反映表单中控件的数量。: HTMLFormElement.name
一个字符串，反映表单 name HTML 属性的值，包含表单的名称。: HTMLFormElement.method
一个字符串，反映表单 method HTML 属性的值，指示用于提交表单的 HTTP 方法。只能设置指定的: HTMLFormElement.target
一个字符串，反映表单 target HTML 属性的值，指示在何处显示从提交表单: HTMLFormElement.action
一个字符串，反映表单 action HTML 属性的值，包含处理表单提交信息: HTMLFormElement.encoding 或 HTMLFormElement.enctype
一个字符串，反映表单 enctype HTML 属性的值，指示用于将表单传输到服务器: HTMLFormElement.acceptCharset
一个字符串，反映表单 accept-charset HTML 属性的值，表示: HTMLFormElement.autocomplete
一个字符串，反映表单 autocomplete HTML 属性的值，指示是否: HTMLFormElement.noValidate

一个布尔值，反映表单 novalidate HTML 属性的值，指示是否

实例方法

命名输入将作为属性添加到其所有者表单实例中，并且如果它们共享相同的名称，则可以覆盖本机属性（例如，具有名为

checkValidity(): 此接口还继承了其父级 HTMLElement 的方法。
reportValidity(): 如果元素的子控件受约束验证并且满足这些约束，则返回
requestSubmit(): 如果元素的子控件满足其验证约束，则返回
reset(): 请求使用指定的提交按钮及其相应的配置提交表单。
submit(): 将表单重置为其初始状态。

事件

将表单提交到服务器。

formdata: 使用 addEventListener() 侦听这些事件，或通过将事件侦听器分配给此接口的 oneventname 属性来侦听
reset: formdata 事件在构造表示表单数据的条目列表后触发。
submit: reset 事件在重置表单时触发。

使用说明

`submit` 事件在提交表单时触发。

获取表单元素对象

要获取 HTMLFormElement 对象，可以使用带有 querySelector()

Document.forms 返回一个 HTMLFormElement: document.forms[index]
返回表单数组中指定 index 位置的表单。: document.forms[id]
返回 ID 为 id 的表单。: document.forms[name]

返回 `name` 属性值为 `name` 的表单。

访问表单的元素

您可以通过检查表单的 elements 属性来访问

您也可以使用其 `name` 属性作为 `form` 的键来获取表单的元素，但使用 `elements` 是更好的

命名元素的问题

某些名称会干扰 JavaScript 访问表单的属性和元素。

<input name="id"> 的优先级高于 <form id="…">。这意味着 form.id 将不引用表单的 id，而是引用名为 "id" 的元素。对于其他表单属性，如 <input name="action"> 或 <input name="post">，情况也是如此。
<input name="elements"> 将导致表单的 elements 集合无法访问。引用 form.elements 将指向单个元素。

为了避免因元素名称导致的此类问题

始终使用 elements 集合以避免元素名称与表单属性之间的歧义。
切勿将 "elements" 用作元素名称。

如果您不使用 JavaScript，则不会出现问题。

被视为表单控件的元素

HTMLFormElement.elements 和 HTMLFormElement.length 包含的元素如下

<button>
<fieldset>
<input>（除了 type 为 "image" 的元素，出于历史原因被省略）
<object>
<output>
<select>
<textarea>

elements 返回的列表中不包含其他元素，这使其成为处理表单时访问最重要元素的极佳方式。

示例

创建新的表单元素，修改其属性，然后提交

const f = document.createElement("form"); // Create a form
document.body.appendChild(f); // Add it to the document body
f.action = "/cgi-bin/some.cgi"; // Add action and method attributes
f.method = "POST";
f.submit(); // Call the form's submit() method

从 <form> 元素中提取信息并设置其一些属性

html

<form name="formA" action="/cgi-bin/test" method="post">
  <p>Press "Info" for form details, or "Set" to change those details.</p>
  <p>
    <button type="button" onclick="getFormInfo();">Info</button>
    <button type="button" onclick="setFormInfo(this.form);">Set</button>
    <button type="reset">Reset</button>
  </p>

  <textarea id="form-info" rows="15" cols="20"></textarea>
</form>

<script>
  function getFormInfo() {
    // Get a reference to the form via its name
    const f = document.forms["formA"];
    // The form properties we're interested in
    const properties = [
      "elements",
      "length",
      "name",
      "charset",
      "action",
      "acceptCharset",
      "action",
      "enctype",
      "method",
      "target",
    ];
    // Iterate over the properties, turning them into a string that we can display to the user
    const info = properties
      .map((property) => `${property}: ${f[property]}`)
      .join("\n");

    // Set the form's <textarea> to display the form's properties
    document.forms["formA"].elements["form-info"].value = info; // document.forms["formA"]['form-info'].value would also work
  }

  function setFormInfo(f) {
    // Argument should be a form element reference.
    f.action = "a-different-url.cgi";
    f.name = "a-different-name";
  }
</script>

将 <form> 提交到新窗口

html

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>Example new-window form submission</title>
  </head>
  <body>
    <form action="test.php" target="_blank">
      <p>
        <label>First name: <input type="text" name="firstname" /></label>
      </p>
      <p>
        <label>Last name: <input type="text" name="lastname" /></label>
      </p>
      <p>
        <label><input type="password" name="pwd" /></label>
      </p>

      <fieldset>
        <legend>Pet preference</legend>

        <p>
          <label><input type="radio" name="pet" value="cat" /> Cat</label>
        </p>
        <p>
          <label><input type="radio" name="pet" value="dog" /> Dog</label>
        </p>
      </fieldset>

      <fieldset>
        <legend>Owned vehicles</legend>

        <p>
          <label
            ><input type="checkbox" name="vehicle" value="Bike" />I have a
            bike</label
          >
        </p>
        <p>
          <label
            ><input type="checkbox" name="vehicle" value="Car" />I have a
            car</label
          >
        </p>
      </fieldset>

      <p><button>Submit</button></p>
    </form>
  </body>
</html>

规范

规范
HTML 标准 # htmlformelement

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅

实现此接口的 HTML 元素：<form>。