Wcześniej tabele były wykorzystywane do tworzenia układu witryny. W dzisiejszych czasach HTML ,

,
1. , lub kilka innych elementów jest w większości używanych do tworzenia formularza. Elementy te pomagają stworzyć atrakcyjny formularz bez użycia tabel. Ponadto CSS stał się bardziej zaawansowany i zapewnia wiele nieruchomości dla elementów HTML. Korzystając z tych właściwości, stylizacja formularza może być atrakcyjna i zorganizowana.

   Ten post zapewni krokowy przewodnik na temat tworzenia formularza HTML bez tabel za pomocą CSS.

   Jak utworzyć formularz bez tabel za pomocą CSS?

   Do utworzenia formularza można wykorzystać kilka właściwości CSS i elementów HTML. Zbadaj poniższy przykład, który pokazuje krok do tworzenia formularza bez tabel.

   Krok 1: Dodaj element „Form”

   W HTML dodaj „”Oznacz i przypisz to klasę„formularz". Następnie dodaj „

   „Element pomiędzy elementem„ ”, który zawiera nagłówek do dokumentu. Następnie dodaj HTML „„Element do utworzenia formularza:

   
   

   Formularz rejestracyjny studentów

   
   

   
   

   
   Krok 2: Dodaj element „Fieldset”

   Następnie pomiędzy otworem a zamknięciem „„Tagi, umieść„„Element z„ID" atrybut "dane osobiste". W nim dodaj „" element:

   
   

   Informacje osobiste

   
   

   
   Tutaj:

   • • „„”Element jest wykorzystywany do grupowania elementów formularza. Rysuje linię wokół elementów grupowych.
     • „„„Element jest wykorzystywany do zastosowania podpisu do elementu„ ”.

   Wyjście

   
   Krok 3: Dodaj elementy formularza

   Dodamy elementy formularza do „„Element za pomocą wymienionych tagów:

   • • Najpierw dodaj HTML „
       „Tag, który oznaczy numery sekwencji przed elementami listy.
       1. Wewnątrz uporządkowanej listy dodaj zawartość formularza jako listę.
       2. Każdy z "
       3. „Elementy zawierają„" I "" elementy. Zauważ, że element „” „”Do”I elementu„ ”ID„Atrybuty muszą mieć tę samą wartość:

   
   
   1. 
      Imię:
      
      
   
   
   2. 
      Nazwisko:
      
      
   
   
   3. 
      Adres:
      
      
   
   
   4. 
      Kod pocztowy:
      
      
   
   
   5. 
      Telefon:
      
      
   
   
   6. 
      Adres e -mail:
      
      
   
   
   7. 
      Płeć:
      
      Mężczyzna
      
      Kobieta
      
      

   
   



2. 
   Urodziny:
   
   

Wyjście wyżej wymienionego kodu jest pokazane tutaj:

Krok 4: Dodaj „przycisk” do formularza

Dodajmy dwa przyciski do „„Element dla„Resetowanie" I "przedłożona praca„Operacje. Aby to zrobić, dodaj „„Element z identyfikatorem”guziki". Wewnątrz tego znacznika dodaj dwa elementy wejściowe z typem „Resetowanie" I "składać”:

Atrybuty powiązane z elementami wejściowymi wyjaśniono poniżej:

• • "typ”Określa typ wejściowy, taki jak tekst, pole wyboru, radio, reset lub więcej.
  • "nazwa”Definiuje nazwę elementów wykorzystywanych w JavaScript do dalszej manipulacji.
  • "ID”Wyznacza specjalny identyfikator elementu.
  • "wartość”Atrybut określa wartość dla elementu. Jest wykorzystywany inaczej dla różnych elementów wejściowych. Gdy typ wejściowy jest „Resetowanie”,„przycisk", I "składać”, Wartość jest wyświetlana na przycisku.

Wyjście pokazuje, że przyciski zostały pomyślnie utworzone:

Przejdź w kierunku sekcji CSS, gdzie elementy HTML są stosowane z różnymi właściwościami stylizacji.

Krok 5: Stylowe elementy „wszystkie”

*
Font-Family: Georgia, „Times New Roman”, Times, Serif;

Gwiazdka „*„Symbol służy do wskazywania wszystkich elementów HTML. „„rodzina czcionek”Właściwość z listą wartości jest stosowana. Ta lista jest określona w celu zapewnienia, że ​​druga czcionka zostanie zastosowana automatycznie, jeśli przeglądarka nie obsługuje pierwszej czcionki.

Krok 6: Styl „Form-Main” Div

Następnie dostęp do „div„Pojemnik z klasą”formularz”I zastosuj„kolor tła„Właściwość, aby ustawić kolor tła:

.formularz
kolor tła: #D6E4E5;

Krok 7: Element stylu „Li”

.forma-main li
Margines: 5px;
Rozmiar czcionki: 18px;

„„