#67. Formularz internetowy – ćwiczenie

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.

    1. Stwórz podstawową strukturę HTML.
    2. Pod znacznikiem body dodaj znacznik otwierający/zamykający form. W nim umieść znacznik otwierający/zamykający fieldset. W środku dodaj znacznik otwierający/zamykający legend z tytułem “Dane personalne”. Kolejno umieść dwa takie same divy z klasą double-input.
    3. Pod zamknięciem fieldset skopiuj powyższy cały fieldset z całą jego zawartością. Zmień zawartość znacznika legend na “Szczegóły sprzętu”.
    4. Pod zamknięciem drugiego fieldset dodaj przycisk typu submit z zawartością “Wyślij zapytanie”.
    5. W każdym elemencie z klasą double-input utwórz po dwa divy z klasą form-input-container.
    6. W pierwszym fieldset w każdym kontenerze dodaj element label z pustym atrybutem for oraz taginput.
    7. Czas na uzupełnienie stworzonych elementów treścią. Rozpoczynamy od pierwszego elementu double-input. Element label w pierwszym kontenerze powinien mieć atrybut for="fname" oraz treść Imię. Kolejnemu elementowi tuż za nim nadaj typ text, idfname, placeholder z dowolną nazwą oraz atrybuty minlength="3" i required.
    8. W drugim kontenerze wykonaj podobnie, ale zamiast fname dodaj lname oraz placeholder z nazwiskiem.
    9. Przejdźmy do drugiego kontenera double-input. W pierwszym kontenerze umieść label dla email oraz input typu email z takim samym id. Dodaj również atrybut required oraz odpowiedni placeholder.
    10. Przejdźmy do ostatniego kontenera w obecnym fieldset. Dodaj w nim label dla id phone i z odpowiednią treścią, a potem dodaj też input typu tel o id phone. Na końcu standardowo dodaj odpowiedni placeholder i required.
PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

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.

  1. Czas na drugi fieldset. W pierwszym kontenerze nadaj elementowi label atrybut for="equipment" oraz treść “Sprzęt” i utwórz element select o id equipment z czterema option z różnym sprzętem. Pamiętaj o dodaniu value.
  2. W drugim kontenerze nadaj for="capacity" elementowi label oraz Ilość jako treść. Dalej utwórz input typu number o id capacity o wartości 1. Ogranicz to pole tak, aby przyjmowało jedynie wartości całkowite z zakresu 1-10.
  3. Przejdźmy do drugiego double-input. Dodaj kontenerom klasy date-select. W pierwszym z nich label powinno mieć treść Start wynajmu. Następnie umieść dwa elementy select. W pierwszym z nazwą start-date-day, drugi z nazwą start-date-month. W pierwszym umieść kilka option z numerami dni, a w drugim z nazwami miesięcy.
  4. Następnie, na początku tych select umieść option bez wartości z atrybutami disabled oraz select. Przydadzą nam za placeholder. W treści tych opcji umieść odpowiednio Dzień oraz Miesiąc.
  5. Analogicznie wykonaj w przypadku kolejnego kontenera. Jedyną różnicą będzie zamiana słowa start na end.
PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

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.

  1. Czas na CSS. Jeżeli nie masz stworzonego pliku css to załóż go teraz. Następnie skopiuj zawartość z poprzedniego kroku ćwiczenia.
  2. 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, padding 25px 0, margines o wartości 40px auto i cień box-shadow: 0 4px 10px 4px rgba(19, 35, 47, 0.3).
  3. Utwórz selektor dla elementu fieldset i przypisz mu brak ramki, szerokość 90% oraz margines 10px auto.
  4. Utwórz selektor legend. Dodaj w nim margines o wartości 30px 0 0, rozmiar czcionki 24px oraz font-weight: 700.
PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

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.

  1. Nadaj klasie double-input margines 20px auto, a elementom div które się w niej znajdują przypisz float: left; szerokość 48% oraz margines o wartości 0 1% 10px.
  2. Czas na etykiety. Przypisz label wyświetlanie blokowe oraz margines dolny o wartości 10px.
  3. 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ła yellow, brak ramek oraz cursor: pointer.
  4. Kontynuując stylowanie przycisku, dodaj rozmiar czcionki na 20px, wysokość linii 50px, font-family: 'Lato', cień box-shadow: 0 0 10px #131313, wyświetlanie blokowe oraz margines o wartości 0 auto.
PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

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.

  1. Utwórz selektor grupowy dla input oraz select i przypisz w nim szerokość 100%, biały kolor czcionki, przezroczyste tło, ramkę o właściwościach 1px solid #a9a9a9, padding 8px oraz wysokość 35px. Dla elementów select 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%.
  2. Utwórz kolejny selektor grupowy – tym razem dla elementów input oraz select z pseudoklasą :focus. Przypisz i ramkę o właściwościach 1px solid #2db92d. Tym samym elementom z pseudoklasą :valid przypisz inną ramkę – 1px solid #55ee70.
  3. Ostatnia modyfikacja dotyczy elementów option. Przypisz im czarnt kolor czcionki i kolor tła #ececec.
PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

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 

Chcesz na bieżąco otrzymywać informację o nowych materiałach? Zapisz się do NEWSLETTERA!