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.