Bootstrap 5 Forms Classes | Forklart
I denne artikkelen får du en detaljkunnskap om
- Hvordan lage en grunnleggende form
- Typer bootstrap -skjemaer
- Komponenter av bootstrap -skjemaer
Hvordan lage et skjema
For å lage en skjemabruk Tag, innenfor denne skjema -taggen bruker Tag med klassen .Form-Label For tittelen på et tekstfelt, bruk deretter Tag for å lage forskjellige formfelt som krav. Skjemafelt er spesifisert av type = “*” attributt med klassen .formkontroll For å bruke standardskjemainnstillingen fra Bootstrap.
- Tekst
- Passord
- Dato
- Dato tid
- Fil
- E -post
- Antall
- Radio
- Avkrysningsrute
- Sende inn
- Nullstille
- Område
Bytt ut en av disse med * for å lage forskjellige felt.
Kode
Slik opprettes en enkel form.
Typer
Det er tre typer former i bootstrap.
- Vertikale former
- Horisontale former
- Inline skjemaer
Vertikale former
I denne typen former er etikett og tekstfelt stablet vertikalt.
Kode
Slik skapes vertikale former.
Horisontale former
I denne typen former er etikett og tekstfelt stablet horisontalt.
Kode
Slik skapes horisontale former.
Inline skjemaer
I denne typen former er hvert formfelt stablet horisontalt på rad. Disse formene er nyttige der plassen er begrenset eller hvor du vil gjøre ting kompakt.
Kode
Slik opprettes inline -skjemaer.
Komponenter
Følgende er komponentene som brukes i en form. Disse komponentene fungerer bare ordentlig inne i en stikkord.
Tekstfelt
Tekstfelt er der du skriver informasjon som navn, passord, e-post, nummer, adresse.
Kode
Tekstfelt opprettes ved å bruke Tag og angi sin type tilskrive "tekst" med klassen .formkontroll. Bruk .Form-Control-LG Klasse for tekstfelt i stor størrelse, .formkontroll klasse for standard tekstfelt og .Form-Control-SM for lite tekstfelt. En ting til jeg vil nevne her er at for å lage en kun lest tekstfeltbruk .Form-Control-PlainText klasse med nøkkelord readonly i en stikkord.
Radioknapper
Radioknapper er de avrundede knappene som brukes der du må velge mellom to eller tre alternativer.
Kode
Radioknapper opprettes ved å bruke Tag, og sett deretter sin type tilskrive "radio" med klassen .Form-sjekk-inngang og gi samme verdi av Navn Attributt til hver alternativknapp. Hvis du vil aktivere en hvilken som helst knapp som standard, bruk krysset av nøkkelord eller hvis du vil deaktivere hvilken som helst knapp, bruk funksjonshemmet nøkkelord i inngangskode.
Avkrysningsrute
KrysBokser er små bokser som brukes der du må velge mellom flere alternativer.
Kode
Krysebrett opprettes ved å bruke Tag, og sett deretter sin type tilskrive “Avkrysningsrute” med klassen .Form-sjekk-inngang. Hvis du vil aktivere en hvilken som helst knapp som standard, bruk krysset av nøkkelord eller hvis du vil deaktivere hvilken som helst knapp, bruk funksjonshemmet nøkkelord i inngangskode.
Tekstarea
TextArea er der du skriver beskrivende informasjon som melding, tilbakemelding.
Kode
Textarea er opprettet ved å bruke Tag med klassen .formkontroll.
Valgmeny
Valgmenyer brukes der du vil at brukeren din skal velge et alternativ fra en rullegardinmeny.
Valgmeny opprettes ved å bruke Tag med klassen .formkontroll og pakke den rundt Tagger. Bruk .Form-Control-LG Klasse for valg av stor størrelse, .formkontroll klasse for valg av standard størrelse og valg av størrelse og .Form-Control-SM For menyen for valg av liten størrelse.
Flytende-labler
Flytende etiketter er kombinasjonen av plassholdere og etiketter
Kode
Flytende etiketter opprettes ved innpakning og Merk i en div med klassen .form-flytende Og det viktige er at flytende etiketter skal fungere ordentlig, plassholder og etikett er obligatorisk.
Konklusjon
For å lage en skjemabruk -tagg, innvendig skjema -tag for å lage en tekstfeltbruk, for å lage en avkrysningsrutebruk, for å lage radioknapper, for å lage tekstareAs -bruksmerke og for å lage valg av meny Bruk og pakk den rundt taggen. I artikkelen ovenfor er alle viktige ting om bootstrap -form dekket.