I tidligere tider ble tabellene brukt til å lage nettstedets oppsett. I dag, html ,

,
1. , eller flere andre elementer brukes stort sett til å lage et skjema. Disse elementene er med på å lage en tiltalende form uten å bruke tabeller. Dessuten har CSS blitt mer avansert og gir mange egenskaper for HTML -elementer. Ved hjelp av disse egenskapene kan stylingen av skjemaet gjøres attraktiv og organisert.

   Dette innlegget vil gi en trinnvis guide for hvordan du lager en HTML -skjema uten tabeller ved hjelp av CSS.

   Hvordan lage et skjema uten tabeller ved hjelp av CSS?

   Flere CSS -egenskaper og HTML -elementer kan brukes til å lage et skjema. Undersøk eksemplet nedenfor, som demonstrerer en trinnvis guide for å lage et skjema uten tabeller.

   Trinn 1: Legg til "form" -element

   I HTML, legg til en "”Tag og tilordne den en klasse”form-main”. Deretter legger du til “

   ”Element mellom“ "elementet for å inkludere en overskrift til dokumentet. Deretter legger du til en HTML “”Element for å lage et skjema:

   
   

   Studenters registreringsskjema

   
   

   
   

   
   Trinn 2: Legg til "Fieldset" -element

   Etter det, i mellom åpningen og lukkingen “”Tagger, plasser“”Element med et“id" Egenskap "personlig informasjon”. I den, legg til "”Element:

   
   

   Personlig informasjon

   
   

   
   Her:

   • • “”Element brukes til å gruppere formelementene. Det trekker en linje rundt gruppelementene.
     • “”Element brukes til å bruke en bildetekst på“ ”elementet.

   Produksjon

   
   Trinn 3: Legg til skjemaelementer

   Vi vil legge til skjemaer i "”Element ved hjelp av de listede kodene:

   • • Først, legg til en HTML “
       ”Tag som markerer sekvensnumrene før listeelementene.
       1. Inne i den bestilte listen, legg til skjemainnholdet som en liste.
       2. Hver av "
       3. ”Elementer inneholder“”Og“”Elementer. Legg merke til at "" elementet er "til”Og“ ”elementet”id”Attributter må ha samme verdi:

   
   
   1. 
      Fornavn:
      
      
   
   
   2. 
      Etternavn:
      
      
   
   
   3. 
      Adresse:
      
      
   
   
   4. 
      Postnummer:
      
      
   
   
   5. 
      Telefon:
      
      
   
   
   6. 
      Epostadresse:
      
      
   
   
   7. 
      Kjønn:
      
      Mann
      
      Hunn
      
      

   
   



2. 
   Fødselsdag:
   
   

Utgangen fra den ovennevnte koden vises her:

Trinn 4: Legg til "knapp" for å danne

La oss legge til to knapper til “”Element for“nullstille”Og“innlevering”Operasjoner. For å gjøre det, legg til “”Element med en ID”knapper”. Inne i denne taggen, legg til to inngangselementer med typen "nullstille”Og“sende inn”:

Attributtene tilknyttet inngangselementene er forklart nedenfor:

• • “type”Spesifiserer inngangstypen, for eksempel tekst, avkrysningsrute, radio, tilbakestilling eller mer.
  • “Navn”Definerer et navn for elementene som brukes i JavaScript for videre manipulasjon.
  • “id”Betegner elementets spesial -ID.
  • “verdi”Attributt spesifiserer verdien for elementet. Det brukes annerledes for forskjellige inngangselementer. Når inngangstypen er “nullstille”,“knapp”, Og“sende inn”, Verdien vises på knappen.

Utgangen viser at knappene er opprettet med hell:

Gå mot CSS -delen, der HTML -elementene brukes med forskjellige stylingegenskaper.

Trinn 5: Stil “alle” elementer

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

Stjernen “*”Symbol brukes til å peke på alle HTML -elementer. “Font-familie”Eiendom med listen over verdier brukes. Denne listen er spesifisert for å sikre at den andre skriften blir brukt automatisk hvis nettleseren ikke støtter den første skrifttypen.

Trinn 6: Stil “Form-Main” Div

Deretter får du tilgang til “div”Container som har klasse”form-main”Og bruk“bakgrunnsfarge”Eiendom for å stille bakgrunnsfargen:

.form-main
Bakgrunnsfarge: #D6E4E5;

Trinn 7: Stil “Li” -element

.form-main li
Margin: 5px;
Font-størrelse: 18px;

“