Articolo originale: HTML Form – Input Type and Submit Button Example
I form (moduli) sono una delle parti più importanti del web. Senza di essi, non ci sarebbe un modo facile per raccogliere dati, cercare risorse o effettuare un'iscrizione per ricevere informazioni preziose.
Puoi inserire i form nelle pagine web con l'elemento HTML form. All'interno di questo elemento possono essere inseriti parecchi elementi input, noti anche come controlli del form.
In questo tutorial, esploreremo l'elemento HTML form, i vari tipi di elementi input che può contenere e come creare un pulsante di invio con il quale inviare i dati.
Alla fine, conoscerai il funzionamento dei form e sarai in grado di realizzarli con sicurezza.
Sintassi Base per un Form HTML
<form action="mywebsite.com" method="POST">
<!--Input di qualsiasi tipo ed elementi textarea vanno qui-->
</form>
Tipi di Input per i Form HTML
Si utilizza il tag <input> per creare diversi controlli in un form HTML. È un elemento in linea e riceve attributi come type, name, minlength, maxlength, placeholder e così via. Ciascuno di essi hanno specifici valori che possono ricevere.
L'attributo placeholder è importante in quanto aiuta l'utente a capire a cosa serve il campo di input prima che possa digitare qualcosa.
Ci sono 20 tipi di input diversi, e li esamineremo uno ad uno.
Tipo Text
Questo tipo di input ottiene il valore di “text” e crea una riga singola di testo da inserire.
<input type="text" placeholder="Enter name" />
Un input di tipo text viene presentato come nella videata seguente:
Tipo Password
Come suggerisce il nome, questo tipo di input si utilizza per richiedere password. Rende automaticamente invisibile all'utente quanto sta digitando, a meno che l'elemento non venga manipolato tramite JavaScript.
<input type="password" placeholder="Enter your password" />
Tipo Email
Un input di tipo email definisce un campo per digitare un indirizzo email. L'input viene automaticamente validato per verificare la conformità con la sintassi di un indirizzo email.
<input type="email" placeholder="Enter your email" />
Tipo Number
Questo tipo consente all'utente di inserire solamente numeri.
<input type="number" placeholder="Enter a number" />
Tipo Radio
Talvolta gli utenti devono effettuare una scelta tra diverse opzioni. Questo tipo di input consente all'utente di scegliere un elemento tra quelli proposti.
<input type="radio" />
Tipo Checkbox
Con l'input di tipo radio gli utenti possono effettuare una scelta tra le opzioni proposte, ma se volessi rendere possibili tante scelte contemporaneamente? Ecco a cosa serve un input di tipo checkbox.
<input type="checkbox" />
Tipo Submit
Questo tipo si usa per aggiungere un pulsante di invio a un form. Quando l'utente fa click sul pulsante, il form viene inviato. Riceve un attributo value che definisce il testo che appare all'interno del pulsante.
<input type="submit" value="Enter to Win" />
Tipo Button
Questo tipo di input crea un pulsante, che può essere manipolato con JavaScript con un event listener per l'evento onClick. Crea un pulsante come il tipo submit, ma il valore del testo del pulsante deve essere specificato.
<input type="button" value="Submit" />
Tipo File
Definisce un campo per l'invio di uno o più file. Quando un utente fa click su questo controllo, gli viene richiesto di scegliere il file da inserire, che potrebbe essere un'immagine, un PDF e così via.
<input type="file" />
Ecco come viene presentato un input di tipo file:
Tipo Color
Questo tipo di input è stato introdotto con HTML5. Con questo l'utente può scegliere un colore. Il nero (codice esadecimale #000000) è il valore predefinito, ma può essere modificato inserendo nel parametro value il colore desiderato in formato esadecimale.
Molti sviluppatori hanno usato questo elemento per poter scegliere le varie tonalità di colore nei formati RGB, HSL e alfanumerico
<input type="color" />
Ecco come viene presentato questo tipo di input, una volta che l'utente ha fatto click sull'elemento:
Tipo Search
Questo tipo di input definisce un campo di testo, proprio come il tipo text. Ma ha il solo scopo di consentire all'utente di effettuare una ricerca. Un pulsante di cancellazione (una x) all'interno dell'elemento appare una volta che si è iniziato a digitare.
<input type="search" />
Tipo URL
Quando viene impostato un elemento input con questo attributo, viene mostrato un campo che può essere usato per digitare un URL.
<input type="url" />
Tipo Tel
Questo tipo consente di ottenere numeri di telefono dagli utenti.
<input type="tel" />
Tipo Date
Potresti esserti registrato in un sito web che richiede l'inserimento di una data per un certo evento. Questo sito probabilmente usa un input di questo tipo.
<input type="date" />
Ecco come viene presentato questo tipo di input:
Tipo Datetime-local
Funziona come il tipo date, ma consente all'utente anche di scegliere un orario oltre a una data.
<input type="datetime-local" />
Tipo Week
Questo tipo consente all'utente di selezionare una particolare settimana in un anno.
<input type="week" />
Tipo Month
Con questo tipo di input vengono presentati i mesi, affinché l'utente possa effettuare una scelta facendo click su uno di essi.
<input type="month" />
Textarea
Ci sono situazioni nelle quali un utente deve riempire più righe di testo, pertanto il tipo di input text non sarebbe adatto, in quanto consente di riempire solo una riga di testo.
textarea consente all'utente di inserire testo su più righe. Tramite gli attributi cols e rows consente di impostare rispettivamente il numero di colonne e di righe per l'elemento.
<textarea cols="50" rows="20"></textarea>
Select
È come avere le funzionalità di un elemento di tipo radio e di tipo checkbox assieme. Viene inserito nel form tramite due elementi, l'elemento select propriamente detto e, al suo interno, tanti elementi option quante sono le opzioni da offrire.
Nella modalità predefinita, l'utente può scegliere solo una opzione ma con l'attributo multiple è possibile selezionare più opzioni.
<select>
<option value="HTML">Select a Language</option>
<option value="HTML">HTML</option>
<option value="CSS">CSS</option>
<option value="JavaScript">JavaScript</option>
<option value="React">React</option>
</select>
Come Abbinare un Etichetta agli Elementi Input
Assegnare etichette ai controlli di un form con l'elemento label è importante. Quando sono correttamente abbinate al relativo campo di input tramite il loro attributo for, che deve essere valorizzato con il contenuto dell'attributo id dell'elemento input relativo, facilitano anche l'utente in quando può cliccare sull'etichetta stessa per accedere al controllo input relativo.
<label for="name">Name</label>
<input type="text" id="name" /> <br />
<label for="check">Agree with terms</label>
<input type="checkbox" id="check" />
Come Funzionano i Form HTML
Quando un utente riempie i campi di un form, poi fa click sul pulsante di invio, manda i dati contenuti nei controlli del form al server tramite una richiesta con un metodo HTTP GET o POST .
Quindi come viene specificato il server? L'elemento form riceve un attributo action, che deve avere come valore l'URL del server al quale inviare i dati. Riceve anche un attributo method, che indica il metodo HTTP usato per veicolare i valori al server specificato.
Questo metodo potrebbe essere GET o POST. Con il metodo GET i valori digitati dall'utente sono visibili nella stringa dell'URL quando viene inviato. Con il metodo POST i valori vengono inviati nel corpo della richiesta, di conseguenza non sono visibili nell'URL.
Se non viene usato l'attributo method, viene utilizzato il metodo GET come valore predefinito.
Quindi quando dovresti usare il metodo GET o POST? Usa GET per inviare dati non sensibili o per ottenere dati da un server (ad esempio durante una ricerca). Usa POST quando invii file o dati sensibili.
Mini Progetto: Creare un Form di Contatto di Base
Utilizziamo quanto appreso sugli elementi di un form per creare un semplice form di contatto. Introdurrò anche alcuni concetti ulteriori mentre lo sviluppiamo.
Ecco il Codice HTML:
<form action="example-server.com">
<fieldset>
<legend>Contact me</legend>
<div class="form-control">
<label for="name">Name</label>
<input type="name" id="name" placeholder="Enter your name" required />
</div>
<div class="form-control">
<label for="email">Email</label>
<input
type="email"
id="email"
placeholder="Enter your email"
required
/>
</div>
<div class="form-control">
<label for="message">Message</label>
<textarea
id="message"
cols="30"
rows="10"
placeholder="Enter your message"
required
></textarea>
</div>
<input type="submit" value="Send" class="submit-btn" />
</fieldset>
</form>
Cosa succede in questo codice HTML?
Innanzitutto un elemento form racchiude tutti gli altri elementi. L'attributo action è impostato su “example-server.com”, un server fittizio dove saranno ricevuti i dati.
Dopo l'elemento form, ogni altro elemento è racchiuso tra un elemento fieldset al cui interno si trova un tag legend.
Usiamo l'elemento fieldset per raggruppare input correlati, il tag legend contiene un'intestazione che descrive quali dati verranno raccolti dalla sezione.
Gli elementi di input name, email e textarea sono tutti all'interno di un elemento div con la classe form-control, in modo che si comportino come un elemento di tipo blocco, per facilitare l'applicazione di uno stile CSS.
Sono anche validati con l'attributo required, pertanto il form non viene inviato se i campi caratterizzati con quell'attributo sono vuoti.
Dopo tutto questo, il form apparirà come nella videata seguente:
Molto brutto, non è vero? Dobbiamo applicare qualche stile al form!
Ecco il codice CSS:
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
font-family: cursive;
}
input,
textarea {
width: 100%;
padding: 5px;
outline: none;
}
label {
line-height: 1.9rem;
}
input[type="submit"] {
transform: translate(2.2%);
padding: 3px;
margin-top: 0.6rem;
font-family: cursive;
font-weight: bold;
}
fieldset {
padding: 20px 40px;
}
Cosa fa questo codice CSS?
Centriamo tutto orizzontalmente all'interno del tag body con Flexbox, e verticalmente dando un'altezza di viewport pari al 100%. Usiamo una famiglia di caratteri corsivi.
Diamo agli elementi di input e al textarea una larghezza del 100% in modo che si espandano orizzontalmente. Le etichette hanno un'altezza di riga minima di 1.9rem (30.4px), in modo che non siano troppo vicine ai loro rispettivi elementi input.
Abbiamo disegnato in modo specifico il pulsante (pulsante di tipo input) con la proprietà transform per spingerlo al centro, perché era un po' fuori centro. Gli abbiamo dato una spaziatura all'interno di 3px per avere più spazio attorno ad esso. Abbiamo quindi selezionato una famiglia di caratteri corsivi in grassetto.
Visto che il pulsante era troppo vicino all'elemento textarea, abbiamo impostato un margine superiore di 0.6rem per portarlo un poco più in basso.
All'elemento fieldset abbiamo applicato una spaziatura interna di 20px in alto e in basso e 40px a destra e sinistra per distanziarlo dal bordo che crea attorno all'elemento form nel quale è contenuto.
Alla fine di tutto questo, abbiamo questo bel form:
Conclusione
Spero che questo tutorial ti abbia aiutato a capire come funzionano i form. Ora dovresti avere le conoscenze necessarie per integrare i form nei tuoi siti web, in modo da poter iniziare a raccogliere dati.
Grazie per la lettura e buona programmazione.