HTML5 bemutató oldal HTML5 űrlapokkal
A HTML5 számos funkciót és fejlesztést hoz létre webes űrlapok, új attribútumok és beviteli típusok kerültek bevezetésre főleg azért, hogy a webfejlesztők életét könnyebbé tegyük, és jobb tapasztalatokat nyújtsunk a webes felhasználók számára.
Tehát ebben a hozzászólásban egy bejelentkezési oldalt fogunk létrehozni HTML5 űrlapok az új hozzáadott funkciók működésének megismerése.
- Demó
- Letöltés forrása
HTML5 bemenet
Nézzük meg a következő jelölést.
Ha korábban HTML-űrlapokkal dolgozott, akkor ez ismerős lesz. De ott is észreveszik a különbségeket. A bemeneteknek van helykitöltő és kívánt attribútumok, amelyek a HTML5 új attribútumai.
Helykitöltő
A helykitöltő Az attribútum lehetővé teszi számunkra, hogy kezdeti szöveget adjunk a bemeneten, amely eltűnik, amikor az a fókusz Korábban a JavaScriptet használtuk, de most sokkal könnyebbé válik ezzel az új attribútummal.
Kötelező attribútum
A kívánt Az attribútum kötelezővé teszi a mezőt, ezért nem szabad üresen hagyni az űrlap beadása előtt, így amikor a felhasználó nem tölti ki a mezőt, a következő hiba jelenik meg.
A CSS3-ban új szelektor is bevezetésre kerül, :kívánt a célterületekhez kívánt tulajdonság. Itt van egy példa;
bemenet: szükséges határ: 1px szilárd piros;
E-mail beviteli típus
Az első beviteli típus email ami valójában új mezőtípus HTML5-ben is hozzáadott. A email A típus alapértelmezett e-mail címet fog érvényesíteni a területen. Amikor a felhasználó nem tölti ki a mezőt egy e-mail címmel, a böngésző a következő értesítést jeleníti meg;
Az e-mail beviteli típusok használata jobb élményt nyújt a mobil felhasználók számára, mint például az iPhone és az Android felhasználók számára, ahol megmutatja a e-mailben optimalizált képernyő-billentyűzet egy dedikált “@” gomb az e-mail cím gyorsabb beírásához.
A Downsides
A HTML5-ben kínált új űrlapfunkciók erőteljesek és könnyen megvalósíthatók, de néhány területen még mindig hiányoznak. Például;
A helykitöltő tulajdonság, csak a modern böngészőkben támogatott - Firefox 3.7+, Safari 4+, Chrome 4+ és Opera 11+. Tehát, ha szüksége van rá, hogy nem támogatott böngészőkben dolgozzon, használhatja ezt a többletet a Modernizr-tel együtt.
Ugyanez megy a kívánt tulajdonság. A hibaüzenet nem személyre szabható, a hiba továbbra is fennáll “Kérem töltse ki ezt a mezőt” inkább mint “Kérjük, töltse ki az első nevét”, ez az attribútumtámogatás csak a legújabb böngészőkre korlátozódik.
Tehát a JavaScript érvényesítése a szükséges mező érvényesítéséhez (eddig) jobb lehetőség.
function validateForm () var x = document.forms ["login"] ["felhasználónév"]. ha (x == null || x == "") figyelmeztetés ("Kérjük, töltse ki a felhasználónevet"); vissza hamis; Az űrlapok formázása
Rendben, most díszítsük bejelentkezési űrlapunkat a CSS-lel. Először a háttérben egy fa mintázatot fogunk adni html címke.
html background: url ('wood_pattern.png'); betűméret: 10pt; Ezután el kell távolítanunk az alapértelmezett kitöltést és a margót ul az egészet becsomagoló címke bemenetek és lebeg a li balra, így a bemenetek vízszintesen, egymás mellett jelennek meg.
.loginform ul padding: 0; margin: 0; .loginform li kijelző: inline; balra lebeg;
Mióta lebegünk li, a szülők összeomlanak, ezért tisztázni kell a szülő körül a dolgokat.
címke display: block; szín: # 999; .cf: before, .cf: tartalom után: ""; kijelző: táblázat; .cf: után clear: mindkettő; .cf * zoom: 1; : fókusz körvonal: 0;
A CSS3-ban van a negációs választó. Szóval, ezt a célt fogjuk használni bemenetek kivéve a beküldése típus, amely ebben az esetben az e-mailt és a jelszót adja meg;
.loginform bemenet: nem ([type = Submit]) padding: 5px; margin-right: 10px; határ: 1px szilárd rgba (0, 0, 0, 0,3); határ-sugár: 3px; doboz-árnyék: 0px 1px 3px 0px rgba (0, 0, 0, 0,1), 0px 1px 0px 0px rgba (250, 250, 250, 0,5);
Végül, egy kis stílusú díszítést adunk a beküldése gombot, az alábbiak szerint.
.loginform input [type = Submit] border: 1px szilárd rgba (0, 0, 0, 0,3); háttér: # 64c8ef; / * Régi böngészők * / háttér: -moz-lineáris gradiens (felső, # 64c8ef 0%, # 00a2e2 100%); / * FF3.6 + * / háttér: -webkit-gradiens (lineáris, bal felső, bal alsó, szín-stop (0%, # 64c8ef), szín-stop (100%, # 00a2e2)); / * Chrome, Safari4 + * / háttér: -webkit-lineáris gradiens (felső, # 64c8ef 0%, # 00a2e2 100%); / * Chrome10 +, Safari5.1 + * / háttér: -o-lineáris gradiens (felső, # 64c8ef 0%, # 00a2e2 100%); / * Opera 11.10+ * / háttér: -ms-lineáris gradiens (felső, # 64c8ef 0%, # 00a2e2 100%); / * IE10 + * / háttér: lineáris gradiens (alul, # 64c8ef 0%, # 00a2e2 100%); / * W3C * / szűrő: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 64c8ef", endColorstr = "# 00a2e2", GradientType = 0); / * IE6-9 * / szín: #fff; párnázás: 5px 15px; margin-right: 0; margin-top: 15px; határ-sugár: 3px; szöveg-árnyék: 1px 1px 0px rgba (0, 0, 0, 0,3);
Ez az, most megpróbálhatja a bejelentkezési űrlapot a következő linkekből.
- Demó
- Letöltés forrása
Végső szavak
Ebben a bemutatóban néhány új funkciót vizsgáltunk HTML5 formában:helykitöltő, kívánt és email bemeneti típusok egy egyszerű bejelentkezési oldal létrehozásához. Mi is jöttünk át az attribútumok lefelé, így eldönthetjük a jobb megközelítés alkalmazását.
A következő bejegyzésben egy másik új HTML5 formátumú funkciót fogunk vizsgálni, így maradjon hangolva.
