---
title: Forms in HTML5
slug: Web/HTML/Forms_in_HTML
translation_of: Learn/HTML/Forms/HTML5_updates
---
<div>
  {{gecko_minversion_header("2")}}</div>
<h2 id="Sommario">Sommario</h2>
<p>Gli elementi e gli attributi dei form in <strong>HTML5</strong> forniscono un mark-up più ricco di valore semantico rispetto ad HTML4, e alleggeriscono gli sviluppatori dalla necessità di scripting e styling intensivo richiesta da HTML4. Le caratteristiche dei form HTML5 generano anche una migliore esperienza utente, rendendo i form più coerenti tra i diversi siti web fornendo un feedback immediato all'utente in merito ai dati inseriti. La funzionalità viene fornita anche agli utenti che hanno disabilitato lo scripting nel browser.</p>
<p>Questa sezione descrive gli elementi nuovi o modificati in HTML5, che sono supportati da Gecko / Firefox, versione 4 o superiore.</p>
<h2 id="The_input_element" name="The_input_element">L'elemento <code>&lt;input&gt;</code></h2>
<p>L'elemento <code>{{HTMLElement("input")}}</code> ha alcuni nuovi valori per l'attributo {{htmlattrxref("type", "input")}}.</p>
<ul>
  <li><code>search</code>: L'elemento rappresenta un campo di ricerca. Le interruzioni di riga vengono rimosse automaticamente dal valore immesso, ma nessun'altra sintassi viene imposta.</li>
  <li><code>tel</code>: L'elemento rappresenta un controllo per la modifica di un numero telefonico. Le interruzioni di riga vengono rimosse automaticamente dal valore immesso, ma nessun'altra sintassi viene imposta, dato che la formattazione dei numeri di telefono varia notevolmente a livello internazionale. È possibile utilizzare attributi quali {{htmlattrxref("pattern", "input")}} e {{htmlattrxref("maxlength", "input")}} per limitare i valori immessi nel controllo.</li>
  <li><code>url</code>: L'elemento rappresenta un controllo per la modifica di un <a class="external" href="http://it.wikipedia.org/wiki/URL" title="http://it.wikipedia.org/wiki/URL">URL</a>. Le interruzioni di riga e gli spazi vuoti finali vengono eliminati automaticamente dal valore immesso.</li>
  <li>
    <p><code>email</code>: L'elemento rappresenta un controllo per la modifica di un indirizzo email. Le interruzioni di riga vengono rimosse automaticamente dal valore immesso. Un indirizzo e-mail non valido può essere immesso, ma il campo di input verrà validato solo se l'indirizzo di posta elettronica soddisfa la produzione ABNF <code>1*( atext / "." ) "@" ldh-str 1*( "." ldh-str )</code> dove <code>atext</code> è definito in <a class="external" href="http://tools.ietf.org/html/rfc5322#section-3.2.3">RFC 5322 sezione 3.2.3</a>, e <code>ldh-str</code> è definito in <a class="external" href="http://tools.ietf.org/html/rfc1034#section-3.5">RFC 1034 sezione 3.5</a>.</p>
    <div class="note">
      <strong>Nota:</strong> Se l'attributo {{htmlattrxref("multiple", "input")}} è presente, potranno essere inseriti diversi indirizzi email nel {{HTMLElement("input")}}, ad esempio una lista di email separate da virgole, ma questa funzionalità al momento non è stata implementata in Firefox.</div>
  </li>
</ul>
<p>L'elemento {{HTMLElement("input")}} ha anche nuovi attributi:</p>
<ul>
  <li>{{htmlattrxref("list", "input")}}: l'ID di un elemento {{HTMLElement("datalist")}} il cui contenuto, che consiste in elementi {{HTMLElement("option")}}, dovrà essere utilizzato come suggerimento: le {{HTMLElement("option")}} (opzioni) vengono visualizzate nell'area dedicata ai suggerimenti del campo di input.</li>
  <li>{{htmlattrxref("pattern", "input")}}: Un'espressione regolare con cui il valore del controllo viene confrontato. Può essere usato negli {{HTMLElement("input")}} di tipo <code>text</code>, <code>tel</code>, <code>search</code>, <code>url</code>, ed <code>email</code>.</li>
  <li>{{htmlattrxref("form", "input")}}: Una stringa indicante a quale elemento {{HTMLElement("form")}} "appartiene" l'input. Ogni input può appartenere ad un solo form.</li>
  <li>{{htmlattrxref("formmethod", "input")}}: Una stringa indicante il metodo HTTP (GET o POST) da usare per l'invio dei dati al server; sovrascrive l'attributo {{htmlattrxref("method", "form")}} dell'elemento {{HTMLElement("form")}}, se definito. L'attributo {{htmlattrxref("formmethod", "input")}} può essere usato negli {{HTMLElement("input")}} di tipo <code>image</code> o <code>submit</code>, e quando l'attributo {{htmlattrxref("form", "input")}} è stato impostato.</li>
  <li>{{htmlattrxref("x-moz-errormessage", "input")}} {{non-standard_inline}}: Una stringa che contiene un messaggio da visualizzare quando il campo non passa la validazione. Questo attributo è un'estensione di Mozilla, non rientra negli standard.</li>
</ul>
<h2 id="The_form_element" name="The_form_element">L'elemento <code>&lt;form&gt;</code></h2>
<p>L'elemento {{HTMLElement("form")}} ha un nuovo attributo:</p>
<ul>
  <li>{{htmlattrxref("novalidate", "form")}}: Questo attributo fa in modo che il form <strong>non</strong> richieda la validazione.</li>
</ul>
<h2 id="The_datalist_element" name="The_datalist_element">L'elemento <code>&lt;datalist&gt;</code></h2>
<p>L'elemento {{HTMLElement("datalist")}} racchiude una lista di elementi {{HTMLElement("option")}} da suggerire all'utente durante la compilazione di un {{HTMLElement("input")}}.</p>
<p>Puoi aggiungere l'attributo {{htmlattrxref("list", "input")}} ad un elemento {{HTMLElement("input")}} per collegare un campo specifico ad un elemento {{HTMLElement("datalist")}} specifico.</p>
<h2 id="The_output_element" name="The_output_element">L'elemento <code>&lt;output&gt;</code></h2>
<p>L'elemento <code>{{HTMLElement("output")}}</code> rappresenta il risultato di una computazione (un calcolo).</p>
<p>Puoi usare l'attributo {{htmlattrxref("for", "output")}} per specificare una relazione tra un elemento <code>{{HTMLElement("output")}}</code> e altri elementi del documento che hanno influenzato la computazione (come input o parametri). Il valore dell'attributo {{htmlattrxref("for", "output")}} è una lista di ID degli altri elementi separati da spazi.</p>
<p>{{non-standard_inline}} Gecko 2.0 (ma non necessariamente altri motori di rendering dei browser) supporta la definizione di vincoli di validità personalizzati e messaggi di errore per gli elementi {{HTMLElement("output")}}, e pertanto applica le pseudo-classi CSS {{Cssxref(":invalid")}}, {{Cssxref(":valid")}}, {{Cssxref(":-moz-ui-invalid")}}, e {{Cssxref(":-moz-ui-valid")}} anche ad esso. Ciò può essere utile in situazioni in cui il risultato calcolato viola una regola, ma nessun valore immesso specifico lo fa (per esempio, "La somma totale delle percentuali non deve superare il 100%").</p>
<h2 id="The_placeholder_attribute" name="The_placeholder_attribute">L'attributo <code>&lt;placeholder&gt;</code> (testo segnaposto)</h2>
<p>L'attributo {{htmlattrxref("placeholder", "input")}} si applica agli elementi {{HTMLElement("input")}} e {{HTMLElement("textarea")}}, fornendo all'utente un suggerimento su cosa dovrebbe immettere nel campo. Il testo segnaposto non deve contenere interruzioni di linea.</p>
<h2 id="The_autofocus_attribute" name="The_autofocus_attribute">L'attributo <code>&lt;autofocus&gt;</code></h2>
<p>L'attributo {{htmlattrxref("autofocus", "input")}} consente di specificare che un campo dovrebbero ricevere il focus (dovrebbe essere "focalizzato") al caricamento della pagina, a meno che l'utente non decida altrimenti, per esempio immettendo dati in un altro campo. L'attributo <code>autofocus</code>, Booleano, può essere assegnato ad un solo campo per ciascun form. Si applica agli elementi <code>{{HTMLElement("input")}}</code>, <code>{{HTMLElement("button")}}</code>, <code>{{HTMLElement("select")}}</code> e <code>{{HTMLElement("textarea")}}</code>. Unica eccezione: non può essere assegnato agli elementi <code>{{HTMLElement("input")}}</code> che abbiano l'attributo {{htmlattrxref("type", "input")}} impostato su <code>hidden</code> (ovviamente non si può focalizzare un elemento nascosto).</p>
<h2 id="The_label.control_DOM_property" name="The_label.control_DOM_property">La proprietà label.control del DOM</h2>
<p>L'interfaccia DOM <code><a href="/en-US/docs/DOM/HTMLLabelElement" title="DOM/HTMLLabelElement">HTMLLabelElement</a></code> fornisce una proprietà extra, oltre alle proprietà che corrispondono agli attributi dell'elemento HTML <code>{{HTMLElement("label")}}</code>. La proprietà <strong>control</strong> restituisce il campo etichettato, cioè il campo a cui si riferisce l'etichetta (label), che è determinato dall'attributo {{htmlattrxref("for", "label")}} (se definito) o dal primo campo contenuto nell'etichetta.</p>
<h2 id="Constraint_Validation" name="Constraint_Validation">Vincoli di Validazione</h2>
<p>HTML5 fornisce sintassi ed elementi API per supportare la validazione lato client dei form. Anche se questa funzionalità non sostituisce la validazione lato server, che è ancora necessaria per la protezione e l'integrità dei dati, la validazione lato client può fornire una migliore esperienza utente, dando all'utente un feedback immediato sui dati immessi.</p>
<p>Se l'attributo <code>title</code> viene impostato su di un elemento {{HTMLElement("input")}}, il suo valore è usato come tooltip. Tuttavia, se la validazione fallisce, il tooltip sarà sostituito con un messaggio di errore. È possibile personalizzare tale messaggio di errore usando l'attributo non-standard {{htmlattrxref("x-moz-errormessage")}} o con il metodo <code>setCustomValidity()</code>.</p>
<pre class="brush: html">&lt;input type="email" title="Si prega di fornire una e-mail" x-moz-errormessage="E-mail non valida"&gt;</pre>
<div class="note">
  <strong>Nota:</strong> I vincoli di validazione non sono supportati dagli elementi {{HTMLElement("button")}}; per assegnare uno stile ai bottoni in base allo status di validazione del form, usare la pseudo-classe {{cssxref(":-moz-submit-invalid")}}.</div>
<h3 id="HTML_Syntax_for_Constraint_Validation" name="HTML_Syntax_for_Constraint_Validation">Sintassi HTML per Vincolare la Validazione</h3>
<p>I seguenti elementi di sintassi HTML5 possono essere usati per specificare i vincoli sui dati immessi nel form.</p>
<ul>
  <li>L'attributo {{htmlattrxref("required", "input")}} nell'elemento {{HTMLElement("input")}}, {{HTMLElement("select")}} e {{HTMLElement("textarea")}} indica che il campo deve essere compilato. (Sull'elemento {{HTMLElement("input")}}, {{htmlattrxref("required", "input")}} si applica solo in combinazione con alcuni valori dell'attributo {{htmlattrxref("type", "input")}})</li>
  <li>L'attributo {{htmlattrxref("pattern", "input")}} nell'elemento {{HTMLElement("input")}} vincola il valore in modo che corrisponda una specifica espressione regolare.</li>
  <li>Gli attributi {{htmlattrxref("min", "input")}} e {{htmlattrxref("max", "input")}} nell'elemento {{HTMLElement("input")}} vincola il valore specificando il valore minimo e massimo che può essere immesso.</li>
  <li>L'attributo {{htmlattrxref("step", "input")}} nell'elemento {{HTMLElement("input")}} (se usato in combinazione con gli attributi {{htmlattrxref("min", "input")}} e {{htmlattrxref("max", "input")}} ) vincola la granularità dei valori che possono essere immessi. I valori che non corrispondono ad uno degli "step" consentiti non passano la validazione.</li>
  <li>L'attributo {{htmlattrxref("maxlength", "input")}} negli elementi {{HTMLElement("input")}} e {{HTMLElement("textarea")}} vincola il numero massimo di caratteri (in base a punti di codice Unicode) che l'utente può immettere.</li>
  <li>I valori <code>url</code> e <code>email</code> nell'attributo {{htmlattrxref("type", "input")}} restringono i valori accettati rispettivamente ad un URL o ad un indirizzo e-mail valido.</li>
</ul>
<p>In aggiunta, è possibile evitare i vincoli di validazione specificando l'attributo {{htmlattrxref("novalidate", "form")}} nel {{HTMLElement("form")}}, o l'attributo {{htmlattrxref("formnovalidate", "button")}} nell'elemento {{HTMLElement("button")}} o nell'elemento {{HTMLElement("input")}} (quando l'attributo {{htmlattrxref("type", "input")}} è impostato su <code>submit</code> o <code>image</code>). Questi attributi indicano che il form <strong>non</strong> deve essere validato.</p>
<h3 id="Constraint_Validation_API" name="Constraint_Validation_API">API per i Vincoli di Validazione</h3>
<p>Le seguenti proprietà e metodi del DOM, correlati ai vincoli di validazione, sono disponibili agli scripts lato client:</p>
<ul>
  <li>Negli oggetti <code><a href="/en-US/docs/DOM/HTMLFormElement" title="DOM/HTMLFormElement">HTMLFormElement</a></code>, il metodo <code>checkValidity()</code> restituisce "true" se tutti gli elementi associati a tale elemento del form che sono soggetti a validazione soddisfano i loro vincoli, e "false" se non lo fanno.</li>
  <li>On <a href="/en-US/docs/HTML/Content_categories#Form-associated" title="HTML/Content Categories#form-associated">form-associated elements</a>:
    <ul>
      <li>La proprietà <code>willValidate</code> è "false" se l'elemento non soddisfa i vincoli di validazione.</li>
      <li>La proprietà <code>validity</code> è un oggetto <code><a href="/en-US/docs/DOM/ValidityState" title="DOM/ValidityState Interface">ValidityState</a></code> rappresentante lo stato di validazione dell'elemento.</li>
      <li>La proprietà <code>validationMessage</code> è un messaggio che descrive eventuali errori relativi ai vincoli impostati sull'elemento.</li>
      <li>Il metodo <code>checkValidity()</code>, se l'elemento non soddisfa uno o più dei suoi vincoli, o true in caso contrario.</li>
      <li>Il metodo <code>setCustomValidity()</code> imposta un messaggio di errore personalizzato, permettendo anche ai vincoli personalizzati di essere imposti e validati, oltre a quelli predefiniti.</li>
    </ul>
  </li>
</ul>
<h2 id="Vedi_anche">Vedi anche</h2>
<ul>
  <li><a href="/en-US/docs/HTML/Forms" title="/en-US/docs/HTML/Forms">Guida ai Forms HTML</a></li>
</ul>