Da zero a Iper: impariamo insieme il web

condividendo si impara

Input: un elemento fondamentale dei formulari web

2021-06-08 10:17:10

L'elemento input permette al nostro utente di inserire svariati tipi di dati nel nostro form: andiamo a vedere quali sono le sue caratteristiche di base

Iperbenvenuti e iperbenveute!! 
Oggi proseguiamo la nostra esplorazione dei formulari web andando a vedere alcuni attributi fondamentali dell'elemento input: quello che permette al nostro utente di immettere vari tipi di dati nel nostro formulario.
Vedremo in particolare come creare dei campi di testo che il nostro utente potrà compilare inserendo le sue generalità e come dobbiamo impostare questi elementi perché possano raccogliere informazioni in maniera efficace e funzionale.

Che tipo di dato vogliamo?


Innanzitutto impareremo il significato dell'attributo type, che ci permette di impostare un campo adatto al tipo di dato che vogliamo raccogliere. 
Oggi ci concentreremo sui campi che raccolgono testo ma, come vedremo nei prossimi video, esistono svariati tipi differenti che possiamo impostare.

Come contrassegnare i dati perché il server capisca a che cosa si riferiscono


Approfondiremo poi l'attributo name: indispensabile per fare in modo che i dati inviati al server siano utilizzabili. 
Questo attributo permette infatti di associare un nome al valore immesso dall'utente permettendo così al programma che gestirà i dati di capire a che cosa si riferisce il valore ricevuto.

Come contrassegnare il campo perché l'utente capisca che cosa vogliamo che scriva


Vedremo poi anche come associare ad ogni elemento di inserimento dati un'etichetta che indichi all'utente le informazioni che dovranno essere inserite. 
Faremo questo con l'elemento label e gli attributi for e id

Creare delle sezioni di un formulario


E per ultimo vedremo come organizzare i vari campi di inserimento dati in sezioni che raggruppino le informazioni richieste secondo un criterio logico, per esempio una sezione generalità, attraverso gli elementi fieldset e legend.

Ciò che vedremo oggi si incontra in praticamente tutti gli altri elementi che incontreremo nei nostri formulari per cui una volta compresi questi principi potremo avanzare più velocemente nell'esplorazione degli altri tipi di input.
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:

  1. 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
  2. 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!!

Linkoteca

Sito di FreeCodeCamp (il nostro quaderno degli esercizi) 

Invito a "Siamo Iper!": il nostro canale Telegram per le chat vocali di gruppo

Lo scopo e la filosofia di Iper

Come si colloca ciò che impariamo nel più vasto mondo del web

La magia dell'ipertesto

Il browser va all'asilo. Che cos'è un linguaggio di markup

Il browser va a teatro: la struttura di base di una pagina web

Qualche strumento per trasformare il canale in un gruppo di studio interattivo

Esercizi pratici: le basi dell'HTML

HTML 5 e la struttura logica delle pagine web

HTML: impariamo ad aggiungere un'immagine a una pagina web

Facciamo insieme qualche esercizio su FreeCodeCamp (attenzione! spoiler soluzioni!)

 Come funzionano i link: le ancore che ci collegano al web
HTML: come inserire delle liste nelle nostre pagine web 
Quaderno degli esercizi HTML: link liste e inserimento dati
HTML: i tipi di visualizzazione predefiniti degli elementi
HTML: esercizi pratici con soluzioni (spoiler alert!!!)
Il protocollo HTTP: il browser va all'osteria
Introduzione ai formulari web

Introduzione ai formulari web

1  
22