Articolo originale: How to Create and Validate Modern Web Forms with HTML5

I moduli HTML sono costituiti da un corpo di caselle di testo, pulsanti, menu a tendina e altri widget di selezione. Gli sviluppatori web usano questi elementi per ricevere le informazioni degli utenti di un sito.

Se hai mai fatto una ricerca su Google, ti sei iscritto o loggato su un sito web, effettuato un pagamento o risposto a un questionario, allora hai interagito con un modulo web.

Costruendo un sito web, devi assicurarti che la tua applicazione sia accessibile a tutti gli utenti. Ciò comprende anche chi necessita di tecnologie assistive come i lettori di schermo per navigare su un sito web.

L'HTML5 ha degli elementi semantici per moduli ottimi per questo scopo. E i benefici vanno oltre l'accessibilità:

Facilitano lo sviluppo, dato che sono dotati di funzionalità libere e sono generalmente semplici da capire.
Si adattano ai dispositivi mobili — l'HTML semantico è più semplice per un design responsivo su schermi di dimensioni diverse e genera file più leggeri del codice non semantico.
Sono ottimi per la SEO — la tua pagina web avrà delle possibilità più alte di essere trovata dai clienti perché il motore di ricerca favorisce le parole chiave all'interno di intestazioni, link e via dicendo, rispetto a quelle in elementi non semantici come <div> ecc.

In questo articolo, discuteremo gli elementi e gli attributi HTML5 più recenti, che puoi usare per costruire e convalidare il modulo semplice ma moderno che puoi vedere qui:

Puoi utilizzare il codice sorgente qui.

Come usare i nuovi elementi per moduli HTML5

Negli anni, i moduli web hanno attraversato svariati cambiamenti fino all'arrivo dell'HTML5.

Con l'introduzione dei nuovi e migliorati elementi HTML5 con i loro attributi, chiunque può imparare a realizzare moduli belli, funzionali e accessibili.

Gli elementi per moduli sono molto numerosi, ma adesso parleremo di quelli più essenziali.

Struttura del modulo – Come usare i tag fieldset, legend e label

Puoi usare il tag <fieldset> per raggruppare elementi correlati (controlli ed etichette) in un modulo web creando un riquadro intorno a loro. Di solito contiene elementi come legend, label e input.

Puoi usare il tag <legend> per definire didascalie per elementi fieldset. In questo modo, può essere usato anche per raggruppare vari elementi. Mentre il tag <label> fornisce definizioni per diversi elementi.

Dovresti sempre collegare l'elemento label all'elemento input perché:

L'utente può selezionare l'input cliccando sul label
Quando l'input è selezionato, i lettori di schermo leggono il label per aiutare gli utenti ipovedenti.
Per le caselle di spunta (checkbox), soprattutto su mobile, gli utenti che non sono in grado di cliccare facilmente su elementi piccoli, possono cliccare sul label per selezionare la casella di spunta.

<fieldset class="first-section">
      <legend>Contact Details</legend>
      <label for="name">Name</label>
      <input type="text" id="name" name="name" autofocus placeholder="Ophy Boamah" autocomplete="on" required> <br><br>
      <label for="email">Email</label>
      <input type="email" id="email" placeholder="ob2@hotmail.com"> <br><br>
      <label for="tel">Phone</label>
      <input type="tel" id="tel" placeholder="+233 200001212"> <br><br>
</fieldset>

Esempi di codice con tag fieldset, legend e label

Nel codice qui sopra, stiamo usando l'elemento fieldset per creare un gruppo iniziale chiamato "first-section". L'elemento legend contiene del testo con una descrizione per gli elementi del gruppo. Infine, il label identifica ogni input e il suo scopo.

Fieldset-2 — Elementi fieldset, legend e label

Come usare il testo segnaposto

All'interno dei campi di input è possibile usare del testo segnaposto che viene rimosso soltanto quando il campo viene selezionato o riempito.

Di solito, il testo segnaposto è di colore più chiaro rispetto a quello dei valori dei label di input. Il loro utilizzo principale è quello di dare ulteriori informazioni circa la compilazione del modulo. Ecco un esempio:

<input type="email" id="email" placeholder="ob2@hotmail.com">

Codice di esempio segnaposto email

L'attributo type="email" assicura che l'input non accetti altri valori che non siano email. L'attributo id collega l'elemento input al suo label per permettere l'associazione e il selezionamento. "ob2@hotmail.com" dà all'utente un suggerimento sul tipo di valore di input atteso.

Come usare focus

Inizialmente, gli utenti dovevano cliccare nella prima casella di input per iniziare a compilare un modulo. Ma l'HTML5 permette agli sviluppatori web di evidenziare l'input con cui gli utenti dovrebbero interagire inizialmente.

autofocus è un attributo che puoi aggiungere in un elemento input o textarea con questo scopo. È anche un'importante caratteristica di accessibilità perché semplifica la vita alle persone che usano i lettori di schermo, per esempio.

Ecco un esempio dell'uso di autofocus:

<input autofocus type="text" id="name" name="name" placeholder="Ophy Boamah" required>

Codice di esempio autofocus

Come hai visto nel codice qui sopra, puoi aggiungere l'attributo autofocus in qualsiasi tag input. Spesso è seguito o circondato da altri attributi generici come name, id e via dicendo.

Come usare i nuovi input HTML5

Credo si possa affermare che l'input è l'elemento più comune in un modulo web. In realtà, tutto ciò che è in un modulo è un input perché richiede una qualche forma di dato dagli utenti. Il suo utilizzo principale è per ricevere testo, numeri, email e altro.

I vari elementi sono differenziati usando il valore dell'attributo type nell'input.

Come usare search

Puoi usare il valore search per consentire agli utenti di inserire delle query quando hanno bisogno di cercare qualcosa. È molto simile a un input di testo.

La caratteristica principale che li differenzia è nello stile, dato che accedere agli input usando input[type=search] risulta molto comodo in confronto a dare una classe a un input di testo.

<input type="search" id="email" placeholder="ob2@hotmail.com">

Codice di esempio search

Su alcuni browser come Chrome, dopo aver iniziato a scrivere, un'icona "x" compare alla fine del campo di input. Cliccare su questa icona cancella i valori digitati nell'input. Lo stesso risultato si ottiene con il tasto esc.

Come usare hidden

Gli sviluppatori web usano il valore hidden per nascondere il contenuto di un input e far sì che sia inaccessibile a un utente che interagisce con il modulo. Questo tipo di input non viene renderizzato visivamente. Il suo contenuto non viene visto dall'utente ma viene mandato al server una volta che il modulo viene inviato.

<input type="hidden" id="indexNumber" name="indexNumber" value="00202010">

Codice di esempio hidden

Come usare l'elemento progress

Questo è un elemento che puoi usare per indicare il progresso di un'attività. L'attributo max viene usato per indicare il valore totale della barra di progresso. L'attributo value mostra essenzialmente la percentuale dell'attività che è stata completata colorando la barra di quella quantità. L'attributo id, come sempre, è usato come collegamento al label.

 <label for="days">Proficiency:</label>
<progress id="days" value="27" max="100"> 27% </progress>

Progress bar code example

A differenza degli input con type="range", l'elemento progress non consente agli utenti di apportare cambiamenti, poiché di "sola lettura".

Come usare l'elemento datalist

L'elemento datalist specifica una lista di opzioni predefinite per un elemento. È usato spesso per offrire funzionalità di completamento automatico per una lista di elementi. Questo perché una volta che inizi a scrivere, puoi avere una preview della lista di opzioni disponibili.

Come mostrato qui sotto, per collegare un tag input con un datalist, devi assicurarti che il valore dell'attributo list sia lo stesso dell'id di datalist.

<label for="gender">Gender ??</label>
      <input list="genders" name="gender" id="gender">
      <datalist id="genders">
        <option value="female">
        <option value="male">
        <option value="other">
      </datalist>

Codice di esempio datalist

Questo input è renderizzato in modo diverso sui vari browser:

Chrome: quando passi con il cursore sull'input, un'icona a tendina compare alla fine dell'input. Quando clicchi all'interno dell'input o sul label, i valori delle varie opzioni vengono mostrati nella tendina.

Firefox: per vedere i valori delle opzioni, l'utente deve inserire una parte del testo e le opzioni saranno mostrate in una sorta di completamento automatico.

Cosa vuol dire convalidare un modulo?

Realizzare il modulo è il primo step in questo processo. Come sviluppatore, devi sempre assicurarti che gli utenti stiano fornendo risposte accurate. Ciò è necessario perché non puoi assumere che gli utenti facciano sempre la cosa corretta.

Questo è il concetto di convalida di un modulo – evitare errori o individuarli non appena si verificano.

Tipi di validazione

Esistono due tipi comuni di validare un modulo web: client-side e server-side.

Validazione lato client

La validazione lato client (client-side) è la parte del processo con lo scopo di evitare errori. Comprende strategie come fare determinati controlli nel browser prima di inviare il modulo.

I metodi della validazione lato client includono l'aggiunta di popup di errore e far sì che l'utente non possa procedere finché non immette l'informazione corretta nel modulo.

Validazione lato server

La validazione lato server (server-side) è la parte del processo coinvolta nell'individuazione di errori.

A differenza della validazione lato client, non verifica la presenza di errori quando l'utente è ancora sul modulo. Invece, effettua i controlli quando i dati sono già stati inviati al server.

In questo caso, una pagina di errore viene mostrata come feedback per indicare la presenza di errori.

Metodi popolari di validazione lato client

Validazione base lato client

Alcuni esempi di validazione lato client di base includono "Questo campo è obbligatorio", "Inserisci un indirizzo email valido" e "La password deve avere almeno 8 caratteri".

Questi sono solo alcuni dei molti messaggi di errore generati quando un utente non inserisce i dati nel formato richiesto.

Gli attributi di questo tipo usati più comunemente sono:

Required: specifica i campi di input che devono essere riempiti prima di poter inviare il modulo.
Minlength e Maxlength: specificano la lunghezza minima e massima attesa per una stringa.
Min e Max: specificano il valore minimo e massimo per un numero.

4. Type: specifica che tipo di dato è richiesto per specifici campi di input, ad esempio, date, number, name, email e così via.

Constraint Validation API

Come suggerisce il nome, l'API di convalida dei vincoli (constraint validation API) è un API che offre funzionalità di validazione per i moduli web. Puoi usare le sue nuove proprietà e metodi per modificare la validità di un input in un modulo.

Gli sviluppatori adesso possono usufruire facilmente di funzionalità e messaggi di errore personalizzati. In pratica, questa API permette di individuare gli errori e di mostrare un messaggio personalizzato a seconda del tipo di errore.

Puoi creare una convalida e messaggi di errore in modo personalizzato con il metodo setCustomValidity, così come con la proprietà validationMessage.

Altri attributi utili da conoscere

Attributo	Descrizione
autocomplete	Puoi usare autocomplete per richiamare valori digitati di recente in un input. Tranne che dati sensibili e PIN temporanei, è una funzionalità salvatempo.
autocorrect	Usa questo attributo per la correzione automatica e per impostare l'iniziale maiuscola su dispositivi mobili (la versione di Safari eseguita su iPad e iPhone).
spellcheck	Puoi impostare questo attributo su true per indicare che l'utente dovrebbe controllare l'ortografia di un testo, soprattutto di stringhe digitate in un input. L'unico problema è che non tutto il testo digitato in un input è costituito da parole "reali".

Riassumendo

Ed ecco il risultato dopo aver messo insieme i vari elementi che abbiamo imparato in questo articolo:

E questo è il codice:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootcamp Registration</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap" rel="stylesheet"> 
</head>
<body>
  <div class="form">
    <h1>Bootcamp Registration Form</h1>
  <p>Complete this form to express your interest in the upcoming web development bootcamp.</p>
  <form>
<!-- Contact Details -->
    <fieldset class="first-section">
      <legend>Contact Details</legend>
      <label for="name">Name</label>
      <input autofocus type="text" id="name" name="name" placeholder="Ophy Boamah" autocomplete="on" required> <br><br>
      <label for="email">Email</label>
      <input type="email" id="email" placeholder="ob2@hotmail.com"> <br><br>
      <label for="tel">Phone</label>
      <input type="tel" id="tel" placeholder="+233 200001212"> <br><br>
    </fieldset>
    <!-- Personal Information -->
    <fieldset class="second-section">
      <legend>Personal Information</legend>
      <label for="dob">Birth Date</label>
      <input type="date" id="dob"> <br><br>
        <label for="gender">Gender ??</label>
      <input list="genders" name="gender" id="gender">
      <datalist id="genders">
        <option value="female">
        <option value="male">
        <option value="other">
      </datalist><br><br>
     <div class="proficiency">
        <label for="profeciency">Proficiency</label>
      <input type="range" value="4" max="10" id="profeciency" name="profeciency">
     </div>

    </fieldset>
     <!-- Preferred Language -->
     <div class="terms">
        <input type="checkbox" id="scales" name="scales" class="checkbox">
      <label for="scales">I have read and agree to the terms and conditions</label>
     </div>
    <button>Submit</button>
  </form>
  </div>
</body>
</html>

Codice HTML

* {
  font-family: 'Montserrat', sans-serif;
}

body {
  height: 80vh;
  margin-top: 5rem;
  background-image: url("https://images.unsplash.com/photo-1595675024853-0f3ec9098ac7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8Y29kaW5nJTIwYm9vdGNhbXB8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  padding: 10px;
}

.form {
  background-color: #fff;
  border-radius: 5px;
  padding: 15px 25px;
  width: 80%;
  margin: 0 auto;
}

.checkbox {
  width: 20px !important;
}

.first-section input {
  width: 85%;
  height: 25px;
  margin-left: 5px;
}

.second-section input{
  width: 80%;
  height: 25px;
  margin-left: 5px;
}

.form h1, p {
  text-align: center;
}
button {
  border: none;
  color: white;
  background: #1560BD;
  padding: 8px 25px;
  border-radius: 5px;
  display: block;
  margin: 20px auto 10px auto;
  width: 120px;
}

.second-section {
  margin-top: 15px;
}

.proficiency {
  display: flex;
  align-items: center;
}

.terms {
  margin-top: 15px;
  display: flex;
  align-items: center;
}

Codice CSS

Conclusione

I nuovi elementi e attributi per moduli HTML5 facilitano l'uso di funzionalità essenziali. Soprattutto quelle che altrimenti richiederebbero il CSS o svariate righe di JavaScript.

Adesso, creare un modulo web moderno e funzionale con l'HTML è più semplice che mai. E soprattutto, sapere di poter creare moduli che saranno uniformi su diversi browser, rende più tranquilla la vita degli sviluppatori web.

Grazie per aver letto questo articolo 👋🏾. Spero ti sia stato d'aiuto.