Tiefes Verständnis von HTML-Formularen

Formularelemente

Von HTML zu HTML5 wurden formularbezogene Elemente stark erweitert und können grundsätzlich unsere allgemeinen Anforderungen erfüllen. Aber in der tatsächlichen Arbeit, Aufgrund von Interaktions- oder Browserkompatibilitätsanforderungen müssen native Formularelemente manchmal erweitert oder simuliert werden. Zuvor ist es jedoch noch wichtig, die verschiedenen Formelemente klar zu verstehen und zu beherrschen. In diesem Artikel, Wir werden Formularelemente (standardmäßig HTML5-Formularelemente) im Detail erklären.

Formular

● Das Formular verarbeitet automatisch das Submit-Ereignis (das Submit-Ereignis wird normalerweise durch das Eingabe- oder Schaltflächenelement von type=submit ausgelöst)

●Das Formular führt automatisch eine Überprüfungsebene durch und verwendet form.novalidate zum Umwandeln aus der nativen Validierung

●Form erhält die entsprechende Benutzereingabe basierend auf dem Namen jedes Formularelements und fügt dann die Formulardaten in Form einer Abfragezeichenfolge am Ende der URL hinzu, die dem Aktionsattribut entspricht . Die Standardanforderungsmethode ist GET und die Standardaktion ist die aktuelle URL.

●event.target.elements gibt alle interaktiven Elemente zurück

<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>

Wenn Sie den obigen Code ausführen, können Sie sehen, dass nach dem Absenden des Formulars der Browser die Adresse zurückgibt Fügen Sie eine Abfragezeichenfolge wie diese hinzu?username=tom&passworkd=123&email=test%40gmail.com

Interaktive Elemente

Muss mit dem Benutzer interagieren und erhalten Wir klassifizieren diesen Typ von Formularelementen, die von Benutzern als interaktive Formularelemente eingegeben werden.

Einige sind unten aufgeführt:

●Eingabe: Zu den häufig verwendeten Typen gehören „Kontrollkästchen“, „Tel“, „Nummer“, „E-Mail“ usw.

●Textbereich

●Auswählen

●Option

Feedback-Elemente

Formularelemente, die einfach Informationen zurückmelden und keine Interaktion mit dem Benutzer erfordern, wir klassifizieren sie als Feedback-Formular Element.

Im Folgenden sind einige aufgeführt:

●Meter

●Ausgabe

<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>

Für die Ausgabe können Sie den berechneten Wert in form.oninput < festlegen 🎜>

Gruppierte Elemente

Dieser Formularelementtyp wird zum Gruppieren mehrerer Formularelemente verwendet. Wir klassifizieren sie als gruppierte Formularelemente.

Einige sind unten aufgeführt:

●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

● Verwenden Sie for, um eine Verbindung zum entsprechenden interaktiven Element herzustellen, das der ID zugeordnet ist

●Kann zum Umschließen interaktiver Elemente, einschließlich mehrerer, verwendet werden, um das erste zu steuern

●Eine Verschachtelung wird nicht empfohlen Etiketten

<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>

Verwenden Sie JavaScript, um Formulare zu verarbeiten

Abstraktion des Feldes

Die grundlegendste Struktur:

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

●Der String[] des Werts wird normalerweise verwendet, aufgeteilt und zu einem String synthetisiert

●Für Namen mit komplexen Strukturen können Sie keyPath verwenden

  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'
        }
      ]
    }
  };

Wenn der obige Code nicht sehr klar ist, lesen Sie bitte qs

für eine vollständige Implementierung

●Standard-Übermittlungsereignis für Formulare blockieren

●Das Kontrollkästchen muss anstelle des Werts aktiviert sein

●select-multiple muss mehrere Werte speichern

●Mit Ausnahme der oben genannten speziellen interaktiven Elemente übernehmen die anderen ihre Werte ​​von Wert standardmäßig

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