Formularze

CSS3 oferuje szerokie możliwości stylowania formularzy, umożliwiając twórcom stron internetowych dostosowanie wyglądu elementów formularza, takich jak pola tekstowe, przyciski, listy rozwijane i inne. Stosowanie CSS3 do stylowania formularzy pozwala na poprawę użyteczności i estetyki strony, a także na zapewnienie spójności interfejsu użytkownika z resztą projektu. W tej lekcji przyjrzymy się różnym technikom stylowania formularzy, eksplorując różne właściwości CSS i ich możliwości.

Przykład stylowania formularza

Poniżej znajduje się kompletny przykład kodu HTML i CSS ilustrujący stylowanie formularza. Przykład zawiera stylizację pola tekstowego, przycisku oraz listy rozwijanej, demonstrując różne właściwości CSS, które mogą być zastosowane do elementów formularza.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stylowanie formularzy w CSS3</title>
    <style>
        /* Stylowanie kontenera formularza */
        .form-container {
            width: 100%;
            max-width: 400px;
            margin: 0 auto;
            padding: 20px;
            border: 1px solid #ddd; /* Ramka dookła formularza */
            border-radius: 5px; /* Zaokrąglenie rogów ramki */
        }
        
        /* Stylowanie pól tekstowych */
        input[type="text"], select {
            width: 100%;
            padding: 10px;
            margin: 10px 0; /* Marginesy dla odstępu między elementami */
            display: block; /* Wyświetlanie jako blok, aby zająć całą szerokość */
            border: 1px solid #ccc; /* Ramka dookoła pola tekstowego */
            border-radius: 4px; /* Zaokrąglenie rogów */
        }
        
        /* Stylowanie przycisków */
        input[type="submit"] {
            width: 100%;
            padding: 10px;
            background-color: #4CAF50; /* Kolor tła przycisku */
            color: white; /* Kolor tekstu */
            border: none;
            border-radius: 4px; /* Zaokrąglenie rogów */
            cursor: pointer; /* Kursor wskazujący */
        }
        
        /* Zmiana stylu przycisku przy najechaniu */
        input[type="submit"]:hover {
            background-color: #45a049; /* Ciemniejszy odcień zielonego */
        }
    </style>
</head>
<body>

<div class="form-container">
    <form action="/submit-form" method="post">
        <label for="name">Imię:</label>
        <!-- Pole tekstowe dla imienia -->
        <input type="text" id="name" name="name">
        
        <label for="country">Kraj:</label>
        <!-- Lista rozwijana dla wyboru kraju -->
        <select id="country" name="country">
            <option value="poland">Polska</option>
            <option value="united_states">Stany Zjednoczone</option>
            <option value="germany">Niemcy</option>
        </select>
        
        <!-- Przycisk wysyłający formularz -->
        <input type="submit" value="Wyślij">
    </form>
</div>

</body>
</html>

Opis przykładu

  • Kontener formularza: Stylizacja kontenera formularza poprzez ustawienie maksymalnej szerokości, marginesów, wypełnienia, ramki i zaokrąglenia rogów zapewnia czytelność i estetykę formularza.
  • Pola tekstowe i listy rozwijane: Ustawienie szerokości na 100%, wypełnienia, marginesów, wyświetlenia jako blok, ramki i zaokrąglenia rogów sprawia, że elementy te są łatwe do wypełnienia i czytelne dla użytkownika. Zastosowanie tych stylów gwarantuje, że formularz będzie wyglądał spójnie na różnych urządzeniach i przeglądarkach.
  • Przyciski: Stylowanie przycisków z użyciem kolorów tła, koloru tekstu, zaokrąglenia rogów oraz zmiany stylu przy najechaniu myszką, czyni interfejs użytkownika przyjaznym i intuicyjnym. Przycisk reaguje na akcje użytkownika, co zwiększa interaktywność formularza.

Różne możliwości stylowania formularzy

W CSS3 istnieje wiele właściwości, które można zastosować do stylowania formularzy. Oto niektóre z nich wraz z możliwymi wartościami:

  • text-align: Umożliwia wyrównanie tekstu wewnątrz elementu. Możliwe wartości to left, right, center, justify.
  • border: Definiuje styl, szerokość i kolor ramki elementu. Przykład: 1px solid #ccc.
  • padding: Ustawia odstęp wewnątrz elementu między jego zawartością a granicami. Można określić jedną wartość dla wszystkich stron lub osobne wartości dla każdej strony (np. 10px lub 10px 15px 10px 15px).
  • margin: Ustawia odstęp na zewnątrz elementu. Analogicznie do padding, można określić jedną wartość dla wszystkich stron lub osobne wartości.
  • border-radius: Określa zaokrąglenie rogów ramki. Może być jedna wartość dla wszystkich rogów lub indywidualne wartości dla poszczególnych rogów.
  • background-color: Ustawia kolor tła elementu.
  • :hover: Pseudoklasa służąca do definiowania stylu elementu, gdy znajduje się nad nim kursor myszy.

Podsumowanie

Stylowanie formularzy przy użyciu CSS3 jest kluczowym elementem tworzenia atrakcyjnych i funkcjonalnych stron internetowych. Dzięki zrozumieniu i stosowaniu różnorodnych właściwości CSS, można znacząco poprawić wygląd i użyteczność formularzy. Pamiętaj, że oprócz wyglądu, ważne jest również zapewnienie dostępności i użyteczności formularzy, aby były one przyjazne dla wszystkich użytkowników, włącznie z osobami korzystającymi z czytników ekranu i innych technologii wspomagających.

Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs WebDevelopera od podstaw w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.

Poprzedni
Następny
Scroll to Top