Come creare un modulo HTML (spiegazione degli esempi)

I moduli vengono utilizzati per raccogliere dati dagli utenti, come informazioni di contatto, o per consentire agli utenti di interagire con il sito Web, come pubblicare commenti o eseguire ricerche. In questo articolo impareremo come creare un modulo di base utilizzando l'HTML.

Struttura di un modulo HTML

Un modulo HTML viene creato utilizzando il tag. All'interno di questo tag, puoi avere una varietà di diversi elementi di input, come campi di testo, pulsanti, caselle di controllo, pulsanti di opzione e altro.

gli elementi di input vanno qui

Elementi di input

Campi di testo

I campi di testo vengono creati utilizzando il tag con l'attributo tipo adagiato testo. Per esempio:

Nome:




Telefono

L'elemento utilizzato per i campi di immissione del numero di telefono.

Telefono:


Data

L'elemento utilizzato per selezionare una data.

Data di nascita:


Parola d'ordine

L'elemento utilizzato per i campi di immissione della password. Il testo immesso in questo campo viene visualizzato come punti per nascondere la password.

Parola d'ordine:


Archivio

L'elemento viene utilizzato per consentire all'utente di selezionare un file dal proprio file system locale.

Caricare un file:


Casella di controllo

L'elemento utilizzato per i campi di input che consentono all'utente di selezionare nessuna, una o più opzioni.

accetto i Termini e le Condizioni

Radio

L'elemento utilizzato per i campi di input che consentono all'utente di selezionare un'opzione da un insieme di opzioni.

Genere:

Uomo

Donne

Numero

L'elemento utilizzato per i campi di input numerici.

Quantità:


Allineare

L'elemento utilizzato per i campi di input che devono contenere un valore da un intervallo di valori.

Volume:




Bottoni

I pulsanti vengono creati utilizzando il tag con l'attributo tipo adagiato invia. Questo pulsante, se premuto, invierà i dati del modulo. Per esempio:

Nome:




Gestione dell'input del modulo

Quando si preme il pulsante di invio, i dati del modulo vengono inviati per l'elaborazione. Questo viene fatto attraverso uno dei due metodi: GET o POST, che sono specificati usando l'attributo metodo Nell'etichetta .

Metodo GET

Il metodo GET invia i dati del modulo come parte dell'URL. È utile per cose come le ricerche, in cui i dati del modulo non sono sensibili. Tuttavia, questo metodo presenta limitazioni in termini di lunghezza dei dati che possono essere inviati.

gli elementi di input vanno qui

Metodo POSTALE

Il metodo POST invia i dati del modulo separati dall'URL. Questo è più sicuro e può gestire una quantità di dati molto maggiore, quindi viene utilizzato per cose come l'invio di moduli di contatto o di accesso.

gli elementi di input vanno qui

In entrambi i casi, l'attributo azione viene utilizzato per specificare l'URL dello script lato server che elaborerà i dati del modulo.

Esempio di modulo HTML con tutti gli elementi 

Ecco un modulo che utilizza tutti gli elementi che abbiamo esaminato in questo articolo:

Modulo di registrazione

Nome:



Cognome:



E-mail:



Telefono:



Data di nascita:



Parola d'ordine:



Caricare un file:



accetto i Termini e le Condizioni


Genere:

Uomo

Donne

Quantità:



Volume:




Questo modulo ha campi per nome, cognome, email, telefono, data di nascita, password, un campo per caricare a file, una casella di controllo per termini e condizioni, radio per scegliere il genere e campi di numero e intervallo per quantità e volume, rispettivamente.

Il pulsante "Invia" alla fine è quello che si occuperebbe di inviare il modulo all'URL specificato nell'attributo azione Dell'etichetta forma (in questo caso, "/submit_form"). Affinché questo modulo funzioni su un sito Web reale, è necessario disporre di un server configurato per ricevere ed elaborare le informazioni da questo modulo nel percorso "/submit_form".