Compréhension approfondie des formulaires HTML

Éléments de formulaire

Du HTML au HTML5, les éléments liés au formulaire ont été considérablement étendus et peuvent essentiellement répondre à nos besoins communs. Mais dans le travail réel, En raison des exigences d'interaction ou de compatibilité du navigateur, les éléments de formulaire natifs doivent parfois être étendus ou simulés. Mais avant cela, il est encore important de bien comprendre et maîtriser les différents éléments du formulaire. Dans cet article, Nous expliquerons en détail les éléments de formulaire (éléments de formulaire HTML5 par défaut).

formulaire

greep Le formulaire gérera automatiquement l'événement de soumission (l'événement de soumission est généralement déclenché par l'élément d'entrée ou de bouton de type=submit)

●Le formulaire effectuera automatiquement une couche de vérification et utilisera form.novalidate pour activer hors de la validation native

QuantityForm obtiendra l'entrée utilisateur correspondante en fonction du nom de chaque élément du formulaire, puis ajoutera les données du formulaire sous forme de chaîne de requête à la fin de l'URL correspondant à l'attribut d'action . La méthode de requête par défaut est GET et l'action par défaut est l'URL actuelle.

Quantityevent.target.elements renverra tous les éléments interactifs

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

En exécutant le code ci-dessus, vous pouvez voir qu'après avoir soumis le formulaire, le navigateur L'adresse sera ajouter une chaîne de requête comme celle-ci?username=tom&passworkd=123&email=test@gmail.com

Éléments interactifs

Besoin d'interagir avec l'utilisateur et d'obtenir Nous classons ce type d'éléments de formulaire saisis par les utilisateurs en tant qu'éléments de formulaire interactifs.

Certains sont répertoriés ci-dessous :

Quantityinput : les types couramment utilisés incluent la case à cocher, le numéro de téléphone, l'e-mail, etc.

Quantityoption

Éléments de feedback

Éléments de formulaire qui renvoient simplement des informations et ne nécessitent pas d'interaction avec l'utilisateur, nous les classons comme formulaire de feedback élément. En voici quelques-uns :

Quantitymeter

Quantityoutput

Pour la sortie, vous pouvez définir la valeur calculée dans form.oninput

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

Éléments groupés

Ce type d'élément de formulaire est utilisé pour regrouper plusieurs éléments de formulaire Nous les classons comme éléments de formulaire groupés. Certains sont répertoriés ci-dessous :

Quantityfieldset

Quantityoptgroup

label

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

● Utiliser pour pour se connecter à l'élément interactif correspondant associé à l'identifiant ● Peut être utilisé pour envelopper des éléments interactifs, y compris plusieurs, pour contrôler le premier

● Il n'est pas recommandé d'imbriquer les étiquettes

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

Utiliser JavaScript pour traiter les formulaires

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

Abstraction du champLa structure la plus basique :

QuantityLa chaîne[] de valeur est généralement utilisée, divisée et synthétisée en une chaîne

●Pour les noms avec des structures complexes, vous pouvez utiliser keyPath

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

s'il est correct Le code ci-dessus n'est pas très clair, veuillez vous référer aux questions

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

pour une implémentation complète

● Événement de soumission par défaut du formulaire de blocage ● la case à cocher doit être cochée au lieu de la valeur

● select-multiple doit stocker plusieurs valeurs

● À l'exception des éléments interactifs spéciaux ci-dessus, les autres prennent leurs valeurs ​​à partir de la valeur par défaut

form.html

form.js

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