Formulario web: costruiamo alcuni campi di input utente

2021-06-09 11:07:04

Continuiamo a scoprire come funzionano i formulari e come impostarli per fare della nostra pagina un punto di contatto con gli utenti del nostro sito.

Iperbenvenuti e iperbenvenute!!
Continua anche oggi il nostro viaggio in cui impariamo assieme a creare dei siti web a partire da zero.
Proseguiamo il percorso che avevamo iniziato lo scorso video alla scoperta dei formulari web, della loro struttura e del loro funzionamento.
Il formulario è un elemento molto importante se vogliamo fare in modo che la nostra pagina possa diventare un punto di contatto efficace tra noi e chi visita il nostro sito.
In particolare oggi vedremo come costruire e impostare correttamente vari tipi di input, cioè gli elementi che permettono ai nostri utenti di inserire dati nel nostro modulo.

Come rendere obbligatoria la compilazione di un campo

Può darsi che alcuni dati siano indispensabili per offrire ai nostri utenti quanto richiesto attraverso il formulario: per questo c'è l'attributo required, che, come vedremo, rende obbligatoria la compilazione di un campo del formulario prima di poter inviare i dati al nostro server.

Come limitare il numero di caratteri che possono essere immessi in un campo

Nel caso in cui abbiamo bisogno che un determinato input non superi una certa lunghezza in caratteri possiamo utilizzare l'attributo maxlength.

Come creare un campo per l'immissione della password dell'utente

Il campo che permette al nostro utente di immettere una password si differenzia dal campo di testo per l'attributo type, che deve essere impostato su "password". In questo modo i caratteri che verranno digitati dall'utente in questo campo non saranno visibili sullo schermo.
Un altro attributo molto utile per i campi password è minlength, che ci permette di fissare un numero minimo di caratteri in modo da rendere più sicure le password che verranno scelte dai nostri utenti.

Come creare delle caselle da vistare a scelta multipla

Un altro modo in cui possiamo richiedere alle persone di fornirci delle informazioni è di dar loro delle opzioni tra cui scegliere: possiamo farlo attraverso l'input di tipo checkbox.
Per impostare correttamente queste caselle di scelta dobbiamo attribuire ad ognuna di loro lo stesso nome, attraverso l'attributo name, che designerà la categoria generale, per così dire, all'interno della quale avviene questa scelta: per esempio il cibo preferito.
Per ognuna dovremo, poi, impostare un valore unico, attraverso l'attributo value, che le è proprio e che sará associato a quel nome, ad esempio"pizza" per una casella e "torta" per un'altra.
Possiamo poi utilizzare l'attributo checked per fare in modo che una o più opzioni siano già preselezionate quando la pagina viene caricata.
Una caratteristica del tipo di input checkbox è che permette la scelta di più opzioni.

Come creare dei bottoni radio a scelta esclusiva

Qualora volessimo invece proporre delle scelte alternative e mutualmente esclusive dovremo invece usare l'input di tipo radio che presenta all'utente dei piccoli bottoni circolari non selezionabili contemporaneamente.
Come per le checkbox tutti i bottoni radio che concernono la stessa scelta avranno lo stesso nome, ad esempio name="miglior-cantante-di-sempre", e ognuno di loro avrà un valore che gli è specifico, ad esempio value="io-sotto-la-doccia">.
Anche coi bottoni radio funziona l'attributo checked che permette di preselezionare una fra le opzioni presentate all'utente.

Come creare un campo in cui allegare un file

L'ultimo tipo di input che vedremo oggi è file, che permette al nostro utente di allegare un documento da spedire al nostro server insieme al resto dei dati raccolti nel formulario.

Non ci sono solo gli elementi di tipo input

Oggi ci siamo concentrati sui tipi di campo chiamati input ma come vedremo nel prossimo video ci sono anche altri modi in cui possiamo richiedere dei dati all'interno dei formulari web.
Nell'attesa di ritrovarci per scoprirli insieme vi lascio qui sotto altre informazioni di carattere più generale su questo canale e questo progetto.
Buona visione!

Condividiamo le nostre esperienze

Per rendere più interattivo questo canale vi propongo di condividere ciò che impariamo e le cose che vorremmo approfondire o capire meglio assieme nei seguenti modi:

scrivendo le vostre domande o le vostre osservazioni nei commenti in maniera da avviare una conversazione sotto al video che possa aggiungere valore e portare ancora più informazioni a chi arriverà dopo
Incontrandoci regolarmente sul canale Telegram "Siamo Iper!", in cui ho previsto di organizzare delle discussioni di gruppo in chat vocali che ci permettano di aiutarci a vicenda, approfondire argomenti e scambiarci esperienze come in un vero e proprio gruppo di studio.

Trovate il link d'invito alle chat vocali su Telegram qui o nella linkoteca in fondo al post.

Una volta iscritti potrete rispondere al sondaggio su quale momento della settimana è il migliore per voi per partecipare agli incontri dal vivo.

Come contribuire allo sviluppo del nostro gruppo di studio

Se ritenete utile e interessante questo progetto potete contribuire al suo sviluppo e alla sua continuazione condividendo questo canale con chi pensate che possa essere interessato a fare questo percorso insieme a noi e imparare a creare siti web a partire da zero.

V'invito anche a valutare la possibilità di diventare finanziatori di questa spedizione nel mondo del web con un contributo a vostra scelta utilizzando gli strumenti offerti da Cam.TV, per esempio attraverso l'opzione sostieni sotto ai contenuti oppure nella pagina del canale.

Approfitto dell'occasione per ringraziare di cuore tutte le persone che hanno già contribuito!

Vi ringrazio per il tempo che avete passato con me e vi auguro un iper-buona vita online e offline!

E non dimentichiamoci che condividendo si impara!!