Document: forms プロパティ

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

formsDocument インターフェイスの読み取り専用プロパティで、文書内に含まれるすべての <form> を列挙した HTMLCollection を返します。

メモ: 同様に、HTMLFormElement.elements プロパティを使用すると、フォームコンポーネントのユーザー入力要素のリストにアクセスすることができます。

文書のすべてのフォームを列挙する HTMLCollection オブジェクトです。このコレクションのそれぞれの項目は、単一の <form> 要素を表す HTMLFormElement です。

文書にフォームがない場合、返されるコレクションは空で、長さはゼロになります。

フォーム情報の取得

html
<!doctype html>
<html lang="en">
  <head>
    <title>document.forms example</title>
  </head>

  <body>
    <form id="robby">
      <input
        type="button"
        onclick="alert(document.forms[0].id);"
        value="robby's form" />
    </form>

    <form id="dave">
      <input
        type="button"
        onclick="alert(document.forms[1].id);"
        value="dave's form" />
    </form>

    <form id="paul">
      <input
        type="button"
        onclick="alert(document.forms[2].id);"
        value="paul's form" />
    </form>
  </body>
</html>

フォーム内要素の取得

js
const selectForm = document.forms[index];
const selectFormElement = document.forms[index].elements[index];

名前付きフォームへのアクセス

html
<!doctype html>
<html lang="en">
  <head>
    <title>document.forms example</title>
  </head>

  <body>
    <form name="login">
      <input name="email" type="email" />
      <input name="password" type="password" />
      <button type="submit">Log in</button>
    </form>

    <script>
      const loginForm = document.forms.login; // Or document.forms['login']
      loginForm.elements.email.placeholder = "test@example.com";
      loginForm.elements.password.placeholder = "password";
    </script>
  </body>
</html>

仕様書

Specification
HTML
# dom-document-forms-dev

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
forms

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
Has more compatibility info.

関連情報