Jak utworzyć formularz ułożony w CSS

Jak utworzyć formularz ułożony w CSS

CSS należy do unikalnej klasy języków, znanej jako języki arkuszy stylów. Służy głównie do definiowania prezentacji Twojej strony internetowej. Chociaż HTML pozwala określić strukturę strony, to CSS jest używany do jej stylizacji. W przeciwnym razie otrzymasz dość nieatrakcyjną stronę internetową.





Skupienie się na CSS to jeden z lepszych sposobów na poprawę atrakcyjności witryny, zwłaszcza jeśli chodzi o poprawę komfortu użytkowania. W ten sposób możesz również zwiększyć ruch. Na początek możesz użyć ułożonego formularza.





Co to jest formularz skumulowany?

Formularz ułożony w stos umożliwia utworzenie specjalnego formularza, w którym można umieszczać etykiety i dane wejściowe jeden na drugim, zamiast umieszczać je w układzie poziomym.





Oto jak możesz to zrobić.

Zakoduj HTML

Użyj elementu HTML, , aby przetwarzać Twoje dane. Dodaj etykiety do odpowiednich pól i przypisz odpowiednie pola wejściowe. W tym przykładzie prosimy użytkowników o podanie swojego imienia i nazwiska oraz adresu e-mail wraz z typem danych wejściowych formularza tekst , natomiast rozwijane menu jest tworzone przez wybierz identyfikator aby pomóc im wybrać branżę.







What Is a Stacked Form?


Here's how you create a stacked form.



Full Name

Email Address

Department

Information Technology
Customer Support
Sales





Jednak uruchomienie tego fragmentu kodu da tylko nijaką formę bez pionowego układania pól. I tutaj musisz dodać CSS.





jak zrestartować macbooka pro po zamrożeniu

Zakoduj część CSS

Teraz utwórz osobny arkusz stylów i dodaj go do kodu HTML przed tagiem body:


Następnie wybierz treść, typy danych wejściowych i kontener HTML, a następnie dostosuj je za pomocą CSS. Obejmuje to eksperymentowanie z różnymi właściwościami CSS , takimi jak rodzina czcionek, szerokość, dopełnienie, margines, wyświetlanie, obramowanie itp., a także dodawanie preferowanych wartości. W ten sposób otrzymasz ułożony w stos formularz, który dokładnie odpowiada Twoim preferencjom. Oto przykład.






body {
font-family: Calibri;
}
input[type=text], select {
width: 25%;
padding: 12px 20px;
margin: 8px 10;
display: list-item;
border: 4px double #39A9DB;
border-radius: 8px;
box-sizing: border-box;
}
input[type=submit] {
width: 25%;
background-color: #F8E2E6;
color: #0000FF;
padding: 12px 18px;
margin: 20px 0;
border: none;
border-radius: 6px;
cursor: pointer;
}
div.container {
border-radius: 10px;
background-color: #39A9DB;
padding: 40px;
}

Sprawdź dane wyjściowe poniżej.

Teraz możesz utworzyć ułożony formularz w CSS

Z tego artykułu nauczyłeś się tworzyć formularze piętrowe w CSS. Z praktyką będziesz w stanie dopracować swoje formularze i sprawić, że Twoja witryna będzie bardziej przyjazna dla użytkownika.

czy mogę wydrukować książkę o rozpaleniu?

Nazwa gry w programowanie to „praktyka”. Doskonal swoje umiejętności w zakresie CSS dzień po dniu dzięki projektom wystawienniczym, aby stać się stylowym projektantem stron internetowych i bardziej wydajnym programistą stron internetowych.

Udział Udział Ćwierkać E-mail 10 prostych przykładów kodu CSS, których możesz się nauczyć w 10 minut

Potrzebujesz pomocy z CSS? Wypróbuj te podstawowe przykłady kodu CSS na początek, a następnie zastosuj je na swoich stronach internetowych.

Czytaj dalej
Powiązane tematy
  • Programowanie
  • Tworzenie stron internetowych
  • CSS
O autorze Usman Ghani(4 opublikowane artykuły)

Usman jest sprzedawcą treści, który pomógł kilku firmom w organicznym rozwoju na platformach cyfrowych. Lubi zarówno programowanie, jak i pisanie, co oznacza, że ​​bardzo lubi pisanie techniczne. Kiedy nie pracuje, Usman lubi spędzać czas oglądając programy telewizyjne, śledząc krykieta i czytając o analizie danych.

Więcej od Usmana Ghaniego

Zapisz się do naszego newslettera

Dołącz do naszego newslettera, aby otrzymywać porady techniczne, recenzje, bezpłatne e-booki i ekskluzywne oferty!

Kliknij tutaj, aby zasubskrybować