Denne artikkelen vil dekke følgende emner:
- Hvordan deaktivere tekstinntastingsfelt?
- Hvordan deaktiverer du valgboksen?
- Hvordan deaktivere inndataelement for avkrysningsboks?
- Hvordan deaktiverer man knappinndataelement?
Forutsetning: Lag et skjema
Lag først et skjema ved å bruke HTML '
< form >< / form >
Deretter legger du til en '
< feltsett klasse = 'col-md-12' >
< legende >Studenterregistreringsskjema< / legende >
< / feltsett >
Produksjon
Hvordan deaktivere tekstinntastingsfelt?
For det pågående eksempelet, følg de gitte instruksjonene:
- Inne i '
'-element, etter legende-elementet, legg til en -tag og tilordne den en klasse ' form-gruppe '.- Deretter inkluderer '
' og ' ”-elementer for henholdsvis bildetekst- og inndatafelt. Tilordne inngangselementet en klasse ' form-kontroll '. - Etter det, tildel ' funksjonshemmet ”-attributt for å gjøre inndatafeltet deaktivert:
< div klasse = 'form-gruppe' >
< merkelapp >Skriv inn din Navn
< input type = 'tekst' klasse = 'skjemakontroll' deaktivert>
< / merkelapp >
< / div >Følgende er forklaringen av klassene nevnt ovenfor:
- ' form-gruppe ” er en fleksibel klasse som gir den enkleste måten å inkludere struktur i skjemaer.
- ' form-kontroll ” legger automatisk stil til skjemaelementene.
Produksjon
Legg til et annet inndatafelt uten ' funksjonshemmet ' Egenskap:
< div klasse = 'form-gruppe' >
< merkelapp >Gå inn din far Navn
< input type = 'tekst' klasse = 'skjemakontroll' >
< / merkelapp >
< / div >Det kan observeres at det første inndatafeltet er deaktivert og det andre er aktivert:
Hvordan deaktiverer du valg av boks?
For å lage en valgboks i skjemaet, bruk HTML '
' element. « '-elementer legges deretter til for å velge bokselementer. I dette eksemplet, legg merke til at det andre alternativet er satt som deaktivert ved å bruke ' funksjonshemmet ' Egenskap:
< div klasse = 'skjema-gruppe' >
< merkelapp > Funksjonshemmet Velg Boks
< å velge klasse = 'skjemakontroll' >
< alternativ >velg < / alternativ >
< alternativ deaktivert> Funksjonshemmet velg< / alternativ >
< alternativ >Meny< / alternativ >
< / å velge >
< / merkelapp >
< / div >Produksjon
Hvordan deaktivere inndataelement for avkrysningsboks?
La oss lage en annen skjemakontrollboks. For å gjøre avmerkingsboksen deaktivert, ' funksjonshemmet '-attributtet er spesifisert som følger:
< div klasse = 'skjemasjekk' >
< merkelapp klasse = 'skjema-sjekk-etikett' >
< input klasse = 'skjema-sjekk-inndata' type = 'avmerkingsboks' deaktivert>
Du kan ikke sjekk dette
Produksjon
Hvordan deaktiverer man knappinndataelement?
Du kan også legge til et HTML-knappelement for skjemainnsendingen. La oss nå deaktivere denne knappen ved å bruke ' funksjonshemmet ' klasse:
< knapp type = 'sende inn' klasse = 'btn btn-primær btn-lg deaktivert' >Send inn< / knapp >Produksjon
Det handlet om å gjøre inndatafeltene deaktivert i Bootstrap.
Konklusjon
I Bootstrap kan skjemakontrollene gjøres deaktivert ved å bruke ' funksjonshemmet ” attributt eller klasse. Attributtet plasseres inne i startkoden til elementet. På den annen side, ' funksjonshemmet '-klassen er plassert innenfor ' klasse ' Egenskap. Denne artikkelen har gitt eksempler for å illustrere hvordan du deaktiverer skjemakontrollene i Bootstrap.
- Deretter inkluderer '