Spojrzenie na formularze HTML5 Typy danych Data, kolor i zakres

Formularze można znaleźć wszędzie na stronach internetowych. Facebook, Twitter, Google - żeby wymienić tylko kilka - wymagają od nas zalogowania się lub zarejestrowania na stronie za pomocą formularza, w rzeczywistości używamy formularza do tweetowania i aktualizowania statusu w serwisach społecznościowych. W skrócie, formularz jest bardzo ważną częścią umożliwiającą interakcję ze stroną internetową.

Formularz internetowy jest zbudowany z danych wejściowych, w przeszłości mamy tylko kilka opcji dla typów danych wejściowych; Jak na przykład tekst, hasło, radio, pole wyboru i Zatwierdź. Teraz HTML5 zawiera wiele ulepszeń i wprowadza wiele nowych typów danych wejściowych w specyfikacji.

Tak więc w tym poście zagłębimy się w niektóre z nowych interesujących utworów z Formularze HTML5 uważamy, że powinieneś je wypróbować; sprawdźmy je.

Wybór daty

Pierwszą rzeczą, na którą chcielibyśmy spojrzeć, jest selektor daty. Wybór daty to częsta rzecz, którą możesz znaleźć w formularzu rejestracyjnym, szczególnie w niektórych witrynach lub aplikacjach, takich jak rezerwacja lotów i hoteli.

Istnieje wiele bibliotek JavaScript do tworzenia selektora dat. Teraz możemy również utworzyć je w znacznie łatwiejszy sposób dzięki wejściu HTML5 data, następująco;

The selektor daty w HTML5 w zasadzie działa bardzo podobnie do bibliotek JavaScript; kiedy skupimy się na polu, wyskoczy kalendarz, a następnie możemy przechodzić przez miesiące i lata, aby wybrać datę.

Jednak każda przeglądarka obecnie obsługująca data typ wejścia, a mianowicie Chrome, Opera i Safari wyświetlają ten typ wejścia nieco inaczej, co potencjalnie może prowadzić do niespójności w doświadczeniu użytkownika, i tak to wygląda;

Niektóre znaczące różnice widać na pierwszy rzut oka na powyższym obrazku; Opera użyła angielskiego trzyliterowego skrótu nazwy dni - Sun, Mon, Thu i ​​tak dalej, podczas gdy Chrome używał mojego lokalnego języka, Safari - z drugiej strony - działa raczej dziwnie, nie wyświetla kalendarza w ogóle.

Są też nowe wkład typy do wybierz konkretnie datę lub godzinę; miesiąc, tydzień, czas, datetime i datetime-local, które jesteśmy pewni, że samo słowo kluczowe jest dość nietypowe, aby powiedzieć, co robi.

Możesz zobaczyć je wszystkie w akcji z poniższego linku, ale upewnij się, że przeglądasz je w Operze 11 i wyżej, ponieważ w chwili pisania jest to jedyna przeglądarka, która obsługuje wszystkie te typy wejść.

• Demo Datepicker

Narzędzie do wybierania kolorów

Narzędzie do wybierania kolorów jest często potrzebny w niektórych aplikacjach internetowych, takich jak ten generator gradientu CSS3, ale przez cały czas programiści wciąż polegają na bibliotece JavaScript, takiej jak jsColor, aby wykonać zadanie. Ale teraz możemy stworzyć próbnik kolorów w przeglądarce natywnej z HTML5 kolor typ wejścia;

Po raz kolejny przeglądarki, w tym przypadku Chrome i Opera, czynią ten typ wejścia nieco innym;

Opera najpierw wyświetla podstawową opcję koloru po kliknięciu, jak również format szesnastkowy bieżącego wybranego koloru w liście rozwijanej, podczas gdy Chrome kliknie paletę kolorów w nowym oknie po kliknięciu.

Ponadto możemy również ustawić domyślny kolor za pomocą wartość atrybut, jak następuje;

W ten sposób, gdy jest oglądany w nieobsługiwanych przeglądarkach, wkład ulegnie pogorszeniu w polu tekstowym i będzie widoczna wartość domyślna, która może dać pewnego rodzaju wskazówkę dla użytkowników, co powinno zostać wprowadzone w polu.

Wyświetl wartość koloru

Zamiast otwierać Photoshopa, wystarczy skopiować klątwa format koloru, możesz w rzeczywistości stworzyć proste narzędzie na tym typie wejścia, aby wykonać zadanie, ponieważ wygenerowany kolor jest już w systemie szesnastkowym, co byłoby naprawdę łatwe;

Po pierwsze dodajemy id narzędzie do wybierania kolorów do wejścia i dodajemy również pusty div z identyfikatorem hekscolor obok, aby zawierać wartość.

Potrzebujemy jQuery połączonego w głowa naszego dokumentu. Następnie przechowujemy wartość koloru i nowo dodaną div w zmiennej, tak;

 var color = $ ('# colorpicker'). val (); hexcolor = $ ('# hexcolor'); 

Uzyskaj początkową wartość z #narzędzie do wybierania kolorów;

 hexcolor.html (kolor); 

… I wreszcie zmienić wartość, gdy wybrany kolor również się zmieni;

 $ ('# colorpicker'). on ('change', function () hexcolor.html (this.value);); 

To jest to; teraz zobaczmy to w akcji.

• Demo Colorpicker

Zasięg

The zasięg typ wejścia pozwala nam dodać suwak w przeglądarce do wybierania numeru w zakresie, który możemy również znaleźć w interfejsie użytkownika jQuery.

Powyższy fragment jest podstawową implementacją zasięg typ wejścia. Możemy również zmienić orientację suwaka na pionową za pomocą CSS, jak poniżej;

 input [type = range] width: 20px; wysokość: 200px; -webkit-pojawienie się: suwak-pion;  

Dodatkowo możemy ustawić min i max zakres liczb, na przykład;

W poniższym fragmencie ustawiamy min do zera i 225 na maksimum. Gdy nie zostaną wyraźnie określone, domyślnie przeglądarka przyjmie 0 dla minimum do 100 na maksimum.

Wyświetl numer

Jest jednak jedno ograniczenie, liczba jest niewidoczna, nie widzimy wygenerowanej liczby / wartości z suwaka w przeglądarce. Aby wyświetlić numer, musimy dodać trochę JavaScriptu lub jQuery, i oto jak to robimy;

Najpierw dodajemy pusty div obok wejścia stylizuj div wystarczająco, aby wyglądało jak pudełko.

Następnie umieść następujący kod, który zrobi to samo, co powyższy kod w selektorze strongcolor, z wyjątkiem teraz uzyskujemy wartość z suwaka.

 $ (function () var val = $ ('# slider'). val (); output = $ ('# output'); output.html (val); $ ('# slider'). change (funkcja ( ) output.html (this.value););); 

Teraz możesz zobaczyć demo. Przypomnienie, zobacz prezentację w tych przeglądarkach - Chrome, Opera i Safari, ponieważ Firefox i IE nie obsługują zasięg typ wejścia w tej chwili.

• Range Demo

Ostatnie słowa

Jasne jest, że HTML5 znacznie ułatwia nasze życie, wprowadzając wiele nowych typów danych wejściowych. Jednak, jak wszystkie inne funkcje HTML5, obsługa jest bardzo ograniczona, szczególnie w starszych przeglądarkach, więc powinniśmy używać tych nowych funkcji z ostrożnością, zwłaszcza w nowych typach danych wejściowych, które omówiliśmy w tym poście; Data, kolor i zakres.

Ale ostatecznie mamy nadzieję, że teraz masz więcej wglądu Formularze HTML5. Dziękujemy za przeczytanie tego posta i mamy nadzieję, że się podobało.

• Próbny
• Pobierz źródło

Dalsze czytanie

Poniżej znajduje się kilka przydatnych linków, które pozwolą Ci głębiej zajrzeć do formularzy HTML.

• Nowe funkcje formularza w HTML5 - Opera Dev.
• Aktualny stan formularzy HTML5 - Wufoo
• Atrybuty formularza HTML5 - w3school.org
• Kiedy mogę korzystać z formularzy HTML5? - CanIUse.com