Lez 14 I forms I parte
I forms sono semplicemente dei moduli che ci permettono di interagire con l'utente. In realtà, per lavorare su questo tipo di elementi abbiamo bisogno, oltre che della pagina che verrà visualizzata dall'utente anche di una pagina secondaria che verrà creata con un linguaggio più complesso come asp o php, ad esempio.
Quindi sono dei form quei moduli che ci permettono di iscriverci ad un sito web o di fare una ricerca all'interno di un sito.
Dato che questo è un corso di html, ci occuperemo solo della parte grafica di questi elementi.
L'inizio e la fine di un form viene indicata dal tag
<form>
<!--Questo è un form-->
</form>
Per dare un nome al form utilizziamo l'attributo name:
<form name=”mandaci un'email>
<form name= “mandaci un'email” action= “mailto:lezioninformatica@gmail.com”>
Infine, dobbiamo indicare se il metodo di invio è di tipo post o get.
<form name= “mandaci un'email” method= “post” action= “mailto:lezioninformatica@gmail.com”>
Il metodo get è indicato quando devono essere inviati pochi parametri e per lo più testuali, dato che questi vengono passati come indirizzo alla pagina che li riceverà.
Quindi nell'url di risposta avremo tutti i dati dopo il punto interrogativo:
<form name="datiUtenti" action="paginadirisposta.php"method="GET">
paginadirisposta.php?nome=Mario&cognome=Rossi&datiInviati=messaggio+ di+ prova
Il metodo post, invece, è indicato se abbiamo una gran mole di dati e se dobbiamo passare dei dati sensibili come una password, infatti esso non usa la barra degli indirizzi, ma contatta la pagina che deve gestire i dati e poi li invia direttamente ad essa
<form name="datiUtenti" action="paginadirisposta.php"method="POST">
All'interno di un form, indichiamo con fieldtest delle aree in cui andremo a suddividere il nostro form
<form>
<fieldset>
<legend> dati utente</legend>
</fieldset>
<fieldset>
<legend>dati di fatturazione</legend>
</fieldset>
<fieldset>
<legend>termini e condizioni</legend>
</fieldset>
</form>
Avremo:
Abbiamo creato un form con tre sezioni e con il tag <legend>, gli abbiamo assegnato un nome.
Se vogliamo dare un etichetta ad un campo, dobbiamo usare il tag <label>
Vediamo come creare i campi.
Essi possono essere di testo, dei bottoni, una checkbox, ecc....
Per crearli dobbiamo scrivere: <input type = text>, ad esempio se vogliamo creare un campo di testo.
<form>
<fieldset>
<legend> dati utente</legend>
</fieldset>
<label> Nome: <input type= “text”></label>
<input type=”text”><label> : Cognome </label>
</form>
Il risultato sarà:
Il risultato sarà:
Vediamo i vari tipi di campi:
- <input type=”text”> = inserisce una riga di testo
- <textarea> più righe di testo </texarea>
- <input type= “password”> = inserisce il campo per una password
- <input type=”checkbox” name = “option” value=”Accetto”> Accetto termini e condizioni = consente la scelta di più opzioni spuntando una casella
- <input type= “radio” name = “option” value=”Accetto”> Accetto termini e condizioni = come checkbox, con la differenza che si può spuntare solo una casella
- <select>
<option>Privato</option>
<option>Partita iva</option>
</select>
= con option e select creiamo dei menù a discesa. Questi contengono tante opzioni, quanti option ci sono tra il campo select.
- <input type= “submit” value= “invia”> = bottone di invio
- <input type= “submit” value= “cancella”> = riporta i tutto ai valori di default
- <input type= “image” src =”immagine.jpg” value= “invia”> = hanno lo stesso effetto dei valori di invio ma con la differenza che viene visualizzata un'immagine al posto del bottone
Nota che qui il tag input non ha bisogno di chiusura.
Vedremo che questi tag possono essere formattati a piacere.
Alla prossima....
Alla prossima....
Nessun commento:
Posta un commento