HTML5 Tutorial Italiano 14 - Form, input, checkbox, radio, bottoni ecc..

buongiorno a tutti ben ritrovati video bonus del corso di html andiamo a vedere i form e tutti i vari in tutti i bottoni e quant'altro perché perché nella nella documentazione di developer mozilla che ho seguito non c'era niente che parlava dei forum allora cominciamo subito che cosa sono i forni forma non sono altro che dei moduli potrebbe essere modulo di contatto la raccolta newsletter potrebbero essere dei moduli da compilare per iscriversi a un sito per iscriversi un'applicazione dovremmo poter inserire dei dati anagrafici magari pensate se siamo su roba governativa questo è un esempio di modulo

che che ho fatto adesso andiamo a vedere quindi informi ci servono per acquisire dei dati da parte dell'utente allora cominciamo subito io commenta un attimo questo perché voglio farvi vedere insomma pian piano allora l'elemento form è questo questo nella sua forma più pura l'elemento forme serve a possiamo dire contenere tutti quelli che saranno i vari input i vari campi che ci servono per raccogliere i dati necessari più uniforme fondamentale perché poi noi intanto vi faccio vedere già quai vale attributi ne andiamo a collegare appunto due attributi importantissimi action ovvero andiamo a dire qual è la

pagina a cui rimandiamo i dati quindi qual è la pagina che si occuperà di gestire questi dati salvarli eccetera quindi in questo caso noi facciamo finter aver un form per l'inserimento inserimento chiamiamo l'inserimento dati punto php php non ve l'ho spiegato prendete la buona come quindi questa è la pagina lato server che si occuperà di prendere questi dati salvarli sul sul database general account o quello che che dovrebbe fare no perché avevo il metodo il metodo è un altro importante attributo che serve per indicare vedete get o post serve per indicare il modo in cui

passiamo i dati se i dati li passiamo in get i dati che noi passiamo li troveremo tipo così per esempio i di uguale ci sarà qualcosa magari abbiamo nome qui facciamo and nome uguale edoard insomma li avete visti dei beni così si vedono di tanto in tanto degli url e e quindi questo e tramite get that vuol dire che noi facciamo una richiesta http dove i dati sono visibili quindi chiunque potrebbe prendere questo url estrapolare i dati quindi questo sarebbe cat mentre invece poste stiamo facendo stiamo facendo una richiesta http post ovvero nascondiamo i dati

quindi nessuno è in grado di riprenderli allora abbiamo il nostro forum adesso dobbiamo cominciare a inserire quelli che sono dei campi per per poter appunto prendere i dati in entrata degli utenti che ci interessano quindi io vi riapro tutto questa pappardella che ho scritto e andiamo analizzare insieme e analizzeremo man mano ciò che vi voglio spiegare quindi cominciamo con gli input lele ball cominciamo con gli input e lele ball allora un input è questo input type text noi salviamo bam andiamo a vedere e questo il nostro input lo vedete un piccolo campo in cui possiamo

scrivere del testo in versione fatemi magari aprire così ok questa è la versione più pura di un campo input mentre invece la lab all altro non è che questa si potrebbe fare in 600 modi ma abbiamo la fortuna di poterla attaccare direttamente quindi ne facciamo una bellissima lab all for me devo mettere il nen del campo che non ho ancora messo in questo caso facciamo prova andiamo così qua scriviamo prova e qua devo mettere un name uguale prova che cosa abbiamo fatto abbiamo un input e ha ben detto scusatemi e type text è un input

di tipo testo poi analizzeremo queste cose qui il cui nome quindi il nome che noi utilizziamo per poterlo trovare tra i vari input nel forum è prova abbiamo creato una le ball e abbiamo detto che questa l'apple va agganciata all'input di nome prova abbiamo scritto che va beh diciamo che abbiamo titolo diverso sono c'è troppo prova input di esempio ok quindi questa è la nostra lei ball è questa il nostro input salviamo andiamo a vedere vedete imposti ad esempio ce lo mette qua potremmo metterlo anche di qua io l'ho messo qua sopra tutti dando css

più avanti lo vedremo col css quindi questo è semplicemente un input e la lei ball che cos'è una select una select è questa la coppia direttamente da qua almeno ci risparmiamo non voglio far vedere tutto il codice qua dentro perché c'è tanta roba analizziamo dopo adesso voglio prenderei pezzo per pezzo e mostrarvelo quindi vedete qui questa è la nostra è la nostra select io ho messo dei dati adesso gli andiamo ad analizzare quindi posso lasciare qui a vuoto oppure posso selezionare tre province abbiamo qua la select col name il nome sempre importante per trovarlo poi

quando passiamo i dati quindi dovete sempre avere un m per il vostro campo oltre al fatto che è utile per la le ball e qui abbiamo delle option quindi sono la select ci dà delle opzioni questo è il valore allora in realtà noi potremmo averlo così e andrebbe bene lo stesso quindi abbia messo i tre valori che vogliamo che l'utente possa selezionare ovvero valore min che sta per milano e qua potremo mettere o mio pure possiamo scrivere milano quindi il valore non deve essere per forza uguale al al testo che vediamo ok questo serva l'utente

questo serve a noi in questo caso la provincia di solito non si mette il nome per intero si mette solo la sigla che cosa ho fatto qua invece qua invece ho messo una cosa aggiuntiva molto spesso vedete che c'è la possibilità di selezionare prima disse prima di scegliere se io faccio così tolgo seleziona vedete che già mi seleziona milano quindi una cosa che si vede spesso è prima c'è il campo vuoto da selezionare vedete così seleziona e poi cioè i campi che ci interessano come facciamo a fare questo seleziona semplicente stiamo seleziona e mettiamo un

valore vuoto quindi se noi teniamo premuto seleziona in realtà quando poi manderemo i dati nel form e risulterà come nessun valore selezionato e questo è importante perché è utile per per l'utente perché sono se lo trova già selezionato e potrebbe non capire poi abbiamo la textarea a giusto multiples semplicemente facendo molti paul qua andiamo a far cosa a poter selezionare con control più cose è una piccola cosa che volevo dirvi subito quindi ecco come fare una select multipla andremo avanti con una text area una textarea differisce dal differisce dall'input perché l'input di solito abbiamo poco

testo in una textarea come potete vedere potendola allargare potremmo scrivere veramente vagonate di roba e potremmo anche mettere codice formattato se stiamo scrivendo se vogliamo mandare del codice facciamo finta che questo sia un conto form di contatto per scrivere a me sì ciao del codice che non funziona teatino invio quindi voi mi mandate il codice il codice resta formattato così perché io ovviamente metterei dietro del del codice che mi permette di leggerlo bello formattato quindi ma arriva qual è il problema io me lo guardo e poi vi rispondo questa potrebbe essere un'idea e una textarea

è molto meglio che mettere tutto il codice letteralmente qua dentro sarebbe un massacro con la textarea possiamo vedere tanto testo è anche formattato diciamo così torniamo da noi e andiamo a vedere il batman è il bottone che dovrei abbastanza esplicativo button type button facciamo così e mettiamo un ciao perfetto abbiamo un bottone ciao si capisce si capisce questi sono i bottoni dunque parliamo di phil set e legend per fare questo uso il forum che già creato questo il fil set il field set altro non è che un wrapper un container vedete che io col fil

set e dentro c'è tutta questa roba è tra cui c'era legend il fil set è un contenitore che dice voglio racchiudere dei campi qua dentro perché hanno un certo significato e mettiamo una legend quindi mettiamo una leggenda e scriviamo il titolo mettendo phil set e legend ve lo faccio vedere qua a vuoto mettiamo phil set e poi mettiamo legend facendo così noi stiamo creando adesso ce lo fa vedere un bellissimo rapper vedete intitolato prova ed è molto comodo perché se noi abbiamo come vedete più dati da raccogliere in questo caso abbiamo dati anagrafici e dati

secondari magari noi vogliamo dividere non tanto per noi ma per l'utente ricorda che tutto quello che noi facciamo lo facciamo per l'utente affinché possa usare al meglio la nostra applicazione nel nostro sito quindi ho fatto un film set ho messo la legend dati anagrafici provare per credere provate a farlo voi ma soprattutto se il set legend dati anagrafici e qua dentro ci ho messo tutti i campi che mi servono arriviamo invece a datalist datalist prendo questo che l'ho già fatto a temi di ci avrei messo un po tantino la data list possiamo definirla come un

suggerimento a un input quindi noi abbiamo un input a cui diamo associamo una lista ovvero una data list e questa lista si chiamano mi fa riferimento a lidi quindi la cosa importante è avere una data list comuni di questi di va messo dentro attributo list ok qualcosa imparato a memoria non c'è un modo per farlo ricordare o spiegarlo quindi c'è una data list con un ed i e ii di va messo come list dell'input quali intromettiamo le option a differenza del select possiamo non chiuderle ok non serve quindi diamo option e abbiamo il valore qual

è il comportamento di questa data list vedete che abbiamo un campo testo in cui possiamo scrivere tranquillamente ma possiamo anche prendere dei suggerimenti quindi fatemi fare così tac luca quindi ho preso un suggerimento potrebbe essere inserisci il nome di un'amica e qua ci sono i nomi più utilizzati potrebbe essere così quindi torna può tornare comodo può tornar comodo in certe circostanze e questa è la data list andiamo avanti e vediamo diversi tipi di input diversi tipi di input sono tanti commessi alcuni abbiamo il testo che abbiamo visto abbiamo la password quindi mi conviene fare un

input generico faccio un input generico password perché so che non l'ho messo nel form input type password è semplicemente guardate che cosa fa di bello io vado qui e se scrivo mi blocca tutto vedete mi fa scrivere ma mi censura tutto ottimo per scriverle password altro l'input ipad type password poi abbiamo type submit che è quel type che diamo all'input per dire ok adesso mi invii il form e poi vi faccio vedere tutto il the present per resettare tutti i campi la radio di solito è il campo più semplice da vedere che ho messo qua

sotto e maschio o femmina poi nel andiamo a vedere le checkbox quando magari abbiamo degli interessi più interessi da selezionare il color germain scegliere un colore personale ciao entra in chat e scegli il colore del tuo nome le date insomma le date li mettiamo sempre data di nascita data di non l'ho neanche messa qua va bè visto che non l'ho messa poi ve lo faccio vedere il campo e mail 15 controlla se abbiamo inserito un'email corretta dei file che vorremmo poter raggiungere e via discorrendo allora vi faccio vedere un attimo il campo data sufficiente perché

qua non ce l'ho input type dei vede qua quanta roba c'è quanta roba c'è io ho elencato quelli più alcuni dei più conosciuti quelli più utilizzati o quelli che potreste aver bisogno adesso poi ci sono sempre documentazioni che dovete che dovete leggere ecco questo è il campo data ci esce una scelta per la data oggi potete fare quello che volete potete scrivere a mano non può sì potete scrivere a mano e direi che è a posto così a novembre 2006 27 275.000 ok diciamo che suonato un po il collegate e questo è il campo data

togliendo il campo data andiamo a vedere nel form cosa ho messo non prenderemo ancora in considerazione gli attributi ma adesso ci arriviamo allora prima vogliamo qua abbiamo un vabbè come sul titolo abbiamo con phil set con legend dati anagrafici abbiamo qua delle lei ball nome cognome codice fiscale e provincia di nascita e mail questo è un campo input tex questo è tex però non posso cliccar e video dopo perché questo è un altro campo di testo con un placeholder dopo vediamo che cos'è questa è una select quella che mai visto prima questo è un campo

email allora campo vuol dire che se faccio così e invio compirà questo campo che fatemi compirà questo campo cosa succede se io al campo email vedete aggiungi un simbolo all'indirizzo email quindi se anche dovesse aggiungere inserisce una parte dopo quindi finché io non inserisco cose mi darà errore poi altro film set dati secondari queste sono le checkbox quindi queste sono le checkbox possibilità di cercare di cercare possiamo metterli più insieme ok paghiamo il colore preferito selezioniamo il colore abbiamo la scelta dei file ok se mettete multiplo potete selezionare con control più file e dopodiché abbiamo

la radio box come potete vedere maschio o femmina quindi la reid e boc ce ne prende una o l'altra mentre invece le checkbox possiamo avere più check box per gli stessi interessi ma non fa assolutamente differenza possiamo selezionarne una come cento mentre invece per l'erede box cioè una poi l'altra non possiamo essere maschio e femmina contemporaneamente abbiamo il tasto reset facciamo così vedete input e presence ci ha completamente tolto tutto abbiamo il tasto invia quindi se inviamo cercano inviarci i forni in questo caso non abbiamo compilato quindi ci dà errore torniamo qui torniamo qua e

là ma vedere gli attributi degli input quindi vi ho messo qua alcune attributi per esempio c'è in questo caso se prendiamo la mia la mia checkbox quindi ora vediamo un po tutto quello che ho fatto qui input type checkbox lo proprio selezionato ho messo sempre il nome ho messo il valore perché è importante perché quando poi passate il dato non vale ball non serve a niente il nome non serve a niente anche se questi coincidono non sono la stessa cosa perché noi quando selezioniamo una checkbox ok stiamo passando questo valore per quanto riguarda cect vedete

vuol dire che già accettata infatti quando noi abbiamo questa pagina la troviamo già accettata e questo è un tipo di attributo abbiamo disabled e qual ha messo su cognome quindi disable vuol dire che non possiamo scrivere è disabilitato il campo potrebbe essere disabilitato per varie cose nel senso che stiamo compilando delle cose sei una persona fisica o giuridica su una persona fisica quindi non devo mettere partita iva di conseguenza il campo viene disabilitato e non verrà poi tenuto in considerazione durante la fase di validazione del forum abbiamo read only read only vuol dire che noi

il campo lo vediamo come attivo ma non possiamo scrivere perché magari abbiamo fatto un passaggio precedente noi abbiamo salvato il nome adesso non possiamo più cambiarlo però ce lo vuole far vedere e ce lo vuole far leggere sono due cose diverse disabilitato da disabilitato allora read only as il campo è già pieno ma ormai lo puoi solo leggere disabilitato è un campo che per quello che stiamo facendo noi non ci serve quindi una cosa dinamica che succede mentre compiliamo appunto come vi dicevo magari sei maschio 6 femmina se sei maschio completi dei campi se sei

femmina le completi altri ok andiamo avanti required vedete tutti gli errori che ci ha dato prima sull'invio cieli da per per il campo record ok quindi il campo è tre quark quindi richiesto abbiamo il value che abbiamo già visto ma adesso riguardiamo quindi il value è il valore effettivo del del campo della select o in questo caso della checkbox piuttosto che del radio che adesso rivediamo che dobbiamo passare poi a php o qualsiasi cosa utilizziamo per salvare i dati nel database abbiamo multipli che abbiamo usato prima il motivo che mi ha usato prima ma lo

possiamo usare anche su file come potete vedere ci fa selezionare più file abbiamo il placeholder questo è importante l'ho messo qua vedete placeholder inserire codice fiscale ne andiamo a vedere e vedete che qui c'è scritto inserire codice fiscale quindi placeholder non è un valore che c'è già nel campo non è come scrivere value che se io qua facessi nome value value uguale marco c'è una differenza abissale tra gli amori don lì c'è una differenza abissale tra placeholder e value la vedete che placeholder è qui e se scrivo mi mette per la prima volta al valore

il nome invece meno tiene se voglio oppure lo posso modificare quindi il placeholder è un aiuto che vediamo qua quando il campo è vuoto mentre invece il nome c'è compilare automaticamente un campo con value vuol dire che magari ha fatto uno step precedente in cui sappiamo già i suoi dati li stiamo pre compilando sono due differenze quindi sono un aiuto contro la precompilazione allora andiamo nel dettaglio e vediamo tutto quello che ho fatto così poi chiudiamo il video dunque abbiamo un form con un action a salva dati php mando con metodo post perché sono dati

sensibili non voglio che le persone lo vedano ho fatto un film set ti ho chiamato dati anagrafici in cuoco in qua in cui chiedo tutti i dati appunto anagrafici che mi servono quindi il nome o una le ball per il campo nome e ho scritto nome ho messo un valore pre impostato marco il campo era wired non ho messo tutti i riguardi se dovrebbe essere quasi tutti raguardo ma in questo caso per per variare non ho fatto così il name e nome quindi fa riferimento quail type text stessa cosa per cognome anche se per ora

lo disabilitato ho messo un campo codice fiscale ok il campo codice fiscale di tipo text il nome codice fiscale o messo un placeholder è record ma soprattutto messo un allen una lunghezza massima di 16 il codice fiscale è un codice lungo 16 caratteri quindi non possiamo metterne 17 se non ne vado e quindi 1 2 3 4 5 6 7 8 9 10 un 2 3 4 5 6 e sono 16 se volesse andare avanti vedete che non mi fa piu scrivere perchè ho raggiunto la lunghezza massima proseguiamo andiamo con provincia di nascita da qui

ne mai visto che è una select ovviamente c'è il name c'è il valore vuoto per selezionare e poi ci sono i tre vari valori di province che è che ho messo quindi milano roma e palermo si chiude la select andiamo con la lei ball per le mail in but i've email quindi facendo solo così potremo mettere un plesso holder magari inserisci inserisci email valida cosa del genere per aiutare l'utente però basta il type email chiudiamo il film set apriamo il film set dati secondari mettiamo con uno spam un titolo per gli interessi ok per aggregare

tutte queste checkbox quindi abbiamo queste tre check box che sono tutte tipo checkbox pd ok abbiamo il name per ritrovare il campo e abbiamo il valore questo la cosa più importante questo è già accettata come prova proseguiamo abbiamo le ball per il colore preferito quindi abbiamo il type color con colore preferito eccolo qua colore preferito più il color picker dobri che scendiamo e abbiamo le ball far aggiuntivi input type file multipli perché possiamo selezionare più file ma perché abbiamo span con ho messo uno style giusto per sistemare un attimo il genere e qui abbiamo una

radio box la re del box è diversa perché deve fare riferimento allo stesso nome facendo riferimento se fosse due cose diverse vedete un po due cose diverse imprese sezionale uno e l'altro vedete quindi come si fa a fare uno o l'altro devono essere tutti dello stesso nome se nello stesso nome solo un valore può abbassare in questo caso il value mf ma ne mandiamo a schermo maschio o femmina chiudiamo chiudiamo abbiamo due imputati input type submit quindi quello che ci manda a schermo scusatemi quello che ci invia il form e quello che c'era l'esatta il

valore qua che mettiamo di questo input aido invece non riflette niente che ha mandato perché sono degli input hype per devono rappresentare dei bottoni quindi il valore qua può confondere rispetto a tutti gli altri valori qua sufficiente stiamo dicendo cosa scrivere nel bottone quindi io ringrazio per essere rimasti con me noi ci vediamo adesso direi veramente al corso html al corso 17 salvo che io faccia altri video bonus fatemi sapere qualsiasi cosa ripeto o gli abbonamenti aperti per sostenere il canale se volete io ringrazio nella prossima ciao ciao