Focalizziamoci adesso sulla parte più importante della nostra section di contatto, ovvero la forma, quella con cui consentiremo ai nostri utenti di scriverci dei messaggi, quindi di poterci contattare e di conseguenza raccogliere questi messaggi e poter rispondere a loro successivamente.

Adesso analizzeremo il funzionamento di una form in generale e poi passeremo alla costruzione dei singoli elementi di input per poi assemblare una forma completa.

L'obiettivo di una forma è quella di ricevere quindi i dati dell'utente qua abbiamo.

In questo mockup grafico abbiamo un esempio classico di Ford contatto dove possiamo individuare un input testuale, quindi un input per il nome, un input di tipo email per inserire la mail dell'utente che ci contatta.

Poi abbiamo una text area per scrivere un messaggio più corposo e poi abbiamo una checkbox solitamente che viene usata per l'accettazione della privacy.

Infine un button che farà da Sam Smith button consentirà l'invio della forma al server okay materialmente quando clicchiamo poi al la sabbia della form materialmente consentirà l'invio dei dati dal front end, quindi dal nostro sito a un server.

Quindi ha un background che sarà predisposto, avrà del codice che riceverà questi dati e magari gli servirà li salverà a database e o deciderà magari di inviare una mail di risposta all'utente.

Grazie per averci contattato, quindi è tutta una parte di logica che risiede sul server che non vedremo in queste elezioni, ma su cui poi ci appoggeremo grazie a un servizio esterno di terze parti.

Ma lo vedremo più avanti nel corso delle elezioni.

Intanto quello che a noi interessa e completare la fase di summit costruire la forma e i suoi elementi.

Esistono vari tipi di input ne abbiamo visti prima alcuni ma andando avanti abbiamo input testuali input che ci insegna ci consentono di inserire i numeri dei colori.

Quindi i classici color picker abbiamo parlato di xbox, di radio sono input per le date con cui comparirà un picker dov'é selezionare giorno, mese, anno.

Insomma davvero tante tipologie di input.

Noi in questo momento ci focalizzeremo soltanto su quelle che serviranno a noi.

Diamo nuovamente uno sguardo al design della nostra forma.

Vediamo quali campi possiamo andare ad utilizzare.

Abbiamo è un film, quindi sarà un campo di tipo testuale.

Notiamo come all'interno c' è già anche un testo che ci fa da guida, ci dice già la tipologia di informazione che andremo insegui a inserire e questo è comunemente detto Places Holder.

Poi abbiamo un campo di tipo email, quindi un campo dedicato all'inserimento di un indirizzo e-mail un budget sarà anche questo è un campo di tipo testuale.

E un messaggio che in questo caso potrebbe essere una text area.

In tutti i casi vediamo che è sempre presente un testo che fa da Places Holder e a chiudere la nostra forma abbiamo il tasto di summit.

Quindi cominciamo a smontare questa forma, a creare i singoli componenti che ci serviranno a partire proprio dal da un campo di input un campo testuale.

Torno sul mio Mark sulla mia pagina HTML.

Io cancellerei già il nostro places Holder e comincerei a giocare un po' con i campi di input a inizio a digitare il input.

Vediamo come riesco d' ce lo completa di default di default che ci dà già una tipologia che è type text.

Abbiamo visto che ci sono tante tipologie tramite l' attributo.

Ti possiamo indicare al browser qual è il tipo di campo che in quel caso vogliamo reindirizzare.

In questo caso semplice testo text va bene salvo e vediamo cosa reindirizza il browser.

Il carico ok, cioè una casellina bianca è un inizio.

Io qui posso gia' in sella, inserire del testo, ma è ancora distante visivamente da quello che è l'input che serve a noi.

Quali attributi abbiamo? Potremmo utilizzare la attributo Place Holder.

Abbiamo parlato prima di un testo guida.

No l'abbiamo visto a design come già L'input ci suggerisce Name is our name, quindi eh direi che Pryce Holder può andare come attributo e indicherò all'interno e Suriname.

Salvo ricarico e vediamo che il testo guida appare appunto un testo Places Holder.

Quindi quando io inizio a digitare all'interno questo qui Questo testo sparisce per poi ricomparire quando cancella il contenuto perfetto è Torniamo al design è ci occuperemo dopo della ball che aggiungeremo per indicare che tipo di campo che tipo di informazione andrà nel campo.

Questo è un altro taglio.

Vediamo separatamente ed è diverso dal risolvere questo è importante saperlo.

Un comportamento completamente diverso l'altro attributo che non utilizzeremo in questo caso, ma è importante conoscere el attributo value con l' attributo value.

Io posso già impostare un valore di iniziale un valore di partenza per il mio campo di input.

In questo caso, nel caso di input testuale, basta che io dell'attributo value scrivi possa scrivere qualunque cosa tipo Filippo salvo e quando andro' a ricaricare il browser, vedrò che l'input è già valorizzato con il valore che ho inserito nella attributo value.

Questo non ci servirà in questo caso, ma è importante conoscerlo per prevale bizzarre eventuali campi che ci interessa, che ci interessano.

Bene io rimuovere il attributo value perché a noi non interessa.

In questo momento prevale utilizzare il nostro campo di input, invece piuttosto giocherei con gli altri elementi che ci serviranno.

Ci servirà abbiamo detto, un input di tipo email per la per la nostra email.

Anche qui potremmo utilizzare un paese holder email address.

Vediamo.

Il risultato sul nostro browser è molto simile al campo testuale.

Vedremo poi quali sono le differenze nello specifico rispetto al campo di tipo text.

Aggiungiamo anche una text area per cui ho un tag specifico.

A differenza dei del tag input finora usato che si chiama proprio text area è un tag, prevede anche questo un inizio è un tag di apertura, è un tag di chiusura e al suo interno posso decidere anche in questo caso di pre valorizzarlo con qualunque tipo di valore io voglia.

Posso essere inventarmi un lorem di cinque parole, salvare e vediamo come la nostra Tex Tex area compare nel nostro layout già pre valorizzata con questo con questa stringa di testo.

Queste erano le tre tipologie di input che abbiamo analizzato in dettaglio e che andremo adesso a stilare.

Utilizzare per comporre la nostra forma.