Web form: terminiamo la carrellata degli elementi principali

2021-06-10 14:40:55

Nel video di oggi vi propongo di prendere l'auto di Paperino e concludere la nostra esplorazione degli elementi più importanti che compongono un formulario

Come sempre permettetemi di esordire accogliendo tutte e tutti voi con un iper-benvenuto!
I formulari sono un elemento molto interessante ed importante nel nostro percorso in cui stiamo imparando a costruire siti web da zero.
Per questo ce ne siamo occupati in diversi video.
Quello che vi propongo oggi chiude la carrellata dei principali contenuti di un formulario.
Ecco ciò che vedremo.

Come proporre ai nostri utenti una scelta fra diverse opzioni attraverso un menu a tendina

L'elemento select ci permette di creare una lista di opzioni che verranno visualizzate attraverso un menu a tendina.
Oltre all'attributo name, obbligatorio per tutti gli elementi di un formulario, vedremo che possiamo impostare la grandezza della lista attraverso l'attributo size.
Con size="3", per esempio, faremo in modo che la lista occupi lo spazio per presentare tre opzioni e abbia una barra di scorrimento che permetta di scoprire le altre.
Possiamo inoltre fare in modo che il nostro utente possa scegliere più di una opzione utilizzando l'attributo multiple.
L'elemento select è il contenitore del nostro menu a tendina e al suo interno dobbiamo inserire le opzioni che vogliamo proporre al nostro utente: ad esempio delle auto fra cui sceglierne una preferita.
Lo facciamo attraverso l'elemento option.
Ogni scelta che proponiamo, ad esempio la 313 o la batmobile, sarà un elemento option a cui attribuiremo un valore, attraverso l'attributo value.
Possiamo anche fare in modo che una delle opzioni sia già preselezionata utilizzando l'attributo selected.
L'elemento optgroup ci permette, poi, di dividere le opzioni presentate in diversi gruppi ognuno indentificato da un'etichetta che impostiamo attraverso l'attributo label.

Come creare un'area di testo per ricevere commenti o testi più strutturati

Attraverso l'elemento textarea possiamo creare un box in cui il nostro utente può inserire dei testi strutturati come dei commenti o delle lettere dei lettori,...
Ne gestiamo le dimensioni attraverso gli attributi rows, che indica il numero di righe che occuperà quest'area di testo, e cols, che indica il numero di colonne.
Se usiamo un'area di testo converrà valutare l'uso dell'attributo maxlenght per limitare il numero di caratteri che l'utente potrà inserire.

Come creare un pulsante invia e un pulsante cancella

E siamo arrivati al termine della nostra carrellata con i pulsanti finali del nostro formulario.
Per creare un pulsante invia dobbiamo utilizzare un elemento input di tipo submit.
Questa volta non è necessario che sia attribuito un nome a questo elemento, però possiamo attribuirgli un valore che corrisponderà al testo visualizzato nel pulsante.
Anche per creare il pulsante cancella utilizzeremo un elemento input, questa volta di tipo reset e anche questa volta senza dovergli dare un nome ma solo un valore che corrisponderà al testo scritto nel pulsante.

Una panoramica non esaustiva ma che ci ha permesso di comprendere i principi più importanti

Ciò che abbiamo visto negli ultimi video non esaurisce tutto l'argomento dei formulari ma ci da gli strumenti per poter comprendere anche le cose nuove che potremmo incontrare nella pratica.
La mia speranza è di aver trasmesso i principi di funzionamento di questi elementi e alcuni fra i loro contenuti più interessanti e utilizzati.
Nel prossimo video termineremo provvisoriamente questo argomento con un paio di accorgimenti per richiedere e trasmettere informazioni attraverso i formulari tenendo conto della protezione dei dati degli utenti.
Nel frattempo qui sotto trovare altre informazioni e la linkoteca in cui potrete recuperare i video precedenti anche su questo tema.

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!!