HTML5-opetusohjelma -sivu HTML5-lomakkeilla
HTML5 tuo monia ominaisuuksia ja parannuksia Web-lomakkeet, uusia ominaisuuksia ja syöttötyyppejä on otettu käyttöön lähinnä tehdä web-kehittäjien elämästä helpompaa ja tarjota parempaa kokemusta web-käyttäjille.
Joten tässä postissa luomme sisäänkirjautumissivun käyttämällä HTML5-lomakkeet nähdä, miten uudet lisäominaisuudet toimivat.
- esittely
- Lataa lähde
HTML5-tulo
Katsotaanpa seuraavaa merkintää.
Jos olet työskennellyt HTML-lomakkeilla ennen, tämä näyttää tutulta. Mutta huomaat myös eroja siellä. Syötteillä on paikanpitäjä ja vaaditaan attribuutit, jotka ovat uusia ominaisuuksia HTML5: ssä.
Paikanpitäjä
paikanpitäjä määrite antaa meille mahdollisuuden antaa alkuteksti syötteessä, joka katoaa, kun se on a fokus Aiemmin käytimme sitä JavaScriptin avulla, mutta nyt se muuttuu paljon helpommaksi tämän uuden ominaisuuden avulla.
Vaadittu määrite
vaaditaan määrite asettaa kentän pakolliseksi, joten sitä ei pitäisi jättää tyhjäksi ennen lomakkeen lähettämistä, joten kun käyttäjä ei ole täyttänyt kenttää, seuraava virhe ilmestyy.
CSS3: ssa otetaan käyttöön myös uusi valitsin, :vaaditaan kohdistaa kentät vaaditaan ominaisuus. Tässä on esimerkki;
tulo: pakollinen border: 1px kiinteä punainen;
Sähköpostin syöttötyyppi
Ensimmäinen syöttötyyppi on sähköposti mikä on itse asiassa uusi kenttätyyppi myös HTML5: ssä. sähköposti tyyppi antaa perussähköpostiosoitteen validoinnin kentällä. Kun käyttäjä ei täytä kenttää sähköpostiosoitteella, selain näyttää seuraavan ilmoituksen;
Sähköpostityyppien käyttäminen voi myös tarjota parempaa kokemusta mobiilikäyttäjille, kuten iPhoneille ja Android-käyttäjille, missä se näyttää sähköpostitse optimoitu näytön näppäimistö omistettu “@” -painikkeella voit kirjoittaa sähköpostiosoitetta nopeammin.
Downsides
HTML5: ssä tarjottavat uudet lomakkeen ominaisuudet ovat tehokkaita ja helposti toteutettavia, mutta joillakin alueilla ne ovat edelleen puutteellisia. Esimerkiksi;
paikanpitäjä ominaisuus, tuetaan vain moderneissa selaimissa - Firefox 3.7+, Safari 4+, Chrome 4+ ja Opera 11+. Joten jos tarvitset sitä toimimaan tukemattomilla selaimilla, voit käyttää tätä monikäyttöä yhdessä Modernizrin kanssa.
Sama koskee vaaditaan ominaisuus. Virheilmoitusta ei voi mukauttaa, virhe pysyy “Ole hyvä ja täytä tämä kenttä” mielummin kuin “Täytä etunimi”, tämä attribuuttituki rajoittuu myös uusimpiin selaimiin.
Joten JavaScriptin käyttäminen vaaditun kentän vahvistamiseen on (tähän mennessä) parempi vaihtoehto.
toiminto validateForm () var x = document.forms ["login"] ["käyttäjätunnus"]. jos (x == null || x == "") hälytys ("Täytä käyttäjätunnus"); palaa vääriä; Lomakkeiden muotoilu
Okei, koristele nyt kirjautumislomakkeemme CSS: llä. Ensin annamme taustalle puun kuvion html tag.
html tausta: url ('wood_pattern.png'); kirjasinkoko: 10pt; Sitten meidän on poistettava oletuspehmuste ja marginaali ul tunniste, joka käärii koko tulot ja kelluu li vasemmalle, joten tulot näytetään vaakasuunnassa, vierekkäin.
.loginform ul padding: 0; marginaali: 0; .loginform li näyttö: inline; float: vasen;
Koska me kelluvat li, vanhemmat romahtavat, joten meidän on selvennettävä vanhemman ympärillä olevat asiat selvillä.
etiketti näyttö: lohko; väri: # 999; .cf: ennen, .cf: content: ""; näyttö: taulukko; .cf: jälkeen clear: molemmat; .cf * zoom: 1; : tarkennus ääriviiva: 0;
CSS3: ssa meillä on nollausvalitsin. Niinpä käytämme sitä kohdentamiseen tulot muut kuin Lähetä tyyppi, joka tässä tapauksessa kohdistuu sähköpostin ja salasanan syöttämiseen;
.loginform input: ei ([type = Submit]) pehmuste: 5px; marginaali-oikea: 10px; raja: 1px kiinteä rgba (0, 0, 0, 0,3); raja-säde: 3px; laatikko-varjo: 0px 1px 3px 0px rgba (0, 0, 0, 0,1), 0px 1px 0px 0px rgba (250, 250, 250, 0,5);
Lopuksi annamme pienen tyylin sisustuksen Lähetä -painiketta seuraavasti.
.loginform input [type = Submit] border: 1px solid rgba (0, 0, 0, 0.3); tausta: # 64c8ef; / * Vanhat selaimet * / tausta: -moz-lineaarinen gradientti (alkuun, # 64c8ef 0%, # 00a2e2 100%); / * FF3.6 + * / tausta: -webkit-gradientti (lineaarinen, vasen yläosa, vasen pohja, värin pysäytys (0%, # 64c8ef), värin pysäytys (100%, # 00a2e2)); / * Chrome, Safari4 + * / tausta: -webkit-lineaarinen gradientti (alkuun, # 64c8ef 0%, # 00a2e2 100%); / * Chrome10 +, Safari5.1 + * / tausta: -o-lineaarinen gradientti (alkuun, # 64c8ef 0%, # 00a2e2 100%); / * Opera 11.10+ * / tausta: -ms-lineaarinen gradientti (alkuun, # 64c8ef 0%, # 00a2e2 100%); / * IE10 + * / tausta: lineaarinen gradientti (pohjaan, # 64c8ef 0%, # 00a2e2 100%); / * W3C * / suodatin: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 64c8ef", endColorstr = "# 00a2e2", GradientType = 0); / * IE6-9 * / väri: #fff; pehmuste: 5px 15px; marginaali-oikea: 0; margin-top: 15px; raja-säde: 3px; teksti-varjo: 1px 1px 0px rgba (0, 0, 0, 0,3);
Se on nyt, nyt voit kokeilla kirjautumislomaketta seuraavista linkeistä.
- esittely
- Lataa lähde
Lopulliset sanat
Tässä oppaassa tarkasteltiin muutamia uusia ominaisuuksia HTML5-lomakkeissa:paikanpitäjä, vaaditaan ja sähköposti sisääntulotyyppien avulla voit luoda yksinkertaisen kirjautumissivun. Olemme myös tulleet läpi attribuuttien haittapuolia, joten voimme päättää paremman lähestymistavan soveltamisesta.
Seuraavassa postissa tarkastelemme toista uutta HTML5-lomakkeen ominaisuutta, joten pysy ajan tasalla.
