Pola tekstowe w formularzu
W tym materiale stworzysz formularz do rezerwacji sprzętu budowlanego. Wykorzystamy poznane do tej pory elementy formularza oraz ich właściwości i atrybuty.
- Stwórz podstawową strukturę HTML.
- Pod znacznikiem
body
dodaj znacznik otwierający/zamykającyform
. W nim umieść znacznik otwierający/zamykającyfieldset
. W środku dodaj znacznik otwierający/zamykającylegend
z tytułem “Dane personalne”. Kolejno umieść dwa takie same divy z klasądouble-input
. - Pod zamknięciem
fieldset
skopiuj powyższy całyfieldset
z całą jego zawartością. Zmień zawartość znacznikalegend
na “Szczegóły sprzętu”. - Pod zamknięciem drugiego
fieldset
dodaj przycisk typusubmit
z zawartością “Wyślij zapytanie”. - W każdym elemencie z klasą
double-input
utwórz po dwa divy z klasąform-input-container
. - W pierwszym
fieldset
w każdym kontenerze dodaj elementlabel
z pustym atrybutemfor
oraz taginput
. - Czas na uzupełnienie stworzonych elementów treścią. Rozpoczynamy od pierwszego elementu
double-input
. Elementlabel
w pierwszym kontenerze powinien mieć atrybutfor="fname"
oraz treśćImię
. Kolejnemu elementowi tuż za nim nadaj typtext
, idfname
, placeholder z dowolną nazwą oraz atrybutyminlength="3"
irequired
. - W drugim kontenerze wykonaj podobnie, ale zamiast
fname
dodajlname
oraz placeholder z nazwiskiem. - Przejdźmy do drugiego kontenera
double-input
. W pierwszym kontenerze umieśćlabel
dlaemail
orazinput
typuemail
z takim samym id. Dodaj również atrybutrequired
oraz odpowiedni placeholder. - Przejdźmy do ostatniego kontenera w obecnym
fieldset
. Dodaj w nimlabel
dla idphone
i z odpowiednią treścią, a potem dodaj teżinput
typutel
o idphone
. Na końcu standardowo dodaj odpowiedni placeholder irequired
.
brave-gauss-j450w
brave-gauss-j450w danielminschinski
Pola wyboru w formularzu
Nadszedł czas na uzupełnienie pól w drugim elemencie fieldset
. Ostatnio dodawaliśmy tylko pola tekstowe. Teraz zajmiemy się elementami select
oraz input
typu liczbowego.
- Czas na drugi
fieldset
. W pierwszym kontenerze nadaj elementowilabel
atrybutfor="equipment"
oraz treść “Sprzęt” i utwórz elementselect
o idequipment
z czteremaoption
z różnym sprzętem. Pamiętaj o dodaniuvalue
. - W drugim kontenerze nadaj
for="capacity"
elementowilabel
orazIlość
jako treść. Dalej utwórzinput
typunumber
o idcapacity
o wartości 1. Ogranicz to pole tak, aby przyjmowało jedynie wartości całkowite z zakresu 1-10. - Przejdźmy do drugiego
double-input
. Dodaj kontenerom klasydate-select
. W pierwszym z nichlabel
powinno mieć treśćStart wynajmu
. Następnie umieść dwa elementyselect
. W pierwszym z nazwąstart-date-day
, drugi z nazwąstart-date-month
. W pierwszym umieść kilkaoption
z numerami dni, a w drugim z nazwami miesięcy. - Następnie, na początku tych
select
umieśćoption
bez wartości z atrybutamidisabled
orazselect
. Przydadzą nam za placeholder. W treści tych opcji umieść odpowiednioDzień
orazMiesiąc.
- Analogicznie wykonaj w przypadku kolejnego kontenera. Jedyną różnicą będzie zamiana słowa
start
naend
.
goofy-shaw-49e7g
goofy-shaw-49e7g danielminschinski
Stylowanie formularza
Szablon HTML naszego formularza uważam za skończoną. Pora, aby zająć się wyglądem. Zapewne zauważyliście, że podstawowe style zostały już nadane, ale nic o tym nie mówiłem.
Na początek zajmiemy się ostylowaniem formularza, kontenera i double-input
. Tym samym stworzymy podstawy dla układu naszej strony. Następnie zajmiemy się przyciskiem. Na końcu skupimy się już wyłącznie na elementach input
i select
.
- Czas na CSS. Jeżeli nie masz stworzonego pliku css to załóż go teraz. Następnie skopiuj zawartość z poprzedniego kroku ćwiczenia.
- Następnie stwórz selektor dla elementu
form
. Nadaj mu następujące właściwości – maksymalną szerokość768px
, wyświetlanie blokowe, szerokość 95%, kolor tła – darkblue, padding25px 0
, margines o wartości40px auto
i cieńbox-shadow: 0 4px 10px 4px rgba(19, 35, 47, 0.3).
- Utwórz selektor dla elementu
fieldset
i przypisz mu brak ramki, szerokość90%
oraz margines10px auto
. - Utwórz selektor legend. Dodaj w nim margines o wartości
30px 0 0
, rozmiar czcionki24px
orazfont-weight: 700
.
agitated-ramanujan-gvrck
agitated-ramanujan-gvrck danielminschinski
Layout formularza
Mamy strukturę HTML i podstawowe style w naszym formularzu. Brakuje nam prawidłowego układu elementów. Zajmiemy się tym, stylując wcześniej utworzone klasy.
- Nadaj klasie
double-input
margines20px auto
, a elementomdiv
które się w niej znajdują przypiszfloat: left;
szerokość 48% oraz margines o wartości0 1% 10px
. - Czas na etykiety. Przypisz
label
wyświetlanie blokowe oraz margines dolny o wartości10px
. - Zajmijmy się naszym przyciskiem. Utwórz selektor dla
button[type="submit"]
i nadaj w nim właściwości – wysokość50px
, szerokość300px
, kolor tłayellow
, brak ramek orazcursor: pointer
. - Kontynuując stylowanie przycisku, dodaj rozmiar czcionki na
20px
, wysokość linii50px
,font-family: 'Lato'
, cieńbox-shadow: 0 0 10px #131313
, wyświetlanie blokowe oraz margines o wartości0 auto
.
crazy-cerf-1x7hh
crazy-cerf-1x7hh danielminschinski
Edycja wyglądu pól formularza
Stworzyliśmy już układ naszego formularza za pomocą CSS. Zróbmy jeszcze coś jeszcze – ostylujmy pola w taki sposób, który poznaliśmy już w trakcie wcześniejszych materiałów. Wykorzystamy poznane pseudoklasy, aby móc stylować elementy w zależności od ich stanu i położenia.
- Utwórz selektor grupowy dla
input
orazselect
i przypisz w nim szerokość 100%, biały kolor czcionki, przezroczyste tło, ramkę o właściwościach1px solid #a9a9a9
, padding 8px oraz wysokość 35px. Dla elementówselect
w elementach z klasądate-select
przypisz również szerokość 47%, a dla tych samych elementów z pseudoklasą:first-of-type
ustaw jeszcze prawy margines o wartości 3%. - Utwórz kolejny selektor grupowy – tym razem dla elementów
input
orazselect
z pseudoklasą:focus
. Przypisz i ramkę o właściwościach1px solid #2db92d
. Tym samym elementom z pseudoklasą:valid
przypisz inną ramkę –1px solid #55ee70
. - Ostatnia modyfikacja dotyczy elementów
option
. Przypisz im czarnt kolor czcionki i kolor tła#ececec
.
youthful-shadow-lw6ov
youthful-shadow-lw6ov danielminschinski
Gratuluję Ci, że dotarłeś do momentu, gdy możesz to przeczytać. To oznacza że wykonałeś wszystkie ćwiczenia na temat formularza, które przygotowałem.
Kolejnym krokiem który wykonam to aktualizacja “Planu nauki Frontend Developera” o kolejny rozdział. Nie zdradzam więcej ale powiem jedno – będzie ciekawie.
Zapraszam do subskrypcji i polubienia mojego blogowo/usługowego fb oraz kanału na YouTube.
Jeżeli chciałbyś/chciałabyś wesprzeć mój blog to zapraszam -> WSPARCIE DLA BLOGA