JavaScript Formオブジェクト

JavaScriptにおいて、HTMLフォームはFormオブジェクトとして表わされる。HTML文書の各<form>タグに対してFormオブジェクトが作られる。

Elementオブジェクトのプロパティ、メソッド及びイベントもサポートする。

目次

  1. 1 window.document
    1. 1.1 forms
  3. 2 プロパティ
    1. 2.1 acceptCharset
    2. 2.2 action
    3. 2.3 autocomplete
    4. 2.4 elements
    5. 2.5 enctype
    6. 2.6 length
    7. 2.7 method
    8. 2.8 name
    9. 2.9 noValidate
    10. 2.10 target
    11. 2.11 rel
  5. 3 メソッド
    1. 3.1 checkValidity
    2. 3.2 reset
    3. 3.3 submit
  7. 4 イベント
    1. 4.1 onsubmit
    2. 4.2 onreset

実装インタフェース

form オブジェクトは以下に示すインタフェースを実装している。

document.forms

form要素は window.document オブジェクトの forms プロパティから取得できる。forms プロパティは、HTML文書に含まれる全てのform要素のコレクションである。

<form>
  <input type="text" name="qty">
</form>
<form>
  <input type="text" name="mail">
</form>
<script>
  for (form in document.forms) {
    // do something
  }
</script>

個別のform要素は、0から始まる添字で指定することができる。

<form>
  <input type="text" name="qty">
</form>
<form>
  <input type="text" name="mail">
</form>
<script>
  let form1 = document.forms[0]
  let form2 = document.forms[1]
</script>

form要素にname属性を指定していれば、添字を名前で指定することができる。いわゆる連想配列である。

<form name="cart">
  <input type="text" name="qty">
</form>
<form name="contact">
  <input type="text" name="mail">
</form>
<script>
  let cart = document.forms['cart']
  let contact = document.forms['contact']
</script>

document.getElementById

form要素にid属性を指定していれば、window.document オブジェクトの getElementById メソッドでformオブジェクトを取得することができる。

<form id="cart">
  <input type="text">
</form>
<script>
  let form = document.getElementById('cart')
</script>

acceptCharset

form要素のaccept-charset属性の値

let acceptCharset = window.document.forms[0].acceptCharset

action

form要素のaction属性の値

<form action="https://segakuin.com/php/get.php">
  <input type="text">
</form>
<script>
  let action = window.document.forms[0].action
</script>

autocomplete

form要素のautocomplete属性の値

<form autocomplete="on">
  <input type="text">
</form>
<script>
  let autocomplete = document.forms[0].autocomplete
</script>

elements[]

フォームの全要素

let element = document.forms[0].elements[0]
for (let element in document.forms[0].elements) {
  // do something
}

enctype

form要素のenctype属性の値

let enctype = document.forms[0].enctype

length

フォームの要素数

let length = document.forms[0].length

method

form要素のmethod属性の値

let method = document.forms[0].method

name

form要素のname属性の値

let name = document.forms[0].name

noValidate

form要素のnoValidate属性の値

<form novalidate>
  <label for="pw">Password</label>
  <input type="password" id="pw" minlength="8" maxlength="16">
</form>
<script>
  if (document.forms[0].noValidate) {
    /* do something */
  }
</script>

target

form要素のtarget属性の値

let target = document.forms[0].target

rel

form要素のrel属性の値

let rel = document.forms[0].rel

checkValidity

checkValidity()メソッドが呼び出された場合、ユーザーエージェントはフォーム要素の制約を静的に検証し、制約検証の結果が肯定的であれば真を、否定的な結果を返した場合は偽を返す。

reset

フォームをリセットする。

var form = document.forms['cart'];
form.submit();

submit

フォームをサブミットする。

Formオブジェクトの使用例を示す。

var form = document.forms['cart'];
form.action = "/foo/addcart";
form.submit();

onreset

リセットボタンがクリックされたときに呼び出される関数を指定する。実際にリセット処理が実施される前に、この関数が呼び出される。

<form id="form-onreset">
  <input type="text">
  <input type="reset">
</form>
<script>
  formOnreset = document.getElementById("form-onreset");
  formOnreset.onreset = function() {
    alert("リセットボタンが押されました。")
  }
</script>

onsubmit

サブミットボタンがクリックされた

参考文献

Web Hypertext Application Technology Working Group 2022. Forms. HTML Living Standard