Cominciamo ad assemblare la forma di contatto cancello dal mio dal mio elemento tutto quello che ho fatto finora e comincio con il tag form.

Comincio a inserire al suo interno gli elementi di input che andrò a creare e comincerò ad alternare le bulle ai vari input field.

Vediamo un attimo il design.

Abbiamo una label su una riga e subito sotto il campo di input.

Quindi esiste un tag ben preciso per indicare la label di una forma, il tag table.

In questo caso dare una classe perché vorro' applicare uno stile ben preciso.

Quindi faro' class input Claypool e poi creero' un input di tipo testuale a cui però dare una classe.

La chiamerò input film così potrà applicare delle regole per poter stilare alla perfezione il campo.

Salviamo ricarichiamo la pagina.

Ok, ovviamente non è applicato nessuno stile.

Cominciamo adesso a lavorarci.

La table avrà al suo interno il testo full name, quindi cominciamo a riproporre full name e nel nostro CSS io tornerei nella sezione che abbiamo dedicato ai componenti base, perché alla fine ai componenti di input sono dei componenti che useremo piu' volte, quindi gli sposterei in quella section del nostro, in quella sezione del nostro css li accoglierei a agli elementi tipografici, ai button che abbiamo creato.

Ha senso che siano in quel gruppo di quella famiglia di elementi.

Gnam quindi aggiungo i miei elettori input e input e input film assegniamo alla nostra double un fonsai di ventiquattro pixel è un font-weight di seicento.

Abbiamo visto che è un po' più robusto come fonte e se non ricordo male ce l'ha anche una tax, una text-transform in perché salviamo ed ecco il nostro la nostra leva, il che è stilata.

Passiamo invece al campo di input.

Stiliamo adesso il nostro campo di input font-family che la stessa applicata per il body e diamo anche una dimensione alla stessa fonte del testo che inseriremo.

Quindi quindi fonsai font-size diciotto pix ok, vediamo il risultato bene, cominciamo.

Comincia a prendere forma, ok, aggiungo anche il mio colon che darà colore al testo che inseriro' nella mia nella mia casella di input e diamo anche un colore di sfondo al nostro campo di input.

Quindi background-color e incollo le esadecimale del colore che ci interessa.

Aggiungerei anche un po' di paddy, giusto per dare un po' di respiro al testo che inseriremo, per cui specifico, un pudding, dodici pixel top botto e sedici pixel right left salvo.

E per finire, io farei da design.

Vedo che questi che questi elementi di input hanno un'ampiezza al cento per cento del loro container.

Quindi specifiche Ray, una larghezza con weed cento percento.

Salviamo e iniziamo a vedere il risultato ricaricando la pagina.

Bene, ci siamo quasi.

È ancora qualcosa che li differenzia dal design.

Abbiamo questo bordo che dobbiamo ovviamente rimuovere.

E poi abbiamo abbiamo abbiamo i bordi arrotondati, quindi torniamo un attimo sul nostro CSS, farei un border, non per rimuoverlo e aggiungerei un border radio.

Spero arrotondare il tutto.

Aggiungo un border-radius di trenta pizze.

Okay, salviamo.

Ci siamo quasi.

Serve un po' di fine tuning sugli Aggius, sugli allineamenti, sulle spaziature.

Però non siamo lontani.

Serve aggiungere sicuramente del margine per separare il campo di input dalla sua l'ebola e dagli input che verranno subito dopo.

Definiamo quindi un margin-top di otto pixel e un margine botto di sedici, direi Salviamo vediamo il risultato.

Ok, abbiamo confezionato il primo campo di inbox di Ok, abbiamo confezionato il primo campo di input con i suoi stili.

Direi che abbiamo quindi uno stile che possiamo replicare anche sugli altri.

Cominciamo adesso a definire la struttura degli altri campi e assegniamo le relative classi.

Io repliche Ray adesso un'altra le bulle.

Anche a questa daremo class input Cable.

Vediamo nel design qual è il suo contenuto email.

Ok, questo è un campo di email perfetto.

Quindi all'interno del tag, riproduco il trust dei Mets e dopo servirà un nuovo campo di input.

Questa volta però d-type del tipo adatto.

Quindi input invece che tek sarà me.

E anche in questo caso assegniamo la classe che gli spetta.

Quindi input, film, salviamo.

Vediamo il risultato.

Abbiamo anche il campo in me.

Dai.

Ok, direi che possiamo velocemente copiare e incollare il campo fu online per creare rapidamente il campo, saget.

Quindi farei copie di queste due righe e semplicemente cambiare il contenuto della flebo trasformandola in Savage.

Okay, salviamo ricarichiamo e abbiamo anche il saget.

Ok, resta l'ultimo elemento, la text area.

Abbiamo visto che la TAC starà richiede un tag a sé, quindi utilizzeremo il tag text area che avrà un'apertura.

E una chiusura.

In questo caso aggiungerei una classe che sarà.

Guarda, la faccio specifica soltanto perché vorrei poi applicare un'altezza ben definita a questa text area, quindi io farei invece che un input field la chiamerei input extra area è però volendo riutilizzare gli stili di prima, io potrei andare sul css e sfruttare la possibilità di di dichiarare più selettori con le stesse regole, separandoli da una virgola.

Quindi a input field aggiungo anche il selettore di input text area e anche questa classe avrà gli stessi stili del campo di input.

Possiamo già vederlo ricaricando la pagina manca l'elemento l'hubble, aggiungiamo al volo.

Direi che possiamo anche in questo caso copiarlo e incollarlo.

Non fa differenza, sarà message.

Abbiamo aggiunto l'hubble e dal design mi accorgo che questa text area un'altezza superiore a quella che abbiamo visto predefinita dal browser.

Quindi direi che è un circa cento pixel, per cui sfrutto appunto il selettore, il selettore con cui targetti izzo l'input l'input text area e assegnero' un night di direi cento pixel.

Potrebbe andare quindi cerchero' di renderla un po' piu' alto, un po' piu' evidente.

Ricarico la pagina.

Abbiamo completato anche l'ultimo campo che ci serviva.

Per finire abbiamo visto prima abbiamo dei testi guida dei testi chiamati di plays holder.

Possiamo definire l' attributo places holder su ognuno di questi input, quindi molto velocemente inserirò nell' input dei soldi sam sam per la email abbiamo esempio chiocciola gmail punto com, quindi mettere anche un tasto di peso.

Holder è sempre chiocciola gmail punto com come saget abbiamo examples, saget e via dicendo.

Mentre su mes abbiamo preso il the bright jer ricarichiamo abbiamo anche i nostri bei soldi bene, cioè un ultimo dettaglio che forse quelli più attenti hanno notato accanto alla leva del campo tex tre abbiamo la scritta optional indica appunto che il campo opzionale può non essere inserito.

In questo caso possiamo specificare all'interno del tag double.

Un altro tag userei una una spanna è perfetto, è un tag di tipo inline per cui si affiancherà al tag massaggi e inserire lei al suo interno, appunto la scritta optional vediamo.

Il risultato ovviamente erediterà lo stile del padre, che sarebbe quindi lo stile della bolin se io a questo punto dichiarerai un selettore anche per questo sul css quindi dove ho dichiarato la mia la mia input table sotto posso aggiungere una regola, un selettore specifico per questo spagna, per cui farò input double spazio spagna e in questo caso the finirò un bonsai diciotto pixel è un font-weight in questo caso più leggero.

Quattrocento penso possa andar bene.

Salviamo ricarichiamo.

Abbiamo anche indica l'indicatore del campo optional.

Okay, resta l'ultimo tassello, aggiungiamo il nostro button di summit, quindi mettiamo un button con la scritta Sands ok e volendo ereditare gli stili della nostra e volendo ereditare gli stili che abbiamo già impostato per la classe button, aggiungerei appunto la sua classe relativa ricarico e abbiamo completato strutturalmente ed esteticamente quella che è una forma di contatto.

Vedremo poi come poter inviare i dati a un server e poterli poi consultare in un secondo momento.