{"id":107,"date":"2010-10-05T11:51:52","date_gmt":"2010-10-05T09:51:52","guid":{"rendered":"https:\/\/alistapart.com\/it\/article\/validazione-innovativa-delle-form\/"},"modified":"2010-10-05T11:51:52","modified_gmt":"2010-10-05T09:51:52","slug":"validazione-innovativa-delle-form","status":"publish","type":"article","link":"https:\/\/alistapart.com\/it\/article\/validazione-innovativa-delle-form\/","title":{"rendered":"Validazione innovativa delle form"},"content":{"rendered":"<p><img decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2010\/10\/15-form2_w.jpg\" border=\"0\" align=\"left\" \/>La validazione delle form \u00e8 stata una questione puntigliosa fin dalla nascita del web. Prima di tutto ci fu il riassunto degli errori della validazione server-side. Poi ci si \u00e8 evoluti fino alla validazione client-side per verificare i risultati inline. Ora, abbiamo quel gigante in marcia che \u00e8 HTML5 e CSS3: il <a href=\"http:\/\/www.w3.org\/TR\/html5\/forms.html#client-side-form-validation\">capitolo sulle form<\/a> di HTML5 offre nuovi tipi di input ed attributi che rendono possibili dei vincoli di validazione. Il <a href=\"http:\/\/www.w3.org\/TR\/css3-ui\/\">basic UI module<\/a> di CSS3 fornisce diverse pseudo-classi che ci aiutano ad assegnare uno stile a quegli stati di validazione e a cambiare l&#8217;aspetto di un campo a seconda delle azioni dell&#8217;utente. Diamo un&#8217;occhiata a come combinare le due cose per creare un form validator basato su CSS che sia abbastanza ampiamente supportato dai browser.<\/p>\n<p>Pi\u00f9 riusciamo a guidare un utente su come deve completare un campo di una form in tempo reale, minori saranno le possibilit\u00e0 che questi facciano degli errori. Guardate <a href=\"https:\/\/alistapart.github.io\/code-samples\/forward-thinking-form-validation\/index.html\">l&#8217;esempio di CSS3 form validation<\/a> in un browser che supporti le pseudo-classi UI di CSS3 come Chrome 4+, Safari 5+ o Opera 9.6+. Utilizzo le pseudo-classi UI di CSS3 e gli attributi delle form HTML5 per fare una validazione basata su CSS. Vediamo come funziona.<\/p>\n<div class=\"paragrafo\">\n<h2>Le pseudo-classi UI di CSS3<\/h2>\n<p>Il modulo UI ha molte pseudo-classi che aiutano ad assegnare degli stili ai campi delle form nei vari stati.<\/p>\n<ul>\n<li><code>valid<\/code><\/li>\n<li><code>invalid<\/code><\/li>\n<li><code>required<\/code><\/li>\n<li><code>optional<\/code><\/li>\n<li><code>in-range<\/code><\/li>\n<li><code>out-of-range<\/code><\/li>\n<li><code>read-only<\/code><\/li>\n<li><code>read-write<\/code><\/li>\n<\/ul>\n<p>Nella demo di cui sopra, ho usato le pseudo-classi <code>required<\/code>, <code>invalid<\/code> e <code>valid<\/code> per ottenere la validazione CSS:<\/p>\n<pre><code>\ninput:focus:required:invalid {\n  background: pink url(ico_validation.png) 379px 3px no-repeat;\n}\ninput:required:valid {\n  background-color: #fff;\n  background-position: 379px -61px;\n}\n<\/code><\/pre>\n<p>Dal momento che vogliamo solo denotare che un campo non \u00e8 valido una volta che ha il focus, usiamo la pseudo-classe <code>focus<\/code> per azionare lo stile assegnato alla non validit\u00e0. (Naturalmente, contrassegnando tutti i campi obbligatori come non validi fin dall&#8217;inizio sarebbe una scelta progettuale piuttosto scarsa).<\/p>\n<p>Portare il focus su un campo non valido obbligatorio fa scattare lo stile che mostra un&#8217;icona di pericolo [un triangolo rosso con un punto esclamativo all&#8217;interno, <em>ndt<\/em>], che avvisa l&#8217;utente che qualcosa deve essere inserito. Una volta che i vincoli di validazione del campo sono soddisfatti, si attiva la pseudo-classe <code>valid<\/code>. Ora, togliamo la pseudo-classe <code>focus<\/code> in modo che rimanga il segno di spunta di colore verde che indica che il campo \u00e8 corretto.<\/p>\n<p>Tutte le pseudo-classi elencate sopra si spiegano da sole. Le pseudo-classi <code>in-range<\/code> e <code>out-of-range<\/code> devono essere usate insieme agli attributi <code>min<\/code> e <code>max<\/code>, sia che siano su un input di tipo range, un campo number o su qualunque altro tipo che accetta questi attributi. Ad esempio, se un utente inserisce un valore che \u00e8 <code>out-of-range<\/code>, possiamo usare la pseudo-classe per cambiare lo stile per riflettere lo stato; allo stesso modo possiamo fare lo stesso con i valori <code>in-range<\/code>.<\/p>\n<p>Al momento, solo Opera supporta le pseudo-classi di range. Gli altri browser lo faranno presto.<\/p>\n<\/div>\n<div class=\"paragrafo\">\n<h2>Ulteriori tipi ed attributi che ci aiutano<\/h2>\n<p>Le form HTML5 introducono inoltre nuovi tipi di input come <code>email<\/code>, <code>url<\/code> e <code>number<\/code>. Ad esempio, <code>email<\/code> fa scattare solo la pseudo-classe <code>valid<\/code> quando l&#8217;utente inserisce un indirizzo e-mail valido: lo stesso vale per <code>number<\/code> e <code>url<\/code>. I vincoli sulla validazione dell&#8217;url differiscono tra i vari browser. In Opera, scrivere \u201chttp:\/\/\u201d contrassegna il campo url come valido. In Chrome scrivere \u201chttp:\/\/\u201d lo contrassegna come valido, mentre scrivere semplicemente \u201chttp:\u201d in Safari contrassegna un url come valido.<\/p>\n<p>Ci sono anche alcuni attributi che aiutano la validazione, come <code>placeholder<\/code>, <code>required<\/code>, <code>maxlength<\/code>, <code>pattern<\/code>, <code>min<\/code>, <code>max<\/code> e <code>step<\/code>:<\/p>\n<pre><code>\n&lt;input id=\"postcode\" name=\"postcode\" type=\"number\" min=\"1001\" max=\"8000\"\nmaxlength=\"4\" required \/&gt;\n<\/code><\/pre>\n<p>Il campo codice postale usa il nuovo tipo number e qualche altro nuovo attributo. In Australia, un codice postale pu\u00f2 solo avere quattro cifre, cos\u00ec impostiamo l&#8217;attributo <code>maxlength<\/code> per restringerlo. Vogliamo anche restringere i limiti inferiore e superiore del codice postale, cos\u00ec usiamo gli attributi <code>min<\/code> e <code>max<\/code> per stabilire dei limiti. L&#8217;attributo <code>required<\/code> si spiega da solo.<\/p>\n<p>Possiamo usare l&#8217;attributo <code>step<\/code> per restringere ulteriormente un campo con <code>min<\/code> e <code>max<\/code>. Di default, <code>step<\/code> \u00e8 impostato a uno, cos\u00ec che qualsiasi numero tra i valori minimo e massimo incrementato di almeno uno sia validato. Cambiare <code>step<\/code> a 100 valida tra il range impostato se il valore che l&#8217;utente ha inserito \u00e8 un incremento di 100. Ad esempio, se impostiamo l&#8217;attributo step a 100 sul campo codice postale, 1001 sar\u00e0 un valore valido, cos\u00ec come 1101, 1201, 1301, etc.<\/p>\n<\/div>\n<div class=\"paragrafo\">\n<h2>Trovare il pattern<\/h2>\n<p>Per azionare la pseudo-classe <code>invalid<\/code> su condizioni pi\u00f9 specifiche, cos\u00ec come un rudimentale numero di telefono, possiamo usare l&#8217;attributo <code>pattern<\/code> che ci permette di applicare un&#8217;espressione regolare al campo.<\/p>\n<pre><code>\n&lt;input type=\"tel\" id=\"tel\" name=\"tel\" pattern=\"\\d{10}\" placeholder=\n\"Please enter a ten digit phone number\" required \/&gt;\n<\/code><\/pre>\n<p>L&#8217;espressione regolare di cui sopra \u00e8 semplice. Dice \u201cAccetter\u00f2 solo esattamente dieci cifre e niente altro.\u201d In questo modo, il campo sar\u00e0 sempre non valido finch\u00e9 non saranno soddisfatti i requisiti dell&#8217;espressione regolare. Notate l&#8217;uso dell&#8217;attributo come <code>placeholder<\/code> per dare all&#8217;utente un piccolo suggerimento.<\/p>\n<p>Possiamo veramente spingere il potere dell&#8217;attributo <code>pattern<\/code> applicando un&#8217;espressione regolare pi\u00f9 complessa come faccio nel campo password:<\/p>\n<pre><code>\n&lt;input id=\"password\" name=\"password\" type=\"password\" title=\"Minimum 8\ncharacters, one number, one uppercase and one lowercase letter\" required\npattern=\"(?=^.{8,}$)((?=.*\\d)|(?=.*\\W+))(?![.\\n])(?=.*[A-Z])\n(?=.*[a-z]).*\" \/&gt;\n<\/code><\/pre>\n<p>Dal momento che abbiamo delle condizioni specifiche che restringono l&#8217;insieme di valori che gli utenti possono inserire, forzandoli a creare una password pi\u00f9 sicura, impostiamo un&#8217;espressione regolare complessa come mostrato sopra. La password deve essere lunga almeno otto caratteri, contenere un numero, una lettera minuscola e una lettera maiuscola.<\/p>\n<p>Per aiutare un utente a soddisfare queste condizioni, usiamo l&#8217;attributo <code>title<\/code> per aiutarli a comprendere esattamente quali siano le richieste. Non usiamo l&#8217;attributo <code>placeholder<\/code> in questo caso, perch\u00e9 necessita di maggiori spiegazioni e <code>placeholder<\/code> dovrebbe essere solo usato per brevi indicazioni.<\/p>\n<\/div>\n<div class=\"paragrafo\">\n<h2>Aggiungere suggerimenti preziosi<\/h2>\n<p>Se l&#8217;utente non passa mai sul campo e invece scorre fra questi con il tab, potrebbe non notare mai le istruzioni extra nell&#8217;attributo <code>title<\/code>. Potete notarlo sui campi phone, postcode e password: un prezioso aiuto appare quando il campo ha bisogno di istruzioni extra.<\/p>\n<pre><code>\n&lt;input id=\"password\" type=\"password\"  \/&gt;\n\n&lt;p class=\"validation01\"&gt;\n  &lt;span class=\"invalid\"&gt;Minimum 8 characters, one number, one uppercase \nletter and one lowercase letter&lt;\/span&gt;\n\n  &lt;span class=\"valid\"&gt;Your password meets our requirements, thank you.\n&lt;\/span&gt;\n&lt;\/p&gt;\n<\/code><\/pre>\n<p>Il markup di cui sopra ha un container extra che ha sia il box di suggerimento <code>invalid<\/code> sia quello <code>valid<\/code>. In questo modo, quando il campo non \u00e8 valido, conterr\u00e0 delle informazioni extra per aiutare l&#8217;utente. Quando invece compilano il campo correttamente, il nostro messaggio e la spunta verde lo rassicurano di averlo compilato correttamente.<\/p>\n<pre><code>\n.validation01 {\n  background: red;\n  color: #fff;\n  display: none;\n  font-size: 12px;\n  padding: 3px;\n  position: absolute;\n  right: -110px;\n  text-align: center;\n  top: 0;\n  width: 100px;\n}\ninput:focus + .validation01 {\n  display: block;\n}\ninput:focus:required:valid + .validation01 {\n  background: green;\n}\ninput:focus:required:valid + .validation01 .invalid {\n  display: none;\n}\ninput:focus:required:invalid + .validation01 .valid {\n  display: none;\n}\n<\/code><\/pre>\n<p>Per mostrare o nascondere il suggerimento d&#8217;aiuto, a seconda dello stato in cui si trova il campo, possiamo puntare al campo concatenando le pseudo-classi, usando i sibling combinator per concentrarci sul suggerimento corretto. Una volta che il campo sar\u00e0 stato compilato correttamente, il background diventa verde ed il messaggio di validit\u00e0 viene mostrato.<\/p>\n<\/div>\n<div class=\"paragrafo\">\n<h2>Considerazioni di UX sull&#8217;approccio corrente<\/h2>\n<p>C&#8217;\u00e8 un problema importante riguardo il modo in cui la pseudo-classe <code>invalid<\/code> funziona attualmente quando un campo \u00e8 richiesto e ha delle condizioni aggiuntive che devono essere soddisfatte, ad esempio, quando un campo \u00e8 <code>required<\/code> <em>e<\/em> il suo tipo \u00e8 <code>email<\/code>. Poich\u00e9 il campo \u00e8 sempre non valido finch\u00e9 le condizioni non sono soddisfatte, avr\u00e0 gli stili del campo non valido. In questo caso, il campo sar\u00e0 istantaneamente non valido e marcato con il rosso, con errori ancora prima che l&#8217;utente abbia inserito qualunque cosa. E&#8217; per questo che usiamo la pseudo-classe <code>focus<\/code> per mostrare gli stili del campo non valido solo quando un campo ha il focus. Questo non \u00e8 ottimale: se un utente si sposta dal campo senza aver soddisfatto le condizioni di validazione, il campo non indicher\u00e0 che qualcosa \u00e8 sbagliato finch\u00e9 l&#8217;utente non riporta di nuovo il focus a questo.<\/p>\n<p>Una soluzione proposta per questo sar\u00e0 quella di aggiungere la <a href=\"http:\/\/www.w3.org\/TR\/css3-selectors\/#indeterminate\">pseudo-classe indeterminate<\/a> disponibile sugli input radio e checkbox. Tecnicamente, un campo che ha pi\u00f9 condizioni di quelle richieste quando \u00e8 vuoto non \u00e8 n\u00e9 valido n\u00e9 non valido, ma piuttosto <em>indeterminate<\/em>. Questa idea sistemer\u00e0 la questione del non valido (instant) e ci permette di assegnare in maniera ottimale uno stile al campo a seconda del suo stato di validazione.<\/p>\n<p>In aggiunta a ci\u00f2, possiamo ottenere alcune funzionalit\u00e0 piuttosto comprensive (comprehensive) senza JavaScript. Possiamo dire in quale stato sia un campo, se \u00e8 richiesto, dire se \u00e8 conforme ad un certo patter con delle espressioni regolari, specificare dei valori minimi e massimi e molto altro. Ma cosa succede se questo non basta? Cosa succede se vogliamo spingerci oltre? Bene, siamo fortunati perch\u00e9 nel capitolo delle form HTML5 viene inoltre specificata <a href=\"http:\/\/www.whatwg.org\/specs\/web-apps\/current-work\/multipage\/association-of-controls-and-forms.html#the-constraint-validation-api\">la constraint validation API<\/a>.<\/p>\n<\/div>\n<div class=\"paragrafo\">\n<h2>Constraint validation API<\/h2>\n<p>Insieme a tutti i nuovi attributi, tipi di input e pseudo-classi CSS3, il capitolo delle form in HTML5 specifica inoltre che una semplice API JavaScript ci permette di estendere le capacit\u00e0 di validazione di una form con alcuni pratici metodi, attributi ed eventi built-in. Osservate la <a href=\"https:\/\/alistapart.github.io\/code-samples\/forward-thinking-form-validation\/enhanced.html\">demo aggiornata<\/a>, che si aggancia ai vincoli della validation API.<\/p>\n<p>Ciascun campo della form ha un nuovo attributo chiamato <code>validity<\/code>. L&#8217;attributo <code>validity<\/code> ritorna un oggetto <code>ValidityState<\/code> che rappresenta lo stato\/gli stati di validit\u00e0 attuali di un elemento. L&#8217;oggetto <code>ValidityState<\/code> contiene diversi attributi booleani che identificano in quali stati di validit\u00e0 si trovi l&#8217;attuale elemento. Tipicamente, sono una serie di risposte vero\/falso che dicono allo sviluppatore esattamente cosa \u00e8 sbagliato in quel campo:<\/p>\n<ul>\n<li> <strong>valueMissing<\/strong><br \/> Questo attributo ritorna <code>true<\/code> se un elemento obbligatorio \u00e8 vuoto. <\/li>\n<li> <strong>typeMismatch<\/strong><br \/> Questo valore si applica a tutti i nuovi attributi di tipo. Ad esempio, se un valore <code>email<\/code> non \u00e8 corretto, questo attributo ritorna <code>true<\/code>. <\/li>\n<li> <strong>patternMismatch<\/strong><br \/> Quando un elemento contiene l&#8217;attributo <code>pattern<\/code> e non \u00e8 conforme alle condizioni dell&#8217;espressione regolare, questo attributo ritorner\u00e0 <code>true<\/code>. <\/li>\n<li> <strong>tooLong<\/strong><br \/> Quando un qualsiasi elemento sorpassa la sua propriet\u00e0 <code>maxlength<\/code> questo attributo ritorner\u00e0 <code>true<\/code>. <\/li>\n<li> <strong>rangeUnderflow e rangeOverflow<\/strong><br \/> Se gli attributi <code>min<\/code> o <code>max<\/code> di un elemento sono al di sopra o al di sotto dei valori specificati, questo attributo ritorner\u00e0 <code>true<\/code>. <\/li>\n<li> <strong>stepMismatch<\/strong><br \/> Quando un elemento con l&#8217;attributo <code>step<\/code> non \u00e8 conforme al valore <code>step<\/code> richiesto, questo attributo ritorna <code>true<\/code>. <\/li>\n<li> <strong>valid<\/strong><br \/> Se uno qualsiasi dei valori elencati sopra ritorna <code>true<\/code>, questo attributo ritorna <code>false<\/code> per indicare che il campo non \u00e8 valido. Altrimenti, se tutte le condizioni sono soddisfatte, ritorner\u00e0 <code>true<\/code>. <\/li>\n<\/ul>\n<\/div>\n<div class=\"paragrafo\">\n<h2>E c&#8217;\u00e8 dell&#8217;altro<\/h2>\n<p>L&#8217;evento <code>invalid<\/code> ha un&#8217;altra comoda feature. Sar\u00e0 invocato dal campo quando \u00e8 ancora non valido. In questo modo possiamo attaccare ad esso un comportamento, nel nostro caso, cambiare lo stile del campo (o dei campi) per far s\u00ec che rifletta il loro stato corrente.<\/p>\n<p>Inoltre, il metodo <code>checkValidity()<\/code> pu\u00f2 essere eseguito su ciascun campo inviduale o sull&#8217;intera form ed avere come valore di ritorno <code>true<\/code> o <code>false<\/code>. Eseguire il metodo far\u00e0 scattare programmaticamente l&#8217;evento <code>invalid<\/code> per tutti i campi che non sono validi o, se eseguito su un singolo campo, solo su quell&#8217;elemento.<\/p>\n<\/div>\n<div class=\"paragrafo\">\n<h2>Portami alla demo<\/h2>\n<p>Prendiamo la nostra demo precedente e potenziamola con la constraint validation API. Prendendo quello che abbiamo imparato dall&#8217;articolo di Luke Wroblewski <a href=\"http:\/\/www.alistapart.com\/articles\/inline-validation-in-web-forms\/\"><cite>Inline Validation in Web Forms<\/cite><\/a> e le nostre scoperte, possiamo applicare queste idee alla nostra form per creare un&#8217;esperienza ottimale di validazione inline.<\/p>\n<p>La prima cosa che possiamo sistemare \u00e8 l&#8217;assegnazione istantanea dello stile di errore di un campo non valido. Piuttosto che dare immediatamente uno stile al campo per indicare che l&#8217;utente non ha soddisfatto i requisiti, aspettiamo finch\u00e9 si siano spostati dal campo per mostrare qualunque problema possa esserci.<\/p>\n<p>Se hanno soddisfatto le richieste mentre il campo ha ancora il focus, faremo in modo che l&#8217;utente sappia istantaneamente che il campo \u00e8 corretto. Facciamo ci\u00f2 attaccando l&#8217;evento <code>input<\/code> per controllare che il campo sia valido. Quando lo \u00e8, aggiorniamo gli stili per rifletterlo immediatamente.<\/p>\n<p>Se un campo ha valori non corretti e l&#8217;utente si sposta al campo successivo, l&#8217;evento <code>blur<\/code> controller\u00e0 la validit\u00e0 del campo e poi applicher\u00e0 gli stili di errore per far s\u00ec che l&#8217;utente sappia che c&#8217;\u00e8 qualcosa di sbagliato. Manterr\u00e0 gli stili di errore finch\u00e9 non saranno rispettati i requisiti.<\/p>\n<\/div>\n<div class=\"paragrafo\">\n<h2>E per quel che riguarda i vecchi browser?<\/h2>\n<p>Tutti gli argomenti discussi sono piuttosto recenti ed il supporto da parte dei browser, sebbene sia buono, non va bene per un ambiente di produzione reale, in cui dobbiamo offrire supporto ai vecchi browser. Qui \u00e8 dove diventa comodo <a href=\"http:\/\/github.com\/ryanseddon\/H5F\">lo script<\/a> che ho scritto.<\/p>\n<p>Per i browser che non supportano il capitolo delle form HTML5 e la constraint validation API, lo script simula quelle funzionalit\u00e0. Per i browser che supportano queste features, lo script individua il supporto e si aggangia alla funzionalit\u00e0 nativa. Diamo un&#8217;occhiata alla <a href=\"https:\/\/alistapart.github.io\/code-samples\/forward-thinking-form-validation\/enhanced_2.html\">demo ulteriormente aggiornata<\/a> a cui \u00e8 stato aggiunto il nuovo script. Provatela in IE o Firefox per verificare che funziona come nei browser con supporto nativo.<\/p>\n<\/div>\n<div class=\"paragrafo\">\n<h2>Browser supportati<\/h2>\n<p>Questo script \u00e8 stato testato e funziona nei seguenti browser:<\/p>\n<ul>\n<li>IE6+<\/li>\n<li>Firefox 1+\u2014FF4 avr\u00e0 presto il supporto nativo.<\/li>\n<li>Chrome 4+\u2014Supporto nativo.<\/li>\n<li>Safari 3.2+\u2014Safari 5 ha il supporto native.<\/li>\n<li>Opera 9.6+\u2014Supporto nativo.<\/li>\n<\/ul>\n<p>Le seguenti features sono emulate nello script:<\/p>\n<ul>\n<li>Ciascun campo ha l&#8217;oggetto <code>validity<\/code> object che \u00e8 live e vi informer\u00e0 sullo stato corrente del campo.<\/li>\n<li>Il metodo <code>checkValidity()<\/code> \u00e8 disponibile ed indica se la form o uno specifico elemento non sono validi.<\/li>\n<li>Gli attributi di input <code>pattern<\/code>, <code>placeholder<\/code>, <code>required<\/code>, <code>min<\/code>, <code>max<\/code> e <code>step<\/code> sono supportati.<\/li>\n<li>Gli attributi <code>placeholder<\/code> e <code>required<\/code> sono supportati per le textarea.<\/li>\n<li>L&#8217;attributo <code>required<\/code> \u00e8 supportato per input selezionati.<\/li>\n<li>I tipi di input <code>email<\/code> e <code>url<\/code> verranno controllati rispetto ad una espressione regolare built-in e saranno non validi finch\u00e9 non saranno conformi.<\/li>\n<\/ul>\n<\/div>\n<div class=\"paragrafo\">\n<h2>Un sacco di validazione!<\/h2>\n<p>Il supporto dei browser per le form HTML5 e per il modulo UI di CSS3 comincia a migliorare. Opera 9 ha mostrato la via implementando <a href=\"http:\/\/www.whatwg.org\/specs\/web-forms\/current-work\/\">Web Forms 2.0<\/a> prima che fosse inglobato nel HTML5 form chapter, ma ha supportato il modulo UI di CSS3 solo a partire dalla versione 9.6. Chrome ha supportato ci\u00f2 sin dalla versione 4, Safari l&#8217;ha recentemente inserito nella versione 5, Firefox dovrebbe aggiungere il supporto in una beta della versione 4 che uscir\u00e0 a breve e IE9, se continuano con i loro progressi, dovrebbe avere il supporto in una delle loro preview build.<\/p>\n<p>Possiamo fare alcune cose sbalorditive con i nuovi moduli e chapters di CSS3 e HTML5 rispettivamente. Man mano che migliora il supporto dei browser, questi tipi di tecniche diventano un&#8217;opzione percorribile che pu\u00f2 essere adattata alla semplice e complessa natura della validazione delle form.<\/p>\n<p>Illustrazioni: {carlok}<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Quando gli utenti compilano una form per comprare uno dei vostri prodotti o per sottoscrivere un vostro servizio, volete che gli errori siano ridotti al minimo e che vengano guidati verso il successo. Ora, con gli input types e gli attributi delle form in HTML5, potete porre dei vincoli di validazione per controllare l&#8217;input dell&#8217;utente. Con le nuove pseudo-classi UI di CSS3, potete assegnare degli stili agli stati di validazione per rendere la compilazione della form pi\u00f9 veloce e semplice.<\/p>\n","protected":false},"author":818,"featured_media":7000593,"comment_status":"open","ping_status":"open","template":"","categories":[242,244,247,271,29],"tags":[],"coauthors":[310],"class_list":["post-107","article","type-article","status-publish","has-post-thumbnail","hentry","category-browser","category-css","category-html","category-javascript","category-numero-15-5-ottobre-2010"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article\/107","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/users\/818"}],"replies":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/comments?post=107"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media\/7000593"}],"wp:attachment":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media?parent=107"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/categories?post=107"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/tags?post=107"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/coauthors?post=107"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}