Serra Simone Web Developer

Realizzazione Siti Web Wordpress

News Sviluppo Realizzazione Siti Web Wordpress Serra Simone

Introduzione ai moduli HTML5 | HTMLGoodies.com

DiSimone Serra

Ott 5, 2021
Introduzione ai moduli HTML5 | HTMLGoodies.com
Tempo di lettura: 4 minuti

I moduli sono una delle caratteristiche più importanti delle applicazioni Internet, fornendo un’interfaccia per condividere le informazioni tra un cliente e un utente in modo semplice, ma efficace. L’utilizzo dei moduli è una parte cruciale di qualsiasi applicazione aziendale, sia online che offline. I moduli Web sono sempre stati fondamentali per le app Web e i siti Web. Senza di loro, varie transazioni, discussioni e chat sarebbero difficilmente possibili.

Cosa sono i moduli HTML5?

I moduli esistevano prima di HTML5, ma il processo di gestione dell’input era un po’ macchinoso. HTML5 ha portato nuove funzionalità ai moduli e ha fornito coerenza per l’accettazione dell’input in tutte le applicazioni. I moduli HTML5 consumano anche meno tempo nel processo di sviluppo. Ora gli sviluppatori web non solo possono creare moduli visivamente sbalorditivi, ma possono anche raccogliere dati convalidati e preziosi attraverso moduli HTML5 personalizzati.

Nuovi tipi di input introdotti in HTML5

HTML5 offre alcuni nuovi tipi di input che aiutano gli utenti fornendo input nativi e semplifica la convalida dei dati senza utilizzare alcun codice JavaScript. La tabella seguente elenca i nuovi tipi di input in HTML5:

Vantaggi dei moduli HTML5 rispetto ai semplici moduli HTML?

La convalida integrata dei moduli HTML5 porta il markup semantico al livello successivo. Fornisce la comodità di scrivere script e stili che erano un compito noioso nelle versioni precedenti di HTML.

Puoi comunque sfruttare i moduli HTML5 anche se Javascript è disabilitato nel browser.

Leggi: 5 ottimi strumenti per creare moduli HTML5

Come creare un modulo HTML5

Capiamo come funzionano i moduli HTML5 esaminando un esempio pratico di creazione di un modulo di registrazione utente in HTML5.

Impareremo come creare un semplice modulo di registrazione HTML5. Per iniziare, iniziamo con una pagina modello HTML vuota, come mostrato nel codice seguente:

<!DOCTYPE html>

<html lang="en">

  <head>

      <meta charset="utf-8">

      <title> HTML5 Forms Tutorial </title>

      <link rel="stylesheet" href="https://www.htmlgoodies.com/html5/introduction-to-html5-forms/style.css">

  </head>

  <body>

  </body>

</html>
We need to use the <form> tag to tell the browser that the form starts here:




<!DOCTYPE html>

<html lang="en">

  <head>

      <meta charset="utf-8">

      <title> HTML5 Forms Tutorial </title>

      <link rel="stylesheet" href="https://www.htmlgoodies.com/html5/introduction-to-html5-forms/style.css">

  </head>

  <body>

    <form>

    </form>

  </body>

</html>




Da questo punto in poi esamineremo solo il codice che si trova all’interno del 


 etichetta.

Con questo in mente, creiamo un modulo di registrazione utente breve e semplice utilizzando il modulo taggare e creare campi di input come Nome e E-mail.  Per fare il ‘nome‘ campo obbligatorio aggiungi il necessario attribuire a quel campo di input.


Per indirizzo email, puoi verificare la validità dell’indirizzo email aggiungendo l’attributo email che farà in modo che il testo inserito sia un indirizzo email valido, altrimenti verrà visualizzato un errore.  Inoltre, aggiungi a necessario attributo per renderlo un campo obbligatorio:







<form action="" method="">

   

      <legend>Registration Details</legend>

   

      <label>Name: <input type="text" required /></label>

      <label>Email: <input type="email" required /></label>

    ….




   <input type="submit" value="Register"/>

</form>


Puoi anche usare il messa a fuoco automatica attributo per concentrarsi automaticamente su ‘nome‘ campo di input quando viene caricata la pagina del modulo:


<input type="text" placeholder="Your Name" required  autofocus/>


Alcuni dispositivi potrebbero avere uno spazio limitato sullo schermo, quindi in tal caso puoi rimuovere le etichette e sostituirle con segnaposto.  I segnaposto sono anche utili per fornire suggerimenti all’utente finale.


<input type="text" placeholder="Your Name" required autofocus/> 

<input type="email" placeholder="Email address" required />


Gli utenti possono utilizzare i dati inseriti in precedenza selezionandoli dall’opzione.  Il autocompetizione L’attributo memorizza i dati nel datalist e consente all’utente di selezionare i valori di input inseriti in precedenza.  In questo modo, l’utente può semplicemente selezionare il valore e utilizzarlo nel campo di input.  Tieni presente che il completamento automatico deve essere disattivato nei campi (come la password) per evitare l’accesso non autenticato.


Il completamento automatico l’attributo può essere applicato a un campo specifico.  Se vuoi applicarlo a tutti gli elementi figlio (input) del modulo, applicalo direttamente all’elemento del modulo.


Il prossimo passo è usare il indirizzo campo.  Il testo dell’indirizzo potrebbe essere un po’ più lungo, quindi è meglio usare