El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

En aquest tema, aprendrem sobre els atributs dels formularis en HTML i com utilitzar-los per validar les dades introduïdes pels usuaris. La validació de formularis és essencial per assegurar que les dades enviades són correctes i compleixen amb els requisits esperats.

Atributs dels formularis

Els atributs dels formularis ens permeten definir propietats específiques per als elements del formulari. Alguns dels atributs més comuns són:

1.1 `action`

Defineix la URL on s'enviarà el formulari quan es faci clic al botó de submissió.

<form action="submit_form.php">
  <!-- elements del formulari -->
</form>

1.2 `method`

Especifica el mètode HTTP que s'utilitzarà per enviar el formulari. Els valors comuns són GET i POST.

<form action="submit_form.php" method="post">
  <!-- elements del formulari -->
</form>

1.3 `enctype`

Defineix com es codificaran les dades del formulari abans d'enviar-les al servidor. És especialment útil per enviar fitxers.

<form action="submit_form.php" method="post" enctype="multipart/form-data">
  <!-- elements del formulari -->
</form>

1.4 `autocomplete`

Controla si el navegador ha de completar automàticament els camps del formulari basant-se en les dades emmagatzemades.

<form action="submit_form.php" method="post" autocomplete="off">
  <!-- elements del formulari -->
</form>

1.5 `novalidate`

Indica que el formulari no ha de ser validat quan es faci clic al botó de submissió.

<form action="submit_form.php" method="post" novalidate>
  <!-- elements del formulari -->
</form>

Atributs dels elements del formulari

Els elements del formulari també poden tenir atributs específics que ajuden en la validació i la interacció amb l'usuari.

2.1 `required`

Indica que un camp és obligatori i no es pot deixar en blanc.

<input type="text" name="username" required>

2.2 `min` i `max`

Defineixen els valors mínims i màxims per als camps de tipus numèric o de data.

<input type="number" name="age" min="18" max="99">
<input type="date" name="dob" min="1900-01-01" max="2023-12-31">

2.3 `pattern`

Permet definir una expressió regular que el valor del camp ha de complir.

<input type="text" name="phone" pattern="\d{3}-\d{3}-\d{4}" title="Format: 123-456-7890">

2.4 `maxlength` i `minlength`

Especifica el nombre màxim i mínim de caràcters que es poden introduir en un camp de text.

<input type="text" name="username" minlength="5" maxlength="15">

2.5 `step`

Defineix els increments vàlids per als camps de tipus numèric o de data.

<input type="number" name="quantity" step="1">
<input type="date" name="appointment" step="7">

Validació de formularis

La validació de formularis es pot fer de dues maneres: del costat del client (client-side) i del costat del servidor (server-side). Aquí ens centrarem en la validació del costat del client utilitzant HTML5.

3.1 Validació automàtica amb HTML5

HTML5 proporciona una validació automàtica basada en els atributs dels elements del formulari. Quan un formulari es valida automàticament, el navegador mostrarà missatges d'error si algun camp no compleix amb els requisits especificats.

<form action="submit_form.php" method="post">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  <br>
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" minlength="8" required>
  <br>
  <input type="submit" value="Submit">
</form>

3.2 Personalització dels missatges d'error

Podem personalitzar els missatges d'error utilitzant l'atribut title o amb JavaScript.

<form action="submit_form.php" method="post">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" required title="Please enter your username">
  <br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required title="Please enter a valid email address">
  <br>
  <input type="submit" value="Submit">
</form>

3.3 Validació amb JavaScript

Podem utilitzar JavaScript per afegir validacions personalitzades i mostrar missatges d'error més detallats.

<form id="myForm" action="submit_form.php" method="post">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" required>
  <br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  <br>
  <input type="submit" value="Submit">
</form>

<script>
document.getElementById('myForm').addEventListener('submit', function(event) {
  var username = document.getElementById('username').value;
  var email = document.getElementById('email').value;
  
  if (username.length < 5) {
    alert('Username must be at least 5 characters long.');
    event.preventDefault();
  }
  
  var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
  if (!emailPattern.test(email)) {
    alert('Please enter a valid email address.');
    event.preventDefault();
  }
});
</script>

Exercicis pràctics

Exercici 1: Formulari de registre

Crea un formulari de registre que inclogui els següents camps:

Nom d'usuari (obligatori, mínim 5 caràcters)
Correu electrònic (obligatori, format d'email)
Contrasenya (obligatori, mínim 8 caràcters)
Confirmació de contrasenya (obligatori, ha de coincidir amb la contrasenya)

Solució

<form id="registerForm" action="register.php" method="post">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" minlength="5" required>
  <br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  <br>
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" minlength="8" required>
  <br>
  <label for="confirmPassword">Confirm Password:</label>
  <input type="password" id="confirmPassword" name="confirmPassword" minlength="8" required>
  <br>
  <input type="submit" value="Register">
</form>

<script>
document.getElementById('registerForm').addEventListener('submit', function(event) {
  var password = document.getElementById('password').value;
  var confirmPassword = document.getElementById('confirmPassword').value;
  
  if (password !== confirmPassword) {
    alert('Passwords do not match.');
    event.preventDefault();
  }
});
</script>

Resum

En aquesta secció, hem après sobre els atributs dels formularis i com utilitzar-los per validar les dades introduïdes pels usuaris. Hem vist com HTML5 proporciona una validació automàtica i com podem personalitzar els missatges d'error amb JavaScript. La validació de formularis és una part crucial del desenvolupament web per assegurar que les dades enviades són correctes i segures.

Atributs i validació de formularis

Atributs dels formularis

1.1 `action`

1.2 `method`

1.3 `enctype`

1.4 `autocomplete`

1.5 `novalidate`

Atributs dels elements del formulari

2.1 `required`

2.2 `min` i `max`

2.3 `pattern`

2.4 `maxlength` i `minlength`

2.5 `step`

Validació de formularis

3.1 Validació automàtica amb HTML5

3.2 Personalització dels missatges d'error

3.3 Validació amb JavaScript

Exercicis pràctics

Exercici 1: Formulari de registre

Solució

Resum

Curs d'HTML

Mòdul 1: Introducció a l'HTML

Mòdul 2: Formatació de text en HTML

Mòdul 3: Enllaços i mitjans en HTML

Mòdul 4: Taules en HTML

Mòdul 5: Formularis en HTML

Mòdul 6: Elements semàntics d'HTML5

Mòdul 7: Tècniques avançades d'HTML

Mòdul 8: Integració d'HTML i CSS

Mòdul 9: Disseny web responsiu

Mòdul 10: Millors pràctiques i accessibilitat

Mòdul 11: Projecte: Construint un lloc web complet

Atributs i validació de formularis

Atributs dels formularis

1.1 action

1.2 method

1.3 enctype

1.4 autocomplete

1.5 novalidate

Atributs dels elements del formulari

2.1 required

2.2 min i max

2.3 pattern

2.4 maxlength i minlength

2.5 step

Validació de formularis

3.1 Validació automàtica amb HTML5

3.2 Personalització dels missatges d'error

3.3 Validació amb JavaScript

Exercicis pràctics

Exercici 1: Formulari de registre

Solució

Resum

Curs d'HTML

Mòdul 1: Introducció a l'HTML

Mòdul 2: Formatació de text en HTML

Mòdul 3: Enllaços i mitjans en HTML

Mòdul 4: Taules en HTML

Mòdul 5: Formularis en HTML

Mòdul 6: Elements semàntics d'HTML5

Mòdul 7: Tècniques avançades d'HTML

Mòdul 8: Integració d'HTML i CSS

Mòdul 9: Disseny web responsiu

Mòdul 10: Millors pràctiques i accessibilitat

Mòdul 11: Projecte: Construint un lloc web complet

1.1 `action`

1.2 `method`

1.3 `enctype`

1.4 `autocomplete`

1.5 `novalidate`

2.1 `required`

2.2 `min` i `max`

2.3 `pattern`

2.4 `maxlength` i `minlength`

2.5 `step`