NEW ARTICLE
kotlin 「if」文を使用する
  1. HOME
  2. javascript
  3. javascript HTMLFormControlsCollectionを使用してform内の要素を取得する

javascript HTMLFormControlsCollectionを使用してform内の要素を取得する

javascript HTMLFormControlsCollectionを使用してform内の要素を取得する

javascriptで、HTMLFormControlsCollectionを使用してform内の要素を取得するサンプルコードを記述してます。

目次

環境

  • OS windows11 pro 64bit
  • Apache 2.4.43
  • ブラウザ chrome 106.0.5249.103
Javascript サンプル集はこちら

HTMLFormControlsCollection

「HTMLFormControlsCollection」は「form」内にある以下の要素を取得することができます。

  • button
  • fieldset
  • input
  • object
  • output
  • select
  • textarea

実際に取得してみます。

<form id="frm">
  <fieldset>
    <input type="text" id="one" name="hoge" />
  </fieldset>
  <div>
    <p><input type="checkbox" id="two" name="foo" />aaa</p>
  </div>
  <button>送信</button>
</form>

<script>

const form = document.getElementById('frm')

for (const v of form.elements) {
  console.log(v);
};

</script>

実行結果をみると対象の要素が取得されていることが確認できます。

インデックス番号を指定

各要素はインデックス番号を指定して取得することができます。

<form id="frm">
  <fieldset>
    <input type="text" id="one" name="hoge" />
  </fieldset>
  <div>
    <p><input type="checkbox" id="two" name="foo" />aaa</p>
  </div>
  <button>送信</button>
</form>

<script>

const form = document.getElementById('frm')

console.log(form.elements[0]);
console.log(form.elements[1]);
console.log(form.elements[2]);
console.log(form.elements[3]);

</script>

実行結果

name名で取得

name名で取得することも可能です。

<form id="frm">
  <fieldset>
    <input type="text" id="one" name="hoge" />
  </fieldset>
  <div>
    <p><input type="checkbox" id="two" name="foo" />aaa</p>
  </div>
  <button>送信</button>
</form>

<script>

const form = document.getElementById('frm')

console.log(form.elements.hoge);
console.log(form.elements.foo);

</script>

実行結果

要素の数を取得

要素の数は「length」で取得できます。

<form id="frm">
  <fieldset>
    <input type="text" id="one" name="hoge" />
  </fieldset>
  <div>
    <p><input type="checkbox" id="two" name="foo" />aaa</p>
  </div>
  <button>送信</button>
</form>

<script>

const form = document.getElementById('frm')

console.log(form.elements.length);
// 4

</script>

サンプルコード

以下は、
「取得」ボタンをクリックすると、form配下にある要素を取得して「type」属性を表示する
サンプルコードとなります。

※cssには「bootstrap material」を使用してます。関数はアロー関数で記述してます。

アロー関数の使い方
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>mebeeサンプル</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<script>

  const hoge = () => {

    const form = document.getElementById('frm')

    disp(form.elements, "fuga");

  }

  //フロントに表示する関数
  const disp = (arr, id) => {

    let text = [];

    Array.from(arr).forEach((v) => text.push('<li class="list-group-item">' + v.type + '</li>'))

    document.getElementById(id).innerHTML = text.join('');

  }

  window.onload = () => {

    btn.onclick = () => { hoge() };

  }

</script>

<body>
  <div class="container mx-auto my-56 w-64 px-4">

    <div id="sample" class="flex flex-col justify-center">

      <form id="frm" class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
        <div class="flex flex-wrap -mx-3 mb-6">
          <div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
            <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-first-name">
              First Name
            </label>
            <input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-red-500 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white" id="grid-first-name" type="text" placeholder="Jane">
            <p class="text-red-500 text-xs italic">Please fill out this field.</p>
          </div>
          <div class="w-full md:w-1/2 px-3">
            <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-last-name">
              Last Name
            </label>
            <input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" id="grid-last-name" type="text" placeholder="Doe">
          </div>
        </div>
        <div class="flex flex-wrap -mx-3 mb-6">
          <div class="w-full px-3">
            <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-password">
              Password
            </label>
            <input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" id="grid-password" type="password" placeholder="******************">
            <p class="text-gray-600 text-xs italic">Make it as long and as crazy as you'd like</p>
          </div>
        </div>
        <div class="flex flex-wrap -mx-3 mb-2">
          <div class="w-full md:w-1/3 px-3 mb-6 md:mb-0">
            <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-city">
              City
            </label>
            <input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" id="grid-city" type="text" placeholder="Albuquerque">
          </div>
          <div class="w-full md:w-1/3 px-3 mb-6 md:mb-0">
            <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-state">
              State
            </label>
            <div class="relative">
              <select class="block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500" id="grid-state">
                <option>New Mexico</option>
                <option>Missouri</option>
                <option>Texas</option>
              </select>
              <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
                <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
              </div>
            </div>
          </div>
          <div class="w-full md:w-1/3 px-3 mb-6 md:mb-0">
            <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-zip">
              Zip
            </label>
            <input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" id="grid-zip" type="text" placeholder="90210">
          </div>
        </div>
      </form>

      <h1 class="font-semibold text-green-500 text-lg mr-auto">実行結果</h1>
      <ul id="fuga" class="font-semibold text-lg mr-auto"></ul>

      <button id="btn"
        class="mb-2 md:mb-0 bg-transparent hover:bg-green-500 text-green-700 font-semibold hover:text-white py-2 px-4 border border-green-500 hover:border-transparent rounded">
        実行
      </button>

    </div>

  </div>
</body>

</html>

取得されていることが確認できます。