このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
Document: forms プロパティ
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2018年6月以降、すべてのブラウザーで利用可能です。
forms は Document インターフェイスの読み取り専用プロパティで、文書内に含まれるすべての <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>
仕様書
| 仕様書 |
|---|
| HTML # dom-document-forms-dev |
ブラウザーの互換性
ブラウザー互換性一覧表を表示するには、JavaScript を有効にしてください。
関連情報
- HTML フォーム
<form>およびHTMLFormElementインターフェイス