HTML5 - Web Form 2.0

Web Forms 2.0 è un'estensione delle funzionalità dei moduli presenti in HTML4. Gli elementi e gli attributi del modulo in HTML5 forniscono un maggior grado di markup semantico rispetto a HTML4 e ci liberano da una grande quantità di noiosi script e stili richiesti in HTML4.

L'elemento <input> in HTML4

Gli elementi di input HTML4 utilizzano l'estensione type attributo per specificare il tipo di dati. HTML4 fornisce i seguenti tipi:

Sr.No.	Tipo e descrizione
1	text Un campo di testo in formato libero, nominalmente privo di interruzioni di riga.
2	password Un campo di testo in formato libero per informazioni riservate, nominalmente privo di interruzioni di riga.
3	checkbox Un insieme di zero o più valori da un elenco predefinito.
4	radio Un valore enumerato.
5	submit Una forma gratuita di pulsante avvia l'invio del modulo.
6	file Un file arbitrario con un tipo MIME e facoltativamente un nome file.
7	image Una coordinata, relativa alla dimensione di una particolare immagine, con la semantica extra che deve essere l'ultimo valore selezionato e avvia l'invio del modulo.
8	hidden Una stringa arbitraria che normalmente non viene visualizzata all'utente.
9	select Un valore enumerato, molto simile al tipo di radio.
10	textarea Un campo di testo in formato libero, nominalmente senza limitazioni di interruzione di riga.
11	button Una forma gratuita di pulsante che può avviare qualsiasi evento relativo al pulsante.

Di seguito è riportato il semplice esempio di utilizzo di etichette, pulsanti di opzione e pulsanti di invio:

... 
<form action = "http://example.com/cgiscript.pl" method = "post">  
   <p> 
      <label for = "firstname">first name: </label> 
      <input type = "text" id = "firstname"><br /> 
   
      <label for = "lastname">last name: </label> 
      <input type = "text" id = "lastname"><br /> 
   
      <label for = "email">email: </label> 
      <input type = "text" id = "email"><br> 
   
      <input type = "radio" name = "sex" value = "male"> Male<br> 
      <input type = "radio" name = "sex" value = "female"> Female<br> 
      <input type = "submit" value = "send"> <input type = "reset"> 
   </p> 
</form> 
 ...

L'elemento <input> in HTML5

Oltre agli attributi sopra menzionati, gli elementi di input HTML5 hanno introdotto diversi nuovi valori per typeattributo. Questi sono elencati di seguito.

NOTE - Prova tutti i seguenti esempi utilizzando l'ultima versione di Opera browser.

Sr.No.	Tipo e descrizione
1	appuntamento Una data e un'ora (anno, mese, giorno, ora, minuti, secondi, frazioni di secondo) codificate secondo ISO 8601 con il fuso orario impostato su UTC.
2	datetime-local Una data e un'ora (anno, mese, giorno, ora, minuti, secondi, frazioni di secondo) codificate secondo ISO 8601, senza informazioni sul fuso orario.
3	Data Una data (anno, mese, giorno) codificata secondo ISO 8601.
4	mese Una data composta da un anno e un mese codificati secondo ISO 8601.
5	settimana Una data composta da un anno e un numero di settimana codificati secondo ISO 8601.
6	tempo Un tempo (ora, minuti, secondi, frazioni di secondo) codificato secondo ISO 8601.
7	numero Accetta solo valori numerici. L'attributo step specifica la precisione, il valore predefinito è 1.
8	gamma Il tipo di intervallo viene utilizzato per i campi di input che dovrebbero contenere un valore da un intervallo di numeri.
9	e-mail Accetta solo valore e-mail. Questo tipo viene utilizzato per i campi di input che dovrebbero contenere un indirizzo e-mail. Se provi a inviare un semplice testo, forza di inserire solo l'indirizzo email nel formato [email protected].
10	url Accetta solo il valore dell'URL. Questo tipo viene utilizzato per i campi di input che dovrebbero contenere un indirizzo URL. Se provi a inviare un testo semplice, viene forzato l'inserimento solo dell'indirizzo URL nel formato http://www.example.com o nel formato http://example.com.

L'elemento <output>

HTML5 ha introdotto un nuovo elemento <output> che viene utilizzato per rappresentare il risultato di diversi tipi di output, come l'output scritto da uno script.

Puoi usare il file forattributo per specificare una relazione tra l'elemento di output e altri elementi nel documento che hanno influenzato il calcolo (ad esempio, come input o parametri). Il valore dell'attributo for è un elenco separato da spazi di ID di altri elementi.

<!DOCTYPE HTML>

<html>
   <head>
      <script type = "text/javascript">
         
         function showResult() {
            x = document.forms["myform"]["newinput"].value;
            document.forms["myform"]["result"].value = x;
         }
      </script>
   </head>
   
   <body>

      <form action = "/cgi-bin/html5.cgi" method = "get" name = "myform">
         Enter a value : <input type = "text" name = "newinput" />
         <input type = "button" value = "Result"  onclick = "showResult();" />
         <output name = "result"></output>
      </form>
		
   </body>
</html>

Produrrà il seguente risultato:

L'attributo segnaposto

HTML5 ha introdotto un nuovo attributo chiamato placeholder. Questo attributo sugli elementi <input> e <textarea> fornisce un suggerimento all'utente su ciò che può essere inserito nel campo. Il testo segnaposto non deve contenere ritorni a capo o avanzamenti riga.

Ecco la semplice sintassi per l'attributo segnaposto:

<input type = "text" name = "search" placeholder = "search the web"/>

Questo attributo è supportato solo dalle ultime versioni dei browser Mozilla, Safari e Crome.

<!DOCTYPE HTML>

<html>
   <body>

      <form action = "/cgi-bin/html5.cgi" method = "get">
         Enter email : <input type = "email" name = "newinput" 
            placeholder = "[email protected]"/>
         <input type = "submit" value = "submit" />
      </form>

   </body>
</html>

Questo produrrà il seguente risultato:

L'attributo autofocus

Questo è un semplice schema in un passaggio, facilmente programmabile in JavaScript al momento del caricamento del documento, focalizza automaticamente un particolare campo del modulo.

HTML5 ha introdotto un nuovo attributo chiamato autofocus che verrebbe utilizzato come segue:

<input type = "text" name = "search" autofocus/>

Questo attributo è supportato solo dalle ultime versioni dei browser Mozilla, Safari e Chrome.

<!DOCTYPE HTML>

<html>
   <body>
   
      <form action = "/cgi-bin/html5.cgi" method = "get">
         Enter email : <input type = "text" name = "newinput" autofocus/>
         <p>Try to submit using Submit button</p>
         <input type = "submit" value = "submit" />
      </form>
      
   </body>
</html>

L'attributo richiesto

Ora non è necessario disporre di JavaScript per le convalide lato client come la casella di testo vuota non verrebbe mai inviata perché HTML5 ha introdotto un nuovo attributo chiamato required che sarebbe usato come segue e insisterebbe per avere un valore -

<input type = "text" name = "search" required/>

Questo attributo è supportato solo dalle ultime versioni dei browser Mozilla, Safari e Chrome.

<!DOCTYPE HTML>

<html>
   <body>
   
      <form action = "/cgi-bin/html5.cgi" method = "get">
         Enter email : <input type = "text" name = "newinput" required/>
         <p>Try to submit using Submit button</p>
         <input type = "submit" value = "submit" />
      </form>
      
   </body>
</html>

Produrrà il seguente risultato: