Hvordan lage et skjema uten tabeller ved hjelp av CSS
I tidligere tider ble tabellene brukt til å lage nettstedets oppsett. I dag, html ,
- ,
- , 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" -elementEtter det, i mellom åpningen og lukkingen “”Tagger, plasser“”Element med et“id" Egenskap "personlig informasjon”. I den, legg til "”Element:
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 skjemaelementerVi vil legge til skjemaer i "”Element ved hjelp av de listede kodene:
-
- Først, legg til en HTML “
- Inne i den bestilte listen, legg til skjemainnholdet som en liste.
- Hver av "”Elementer inneholder“”Og“”Elementer. Legg merke til at "" elementet er "til”Og“ ”elementet”id”Attributter må ha samme verdi:
- Først, legg til en HTML “
-
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;
“”Element i“ ”-beholderen har en“form-main”Klasse er stylet med de listede egenskapene:
-
- “margin”Bruker plass rundt elementet.
- “skriftstørrelse”Bestemmer elementets skriftstørrelse.
Trinn 8: Stil “legende” -element
#personlig-info legende
Farge: #497174;
Font-størrelse: 20px;
Fontvekt: fet;
avstand mellom bokstavene: .1em;
“" av "”Element som har ID”personlig informasjon”Er stylet med de gitte egenskapene:
-
- “farge”Angir elementets fontfarge.
- “Fontvekt”Justerer skriftens tykkelse.
- “avstand mellom bokstavene”Brukes til å legge til plass mellom fontbokstavene.
Formelementene er ikke justert ennå, så la oss gå videre for å bruke CSS -egenskapene for å få det til å se mer tiltalende.
Trinn 9: Stil "etikett" -elementer av "Li" -elementer
#personlig-info li> etikett
Bredde: 170px;
Display: Inline-block;
“>”Symboliserer barneelementene. Barnet "”Elementer av HTML””Elementer er stylet med disse egenskapene:
-
- “bredde”Brukes for å justere elementets bredde.
- “vise”Foreslår elementets visningsatferd. Verdien "Inline-block”Gjør skjermen inline og lar oss stille inn elementets bredde og høyde.
Trinn 10: Stil “Input” tekstelement
#personlig-info input
Border-Radius: 5px;
Font-størrelse: 18px;
Oversikt: Ingen;
“”Element i“”Element med ID”personlig informasjon”Brukes med følgende CSS -egenskaper:
-
- “Border-Radius”Eiendom setter elementets hjørner runde.
- “skissere”Er eiendommen som produserer en oversikt rundt elementet når du klikker.
Trinn 11: Stil “Input” -knappelement
#Buttons input
Bakgrunnsfarge: #364B4D;
polstring: 10px;
Bredde: 150px;
Bokseskygge: 1px 1px 1px 1px grå;
Font-størrelse: 18px;
Border-Radius: 5px;
Farge: #FFF;
Grense: Ingen;
“”Elementer i“”Element som har ID”knapper”Brukes med følgende egenskaper:
-
- “polstring”Produserer plass rundt elementets innhold.
- “Bokseskygge”Setter en skygge rundt elementet. Det er en shorthand-egenskap som spesifiserer “X-offset”, “Y-offset”, “Blur Effect”, “Spread Effect” og “Color” for skyggen.
- “grense”Eiendom med verdien som“ingen”Vil fjerne elementets grense.
Her er det endelige resultatet:
På denne måten opprettes skjemaet uten tabeller ved bruk av CSS.
Konklusjon
I HTML, “”,“”,“
”,“”,“”, Og“”Elementer kan brukes til å lage et skjema uten å bruke tabellen. “” -Elementet brukes til å gruppere skjemaene. Skjemaet kan justeres så vel som stylet ved hjelp av forskjellige CSS -egenskaper. Spesielt har denne artikkelen vist hvordan du lager et skjema uten tabeller ved hjelp av CSS.