HTMLフォームについての深い理解

フォーム要素

HTML から HTML5 まで、フォーム関連の要素は大幅に拡張され、基本的に共通のニーズを満たすことができます。しかし、実際の仕事では、 インタラクションまたはブラウザーの互換性要件により、ネイティブ フォーム要素を拡張またはシミュレートする必要がある場合があります。ただし、その前に、さまざまなフォーム要素を明確に理解し、習得することが重要です。本文では、 フォーム要素（デフォルトではHTML5のフォーム要素）について詳しく解説します。

form

●フォームは送信イベントを自動的に処理します（送信イベントは通常、type=submitの入力またはボタン要素によってトリガーされます）

●フォームは自動的にレベルを実行します検証のために、form.novalidate を使用してネイティブ検証をオフにすると、フォームは各フォーム要素の名前に基づいて対応するユーザー入力を取得し、クエリ文字列の形式でフォーム データをフォームの最後に追加します。 action 属性に対応する URL。デフォルトのリクエスト メソッドは GET で、デフォルトのアクションは現在の URL です。

●event.target.elements はすべてのインタラクティブな要素を返します

<form novalidate>
  <input name=&#39;username&#39; required/>
  <input name=&#39;passworkd&#39; type=&#39;password&#39; required/>
  <input name=&#39;email&#39; type=&#39;email&#39;/>
  <input type=&#39;submit&#39; value=&#39;submit&#39;/>
</form>

上記のコードを実行すると、フォームを送信した後、ブラウザのアドレスに次のようなクエリ文字列が追加されることがわかります?username=tom&passworkd=123&email =test %40gmail.com

インタラクティブな要素

ユーザーと対話し、ユーザー入力を取得する必要があるフォーム要素は、インタラクティブなフォーム要素として分類されます。

その一部を以下にリストします。

●input: 一般的に使用されるタイプには、チェックボックス、電話番号、番号、電子メールなどが含まれます。

●textarea

●select

●option

フィードバック要素

簡単なフィードバック情報、ユーザーとの対話を必要としないフォーム要素は、フィードバック フォーム要素として分類されます。

以下にいくつか挙げます:

●meter

●output

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
    <input type=&#39;number&#39; value=&#39;50&#39; name=&#39;a&#39; />
    <input type=&#39;number&#39; value=&#39;10&#39; name=&#39;b&#39; />
    <output name=&#39;result&#39;>60</output>
</form>

出力の場合、計算された値をform.oninputに設定できます

グループ化された要素

は、複数のフォーム要素をグループ化するために使用されます。フォーム要素をグループ化されたフォーム要素として分類します。

その一部を以下にリストします:

●fieldset

●optgroup

<form>
  <select>
    <optgroup label=&#39;group1&#39;>
      <option>1</option>
      <option>2</option>
      <option>3</option>
    </optgroup>
    <optgroup label=&#39;group2&#39;>
      <option>4</option>
      <option>5</option>
      <option>6</option>
    </optgroup>
    <optgroup label=&#39;group3&#39;>
      <option>7</option>
      <option>8</option>
      <option>9</optioin>
    </optgroup>
  </select>
</form>

label

●対応するIDに関連付けられたインタラクティブ要素に接続するにはforを使用します

●複数のインタラクティブ要素をラップするために使用できます。 、最初の制御

●ラベルをネストすることは推奨されません

<form>
  <fieldset>
    <legend>Title</legend>
    <label for=&#39;radio&#39;>Click me</label>
    <input type=&#39;radio&#39; id=&#39;radio&#39;/>
  </fieldset>
</form>

<form>
  <fieldset>
    <legend>用户信息</legend>
    <label>
      男 <input type=&#39;radio&#39; name=&#39;gender&#39; id=&#39;male&#39; />
    </label>
    <label>
      女 <input type=&#39;radio&#39; name=&#39;gender&#39; id=&#39;female&#39;/>
    </label>
  </fieldset>
</form>

JavaScriptを使用してフォームを処理しますフィールドの抽象化

最も基本的な構造:

 field: {
    name: String,
    value: String || String[]
  }

●通常、値のString[]は使用され、分割され、String に合成されます

●複雑な構造を持つ名前の場合は、keyPath を使用できます

  const fromKeyValues = {
    'user.name': 'Tom',
    'user.phone[0].number': '123456',
    'user.phone[0].type': 'mobile'
  };

  const fromValues = {
    user: {
      name: 'Tom',
      phone: [
        {
          number: '123456',
          type: 'mobile'
        }
      ]
    }
  };

上記のコードがよくわからない場合は、完全な実装については qs

を参照してください

●フォームがデフォルトで送信されないようにします イベント

●値の代わりにチェックボックスをチェックする必要があります

●select-multiple は複数の値を保存する必要があります

●上記の特別なインタラクティブ要素を除き、他の要素はすべて値を取得しますデフォルトの値から

form.html

<form>
    <fieldset>
        <legend>Login</legend>
        <input name=&#39;username&#39; placeholder=&#39;username&#39; minlength=&#39;2&#39;/>
        <input name=&#39;password&#39; type=&#39;password&#39; placeholder=&#39;password&#39;/>
        <label>
            remember password            <input name=&#39;checkbox&#39; type=&#39;checkbox&#39;/>
        </label>
    </fieldset>
    <fieldset>
        <p class="gender">
            <legend>More Info</legend>
            <label>
                男                <input name=&#39;gender&#39; type=&#39;radio&#39; value=&#39;male&#39; />
            </label>
            <label>
                女                <input name=&#39;gender&#39; type=&#39;radio&#39; value=&#39;female&#39; />
            </label>
        </p>
        <select name=&#39;select&#39; multiple>
            <option>1</option>
            <optgroup label=&#39;2&#39;>
                <option>2.1</option>
                <option>2.2</option>
            </optgroup>
        </select>
    </fieldset>
    <button type=&#39;submit&#39;>Submit</button></form>

form.js

form.