Pierwszy obszar bloku jest zawijany w znacznik sekcji, dzięki czemu możemy unosić układ obok siebie. Lewa kolumna zawiera wszystkie te dane wejściowe: tekst, e-mail, adres URL i numer telefonu. Po przejściu przez telefon wyświetlacz klawiatury mobilnej powinien dostosować się do typu wejścia. Istnieje wiele dobrych powodów, aby wspierać te funkcje w telefonach komórkowych, ponieważ wszyscy pracują obecnie w podróży.
Element textarea może również mieć tekst zastępczy zdefiniowany w pageload. Jest to podobne do etykiety, która znika, gdy użytkownik wprowadzi jakiś tekst w polu. Atrybut, który nie jest przenoszony, to autouzupełnienie ponieważ pola tekstowe zwykle nie zawierają powiązanych treści.
Kontrolki paska bocznego Chciałem zbudować ten formularz, aby odpowiadał odpowiednio do zmiany rozmiaru okien. Gdy okno jest wystarczająco pełne, obie kolumny wejściowe unoszą się obok siebie. Ale jeśli szerokość zostanie nieznacznie obcięta, prawy pasek boczny spadnie poniżej głównej zawartości.
Oto mój kod HTML dla obszaru paska bocznego:
Odbiorca: Personel serwisu Redaktor naczelny Dział techniczny Public Relations Ogólne wsparcie Ten kod nie jest zbyt skomplikowany. Wystarczy proste menu wyboru opcji i niektóre przyciski radiowe. Dodatkowo po tych obiektach umieściłem przycisk resetowania i przesyłania pod koniec sekcji.
To wszystko wygląda dobrze i dobrze, więc przejdźmy teraz do niektórych właściwości CSS. Istnieje wiele dostosowań, które można zastosować podczas pracy z elementami formularza. Staraj się nie zasypywać się zbytnio myśleniem i baw się dobrze!
Animowane cienie pudełka Podczas zakładania każdego z głównych elementów wejściowych, które animowałem, zauważysz kolorowy zewnętrzny cień. Google Chrome ma właściwość konspektu, która robi coś podobnego, ale nie tak ekstrawaganckiego. Ta mała część interfejsu przyciąga odwiedzających po raz pierwszy.
/ ** elementy formularza ** / # hongkiat-form wielkość pudełka: ramka; # hongkiat-form .txtinput display: block; font-family: „Helvetica Neue”, Arial, sans-serif; border-style: solid; border-width: 1px; border-color: #dedede; margin-bottom: 20px; rozmiar czcionki: 1,55em; padding: 11px 25px; padding-left: 55px; szerokość: 90%; kolor: # 777; box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) wstawka; -moz-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) wstawka; -webkit-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) wstawka; przejście: granica 0,15 s liniowe 0 s, pole-cień 0,15 s liniowo 0 s, kolor 0,15 s liniowo 0 s; -webkit-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, kolor 0.15s linear 0s; -moz-przejście: obramowanie 0.15s liniowe 0s, box-shadow 0.15s liniowe 0s, kolor 0.15s liniowe 0s; -o-przejście: granica 0,15 s liniowe 0 s, pole-cień 0,15 s liniowo 0 s, kolor 0,15 s liniowo 0 s; # hongkiat-form .txtinput: focus color: # 333; border-color: rgba (41, 92, 161, 0.4); box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) wstawka, 0 0 8px rgba (41, 92, 161, 0.6); -moz-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) wstawka, 0 0 8px rgba (41, 92, 161, 0,6); -webkit-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) wstawka, 0 0 8px rgba (41, 92, 161, 0.6); zarys: 0 brak; Aby wycelować w każdy element tekstowy, użyłem klasy .txtinput. Każda z właściwości przejścia działa na granicy, cieniu ramki i kolorze. używam wielkość pudełka: obramowanie; w pojemniku formularza, więc wypełnienie nie zakłóca naszego responsywnego projektu.
Musiałem skopiować te same style i nieznacznie je edytować dla tekstu. Zmieniłem część dopełnienia i marginesów i dodałem unikalną ikonę tła.
# hongkiat-form textarea display: block; font-family: „Helvetica Neue”, Arial, sans-serif; border-style: solid; border-width: 1px; border-color: #dedede; margin-bottom: 15px; rozmiar czcionki: 1.5em; padding: 11px 25px; padding-left: 55px; szerokość: 90%; wysokość: 180px; kolor: # 777; box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) wstawka; -moz-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) wstawka; -webkit-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) wstawka; przejście: granica 0,15 s liniowe 0 s, pole-cień 0,15 s liniowo 0 s, kolor 0,15 s liniowo 0 s; -webkit-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, kolor 0.15s linear 0s; -moz-przejście: obramowanie 0.15s liniowe 0s, box-shadow 0.15s liniowe 0s, kolor 0.15s liniowe 0s; -o-przejście: granica 0,15 s liniowe 0 s, pole-cień 0,15 s liniowo 0 s, kolor 0,15 s liniowo 0 s; # hongkiat-form textarea: focus color: # 333; border-color: rgba (41, 92, 161, 0.4); box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) wstawka, 0 0 8px rgba (40, 90, 160, 0,6); -moz-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) wstawka, 0 0 8px rgba (40, 90, 160, 0,6); -webkit-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) wstawka, 0 0 8px rgba (40, 90, 160, 0,6); zarys: 0 brak; # hongkiat-form textarea.txtblock background: #fff url ('https://assets.hongkiat.com/uploads/responsive-css3-form/speech.png') 5px 4px no-repeat; Wejścia paska bocznego Przyciski radiowe i elementy menu wyboru są znacznie prostsze. Możesz zastosować zewnętrzne efekty blasku i podobne cienie na tych elementach, ale nie zawsze wygląda to dobrze. Alternatywnie projektanci stworzą niestandardowe interfejsy użytkownika i dołączą je jako obrazy tła. Może to jednak wymagać obejścia jQuery w celu prawidłowego wyświetlania opcji.
span.radiobadge display: block; margin-bottom: 8px; span.radiobadge label font-size: 1.2em; padding-bottom: 4px; select.selmenu font-size: 17px; kolor: # 676767; padding: 9px! ważne; border: 1px solid #aaa; szerokość: 200px; Nie zrobiłem wiele, aby odepchnąć je od głównych elementów wejściowych. Ważne jest dodatkowe dopełnienie, aby użytkownicy czuli się komfortowo wchodząc w interakcję z formularzem. Gdy tekst jest bardzo mały, może być trudnością tylko wypełnienie każdej części. Zachowaj dużą czcionkę, ale nie tak dużą, by przytłaczała stronę.
Dostosowane przyciski Przyciski resetowania i przesyłania są zaprojektowane w klasie własnej. Zbudowałem zestaw gradientów światła, które dobrze pasują do niebieskich świateł w naszych polach formularza.
Poniżej znajduje się mój kod CSS dla przycisku przesyłania w stanie standardowym i najechaniu.
#buttons #submitbtn display: block; float: left; wysokość: 3em; dopełnienie: 0 1em; border: 1px solid; zarys: 0; waga czcionki: pogrubiona; rozmiar czcionki: 1.3em; kolor: #fff; text-shadow: 0px 1px 0px # 222; white-space: nowrap; zawijanie słów: normalne; vertical-align: middle; cursor: pointer; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; border-color: # 5e890a # 5e890a # 000; -moz-box-shadow: inset 0 1px 0 rgba (256,256,256, .35); -ms-box-shadow: inset 0 1px 0 rgba (256,256,256, .35); -webkit-box-shadow: inset 0 1px 0 rgba (256,256,256, .35); box-shadow: inset 0 1px 0 rgba (256,256,256, .35); kolor tła: rgb (226,238,175); background-image: -moz-linear-gradient (góra, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); background-image: -webkit-gradient (liniowy, lewy górny, lewy dolny, kolorowy-stop (3%, rgb (226,238,175)), zatrzymanie koloru (3%, rgb (188,216,77)), zatrzymanie koloru (100 %, rgb (144,176,38))); background-image: -webkit-linear-gradient (góra, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); background-image: -o-linear-gradient (góra, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); background-image: -ms-linear-gradient (góra, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); obraz-tła: gradient liniowy (góra, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# e2eeaf", endColorstr = "# 90b026", GradientType = 0); #buttons #submitbtn: hover, #buttons #submitbtn: active border-color: # 7c9826 # 7c9826 # 000; kolor: #fff; -moz-box-shadow: wstawka 0 1px 0 rgba (256,256,256,0,4), 0 1px 3px rgba (0,0,0,0,5); -ms-box-shadow: wstawka 0 1px 0 rgba (256,256,256,0,4), 0 1px 3px rgba (0,0,0,0,5); -webkit-box-shadow: wstawka 0 1px 0 rgba (256,256,256,0,4), 0 1px 3px rgba (0,0,0,0,5); box-shadow: wstawka 0 1px 0 rgba (256,256,256,0,4), 0 1px 3px rgba (0,0,0,0,5); background: rgb (228,237,189); tło: -moz-liniowy-gradient (góra, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149, 175,54) 100%); background: -webkit-gradient (liniowy, lewy górny, lewy dolny, kolor-stop (2%, rgb (228,237,189)), zatrzymanie koloru (3%, rgb (207,219,120)), zatrzymanie koloru (100%, rgb ( 149, 175,54))); background: -webkit-linear-gradient (góra, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149, 175,54) 100%); tło: -o-liniowy gradient (góra, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149, 175,54) 100%); tło: -ms-linear-gradient (góra, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149, 175,54) 100%); tło: gradient liniowy (góra, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149, 175,54) 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# e4edbd", endColorstr = "# 95af36", GradientType = 0); Utrzymanie tego typu selektora jest prawie niemożliwe! Istnieje po prostu zbyt wiele właściwości, które trzeba wymienić i obsługiwać wiele starszych przeglądarek starszego typu. Internet Explorer może nawet renderować te gradienty za pomocą odpowiedniego filtra. Zwróć uwagę, oprócz gradientów tła, na nowy kolor obramowania, zaokrąglone rogi i cień pola na zawisie.
Przycisk resetowania wygląda podobnie, ale przeszedłem zupełnie inną trasę niż schemat kolorów. Jasnoszary ma tendencję do wpadania w tło w porównaniu z jasnozielonymi kolorami. Nasz przycisk resetowania prawdopodobnie nie będzie używany zbyt często, więc nie wymaga całej uwagi.
#buttons #resetbtn display: block; float: left; kolor: # 515151; text-shadow: -1px 1px 0px #fff; margin-right: 20px; wysokość: 3em; dopełnienie: 0 1em; zarys: 0; waga czcionki: pogrubiona; rozmiar czcionki: 1.3em; white-space: nowrap; zawijanie słów: normalne; vertical-align: middle; cursor: pointer; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; background-color: #fff; background-image: -moz-linear-gradient (góra, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222 222 222) 100%); background-image: -webkit-gradient (liniowy, lewy górny, lewy dolny, zatrzymanie koloru (2%, rgb (255,255,255)), zatrzymanie koloru (2%, rgb (240,240,240)), zatrzymanie koloru (100%, rgb (222,222,222))); background-image: -webkit-linear-gradient (góra, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222 222 222) 100%); background-image: -o-linear-gradient (góra, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222 222 222) 100%); background-image: -ms-linear-gradient (góra, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222 222 222) 100%); background-image: linear-gradient (top, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222 222 222) 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# ffffff", endColorstr = "# dedede", GradientType = 0); granica: 1px bryła # 969696; box-shadow: 0 1px 2px rgba (144, 144, 144, 0,4); -moz-box-shadow: 0 1px 2px rgba (144, 144, 144, 0,4); -webkit-box-shadow: 0 1px 2px rgba (144, 144, 144, 0,4); text-shadow: 0 1px 1px rgba (255, 255, 255, 0.75); #buttons #resetbtn: hover text-shadow: 0 1px 1px rgba (255, 255, 255, 0.75); kolor: # 818181; background-color: #fff; background-image: -moz-linear-gradient (góra, rgb (255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); background-image: -webkit-gradient (liniowy, lewy górny, lewy dolny, zatrzymanie koloru (2%, rgb (255,255,255)), zatrzymanie koloru (2%, rgb (244,244,244)), zatrzymanie koloru (100%, rgb (229, 229, 299))); background-image: -webkit-linear-gradient (góra, rgb (255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); background-image: -o-linear-gradient (góra, rgb ( 255,255,255) 2%, rgb (244 244 244) 2%, rgb (229 229 299) 100%); background-image: -ms-linear-gradient (góra, rgb (255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); background-image: linear-gradient (top, rgb (255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# ffffff", endColorstr = "# e5e5e5", GradientType = 0); border-color: #aeaeae; box-shadow: wstawka 0 1px 0 rgba (256,256,256,0,4), 0 1px 3px rgba (0,0,0,0,5); Możesz nawet usunąć typ resetowania i użyć tego białego / szarego schematu kolorów jako głównego przycisku przesyłania. Użyłem wielu tych samych stylów gradientu i efektów cienia, a także cienia tekstu dla etykiety wewnętrznej. To zdecydowanie zapewnia inne odczucia w stosunku do doświadczenia użytkownika.
Elastyczne zmiany układu Przechodząc do mojego innego pliku CSS, możemy spojrzeć na proste, responsywne zapytania o media, które ustawiłem. Każde okno przeglądarki powyżej 800px będzie miało pełny interfejs paska bocznego. Gdy znajdziesz się poniżej tego progu, lewa kolumna rozszerzy się do 100% szerokości i zobaczysz, jak elementy paska bocznego spadają poniżej.
ekran @media i (max-width: 800px) body padding: 10px 15px; #container width: 100%; # hongkiat-form #aligned width: 100%; float: brak; Blok wyświetlacza; # hongkiat-form #aside width: 100%; Blok wyświetlacza; float: brak; # hongkiat-form .txtinput, # hongkiat-form textarea szerokość: 85%; #prioritycase float: left; Blok wyświetlacza; #recipientcase float: left; Blok wyświetlacza; margines prawy: 55px; W miarę zbliżania się do wielkości próbuję dostosować każdą z form wejściowych. Właściwość width może kończyć się dłużej niż sama strona internetowa, a następnie mamy formaty wejściowe wystające ponad krawędź. Dzieje się tak w okolicach 550px, czyli w miejscu, w którym przerywam następne zapytanie, a także rozdzielczości ekranu iPhone'a dla portretów i krajobrazu.
/ * mniejszy zrzut ekranu ******* / @media tylko ekran i (max-width: 550px) # hongkiat-forma .txtinput, # hongkiat-form textarea szerokość: 80%; / * Ekran iPhone Landscape ******** / @media only i (max-width: 480px) body padding: 10px 0px; select.selmenu width: 190px; / * Portret iPhone'a ******* / ekran tylko @media i (max-width: 320px) body padding: 10px 0px; # hongkiat-form .txtinput, # hongkiat-form textarea szerokość: 70%; # hongkiat-form #aligned overflow: hidden; select.selmenu width: 160px; #recipientcase margin-right: 30px; Poziomy tryb pejzażu nadal dobrze trzyma wszystko razem. Menu rozwijane wybrałem nieco cieńsze, aby zrobić miejsce dla przycisków opcji. W widoku pionowym przeskalowałem wszystkie elementy na znacznie mniejsze szerokości. Teraz nasz kod nie złamie się nawet w zmienionych oknach przeglądarki. Ale miło jest mieć także wsparcie dla smartfonów z systemem iOS / Android.
Próbny Pobierz kod źródłowy Wniosek Mam nadzieję, że ten samouczek zawiera informacje wyjaśniające, jak wiele można zrobić na swoich formularzach internetowych. Nowe właściwości CSS3 są wystarczająco potężne, aby tworzyć w pełni funkcjonalne animacje za pomocą zaledwie kilku linii kodu. To naprawdę ekscytujący czas, aby pracować w tworzeniu stron internetowych i podążać za tymi trendami.
Jeśli masz pomysły lub sugestie dotyczące kodu samouczka, podziel się nimi z nami za pomocą poniższego pola komentarza.
