Pagina di accesso tutorial HTML5 con moduli HTML5
HTML5 apporta molte funzionalità e miglioramenti moduli web, ci sono nuovi attributi e tipi di input che sono stati introdotti principalmente per rendere la vita degli sviluppatori Web più semplice e offrire un'esperienza migliore agli utenti web.
Quindi, in questo post creeremo una pagina di accesso usando Moduli HTML5 per vedere come funzionano le nuove funzionalità aggiunte.
- dimostrazione
- Scarica fonte
Input HTML5
Diamo un'occhiata al seguente markup.
Se hai già lavorato con i moduli HTML, questo sembrerà familiare. Ma noterai anche delle differenze lì. Gli input hanno segnaposto e necessario attributi, che sono nuovi attributi in HTML5.
segnaposto
Il segnaposto attributo ci permette di dare il testo iniziale nell'input che scomparirà quando è in a messa a fuoco stato o essere compilato. In precedenza, lo usavamo con JavaScript, ma ora diventa molto più semplice con questo nuovo attributo.
Attributo richiesto
Il necessario attributo imposterà il campo in modo che sia obbligatorio e quindi non dovrebbe essere lasciato vuoto prima che il modulo sia inviato, così quando l'utente non ha compilato il campo, apparirà il seguente errore.
Il nuovo selettore è anche introdotto in CSS3, :necessario per indirizzare i campi con necessario attributo. Ecco un esempio;
input: obbligatorio border: 1px solid red;
Email Input Type
Il primo tipo di input è e-mail che è in realtà un nuovo tipo di campo aggiunto anche in HTML5. Il e-mail il tipo fornirà la convalida dell'indirizzo di posta elettronica di base nel campo. Quando l'utente non riempie il campo con un indirizzo email, il browser mostrerà la seguente notifica;
L'utilizzo dei tipi di input e-mail può anche offrire un'esperienza migliore agli utenti mobili, come gli utenti iPhone e Android, dove mostrerà il tastiera su schermo ottimizzata per e-mail con un dedicato “@” pulsante per aiutare a digitare più velocemente l'indirizzo e-mail.
I lati negativi
Le nuove funzionalità del modulo offerte in HTML5 sono potenti e facili da implementare, ma sono ancora carenti in alcune aree. Per esempio;
Il segnaposto attributo, è supportato solo nei browser moderni - Firefox 3.7+, Safari 4+, Chrome 4+ e Opera 11+. Quindi, se dovessi averne bisogno per funzionare in browser non supportati, puoi utilizzare questo polifrivello insieme a Modernizr.
La stessa cosa va con il necessario attributo. La notifica dell'errore non può essere personalizzata, l'errore rimane “Perfavore compila questo campo” piuttosto che “Si prega di compilare il tuo nome”, questo supporto per gli attributi è anche limitato agli ultimi browser.
Quindi, usare JavaScript per convalidare il campo richiesto è (finora) un'opzione migliore.
function validateForm () var x = document.forms ["login"] ["username"]. valore; if (x == null || x == "") alert ("Si prega di compilare lo username"); restituisce falso; Disegnare i moduli
Bene, ora decoriamo il nostro modulo di login con i CSS. Per prima cosa daremo allo sfondo un motivo di legno nel html etichetta.
html background: url ('wood_pattern.png'); font-size: 10pt; Quindi, dobbiamo rimuovere il padding e il margine di default ul tag che avvolge l'intero ingressi e fa galleggiare il Li a sinistra, quindi gli input verranno visualizzati orizzontalmente, fianco a fianco.
.loginform ul padding: 0; margine: 0; .loginform li display: inline; float: a sinistra;
Dal momento che galleggiamo il Li, i genitori crolleranno, quindi abbiamo bisogno di chiarire le cose intorno al genitore con l'hack clearfix.
label display: block; colore: n. 999; .cf: before, .cf: after content: ""; display: tabella; .cf: after clear: both; .cf * zoom: 1; : focus struttura: 0;
In CSS3 abbiamo il selettore di negazione. Quindi, lo useremo per target ingressi diverso dal Sottoscrivi tipo, che in questo caso indirizzerà l'email e l'immissione della password;
.input di loginform: not ([type = submit]) padding: 5px; margin-right: 10px; border: 1px solid rgba (0, 0, 0, 0,3); border-radius: 3px; box-shadow: inset 0px 1px 3px 0px rgba (0, 0, 0, 0,1), 0px 1px 0px 0px rgba (250, 250, 250, 0,5);
Infine, daremo una piccola decorazione di stile per il Sottoscrivi pulsante, come segue.
.loginform input [type = submit] border: 1px solid rgba (0, 0, 0, 0,3); sfondo: # 64c8ef; / * Vecchi browser * / sfondo: -moz-linear-gradient (in alto, # 64c8ef 0%, # 00a2e2 100%); / * FF3.6 + * / background: -webkit-gradient (lineare, in alto a sinistra, in basso a sinistra, color-stop (0%, # 64c8ef), color-stop (100%, # 00a2e2)); / * Chrome, Safari4 + * / background: -webkit-linear-gradient (in alto, # 64c8ef 0%, # 00a2e2 100%); / * Chrome10 +, Safari5.1 + * / background: -o-linear-gradient (in alto, # 64c8ef 0%, # 00a2e2 100%); / * Opera 11.10+ * / background: -ms-linear-gradient (in alto, # 64c8ef 0%, # 00a2e2 100%); / * IE10 + * / background: gradiente lineare (in basso, # 64c8ef 0%, # 00a2e2 100%); / * W3C * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 64c8ef", endColorstr = "# 00a2e2", GradientType = 0); / * IE6-9 * / color: #fff; imbottitura: 5px 15px; margine-destra: 0; margin-top: 15px; border-radius: 3px; text-shadow: 1px 1px 0px rgba (0, 0, 0, 0,3);
Questo è tutto, ora puoi provare il modulo di accesso dai seguenti link.
- dimostrazione
- Scarica fonte
Parole finali
In questo tutorial abbiamo esaminato alcune nuove funzionalità nei moduli HTML5:segnaposto, necessario e e-mail tipi di input per creare una semplice pagina di accesso. Abbiamo anche attraversato gli aspetti negativi degli attributi, quindi possiamo decidere un approccio migliore da applicare.
Nel prossimo post esamineremo un'altra nuova funzionalità del modulo HTML5, quindi rimanete sintonizzati.
