Skip to main content

Formularis i Inputs

En aquest capítol aprendrem a crear formularis HTML amb diferents tipus d’inputs, validar dades i millorar l’experiència de l’usuari. És una part fonamental del desenvolupament web interactiu.

L'etiqueta <form>​

Crea un formulari que pot enviar dades a un servidor.

<form action="/registre" method="post">...</form>

Atributs importants​

  • action: URL de destí del formulari
  • method: get (visible a la URL) o post (enviat pel cos)
  • enctype: format del contingut quan s’envien fitxers (multipart/form-data)

L'etiqueta <label>​

Relaciona textualment un input amb la seva funció.

<label for="nom">Nom:</label> <input id="nom" name="nom" type="text" />

També es pot fer de manera implícita:

<label
  >Nom:
  <input type="text" name="nom" />
</label>

L'etiqueta <input>​

Crea controls interactius com camps de text, contrasenyes, números, etc.

<input type="text" name="nom" placeholder="Escriu el teu nom" required />

Atributs útils:​

  • name, id, value, placeholder
  • required, size, minlength, maxlength
  • pattern, readonly, disabled, autofocus, autocomplete, list

Validació personalitzada​

<input
  type="text"
  name="nom"
  pattern="\b[A-Z][a-zA-Z]*\b"
  oninvalid="setCustomValidity('Nom obligatori i ha de començar en majúscula')"
  oninput="setCustomValidity('')"
  required
/>

Confirmació de contrasenyes​

<input type="password" name="password1" id="password1" required />
<input
  type="password"
  name="password2"
  id="password2"
  onchange="if(password1.value === password2.value){ setCustomValidity('') } else { setCustomValidity('Les contrasenyes no coincideixen') }"
  oninput="setCustomValidity('')"
  required
/>

Tipus especials d'input​

  • email
  • number, range
  • date, time
  • color
  • checkbox, radio
  • file
  • submit, reset, hidden

select, textarea i button​

<select>​

<select name="ciutat">
  <option value="">Selecciona una ciutat</option>
  <option value="bcn" selected>Barcelona</option>
  <option value="tgn">Tarragona</option>
</select>

<textarea>​

<textarea name="comentari" rows="4" cols="50" required></textarea>

<button>​

<button type="submit">Enviar</button>
<button type="button" onclick="alert('Hola!')">Click</button>

fieldset i legend​

<fieldset>
  <legend>Dades personals</legend>
  <input type="text" name="nom" required />
</fieldset>

Validació amb múltiples missatges​

<input
  type="text"
  name="nom"
  minlength="4"
  maxlength="40"
  required
  oninvalid="
    if (this.validity.valueMissing) {
      setCustomValidity('El nom és obligatori');
    } else if (this.validity.tooShort) {
      setCustomValidity('El nom és massa curt');
    } else if (this.validity.tooLong) {
      setCustomValidity('El nom és massa llarg');
    }
  "
  oninput="setCustomValidity('')"
/>

Aquest mòdul cobreix tot el necessari per construir formularis robustos i accessibles amb HTML.