In früheren Zeiten wurden die Tabellen verwendet, um das Website -Layout zu machen. Heutzutage die HTML ,

,
1. , oder mehrere andere Elemente werden hauptsächlich verwendet, um ein Formular zu erstellen. Diese Elemente tragen dazu bei, ein ansprechendes Formular zu erstellen, ohne Tabellen zu verwenden. Darüber hinaus ist CSS fortgeschrittener geworden und bietet viele Eigenschaften für HTML -Elemente. Mit diesen Eigenschaften kann das Styling der Form attraktiv und organisiert werden.

   Dieser Beitrag bietet eine schrittweise Anleitung zum Erstellen eines HTML -Formulars ohne Tabellen mit CSS.

   So erstellen Sie ein Formular ohne Tabellen mit CSS?

   Mehrere CSS -Eigenschaften und HTML -Elemente können verwendet werden, um ein Formular zu erstellen. Untersuchen Sie das Beispiel unten, das eine schrittweise Anleitung zum Erstellen eines Formulars ohne Tabellen zeigt.

   Schritt 1: Fügen Sie das Formular "Form" hinzu

   In HTML fügen Sie eine "hinzu""Tag und zuordnen Sie es eine Klasse zu"Form-Main”. Dann fügen Sie das hinzu “

   Element zwischen dem "" Element, um eine Überschrift zum Dokument zu enthalten. Dann fügen Sie eine HTML hinzu "Element zum Erstellen einer Form:

   
   

   Registrierungsformular für Schüler

   
   

   
   

   
   Schritt 2: Hinzufügen von "Fieldset" Element

   Danach zwischen der Öffnung und Schließung “"Tags, platzieren Sie die"”Element mit einem“Ausweis”Attribut“persönliche Informationen”. Fügen Sie die "hinzu"" Element:

   
   

   Persönliche Angaben

   
   

   
   Hier:

   • • Der "Element wird verwendet, um die Formelemente zu gruppieren. Es zeichnet eine Linie um die Gruppenelemente.
     • Der "Element wird verwendet, um eine Bildunterschrift auf das Element "" anzuwenden.

   Ausgang

   
   Schritt 3: Formularelemente hinzufügen

   Wir werden Formelemente in die “hinzufügenElement mit den aufgeführten Tags:

   • • Fügen Sie zuerst eine HTML hinzu “
       Tag, das die Sequenznummern vor den Listenelementen markiert.
       1. Fügen Sie in der bestellten Liste den Formularinhalt als Liste hinzu.
       2. Jedes von den "
       3. "Elemente enthält das"" Und "Elemente. Beachten Sie, dass das "" Element des "für"Und das" "Element"AusweisAttribute müssen den gleichen Wert haben:

   
   
   1. 
      Vorname:
      
      
   
   
   2. 
      Familienname, Nachname:
      
      
   
   
   3. 
      Adresse:
      
      
   
   
   4. 
      Postleitzahl:
      
      
   
   
   5. 
      Telefon:
      
      
   
   
   6. 
      E-Mail-Addresse:
      
      
   
   
   7. 
      Geschlecht:
      
      Männlich
      
      Weiblich
      
      

   
   



2. 
   Geburtstag:
   
   

Die Ausgabe des oben bereitgestellten Codes wird hier angezeigt:

Schritt 4: Fügen Sie die Schaltfläche zum Formular hinzu

Fügen wir dem "zwei Tasten hinzu"”Element für die“zurücksetzen" Und "VorlageOperationen. Um dies zu tun, fügen Sie das hinzu “"Element mit einer ID"Tasten”. Fügen Sie in diesem Tag zwei Eingabelemente mit dem Typ hinzu “zurücksetzen" Und "einreichen”:

Die mit den Eingabeelementen zugeordneten Attributen werden nachstehend erläutert:

• • “Typ”Gibt den Eingabetyp an, z. B. Text, Kontrollkästchen, Radio, Zurücksetzen oder mehr.
  • “Name”Definiert einen Namen für die in JavaScript verwendeten Elemente zur weiteren Manipulation.
  • “Ausweis”Bezeichnet die Element Special ID.
  • “WertAttribut gibt den Wert für das Element an. Es wird für verschiedene Eingangselemente unterschiedlich verwendet. Wenn der Eingangstyp ist "zurücksetzen","Taste", Und "einreichen”, Der Wert wird auf der Schaltfläche angezeigt.

Die Ausgabe zeigt, dass die Schaltflächen erfolgreich erstellt wurden:

Bewegen Sie sich in Richtung des CSS.

Schritt 5: Stil „alle“ Elemente

*
Schriftfamilie: Georgia, "Times New Roman", Times, Serif;

Das Sternchen "*Symbol wird verwendet, um auf alle HTML -Elemente zu verweisen. Der "SchriftfamilieDie Eigenschaft mit der Liste der Werte wird angewendet. Diese Liste wird angegeben, um sicherzustellen, dass die andere Schriftart automatisch angewendet wird, wenn der Browser die erste Schrift nicht unterstützt.

Schritt 6: Stil „Form-Main“ Div

Als nächstes greifen Sie auf die “zu"div"Container mit Klasse"Form-Main”Und wenden Sie die“ anHintergrundfarbeEigenschaft, um die Hintergrundfarbe festzulegen:

.Form-Main
Hintergrundfarbe: #d6e4e5;

Schritt 7: Stil „Li“ Element

.Form-Main li
Rand: 5px;
Schriftgröße: 18px;

Der "