Strona logowania do samouczka HTML5 z formularzami HTML5
HTML5 oferuje wiele funkcji i ulepszeń formularze internetowe, wprowadzono nowe atrybuty i typy danych wejściowych głównie po to, aby ułatwić życie twórcom stron internetowych i zapewnić użytkownikom lepsze wrażenia.
W tym poście stworzymy stronę logowania, używając Formularze HTML5 aby zobaczyć, jak działają nowe dodane funkcje.
- Próbny
- Pobierz źródło
Wejście HTML5
Spójrzmy na następujący znacznik.
Jeśli wcześniej pracowałeś z formularzami HTML, będzie to wyglądało znajomo. Ale zauważysz także różnice. Wejścia mają symbol zastępczy i wymagany atrybuty, które są nowymi atrybutami w HTML5.
Symbol zastępczy
The symbol zastępczy atrybut pozwala nam podać początkowy tekst na wejściu, który zniknie, gdy jest w a skupiać Stan lub wypełnianie. Wcześniej robiliśmy to za pomocą JavaScript, ale teraz staje się o wiele łatwiejszy z tym nowym atrybutem.
Wymagany atrybut
The wymagany atrybut ustawi pole jako obowiązkowe, dlatego nie należy pozostawiać go pustego przed przesłaniem formularza, więc gdy użytkownik nie wypełni pola, pojawi się następujący błąd.
Nowy selektor jest również wprowadzany w CSS3, :wymagany do kierowania pól za pomocą wymagany atrybut. Oto przykład;
input: required border: 1px solid red;
Typ wpisu e-mail
Pierwszy typ wejścia to e-mail co jest właściwie nowy typ pola dodano również w HTML5. The e-mail typ da podstawową weryfikację adresu e-mail w polu. Gdy użytkownik nie wypełni pola adresem e-mail, przeglądarka wyświetli następujące powiadomienie;
Korzystanie z typów wprowadzania poczty e-mail może również zapewnić lepsze wrażenia użytkownikom mobilnym, takim jak użytkownicy iPhone'a i Androida, gdzie będzie wyświetlać klawiatura ekranowa zoptymalizowana pod kątem poczty e-mail z dedykowanym “@” przycisk do szybszego wpisywania adresu e-mail.
Wady
Nowe funkcje formularzy oferowane w HTML5 są potężne i łatwe do wdrożenia, ale w niektórych obszarach wciąż ich brakuje. Na przykład;
The symbol zastępczy atrybut, jest obsługiwany tylko w nowoczesnych przeglądarkach - Firefox 3.7+, Safari 4+, Chrome 4+ i Opera 11+. Jeśli potrzebujesz go do pracy z nieobsługiwanymi przeglądarkami, możesz użyć tego wypełnienia w połączeniu z Modernizr.
To samo dotyczy wymagany atrybut. Powiadomienia o błędzie nie można spersonalizować, błąd pozostanie “Proszę wypełnić to pole” zamiast “Proszę wypełnić swoje imię”, ta obsługa atrybutów jest również ograniczona do najnowszych przeglądarek.
Tak więc użycie JavaScript do sprawdzenia wymaganego pola jest (jak dotąd) lepszą opcją.
function validateForm () var x = document.forms ["login"] ["nazwa użytkownika"]. value; if (x == null || x == "") alert ("Proszę podać nazwę użytkownika"); return false; Stylizacja formularzy
W porządku, teraz udekoruj nasz formularz logowania CSS. Najpierw nadamy tło wzór drewna w html etykietka.
html background: url ('wood_pattern.png'); rozmiar czcionki: 10pt; Następnie musimy usunąć domyślne wypełnienie i margines w ul tag, który otacza cały wejścia i unosi li w lewo, więc wejścia będą wyświetlane poziomo, obok siebie.
.loginform ul padding: 0; margines: 0; .loginform li display: inline; float: left;
Odkąd płyniemy li, rodzice zawalą się, więc musimy oczyścić wszystko wokół rodzica za pomocą hacku clearfix.
label display: block; kolor: # 999; .cf: before, .cf: after content: ""; wyświetlacz: tabela; .cf: after clear: both; .cf * zoom: 1; : focus outline: 0;
W CSS3 mamy selektor negacji. Więc użyjemy go do celu wejścia inne niż Zatwierdź typ, który w tym przypadku wyceluje adres e-mail i hasło;
.loginform input: nie ([type = submit]) padding: 5px; margines prawy: 10px; border: 1px solid rgba (0, 0, 0, 0.3); border-radius: 3px; box-shadow: wstawka 0px 1px 3px 0px rgba (0, 0, 0, 0,1), 0px 1px 0px 0px rgba (250, 250, 250, 0,5);
Na koniec damy trochę stylu dekoracji dla Zatwierdź przycisk, jak następuje.
.loginform input [type = submit] border: 1px solid rgba (0, 0, 0, 0.3); tło: # 64c8ef; / * Stare przeglądarki * / tło: -moz-linear-gradient (góra, # 64c8ef 0%, # 00a2e2 100%); / * FF3.6 + * / background: -webkit-gradient (liniowy, lewy górny, lewy dolny, zatrzymanie koloru (0%, # 64c8ef), zatrzymanie koloru (100%, # 00a2e2)); / * Chrome, Safari4 + * / background: -webkit-linear-gradient (góra, # 64c8ef 0%, # 00a2e2 100%); / * Chrome10 +, Safari5.1 + * / background: -o-linear-gradient (góra, # 64c8ef 0%, # 00a2e2 100%); / * Opera 11.10+ * / background: -ms-linear-gradient (góra, # 64c8ef 0%, # 00a2e2 100%); / * IE10 + * / tło: gradient liniowy (do dołu, # 64c8ef 0%, # 00a2e2 100%); / * W3C * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 64c8ef", endColorstr = "# 00a2e2", GradientType = 0); / * IE6-9 * / color: #fff; dopełnienie: 5px 15px; margines prawy: 0; margines: 15px; border-radius: 3px; text-shadow: 1px 1px 0px rgba (0, 0, 0, 0.3);
To wszystko, teraz możesz wypróbować formularz logowania z następujących linków.
- Próbny
- Pobierz źródło
Ostatnie słowa
W tym samouczku przyjrzeliśmy się kilku nowym funkcjom w formularzach HTML5:symbol zastępczy, wymagany i e-mail typy wejściowe, aby utworzyć prostą stronę logowania. Przeszliśmy również przez wady atrybutów, więc możemy zdecydować się na lepsze podejście do zastosowania.
W następnym poście zajmiemy się kolejnymi nowymi funkcjami formularza HTML5, więc bądźcie czujni.
