Dit artikel behandelt de volgende onderwerpen:
- Hoe tekstinvoerveld uitschakelen?
- Hoe de optie Select Box uitschakelen?
- Hoe checkbox-invoerelement uitschakelen?
- Hoe knopinvoerelement uitschakelen?
Voorwaarde: maak een formulier aan
Maak eerst een formulier door gebruik te maken van de HTML '
< formulier >< / formulier >
Voeg dan een '
< veldset klas = 'col-md-12' >
< legende >Studenten Inschrijfformulier< / legende >
< / veldset >
Uitgang
Hoe tekstinvoerveld uitschakelen?
Volg voor het lopende voorbeeld de gegeven instructies:
- Binnen in de '
”-element, voeg na het legenda-element een -tag toe en wijs er een klasse aan toe “ formulier-groep ”.- Voeg dan '
' en ' ”-elementen voor respectievelijk de bijschrift- en invoervelden. Wijs het invoerelement een klasse toe ' vorm-controle ”. - Wijs daarna de ' gehandicapt ” attribuut om het invoerveld uitgeschakeld te maken:
< div klas = 'form-groep' >
< label >Voer uw Naam
< invoer type = 'tekst' klas = 'vormcontrole' uitgeschakeld>
< / label >
< / div >Hieronder volgt de uitleg van de bovengenoemde klassen:
- “ formulier-groep ” is een flexibele klasse die de eenvoudigste manier biedt om structuur in formulieren op te nemen.
- “ vorm-controle ” voegt automatisch styling toe aan de formulierelementen.
Uitgang
Voeg nog een invoerveld toe zonder de ' gehandicapt ” attribuut:
< div klas = 'form-groep' >
< label >Voer je vader in Naam
< invoer type = 'tekst' klas = 'vormcontrole' >
< / label >
< / div >Het kan worden waargenomen dat het eerste invoerveld is uitgeschakeld en het tweede is ingeschakeld:
Hoe de optie Select Box uitschakelen?
Gebruik de HTML-code om een selectievak in het formulier te maken
”-element. De ' ”-elementen worden vervolgens toegevoegd om boxitems te selecteren. Merk in dit voorbeeld op dat de tweede optie is ingesteld als uitgeschakeld met behulp van de ' gehandicapt ” attribuut:
< div klas = 'vorm-groep' >
< label > Gehandicapt Selecteer Vak
< selecteren klas = 'vormcontrole' >
< optie >selecteer < / optie >
< optie uitgeschakeld> Gehandicapt selecteer < / optie >
< optie >Menu< / optie >
< / selecteren >
< / label >
< / div >Uitgang
Hoe checkbox-invoerelement uitschakelen?
Laten we nog een selectievakje voor formulierbeheer maken. Om het selectievakje uit te schakelen, de ' gehandicapt ” attribuut wordt als volgt gespecificeerd:
< div klas = 'formulier-check' >
< label klas = 'formulier-check-label' >
< invoer klas = 'formulier-controle-invoer' type = 'vinkje' uitgeschakeld>
Jij kan controleer dit niet
Uitgang
Hoe knopinvoerelement uitschakelen?
U kunt ook een HTML-knopelement toevoegen voor het indienen van het formulier. Laten we nu deze knop uitschakelen door de ' gehandicapt ' klas:
< knop type = 'indienen' klas = ' btn btn-primair btn-lg uitgeschakeld' >Verzenden< / knop >Uitgang
Dat ging allemaal over het uitschakelen van de invoervelden in Bootstrap.
Gevolgtrekking
In Bootstrap kunnen de formulierbesturingselementen worden uitgeschakeld met behulp van de ' gehandicapt ” attribuut of klasse. Het attribuut wordt binnen de starttag van het element geplaatst. Aan de andere kant, de “ gehandicapt ” klasse is geplaatst binnen de “ klas ” attribuut. Dit artikel bevat voorbeelden om te illustreren hoe u de formulierbesturingselementen in Bootstrap kunt uitschakelen.
- Voeg dan '