Lezioni di informatica: come scrivere i form

martedì 14 giugno 2011

HTML: Lezione 15 I Form (II parte)

Lez 15 i Forms II parte

Vediamo gli attributi che possiamo utilizzare con ogni campo.

<input type= text”>

size: larghezza del campo, a seconda di questo attributo si definisce la quantità di dati che visualizzeremo.
Maxlength: massima quantità di dati che possiamo immettere
name: nome interno al campo, che il programma che preleverà i dati
value: valore di default.
align: l'allineamento del field. Puoi scegliere tra : top, middle, bottom, right, left.

Gli stessi attributi si possono applicare ai field password, che sono sempre campi di testo, quello che cambia e che la password immessa non è visibile sul monitor.

Per la textarea, invece abbiamo gli attributi:

<textarea> Questa è l'area di testo </texarea >

cols e rows, ovvero il numero massimo di righe e di colonne del campo.
Name= aggiungere un nome interno al field
wrap = questo attributo può essere, wrap = “off “(il testo è visto come una lunga serie senza gli a capo), wrap = “virtual” (il testo va a capo, ma quando viene inviato diventa una riga unica, 2wrap=physical “il testo va a capo e quando viene inviato rimane così com'è, con tutti gli a capo).

La checkbox, permette di selezionare più scelte, a differenza dei bottoni radio, per cui ne vale solo una.

Name= nome del campo, utili per il programma che riceverà le informazioni.
Value= indica quale opzione è stata scelta, e quindi, ciò che verrà inviato al programma ricevente.
Align= il solito allineamento.
Se aggiungiamo l'attributo checked="checked", vuol dire che stiamo scegliendo questa opzione come standard.

Inutile dire che questi attributi valgono anche per il type = radio, ovvero per i bottoni radio.

I menù a discesa, permettono anch'essi la scelta tra varie opzioni, funziona come i bottoni radio o la checkbox.

Il tag è :

<select>

<option value= “primascelta”> primo </option>

<option value = “secondascelta”> secondo </option>

</select>

Gli attributi di select sono:

name = nome del menù a discesa. Viene scritto select .
Size = quante scelte sono visibili nello stesso momento, di default è una.
Multiple = è presente la scelta multipla.

Gli attributi di option

value =cosa verrà inviato al programma ricevente.

Selected = la voce selezionata di default.

I bottoni di invio < input type = “submit”>, hanno come attributi

name = il nome del bottone
value = il nome visualizzato sul bottone
align = allineamento
tabindex = ordine in cui i campi verranno attivati.

Il tasto reset <input type = “reset”> ha come attributi:

name = il nome del bottone
value = il nome visualizzato
align = l'allineamento
tabindex = ordine in cui i campi verranno attivati.

Gli attributi dell' <input type =”image”> sono:

name = il nome dell'immagine
src = l'indirizzo dell'immagine
align = l'allineamento
border = il bordo intorno all'immagine
height = l'altezza dell'immagine
width = la larghezza dell'immagine
vspace = lo spazio bianco sopra e sotto l'immagine
hspace = lo spazio a destra e sinistra dell'immagine
tabindex = ordine in cui i campi verranno attivati

Facciamo un esempio:

<html>

<title> Il mio form </title>

<body>

<form name = "Contattaci" method ="post" action="http://www.miodominio.com/myformhandler.cgi" >

<fieldset>

<p align = "center">

<legend > dati utente :</legend>

<input type = "text" name = "nome" value = "Il tuo Nome">

<input type = "text" name = "cognome" value = "Il tuo Cognome">

</p>

<p align ="center">

<label > Scrivici: <br/>

<textarea cols ="60" rows="10" wrpa ="physycal">

Scrivi qui il tuo messaggio

</textarea>

</p>

</fieldset>

<p align = "center">

<label> Password: <input type ="password"></label><br/>

<label> Linguaggio di programmazione preferito: <br />

<select>

<option>Java</option>

<option>C++</option>

<option> Php </option>

<option> Altro </option>

</select>

</label><br/>

<label> Linguaggi conosciuti: <br />

<select multiple ="multiple" size ="5">

<option>Java</option>

<option>C++</option>

<option> Php </option>

<option> Html</option>

<option> Css </option>

</select>

<p>

<fieldset>

<p align = "center">

<label> Accetti termini e condizioni?

<input type= "radio" name = "option1" checked = "checked"> Si

<input type = "radio" name= "option2" > No

</label>

</filedset><br />

<input type ="submit" name ="invia" value="Invia" align ="center">

</p>

</form>

</body>

</html>

Il risultato sarà:

HTML: Lezione 14 I Form (I parte)

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>

</form>

Per dare un nome al form utilizziamo l'attributo name:

<form name=”mandaci un'email>

Con action, indichiamo l'indirizzo a cui inviare il form.

<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à:

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....