Na stronach internetowych, formularzach i raportach pomagają użytkownikom w szybkim i wydajnym wykonywaniu zadań. Dane podsumowujące są przedstawione w raportach, podczas gdy formularze są używane do różnych zadań, w tym gromadzenie danych, prezentacja wyników zapytania, obliczenia itp. Formularz zapewnia klientowi systematyczny sposób wprowadzania informacji do bazy danych i bezpośredniej zmiany danych w strukturach bazy danych, takich jak tabele.

Ten zapis dotyczy tworzenia formularzy i stylizacji za pomocą HTML i CSS.

Jak utworzyć formularz w HTML?

Aby utworzyć formularz w HTML, najpierw skorzystaj z „”Element w HTML, a następnie dodanie i elementy.

Aby uzyskać praktyczne implikacje, postępuj zgodnie z danymi instrukcjami.

Krok 1: Dodaj nagłówek
Aby wstawić nagłówek do dokumentu HTML, użyj dowolnego znacznika nagłówka z „

" Do "

". W tym scenariuszu użyliśmy

etykietka.

Krok 2: Utwórz formularz
Następnie utwórz formularz z pomocą „”Element i dodaj komponenty formy.

Krok 3: Dodaj etykietę w formie
Następnie wstaw „„Zagaduj wewnątrz formularza reprezentującego podpis elementu w interfejsie użytkownika. Ponadto dodaj „Do”Atrybut wewnątrz„„To jest wykorzystywane w odniesieniu do identyfikatora elementu powiązanego z tą etykietą. Aby to zrobić, wartość atrybutu „for” w znaczniku etykiety i wartość atrybutu „id” z „"Powinien być taki sam.

Krok 4: Wykonaj pole wejściowe
Aby dodać pole wejściowe w formularzu, użyj „" element. Ten element reprezentuje polecenie danych, zwykle z kontrolą formularza, aby umożliwić użytkownikowi edytowanie danych. Wewnątrz znacznika wejściowego Dodaj następujące atrybuty wymienione poniżej:

• „„typ”Atrybut służy do kontrolowania typu danych (i powiązanej kontroli) elementu. Istnieje wiele możliwych wartości dla tego atrybutu, w tym „tekst”,„numer”,„data”,„hasło", i wiele więcej.
• "ID”Atrybut/właściwość opisuje unikalny identyfikator elementu HTML.

Krok 5: Zrób przycisk
Aby dodać przycisk w formularzu, użyj HTML „„Element i osadzony tekst, aby wyświetlić przycisk:

Wypełnij ten formularz

Imię



Nazwisko



Twój DOB



Kategoria robocza



Twój kraj



Składać

Można zauważyć, że formularz został pomyślnie utworzony w HTML:

Przejdź do następnej sekcji, jeśli chcesz stylizować formularz.

Jak stylizować formularz za pomocą właściwości CSS?

Aby stylizować formę, dostępne są różne właściwości CSS. Aby to zrobić, uzyskaj dostęp do formy i ukształtować ją zgodnie z potrzebami.

Krok 1: Styl formularza
Uzyskaj dostęp do formularza w CSS i zastosuj następujące właściwości:

formularz
Border: 3Px kropkowana zielona;
Margines: 30px 80px;
Wyściółka: 20px;
Text-Align: Center;
kolor tła: RGB (194, 241, 194);

Tutaj:

• "granica„Właściwość CSS przydziela granicę wokół zdefiniowanego elementu.
• "margines”Definiuje przestrzeń poza granicą.
• "wyściółka”Określa pustą przestrzeń wokół elementu wewnątrz zdefiniowanej granicy.
• "tekst-align„Właściwość służy do ustawiania wyrównania tekstu jako„Centrum".
• "kolor tła”Określa kolor tylnej części granicy.

Wyjście

Krok 2: Zastosuj styl na „Etykieta”
Teraz uzyskaj dostęp do „etykieta”I zastosuj wspomniane właściwości CSS:

etykieta
kolor niebieski;
Styl czcionki: Kursywa;

Według powyższego kodowego fragmentu:

• "kolor„Właściwość ustawia kolor tekstu. W tym celu wartość określonej właściwości jest ustalana jako „niebieski".
• "styl czcionki”Właściwość określa określoną czcionkę dla danych etykiet.

Wyjście

Krok 3: Element stylu „wejściowy”
Teraz uzyskaj dostęp do „wejście„Element z„:unosić się„Pseudo selektor:

Wejście: Hover
kolor tła: RGB (247, 202, 143);
Zielony kolor;

Następnie zastosuj „Zastosuj„kolor tła”Aby ustawić kolor na tylnym boisku pola wejściowego i„kolor„Właściwość do zdefiniowania koloru tekstu w polu.

Wyjście

Chodzi o tworzenie i stylizację formularza w HTML/CSS.

Wniosek

Aby stworzyć i stylizować formularz, najpierw skorzystaj z „”Element w celu utworzenia formularza w HTML. Następnie użyj „" I "”Elementy do wstawienia etykiet i pola wejściowego do formularza. Następnie uzyskaj dostęp do formularza i zastosuj stylizację za pomocą właściwości CSS, w tym „kolor tła”,„margines”,„ Granica ”i wiele innych, zgodnie z twoim wyborem. W tym poście wyjaśniono metodę tworzenia i stylizacji formularza w HTML i CSS.