Lezione dal corso Web Development
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.
Learnn è la piattaforma online che ti aiuta a 360 gradi a crescere nel digitale. Sviluppa competenze con oltre 220 corsi, condividi i tuoi risultati, fai networking con otre 120.000 professionisti/e e oltre 300 aziende.
Vogliamo cambiare l’Italia, una persona alla volta.
Per farlo ci proponiamo di democratizzare l’apprendimento e accelerare la crescita di persone, idee e aziende attraverso strumenti tecnologici a supporto di qualsiasi professionista.
Learnn prevede un piano totalmente gratuito (Free) che ti permette di iniziare qualsiasi corso che abbiamo su Learnn.
Per chi volesse finire i corsi, ottenere certificazioni e connettersi con professionisti e aziende, Learnn Pro permette di avere accesso illimitato a tutto questo. Il corso di Learnn Pro è 9.99 euro / mese e puoi disdire quando vuoi.
Per i team di aziende abbiamo anche un Piano Team con oltre 300 clienti aziendali.
Potrai seguire i contenuti da computer, tablet e smartphone.
Scarica l’App iOS/Android Learnn e segui i contenuti in modalità video, audio e testo.
Learnn ha un piano gratuito che ti permette di accedere all 40% di ogni corso in maniera gratuita e solo con la tua email.
Learnn offre sia un piano gratuito con accesso limitato ai contenuti, sia un piano PRO del costo di soli 9.99 euro al mese con cui potrai avere accesso a tutti i nostri contenuti senza limiti o sorprese.
Una volta completata l’iscrizione sarà possibile gestire i propri dati e disdire in qualsiasi momento e in completa autonomia.
No, non offriamo certificazioni, facciamo di meglio.
Man mano che completi corsi potrai verificare le tue competenze e condividerle sul tuo profilo LinkedIn o CV.
Inoltre abbiamo sviluppato una feature chiamata Profile attraverso il quale otterrai un link personale per mostrare in tempo reale tutti i contenuti da te completati e molto altro.
Immagine personale, username, badge, link esterni e molto altro.
Crea una vera e propria sales page dove il prodotto in vendita sono le tue competenze.
Se avessi altre domande puoi usare la live chat qui di fianco.
Per partnership compila questo form
La nostra vision è rendere l'Italia famosa nel mondo per l'esecuzione.
La missione di Learnn
è accelerare la crescita di ogni individuo rendendo accessibili conoscenza, opportunità e tecnologia per avere un impatto positivo sul mondo e sugli altri.
Tutto incluso (come Netflix), IVA inclusa, nessuna sorpresa o addebito indesiderato.
Disdici quando vuoi, in 1 click.
Scegli di migliorare ogni giorno per 12 mesi senza interruzioni scegliendo il piano annuale.
In un unico pagamento annuale
Disdici quando vuoi, in 1 click.
Con l’abbonamento otterrai:
Consuma i +200 corsi e webinar di Learnn da webapp o app iOS e Android, in formato video, audio o testo.
Con l'abbonamento a Learnn hai accesso a tutto (proprio tutto) ciò che contiene la piattaforma.
Ogni mese registriamo nuovi corsi su tutto cio di cui potresti avere bisogno nel mondo digitale.
Con l'app Learnn trasformi ogni momento di vuoto in un'occasione di apprendimento.
Scarica tutto il materiale che ti serve e utilizza i moduli riassuntivi per fissare i concetti.
Ogni settimana nuove offerte di lavoro da parte di tantissime aziende che operano nel mondo digitale.