Il presente articolo è stato tradotto automaticamente.

Creazione di applicazioni HTML5

Web Form migliori grazie ai moduli HTML5

Brandon Satrom

Scaricare il codice di esempio

Se siete uno sviluppatore Web, è stato creato probabilmente un modulo HTML prima.In realtà, si può creare più di essi è importante ricordare.Senza dubbio si conosce già classici tipi di input come testo, password, file, nascosti, casella di controllo, radio, inviare e pulsante ed è probabilmente avrete già utilizzato nella maggior parte o tutti questi in diversi momenti.

Se si dovesse chiedere quale tipo di input, ovvero dall'elenco precedente, è possibile utilizzare più di qualsiasi altro, è probabilmente verrebbe pronunciare "text", come farebbe la maggior parte di noi.Il tipo di input di testo è multitool di sviluppo di moduli HTML classico.Da un lato, è in grado di adattarsi a quasi qualsiasi processo che è assegnato, ma da altro è semanticamente neutra, in modo che il browser non offre alcuna Guida nell'attivazione di questo elemento in un pratico formato.Per compensare, sviluppatori e progettisti sono aggiunti i propri semantica di questi elementi (tramite ID e i nomi di classe) e si sono affidati a quadri di server e JavaScript per gestire la convalida e aggiungere interazioni complesse.

Un esempio classico è raccogliere le date nei campi di testo.La maggior parte dei casi, a cui si desidera migliorare un campo di data con un controllo selezione data di vario genere.Ciò avviene spesso con JavaScript laminati a mano o con un framework come jQuery dell'interfaccia utente, che consente di aggiungere un comportamento di interazione che consente all'utente di selezionare una data da un widget e dispone di tale data inserito nel campo originale.

Tale modello è utile, e abbiamo abbiamo diventano molto abili come gli sviluppatori con modelli come questo, viene ripetuto spesso che non è in grado di aiutare ma chiedere, "perché non è il browser è sufficiente farlo?"

La buona notizia è che, con i moduli di HTML5, il browser può- e.Oltre a testo e alcuni dei tipi esistenti, che abbiamo dovuto per anni, HTML5 aggiunge 13 nuovi valori per l'attributo di tipo di input, come un host di altri attributi che consentirà di accelerare lo sviluppo di moduli.Questo mese verrà condivido alcuni dei nuovi tipi di input e attributi provenienti con moduli HTML5, come pure il loro stato di attuazione in diversi browser.Successivamente, descriverò una rapida panoramica delle nuove funzionalità di convalida del client per i moduli di HTML5.Infine, daremo un'occhiata a come recenti aggiornamenti per Visual Studio 2010 e Microsoft.NET Framework 4 attivare HTML5 form e ASP.NET Web Forms per giocare bene insieme.In tutto, mi occuperò di come si può abbracciare HTML5 form nelle applicazioni di oggi, durante la fornitura di soluzioni di fallback per browser meno recenti.Tutte le dimostrazioni per questo articolo, che sono disponibili in linea, ovvero sono stati realizzati con WebMatrix, uno strumento di sviluppo Web gratuito, leggero da Microsoft.WebMatrix è possibile provare per se stessi a aka.ms/webm.

Nuovi tipi di Input in HTML5

Cosa conosciamo oggi come maschere di HTML5 o HTML5 Web Form iniziato come Web Forms 2.0, una specifica di pre-HTML5 creata da un gruppo noto come gruppo di lavoro di Web Hypertext applicazioni tecnologia o WHATWG.La maggior parte delle operazioni iniziali da WHATWG è diventato il punto di partenza per ciò che abbiamo ora richiamare HTML5 e lo sforzo di Web Forms 2.0 fa ora parte della specifica HTML5 ufficiale, in cui è possibile leggere in bit.ly/njrWvZ.Una parte significativa della specifica è dedicata a nuovi tipi e attributi del contenuto per l'elemento di input, che si trova in bit.ly/pEdWFs.

Come già accennato, la specifica introduce 13 nuovi tipi di input per l'utilizzo nei moduli: ricerca, tel, url, e-mail, data/ora, data, mese, settimana, ora, data/ora locale, numero, gamma, colore.

L'utilizzo di questi nuovi tipi è semplice.Supponiamo di che voler inserire un nuovo campo posta elettronica in un modulo d'ordine.Come può vedere nella nella figura 1, ho modificato il modello di pasticceria WebMatrix Web page del sito ordine con alcuni campi aggiuntivi, tra cui posta elettronica.

Modulo di ordine di esempio Figura 1

Per questo modulo viene contrassegnato il campo posta elettronica massimo come segue:

<input type="email" id="orderEmail" />

Si noti che l'attributo type è uguale a "email" invece di "testo". La parte migliore sui nuovi tipi di input HTML è che potete utilizzare oggi e lavoro, a un certo livello, in ogni singolo browser. Quando un browser rileva uno di questi tipi di nuovi, si verificherà una delle seguenti operazioni.

Se il browser non supporta i nuovi tipi di input, non verrà riconosciuta la dichiarazione del tipo. In questo caso, il browser verrà normalmente peggiorare e considera l'elemento come tipo = "text". Per provare l'inserimento di questo elemento in un form e digitando "document.getElementById('orderEmail').type" nella Console di strumenti di Internet Explorer 9 F12. In questo modo, è possibile utilizzare questi nuovi tipi di oggi e se il browser non supporta un determinato campo, continuerà a funzionare esattamente come un campo di testo normale.

Se il browser in grado di riconoscere un tipo, tuttavia, si otterrà alcuni vantaggi immediati mediante doppio clic su esso. Per tipi riconosciuti, il browser aggiunge alcuni specifici del tipo incorporato. Per quanto concerne il messaggio di posta elettronica digitare, Internet Explorer 10 piattaforma anteprima 2 (PP2) e successivamente verrà automaticamente convalidare gli input e presentare all'utente un messaggio di errore se il valore fornito non è un indirizzo di posta elettronica valido, come illustrato nella nella figura 2.

Figura 2 la convalida Browser automatica del tipo di Input del messaggio di posta elettronica

È facile inferire lo scopo e il comportamento di ogni elemento dal relativo tipo, in modo da ottenere immediatamente un ulteriore livello di ricchezza semantica nei form. Inoltre, alcuni di questi nuovi tipi di input consentono il browser interazioni più complete di fornire agli utenti fuori della finestra. Ad esempio, se è inserito il seguente elemento in un modulo e quindi apre la maschera in un browser che supporta completamente il tipo di input data, l'interazione di default è molto più ricco rispetto a una normale casella di testo precedente:

<input type="date" id="deliveryDate" />

Figura 3 viene illustrato in Opera 11.5 può fornire il tipo di Data. La parte migliore è che è stato quindi per ottenere questa interazione è stata specificare tipo = "Data" e il browser ha avuto cura di tutto il lavoro manuale in precedenza era necessario effettuare in JavaScript per offrire questo livello di funzionalità.

Figura 3 il tipo di Input data in Opera 11.5

È importante notare che HTML5 che specifica non detta come browser dovrebbero presentare questi nuovi input tipi o come essi dovrebbero comportare errori di convalida in modo che è possibile che venga visualizzato sottili per le principali differenze tra i vari browser. Ad esempio 13 cromato presenta un controllo casella di selezione per la data anziché di un controllo selezione data, come illustrato nella nella figura 4 (che, naturalmente, potrebbe essere modificato da tempo è leggere anche questo). È inoltre necessario conoscere è presente la discussione in corso nel World Wide Web Consortium, o W3C, intorno alle relative agli stili di browser e la localizzazione di elementi, come data/ora, data e di colore. Il browser non tutti concordano, allo stato attuale, l'implementazione di questi tipi e non esiste alcuna personalizzazione meccanismo corrente all'interno di implementazioni di 
existing che è simile a ciò che si troverà a jQuery dell'interfaccia utente. Per implementare o sperimentare con questi nuovi tipi, si sceglie sempre assicurarsi di fornire una completa soluzione di fallback. Inoltre, se la coerenza di presentazione e il comportamento è importante per gli utenti, potrebbe essere necessario applicare gli stili personalizzati, ignorare i comportamenti predefiniti su questi controlli o utilizzare una soluzione basata su script.

Figura 4 il tipo di Input data nel colore 13

Ho detto in precedenza che questi campi continuerà a funzionare come campi di testo normale, che è un ottimo prodotto graduale degradazione che del browser forniscono per noi. Ma un campo Data implementato come una casella di testo normale è inefficace e ampiamente considerato un'esperienza insoddisfacente per l'utente. Con un piccolo aiuto Modernizr e jQuery dell'interfaccia utente, tuttavia, è possibile fornire una soluzione che viene combinato il meglio dei moduli HTML5 con una buona soluzione di fallback.

Si ricordi dal mio ultimo articolo (msdn.microsoft.com/magazine/hh394148) che Modernizr (modernizr.com) è una libreria JavaScript che contribuisce di rilevare il supporto per le funzionalità di HTML5 nel browser. In questo esempio si desidera utilizzare Modernizr per la Guida in linea di supporto per il tipo di input data HTML5 per il rilevamento e, se non è supportata, utilizzare l'interfaccia utente di cui jQuery (jqueryui.com) datepicker widget per fornire un'esperienza utente simile. Una volta che ho scaricato e aggiunto i riferimenti per Modernizr, jQuery e jQuery dell'interfaccia utente, è possibile aggiungere il supporto del fallback per mio gli elementi data con poche righe di codice:

if (!Modernizr.inputtypes.date) {
  $("input[type=date]").datepicker();
}

Il risultato, come visto in Internet Explorer 10 PP2, viene rappresentato in nella figura 5.

Figura 5 data campo supporto a jQuery UI

Nuovi attributi contenuti di Input in HTML5

Oltre ai nuovi tipi di input, HTML5 sono disponibili alcuni utili attributi nuovi contenuti che possono essere utilizzati su campi di input per fornire il supporto di convalida e funzionalità avanzate. Uno di questi nuovi attributi è "segnaposto", che, in base alla specifica, "…represents un breve hint (una parola o una breve frase) destinati a facilitare l'utente con l'immissione di dati" (enfasi propri). Ad esempio, è possibile richiedere un paio di campi dal nostro modulo d'ordine e aggiungere segnaposto ="testo" per ogni campo, con il risultato mostrato nella nella figura 6:

<input type="email" id="orderEmail" placeholder="ex.
name@domain.com" />
<input type="url" id="orderWebsite" placeholder="ex.
http://www.domain.com" />

Figura 6 utilizzando l'attributo di segnaposto con i campi di Input

Il testo segnaposto è un colore più chiaro rispetto al testo normale e se è possibile spostare lo stato attivo su ogni campo, il testo scompare, consentendomi di 
enter il proprio valore.

Come con i nuovi tipi di input, l'attributo di segnaposto non è supportato in browser meno recenti. Nothing bad accadrà se un utente visita una pagina con essi, tuttavia, così indicazioni sull'utilizzo di oggi, anche se non si prevede di aggiungere il supporto per browser meno recenti. Se si desidera il supporto del segnaposto "polyfill", può aiutare Modernizr. Come menzionato nel mio ultimo articolo, i bravi Modernizr tentano di conservare un elenco di ogni polyfill e fallback potrebbe eventualmente desiderate per una determinata funzionalità di HTML5. Tale elenco è possibile estrarre in bit.ly/nZW85d.

In questo esempio, è opportuno utilizzare cui jQuery segnaposto HTML5 creato da Mike Taylor, che è possibile scaricare da bit.ly/pp9V4s. Una volta ottenuto, aggiungere quanto segue a un blocco di script a cui fa riferimento alla pagina:

Modernizr.load({
    test: Modernizr.input.placeholder,
    nope: "../js/html5placeholder.jquery.min.js",
    callback: function() {
      $('input[placeholder]').placeholder();
    }
  });

In questo caso, Modernizr verifica se l'attributo di segnaposto è supportata e in tal caso, carica html5placeholder.jquery.min.js. jQuery quindi seleziona ogni elemento con un attributo di segnaposto e aggiunge il supporto plug-in per ciascuno. Se si esegue questa in Internet Explorer 9, si noterà che il risultato finale è molto simile a quello nativo browser fornito in Internet Explorer 10 PP2.

Un altro nuovo attributo interessante è "autofocus", che, come può apparire, è possibile specificare un campo modulo per ricevere automaticamente lo stato attivo quando viene caricata una pagina. Un solo campo per ogni pagina deve contenere questo attributo; Se più elementi sono contrassegnati con l'autofocus, la prima condizione da tale dichiarazione riceve lo stato attivo sul caricamento della pagina. Per il modulo d'ordine, è necessario che il campo nome per ricevere lo stato attivo, in modo che è possibile aggiungere l'attributo come segue:

<input type="text" class="field" id="orderName" autofocus />

L'attributo autofocus può essere utilizzato su qualsiasi controllo di modulo ed è un'eccellente alternativa per le strategie basata su script, incentrato sul modulo, che molti sviluppatori Web hanno tentato di manipolare in passato.

HTML5 Convalida dei Form

Non si dispone di spazio per coprire tutte le interessanti nuovi relative ai moduli attributi qui, ma verranno dedicate a qualche minuto, parlando di "required," "motivo", "novalidate" e "formnovalidate", che apportare client-side forma convalida un gioco da ragazzi.

Per i browser che supportano l'attributo "required" indica al browser che è Impossibile inviare questo modulo senza un valore. Ad esempio, aggiungere "required" al campo del nome del modulo ordine:

<input type="text" class="field" id="orderName" required />

Quando si tenta di inviare il modulo, visitare la pagina nel PP2 10 di Internet Explorer, viene visualizzato qualcosa di simile a quello mostrato nella nella figura 7. Con un singolo attributo, il browser sa sufficiente per l'elemento con un bordo rosso di stile e visualizzare un messaggio che indica che il campo è obbligatorio.

Figura 7 utilizzando l'attributo obbligatorio su un campo modulo

Versioni precedenti, nella figura 2 è il risultato come il browser è in grado di convalidare automaticamente determinati tipi, ad esempio "email" e "url", senza ulteriore input dell'utente. Con l'attributo "motivo", è possibile fornire un test di convalida per i tipi di input. In base alla specifica HTML5, "motivo" prevede che un'espressione regolare, il browser utilizza per convalidare il campo proprietario.

Il form contiene un telefono (tipo = "tel") campo e si può specificare un criterio di convalida simile al seguente:

<input type="tel" id="orderTelephone" pattern="\(\d\d\d\) \d\d\d\-\d\d\d\d" title="(xxx) xxx-xxxx" />

Questa espressione regolare (non molto complessa) indica al browser di prevede un numero di sette cifre con parentesi che racchiudono l'indicativo di località e un trattino il numero locale. Immissione di qualsiasi altro elemento visualizzato il messaggio visualizzato nella figura 8. Si noti che il messaggio contiene le istruzioni per l'utente sul formato di input: "(xxx) xxx-xxxx". Questa parte del messaggio da cui proviene l'attributo title dell'elemento stesso, in modo che sia possibile controllare almeno una parte del messaggio di convalida tramite i tag. C'è una cosa da tenere presente quando si utilizza il titolo di aiuto nella convalida, tuttavia. In base alle specifiche, il browser può scegliere di visualizzare il titolo in altri linguaggi, non di errore casi, pertanto, non affidarsi a questo attributo come un luogo per il testo di suonare di errore.

Figura 8 utilizzando l'attributo di modello per specificare un'espressione di convalida

L'automazione di convalida per il browser è bello, ma due domande immediate vengono in mente. Primo, per quanto riguarda gli script di convalida server convalida o client generato dal mio framework di server (ASP.NET MVC, ad esempio)? E in secondo luogo, per quanto riguarda casi in cui si desidera che l'utente sia in grado di salvare il modulo come un lavoro in corso, senza convalida? Il primo è purtroppo, di fuori dell'ambito del presente articolo, ma ho scritto un post di blog su questo argomento in ASP.NET MVC, in cui è possibile trovare al bit.ly/HTML5FormsAndMVC.

La seconda domanda, è facile. Si supponga di che disporre di un modulo che gli utenti risparmieranno piuttosto un po' di tempo su prima di inviare, forse anche più volte il salvataggio prima infine la registrazione per il server. In questi casi, in cui verrà si desidera consentire a un utente di inviare un modulo senza convalida, esistono due attributi che è possibile utilizzare: "formnovalidate", che viene inserito nei campi di input di tipo "submit", e "novalidate", che si trova su un'apertura modulo tag. Qui verranno inseriti due presentano i campi nella maschera, come nell'esempio seguente:

<input type="submit" value="Place Order" />
<input type="submit" formnovalidate value="Save for Later" id="saveForLater" />

L'attributo "formnovalidate" sul secondo pulsante sarà disattivare la convalida e inviare il modulo, consentendo in corso di lavorazione dell'utente essere salvato nel database, o anche sul lato client utilizzano una nuova tecnologia di storage HTML5 come localStorage o IndexedDB.

HTML5 Form e ASP.NET Web Form

Prima eseguire il wrapping di questo articolo, che si desidera condividere alcuni bit aggiuntivi delle informazioni relative ai moduli di HTML5 per ASP.Sviluppatori di moduli Web di NET. Se si intende per lo sviluppo di moduli HTML5 con ASP.NET Web Form, è buona notizia: correlati-HTML5 numerosi aggiornamenti per.NET e Visual Studio vengono rilasciati out-of-band, in modo da non dover attendere la versione di framework successiva utilizzare queste funzionalità oggi.

Per iniziare con HTML5 form e ASP.NET Web Form, è necessario acquisire un paio di aggiornamenti. Innanzitutto, assicurarsi di disporre di Visual Studio 2010 SP1 (bit.ly/nQzsld). Oltre ad aggiungere il supporto per nuovi tipi di input HTML5 e gli attributi, il service pack fornisce inoltre alcuni aggiornamenti che consentono di utilizzare i nuovi tipi di input di HTML5 sul controllo TextBox di server. Senza questo aggiornamento, è possibile visualizzare errori in fase di compilazione quando si utilizzano i nuovi tipi.

È possibile ottenere Microsoft.NET Framework 4 affidabilità aggiornamento 1 (bit.ly/qOG7Ni). Questo aggiornamento è progettato per risolvere alcuni dei problemi relativi all'utilizzo di nuovi tipi di input di HTML5 con ASP.NET Web Form. Scott Hunter copre una piccola parte di quelle — UpdatePanel, i controlli di convalida e i callback, ovvero in un post di blog da agosto anticipata è possibile estrarre in bit.ly/qE7jLz.

L'aggiunta del supporto di Web Form per i browser con HTML5 è un'ottima notizia per gli sviluppatori di Web ovunque. Non solo si dispone di un set di tipi di input semantici per sfruttare nelle nostre applicazioni, ma è anche possibile utilizzare questi tipi di input oggi senza effetti malati in browser meno recenti, durante il recupero delle funzionalità avanzate, tra cui la convalida automatica del client, ovvero in quelli più recenti. Utilizzare subito questi nuovi campi in cui l'utilizzo di tipi come "url" e "email" verrà richiesto di dispositivi mobili per presentare all'utente opzioni tastiera software ottimizzati per il tipo di input ha vantaggi immediati, nonché lo spazio di applicazione per dispositivi mobili. Quando si combinano le nuove funzionalità con Modernizr e una delle opzioni polyfilling grande, si dispongono di tutti gli strumenti che è necessario adottare subito HTML5 form nelle applicazioni.

Per ulteriori informazioni sul supporto di moduli di HTML5 in Internet Explorer 10 PP2, Vai a ietestdrive.com e assicurarsi di check-out di Guida per gli sviluppatori in Internet Explorer Developer Center (bit.ly/r5xKhN). Per una più approfondita Approfondisci di moduli di HTML5, in generale, è consigliabile "A forma di Madness," dal libro di Mark Pellegrino "HTML5: alto e in esecuzione" (o ' Reilly Media, 2010), nonché la sezione moduli della specifica W3C HTML5 (bit.ly/nIKxfE).

Brandon Satrom funziona come un evangelista developer per Microsoft di fuori di Austin, Texas. Un blog he al userinexperience.com e sono disponibili su movimenti come @ BrandonSatrom.

Grazie per i seguenti esperti tecnici per la revisione di questo articolo: Casella Jon, Hrvatin di John, Scott Hunter e Clark vendere