HTML: i form

I FORM  (moduli) permettono di disegnare delle interfacce per inviare e ricevere dati tra l'utente e una pagina web. Per questo non banale motivo I FORM sono uno dei TAG HTML che ne hanno fatto la fortuna. 

Per  funzionare il TAG FORM necessita di 2 pagine web:

  1. la prima presenterà l'interfaccia costituita dai FORM su cui inserire i dati;
     
  2. la seconda servirà per ricevere i dati e rispondere all' utente un messaggio, per esempio che i dati erano inseriti correttamente e che il processo è andato a buon fine. La seconda pagina avrà bisogno di altri linguaggi per manipolare i dati inviati dai FORM, come ASP, PHP, JSP o CGI; in questa lezione tratteremo la scrittura e ed il funzionamento soltanto dei FORM.

Per utilizzare il  TAG FORM è le sue funzioni bisogna innanzitutto creare il 'contenitore', che possiamo considerare un vero e proprio blocco come il TAG <P>, per questo motivo avremo prima dell' apertura e dopo la chiusura del TAG <FORM> sempre uno spazio vuoto. Se vogliamo annullare questo spazio possiamo utilizzare uno stile CSS (CSS: creare uno stile default). 

<form> funzioni e contentuto </form>

Attributi di form

Il TAG FORM possidede degli attributi molto importanti:

  • con NAME indichiamo il nome del form

    <fom name="form-1"> 
     
  • l'atttributo METHOD consente al FORM di inviare i dati in due metodi distinti:
    • GET: i dati vengono inviati tutti in un solo passaggio, è possibile vedere i dati inviati sulla query string, cioè faranno parte della stringa che compone l'indirizzo della pagina che riceve i dati sulla barra di navigazione del browser. Questo metodo viene utilizzato per inviare poche informazioni, dato che alcuni server limitano a 255 caratteri le stringhe inviate dai form.

      <form name="form-1” action=”pagina-risposta.php” method=”GET”>

      paginaRisposta.php?nome=mario&cognome=rossi&datiInviati=prova+invio
       
    • POST: in un primo momeno viene contattata la pagina server che deve ricevre i dati, in un secondo vengono inviati i dati. Questo metodo è preferito perchè non c'è limite alla lunghezza delle stringhe dei dati inviati, ma sopratuttuo perchè i dati, nella maggior parte dei casi si tratta di  dati sensibili,  non sono visibili sulla barra di navigazione.

      <form name=”form-1” action=”pagina-risposta.php” method=”POST”>
       
  • ACTION: indica l'indirizzo a cui inviare i dati (URL), che dovrà essere una pagina server side, elaborata con codice dinamico come il PHP (PHP: ricevere dati da un form).
    Su ACTION è possibile utilizzare utilizzare MAILTO: (un attributo già visto nei link HTML: link), con il quale è possibile inviare i dati ad un' email predefinita;

    <form action=”mailto:Questo indirizzo email è protetto dagli spambots. E' necessario abilitare JavaScript per vederlo. ?subject=Oggetto predefinito” method=”POST”>
     
  • ENCTYPE: tipo di codifica, permette al browser di codificare i dati inviati, per esempio:
    è possibile inviare dati di solo testo

    <form enctype=”text/plain”>

    oppre inviare un file e quindi è necessario segnalare al browser il tipo di dati

    <form  enctype=”multipart/form-data”>
     
  • TARGET: i form possono essere aperti in pagine diverse da quella di partenza, da dove partono i dati

    <form name=”form-1” action=”pagina-risposta.php” method=”get” target=”_blank”>