[HTML] Form: inserire dati in una pagina

Oggi tratteremo i form HTML.



I form HTML sono usati per passare i dati inseriti nella pagina a un server.

Un form può contenere un campo di testo, aree di testo, checkbox ecc...

Un form viene creato così:

<form>
.....
</form>

Vediamo singolarmente i principali elementi di input che possono essere contenuti in un form.




Campo di testo

Un campo di testo è usato per accogliere dati che gli utenti inseriranno in una sola linea di testo.
Esempio:

Nome: 

Il codice da inserire nel form è:

<input type="text" name="nome_form"/>


dove al posto di nome_form inserite il nome da associare al form per distinguerlo dagli altri.



Area di testo


L'area di testo è utilizzata per permettere all'utente di inserire linee di testo su più righe ad esempio il contenuto di una email.
Esempio:

Contenuto email:



Il codice da inserire nel form è:

<textarea name="prova" rows="5" cols="30"></textarea>

dove al posto di name inserite il nome da associare alla textarea (anche qui servirà per identificarlo nello script che elabora i dati), rows sono le righe della tabella mentre cols sono le colonne.





Campo password

L'HTML mette a disposizione anche un campo dedicato alle password dove ciò che scriviamo non è visibile in caratteri ma in puntini.

Esempio:

Password:

Il codice da inserire nel form è:

<input type="password" name="pwd" />

dove al posto di name inserite un nome associato al campo password (anche qui servirà per identificarlo nello script che elabora i dati)





Radio buttons

Con il radio button l'utente può effettuare la scelta tra vari elementi e selezionare al massimo UN SOLO elemento.

Esempio:

Pasta
Pizza
Pane

Il codice da inserire nel form è questo (per un singolo radio button):

<input name="cibo" type="radio" value="pasta" /> Pasta<br />


Nel caso d'esempio:


<input name="cibo" type="radio" value="pasta" /> Pasta<br />
<input name="cibo" type="radio" value="pizza" /> Pizza<br />
<input name="cibo" type="radio" value="pane" /> Pane<br />


come al solito name da un nome all'elemento del form, in questo caso è lo stesso per i tre radio buttons. Anche qui name  servirà per identificarlo nello script che elabora i dati.
Da notare che dopo la fine del tag del radio button c'è il testo che compare accanto al radio button.


Checkboxes


Con i checkboxes l'utente può effettuare liberamente la scelta (nessuna scelta, una scelta o più scelte).

Esempio:

Calciatore
Musicista

Codice c'esempio:


<input name="job" type="checkbox" value="Calciatore" /> Calciatore<br />
<input name="job" type="checkbox" value="Musicista" /> Musicista


anche qui name da un nome ai checkboxes e anche qui name  servirà per identificarlo nello script che elabora i dati.


Submit


Ultimo elemento che vedremo è il pulsante submit.

Il pulsante submit invia i dati presenti nella pagina al server. La pagina del server a cui inviare i dati si specifica nel form. Solitamente la pagina a cui arrivano i dati ne farà uso (di solito sono pagine dinamiche PHP, Asp o servlet Java).

Esempio:



Codice:

<input type="submit" value="Invia"/>


Codice esempio di un submit nel form:

<form name="prova" action="pagina.php" method="get">
<input type="submit" value="Invia"/>
</form>


Il tag form ha 3 attributi: name è il nome del form, action è usato per indicare la pagina a cui andranno i dati, method indica il metodo usato (GET o POST).






Con il submit termina questo articolo sui form HTML.


Spero sia stato utile e di facile comprensione.


Alla prossima. Grazie per la lettura.