HTML
  • HTML
  • index
    • 概要
    • Living Standard Main
    • 次回チェックする要素
  • Form
    • フォーム共通スタイル
    • フォームバリエーション
GitBook提供
このページ内
  • フォームのグループ化
  • fieldset
  • legend
  • テスト実装
  • フォームオプション
  1. Form

フォーム共通スタイル

共通フォーム共通

前へ次回チェックする要素次へフォームバリエーション

最終更新 3 年前

フォームのグループ化

fieldset

フォームの入力項目をグループ化する

legend

fieldsetで作成したグループのタイトル表示

所感：

  • とても見やすくなる

  • ボイスオーバー読み上げで確認してみても、a11y観点でも良かった

テスト実装

GithHub Page

Code

Capture

const x = document.getElementById('input-base');
const s = document.getElementById('select-base');
const c = document.getElementById('check-base');
const r = document.getElementById('radio-base');
const v = document.querySelector('.view');

/* ===== View Result Value ===== */
// formElement.addEventListener("submit", (event) => {
// });

const show = () => {
  this.addEventListener('submit', (event) => {
    // Submitの無効
    event.preventDefault();
    // === CheckBox ===
    const arr = [];
    const elems = document.getElementsByName('checkBase');
    // チェックボックスを全部見に行く
    for (let i = 0; i < elems.length; i++) {
      // console.log(elems[i].checked); / console.log(elems[i].value);
      // チェックの入っているフォームの値だけ配列で取り出す
      if (elems[i].checked) {
        // elems[i].checked === true;
        arr.push(elems[i].value);
        // console.log(elems[i].value);
      }
    }
    // === Radio ===
    const arrR = [];
    const elemsR = document.getElementsByName('radioBase');
    for (let i = 0; i < elemsR.length; i++) {
      if (elemsR[i].checked) {
        // elemsR[i].checked === true;
        console.log(elemsR[i].value);
        arrR.push(elemsR[i].value);
      }
    }
    /* === Input / Selectの値はそのまま取得表示 === */
    if (x.value != '') {
      v.innerHTML =
        '<ul>' +
        '<li>' +
        x.value +
        '</li>' +
        '<li>' +
        s.value +
        '</li>' +
        '<li>' +
        arr.join('/') +
        '</li>' +
        '<li>' +
        arrR +
        '</li>' +
        '</ul>';
    } else {
      // HTMLのrequiredでも対応
      alert('入力欄は必須です');
    }
  });
};
<!-- html / 閉じが無いとCSS効かない => StackBlitzのバグ = 転載時は消す-->
<!DOCTYPE html/>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Form Basic Vanilla JS</title>
    <link
      rel="stylesheet"
      href="//fonts.googleapis.com/css?family=Roboto+Slab"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.3.0/milligram.min.css"
    />
    <link rel="stylesheet" type="text/css" href="css/app.css" />
  </head>

  <body>
    <div class="wrap">
      <div class="container">
        <form id="formBasic" action="#">
          <!-- .row -->
          <div class="row">
            <div class="column">
              <h1>Form Basic Vanilla JS</h1>
            </div>
          </div>
          <!-- // .row -->

          <!-- Input/Select -->
          <div class="row">
            <!-- Input Base -->
            <div class="column column-50">
              <label for="input-base">Input Base</label
              ><input type="text" id="input-base" value="inputValue" required />
            </div>

            <!-- Select Base -->
            <div class="column column-50">
              <label for="select-base">Select Base</label>
              <!-- <select name="select-base" id="select-base"> -->
              <select name="select-base" id="select-base" required>
                // option size="n" / multiple
                <option value="">選択してください</option>
                <option value="option1">option1</option>
                <option value="option2">option2</option>
                <option value="option3">option3</option>
                <option value="option4">option4</option>
                <option value="option5">option5</option>
              </select>
            </div>
          </div>
          <!-- // -->

          <div class="row">
            <!-- CheckBox -->
            <div class="column column-50">
              <fieldset id="check-base">
                <legend>Multi Select</legend>
                <label
                  ><input
                    type="checkbox"
                    name="checkBase"
                    value="ItemA"
                  />ItemA</label
                >
                <label
                  ><input
                    type="checkbox"
                    name="checkBase"
                    value="ItemB"
                    checked
                  />ItemB</label
                >
                <label
                  ><input
                    type="checkbox"
                    name="checkBase"
                    value="ItemC"
                  />ItemC</label
                >
              </fieldset>
            </div>
            <!-- Radio -->
            <div class="column column-50">
              <fieldset id="radio-base">
                <legend>Select One</legend>
                <label
                  ><input
                    type="radio"
                    name="radioBase"
                    value="RadioA"
                    checked
                    required
                  />RadioA</label
                >
                <label
                  ><input
                    type="radio"
                    name="radioBase"
                    value="RadioB"
                  />RadioB</label
                >
                <label
                  ><input
                    type="radio"
                    name="radioBase"
                    value="RadioC"
                  />RadioC</label
                >
              </fieldset>
            </div>
          </div>
          <!-- // -->

          <!-- Submit -->
          <div class="row">
            <div class="column">
              <input
                class="button button-outline submit"
                type="submit"
                onclick="show()"
              />
            </div>
          </div>
          <!-- //-->

          <!-- Result -->
          <div class="row">
            <div class="column column-20">
              <span>Submit</span>
              <h2>Result</h2>
            </div>
            <code class="column column-80 result">
              <b>View Here ↓</b>
              <div class="flex">
                <div class="res view"></div>
                <div class="res choose"></div>
              </div>
            </code>
          </div>
          <!-- // -->
        </form>
      </div>
      <!-- //.container -->
    </div>
    <!-- //.wrap -->
    <script src="app.js"></script>
  </body>
</html>

フォームオプション

  • required 入力必須項目

    • radio/checkboxは同名のnameであれば最初の1点に付ければ良い

  • checked

    • デフォルトでチェックえを付けたい要素に付ける

  • autofocus

    • ローディング後に自動でそのフォームに入力待ち状態でフォーカスさせる

  • disabled

    • 無効化

参照記事：

Form Basic Vanilla JS
Logo<FIELDSET>－HTMLタグリファレンス
LogoGitHub - BoxPistols/HTML_Form-2021: Created with StackBlitz ⚡️GitHub