Share
Mentre ci sono molti cambiamenti in meglio nelle specifiche HTML5, non c'è un botto migliore per il sito Web basato sui dati che non la trasformazione dei moduli. Queste semplici modifiche trasformeranno il modo in cui inserite, convalidate, elaborate e persino visualizzate gli input. Sarai in grado di creare più applicazioni web utilizzabili con meno codice e meno confusione.
"Nel passato recente, la maggior parte dell'innovazione nelle forme è venuta dall'uso di JavaScript, piuttosto che dal vecchio HTML. Mentre non c'è nulla di sbagliato nell'usare JavaScript per migliorare i moduli, porta la sua usabilità e molti problemi di sviluppo. "
HTML 5 è ancora in fase di modifica prima che venga finalizzato. Se osservate le specifiche, vedrete che c'è ancora un'ultima chiamata per commenti insieme a dichiarazioni, come ad esempio, Gli implementatori dovrebbero essere consapevoli che questa specifica non è stabile. Inoltre, in particolare per gli scopi di questo tutorial, concentrandosi sulle modifiche ai moduli, l'implementazione del browser è a dir poco a dir poco. Detto questo, i cambiamenti all'orizzonte valgono la pena di essere esaminati oggi. Sebbene le modifiche siano di maggiore portata, l'implementazione per gli sviluppatori sembra essere piuttosto semplice. In questo tutorial, faremo una panoramica ad alto livello di queste innovazioni modifiche e penseremo a come influenzeranno la natura dell'input dell'utente.
In passato, le modifiche alle forme sono state relativamente minori. Se torni alle specifiche di HTML 3.2, che sono state finalizzate nel 1997, vedrai gli stessi input di modulo di base che usi oggi. Quindi selezionare, textarea, radio, caselle di controllo e testo erano disponibili. Una generazione di sviluppatori web è cresciuta scrivendo secondo gli stessi standard. Mentre le versioni successive delle specifiche hanno apportato modifiche alle forme, come le azioni fieldset, label, legend e form come onsubmit o onchange, il modo in cui gestiamo l'input dell'utente è rimasto piuttosto statico. Nel passato recente, la maggior parte dell'innovazione nelle forme è venuta dall'uso di JavaScript, piuttosto che dal vecchio stile HTML. Anche se non c'è nulla di sbagliato nell'usare JavaScript per migliorare i moduli, esso porta la sua usabilità e molti problemi di sviluppo. Ad esempio, ci sono molti modi in cui possiamo convalidare i moduli usando JavaScript, ma cosa succede quando un utente non ha JavaScript abilitato? Dobbiamo inoltre applicare la logica ai nostri script lato server. Alla fine, abbiamo un modo non coerente di gestire l'input dell'utente. HTML 5 non affronta ogni problema di innovazione per le forme negli ultimi 13 anni, ma ci fornisce molti strumenti
rendere i nostri lavori molto più semplici e ci consente di produrre forme molto più coerenti.
Ci sono tre cambiamenti di base che dovremmo esaminare. Per prima cosa, esamineremo le modifiche agli elementi di input, come il completamento automatico o l'autofocus. Il secondo è modifiche agli stati di input, e ce ne sono parecchi! Infine, esamineremo i nuovi elementi del modulo. È importante ribadire che le specifiche sono in evoluzione; quindi non sarei sorpreso se, in futuro, ci fossero sottili cambiamenti in ciò che stiamo discutendo. Questo è ciò che rende questo divertimento!
Gli attributi di input sono quegli elementi inseriti negli input per spiegare cosa sta facendo l'input. Per esempio:
Nell'esempio sopra, gli attributi di input sono valore, dimensione e lunghezza massima. Questi sono stati in giro per un bel po 'di tempo. HTML 5 non cambia il concetto di avere elementi di input, ma ne aggiunge parecchi altri. Sembra che ci sia almeno una sottrazione, o piuttosto una sostituzione, e questo è il cambio di disabile che ora sembra diventare di sola lettura. Le specifiche non entrano nei dettagli del cambiamento, ma se fossi un uomo scommettente, la modifica permetterebbe ai gestori di eventi, come onblur, di sparare - che un elemento disabilitato previene.
I nuovi attributi includono autofocus, completamento automatico, elenco, obbligatorio, multiplo, modello, min e max, step e segnaposto. Penso a questi come due diversi sapori di elementi. Il primo aroma migliora l'esperienza per l'utente, mentre il secondo migliora l'esperienza di sviluppo. Ciò che intendo con questo, è autofocus, completamento automatico, elenco, multiplo e segnaposto che aiuta l'utente nell'esperienza nella selezione degli elementi, o forse fornendo una descrizione di ciò che l'input del modulo sta cercando o aiutando a completare il modulo. required, min e max, pattern e step aggiungono all'esperienza di sviluppo dicendo ciò che dovrebbe essere nella forma stessa.
Ciò che ciascuno di questi nuovi attributi fa è relativamente facile da capire. Per esempio:
Sopra, l'elemento di messa a fuoco automatica focalizza l'input di testo sul caricamento della pagina. Ciò significa che non appena la pagina viene caricata, questo input di testo è pronto per fare una registrazione. Puoi iniziare a digitare subito, poiché questo elemento ha il focus del documento. Qualcosa che facevamo in JavaScript in una linea o giù di lì, ora può essere fatto con una sola parola.
Nell'esempio sopra, disattivando il completamento automatico, si impedisce al browser di compilare il campo modulo da un valore precedente. Niente mi infastidisce più di vedere il mio numero di carta di credito apparire in una forma non appena digito una cifra. L'impostazione predefinita per il completamento automatico deve essere attiva, quindi l'unica volta che è necessario utilizzare questo elemento è quando si desidera impedire al campo modulo di completare dalle voci precedenti. Aggiunge all'esperienza dell'utente mantenendo le informazioni sensibili semplicemente "spuntando".
L'attributo list è molto interessante. In sostanza, fornisci un datalist e creerà un menu a discesa dal tuo input di testo. Pensalo come un auto completo naturale. Prendilo un po 'oltre, e invece di dover aggiungere una libreria JavaScript per una rapida ricerca, in base alle voci chiave, potresti facilmente aggiungere un gestore di eventi "onchange", con un post AJAX, e ti ritrovi con una goccia in basso diventa più specifico mentre l'utente digita nella casella. Con HTML 5, questa funzionalità è stata creata con poche righe.
L'attributo multiplo ti consente di selezionare più elementi dal tuo datalist. Ad esempio, potresti avere un modulo che invia messaggi dal tuo sito web. Utilizzando l'elemento multiplo, è possibile consentire all'utente di selezionare più destinatari per inviare quel messaggio. Ancora una volta, questo è qualcosa che possiamo realizzare con un po 'di JavaScript ora, ma con HTML 5, dobbiamo solo aggiungere un singolo comando al modulo.
L'attributo segnaposto è qualcosa che stiamo facendo da anni con un tocco di JavaScript. Quello che fa è, non appena l'input è focalizzato, Type Here svanirà. Se non è stata apportata alcuna modifica al testo su sfocatura, quindi riappare Digitare qui. Ancora una volta, stiamo eliminando alcuni JavaScript dall'immagine per migliorare l'esperienza dell'utente.
Questi prossimi nuovi attributi migliorano tutti il nostro sviluppo. Ad eccezione di "step", ognuno di questi aiuti nella convalida dell'input dell'utente.
L'attributo richiesto è esattamente come sembra. Io, lo sviluppatore di questa pagina web, ti chiedo di compilare questo modulo prima di premere invio. Questa è la convalida di forma base che usiamo oggi con JavaScript. Ciò che prima richiedeva una libreria per aggiungere una voce richiesta, ora richiede una singola parola nel modulo.
Di tutti i nuovi attributi del modulo, questo è quello che mi entusiasma di più. Signor Form, permettimi di presentarti il mio buon amico, Regex. È vero, possiamo convalidare voci di moduli basate su espressioni regolari. Mentre all'inizio questo sarà mistificante, mentre impari l'espressione regolare, le possibilità di convalida ora diventano illimitate.
Ho raggruppato gli ultimi tre in un solo esempio, poiché tutti hanno a che fare con la convalida del numero o l'intervallo di numeri che possiamo includere.
Ognuno di questi ha a che fare con valori numerici. Non confonderli con maxlength, che si occupa del numero di caratteri che un input richiederà. L'elemento step è proprio come sembra. Quando si seleziona un valore numerico, aumentarlo di 0,5 o di diminuire di 0,5. Questo significa che il tipo di input avrà i valori possibili di 1, 1,5, 2, 2,5 e così via.
Al momento, per quanto ne so, il supporto del browser è in qualche modo discutibile su questi attributi. Ecco un grafico veloce che mostra ciò che sono stato in grado di trovare sulle implementazioni.
Ci sono otto nuovi tipi di input, senza contare tutti i nuovi tipi di data e ora, che per i nostri scopi, ne sto facendo uno. È importante notare che i browser che non hanno implementato i nuovi tipi di input si degraderanno in un tipo di testo su ciascuno di essi che ho testato. Ciò che i nuovi tipi di input apportano è la capacità di convalidare l'input dell'utente in base al tipo che si sta utilizzando. C'è anche più convalida a venire di cui parlerò nelle prossime due sezioni. Ognuno dei nuovi tipi di input ci consente di separare da un campo di testo a qualcosa di più specifico. Ad esempio, per prendere valori interi o float prima di HTML 5, abbiamo utilizzato principalmente un tipo di testo di input. Proprio dall'annotazione, è contro intuitivo per i principianti. Essendo più specifici, abbiamo quindi un migliore controllo visivo sulla nostra interfaccia, più specifico è l'elemento in HTML, maggiore è il controllo che hai all'interno del CSS e più facile è definire quegli elementi visivi. Inoltre, con i nuovi tipi di input specifici, i browser sono ora in grado di mettere a punto quello che dovrebbe essere l'intervallo di input. Infine, con l'avvento del mobile computing, siamo in grado di creare elementi di moduli di domanda web che possono essere disegnati per sembrare applicazioni naturali o di modellare la tastiera che stiamo usando.
Diamo un'occhiata alla gestione dei numeri prima:
Ciascuno di questi tipi di input ci consente di giocare con i numeri e, quando pubblichiamo i moduli, dovremmo essere sicuri di avere quei valori float per l'elaborazione lato server senza la convalida JavaScript aggiunta. In parole povere, per ognuno di questi tipi, ci aspettiamo di ottenere numeri indietro all'interno dell'intervallo che definiamo e con il passo che vogliamo. La differenza tra i due tipi è come vengono visualizzati. Mentre aspetto di vedere l'implementazione sul tipo di numero, mi aspetterei un rotolo o una casella di testo, o forse un tipo di selezione con numeri. Il tipo di intervallo è leggermente diverso, in quanto sembra un valore scorrevole, simile a quello che ci si aspetterebbe di vedere per un controllo del volume.
Un altro grande vantaggio per standardizzare lo sviluppo del backend sono i nuovi tipi di immissione di data e ora. Dall'implementazione di Opera che ho visto, ognuno mostra un calendario a discesa, che consente all'utente di selezionare una data. Ancora una volta, possiamo convalidare sulla nostra pagina web che l'input è nel formato che ci aspettiamo. Ognuno fa esattamente quello che pensereste; stai selezionando un mese, una settimana, un giorno o un'ora. Quello che è un po 'diverso è il datetime-local, che mostra la data e l'ora senza il fuso orario fuso. Ad esempio, se si seleziona un volo, il datetime-local mostrerà l'ora e la data nella città in cui si sta andando, che non è necessariamente il fuso orario in cui ci si trova attualmente.
Ciascuno di questi tipi di input è descrittivo. Entrambi i tipi di URL e Email hanno convalide di modelli di URL validi e modelli di email validi. Il telefono, tuttavia, non è conforme a nessun modello specifico. Toglie solo le interruzioni di riga. Se si desidera applicare un modello di convalida sul campo del telefono, è sempre possibile utilizzare l'elemento del modello. Ognuno di questi elementi meno il colore prenderà anche l'attributo list, meno il colore. Il colore è lo strano gioco del mazzo; Riesco a vederne l'uso pratico, in cui è possibile selezionare un colore da un pull down di fantasia che mostra i colori e imporre l'inserimento di testo di qualcosa come # 000000, ma a mio avviso non si adatta perfettamente al resto delle modifiche. È come giocare quale non è come gli altri.
Come gli attributi, l'implementazione del browser del tipo di input è piuttosto macchiata. Il mio iPhone sembra supportare più di questi di Safari, il che è un po 'strano per me. Questo è il meglio che ho potuto trovare, come supporto.
Il numero di modifiche agli elementi del modulo non è così drastico come gli attributi e i tipi di input. Detto questo, ci sono alcuni nuovi elementi di cui essere a conoscenza. Abbiamo già incluso il datalist: è così che definiamo ciò che verrà selezionato da una chiamata dell'elemento di elenco, ma non abbiamo visto keygen, output, progress o meter. Al di fuori di keygen. questi non sono così auto esplicativi come i nuovi attributi. Scaviamo in questi solo un po '.
Questo è un po 'confuso. Non genera una chiave pubblica per te. Invece, è un controllo del generatore di chiavi. Una volta che il modulo è stato inviato, impacchetta la coppia di chiavi per memorizzare la chiave privata nell'archivio chiavi locale e invia la chiave pubblica al server. Genera il certificato del cliente e lo restituisce all'utente per il download. Una volta scaricato e archiviato con la chiave privata, è possibile quindi autenticare i servizi, come SSL o autenticazione dei certificati.
+ =
Pensa all'elemento di output come un'area di testo sugli steroidi. Quello che puoi fare è calcolare da due input di testo di tipo numerico e produrre quel calcolo senza dover mai inviare il modulo al server. Se si restituisce semplicemente l'invio parziale, nell'esempio sopra, verrà calcolato il numero_1 più il numero_2 e verrà fornita la risposta. Come molte cose discusse in questo tutorial, questo è qualcosa che possiamo realizzare oggi con JavaScript, ma questo riduce di molto la quantità di codice che dobbiamo scrivere in futuro.
12 centimetri
Gli ultimi due nuovi elementi sono progresso e metro. Sono simili, ma con una differenza. Il progresso è pensato per essere utilizzato per misurare lo stato di avanzamento di un compito specifico. Ad esempio, se potresti avere altre cinque pagine da completare prima del completamento di un sondaggio, visualizzerai l'elemento di avanzamento in quell'area. Il metro, d'altra parte, è una misura di qualcosa. Potresti voler mostrare lo spazio rimanente sul disco che un utente ha lasciato. Dovresti usare lo strumento per visualizzare quella misura. Ci sono nuovi elementi di confine, come basso, alto e ottimale. Questi sostituiscono gli elementi min o max; quindi se li superano diventano i nuovi limiti inferiore e superiore della forma.
Come il resto delle modifiche ai moduli HTML 5, l'implementazione del browser è scarsa al momento. Ecco cosa sembra funzionare, e cosa no (al momento di questa stesura).
Da quello che vedo, non c'è motivo di non iniziare a utilizzare i moduli HTML 5. Gli elementi ei tipi di input si degradano tutti bene, anche in IE6, dove vengono ignorati come elementi o degradati in input di testo. Dovremo aspettare un po 'prima che gli attributi di validazione diventino una realtà, ma con ciò detto, ci sono ancora alcuni usi oggi senza quei vantaggi. Ad esempio, l'iPhone modifica la tastiera se si utilizzano i tipi di url, email o numero. Il tipo di input dell'intervallo è già supportato nei browser WebKit, quindi potresti essere il primo bambino sul blocco con un dispositivo di scorrimento del numero che funziona senza JavaScript. Le specifiche stanno rapidamente definendo e i browser stanno recuperando piuttosto rapidamente i cambiamenti di paradigma. Non c'è tempo come il presente per iniziare almeno a giocare con questi nuovi giocattoli! Cosa pensi?
Accentsconagua