フォームのプロパティとメソッド

フォームや<input>のようなコントロール要素は、多くの特別なプロパティとイベントを持っています。

それらを学ぶことで、フォームの操作がより便利になります。

ナビゲーション：フォームと要素

ドキュメントフォームは、特別なコレクションdocument.formsのメンバーです。

これは、いわゆる「名前付きコレクション」です：名前付きで、かつ順序付けられています。フォームを取得するために、ドキュメント内の名前または番号を使用できます。

          document.forms.my; // the form with name="my"
document.forms[0]; // the first form in the document
        

フォームがある場合、任意の要素は名前付きコレクションform.elementsで利用可能です。

例えば

<form name="my">
  <input name="one" value="1">
  <input name="two" value="2">
</form>

<script>
  // get the form
  let form = document.forms.my; // <form name="my"> element

  // get the element
  let elem = form.elements.one; // <input name="one"> element

  alert(elem.value); // 1
</script>

同じ名前を持つ複数の要素が存在する可能性があります。これは、ラジオボタンとチェックボックスで一般的です。

その場合、form.elements[name]はコレクションです。例えば

<form>
  <input type="radio" name="age" value="10">
  <input type="radio" name="age" value="20">
</form>

<script>
let form = document.forms[0];

let ageElems = form.elements.age;

alert(ageElems[0]); // [object HTMLInputElement]
</script>

これらのナビゲーションプロパティは、タグの構造に依存しません。フォーム内のどの深さにあっても、すべてのコントロール要素はform.elementsで利用可能です。

フォーム内には、1つ以上の<fieldset>要素がある場合があります。それらにも、内部のフォームコントロールをリストしたelementsプロパティがあります。

例えば

<body>
  <form id="form">
    <fieldset name="userFields">
      <legend>info</legend>
      <input name="login" type="text">
    </fieldset>
  </form>

  <script>
    alert(form.elements.login); // <input name="login">

    let fieldset = form.elements.userFields;
    alert(fieldset); // HTMLFieldSetElement

    // we can get the input by name both from the form and from the fieldset
    alert(fieldset.elements.login == form.elements.login); // true
  </script>
</body>

より短い表記法があります：要素にform[index/name]としてアクセスできます。

言い換えると、form.elements.loginの代わりにform.loginと書くことができます。

これも機能しますが、小さな問題があります：要素にアクセスしてから、そのnameを変更した場合、(新しい名前だけでなく)古い名前でも利用可能です。

例で簡単に確認できます

<form id="form">
  <input name="login">
</form>

<script>
  alert(form.elements.login == form.login); // true, the same <input>

  form.login.name = "username"; // change the name of the input

  // form.elements updated the name:
  alert(form.elements.login); // undefined
  alert(form.elements.username); // input

  // form allows both names: the new one and the old one
  alert(form.username == form.login); // true
</script>

フォーム要素の名前を変更することはめったにないため、通常は問題になりません。

逆参照：element.form

任意の要素に対して、フォームはelement.formとして利用可能です。したがって、フォームはすべての要素を参照し、要素はフォームを参照します。

これがその図です

例えば

<form id="form">
  <input type="text" name="login">
</form>

<script>
  // form -> element
  let login = form.login;

  // element -> form
  alert(login.form); // HTMLFormElement
</script>

フォーム要素

フォームコントロールについて説明しましょう。

input と textarea

チェックボックスとラジオボタンの場合、値にはinput.value (文字列) または input.checked (ブール値) としてアクセスできます。

このようになります

          input.value = "New value";
textarea.value = "New text";

input.checked = true; // for a checkbox or radio button
        

<textarea>...</textarea>がネストされたHTMLとして値を保持している場合でも、それにアクセスするためにtextarea.innerHTMLを使用するべきではないことに注意してください。

現在の値ではなく、ページに最初にあったHTMLのみを保存します。

select と option

<select>要素には3つの重要なプロパティがあります

select.options – <option>サブ要素のコレクション
select.value – 現在選択されている<option>の値
select.selectedIndex – 現在選択されている<option>の番号

これらは、<select>に値を設定する3つの異なる方法を提供します

対応する<option>要素 (例えば、select.optionsの中から) を見つけ、そのoption.selectedをtrueに設定します。
新しい値がわかっている場合：select.valueを新しい値に設定します。
新しいオプション番号がわかっている場合：select.selectedIndexをその番号に設定します。

これが3つのすべての方法の例です

<select id="select">
  <option value="apple">Apple</option>
  <option value="pear">Pear</option>
  <option value="banana">Banana</option>
</select>

<script>
  // all three lines do the same thing
  select.options[2].selected = true;
  select.selectedIndex = 2;
  select.value = 'banana';
  // please note: options start from zero, so index 2 means the 3rd option.
</script>

他のほとんどのコントロールとは異なり、<select>はmultiple属性がある場合、一度に複数のオプションを選択できます。ただし、この属性はめったに使用されません。

複数の選択された値の場合、値の設定の最初の方法を使用します：<option>サブ要素からselectedプロパティを追加/削除します。

複数選択から選択された値を取得する方法の例を次に示します

<select id="select" multiple>
  <option value="blues" selected>Blues</option>
  <option value="rock" selected>Rock</option>
  <option value="classic">Classic</option>
</select>

<script>
  // get all selected values from multi-select
  let selected = Array.from(select.options)
    .filter(option => option.selected)
    .map(option => option.value);

  alert(selected); // blues,rock
</script>

<select>要素の完全な仕様は、仕様 https://html.spec.whatwg.org/multipage/forms.html#the-select-elementで利用できます。

new Option

仕様には、<option>要素を作成するための便利な短い構文があります。

option = new Option(text, value, defaultSelected, selected);

この構文はオプションです。document.createElement('option')を使用して属性を手動で設定することもできます。それでも、より短くなる可能性があるため、パラメータは次のとおりです

text – オプション内のテキスト
value – オプションの値
defaultSelected – trueの場合、selected HTML属性が作成されます
selected – trueの場合、オプションが選択されます。

defaultSelectedとselectedの違いは、defaultSelectedがHTML属性を設定する（option.getAttribute('selected')を使用して取得できる）のに対し、selectedはオプションが選択されているかどうかを設定することです。

実際には、通常は両方の値をtrueまたはfalseに設定する必要があります。(または、単にそれらを省略します。両方ともデフォルトでfalseになります。)

例えば、これが新しい「未選択」オプションです

          let option = new Option("Text", "value");
// creates <option value="value">Text</option>
        

同じオプションですが、選択されています

let option = new Option("Text", "value", true, true);

Option要素にはプロパティがあります

option.selected: オプションが選択されているかどうか。
option.index: その<select>内の他のオプションの中でのオプションの数。
option.text: オプションのテキストコンテンツ（訪問者に見える）。

参考資料

仕様：https://html.spec.whatwg.org/multipage/forms.html。

まとめ

フォームナビゲーション

document.forms: フォームはdocument.forms[name/index]として利用可能です。
form.elements: フォーム要素はform.elements[name/index]として利用可能で、またはform[name/index]のみを使用することもできます。elementsプロパティは<fieldset>でも機能します。
element.form: 要素はformプロパティでフォームを参照します。

値はinput.value、textarea.value、select.valueなどとして利用可能です（チェックボックスとラジオボタンの場合は、input.checkedを使用して値が選択されているかどうかを判断します）。

<select>の場合、インデックスselect.selectedIndexまたはオプションコレクションselect.optionsを通じて値を取得することもできます。

これらはフォームの操作を開始するための基本です。チュートリアルでさらに多くの例を紹介します。

次の章では、任意の要素で発生する可能性のあるfocusとblurのイベントを取り上げますが、主にフォームで処理されます。