Bootstrap deaktivierte Texteingabefelder

Bootstrap Deaktivierte Texteingabefelder



In Bootstrap werden verschiedene Klassen verwendet, um ein Formular effizient zu erstellen. Diese Klassen stellen den Elementen zahlreiche Styling-Eigenschaften bereit, darunter „ Formularkontrolle “, „ Gruppe formen “, „ Formular-Scheck-Etikett ', und viele mehr. Genauer gesagt sind die Formulareingabefelder Texteingabefelder, die verwendet werden, um Informationen von Benutzern zu sammeln. Wir können das Eingabefeld jedoch deaktivieren, indem wir das „ Behinderte ” Klasse oder Attribut.

Dieser Artikel behandelt die folgenden Themen:

Voraussetzung: Erstellen Sie ein Formular

Erstellen Sie zunächst ein Formular, indem Sie den HTML-Code „ ' Element:







< bilden >< / bilden >

Fügen Sie dann ein „ „Element und ihm eine Klasse zuweisen“ Spalte-12 “. Geben Sie im Element die Formularbeschriftung an:



< Feldsatz Klasse = 'col-md-12' >

< Legende >Anmeldeformular für Studierende< / Legende >

< / Feldsatz >

Ausgabe







Wie deaktiviere ich das Texteingabefeld?

Befolgen Sie für das laufende Beispiel die angegebenen Anweisungen:

  • Im „ ”-Element, fügen Sie nach dem Legend-Element ein
    -Tag hinzu und weisen Sie ihm eine Klasse zu “ Gruppe formen “.
  • Fügen Sie dann „ ' und ' ”-Elemente für die Beschriftungs- bzw. Eingabefelder. Weisen Sie dem Eingabeelement eine Klasse zu „ Formularkontrolle “.
  • Weisen Sie danach die „ Behinderte ”-Attribut, um das Eingabefeld zu deaktivieren:
< div Klasse = 'Gruppe formen' >

< Etikett >Geben Sie Ihre ein Name

< Eingang Art = 'Text' Klasse = 'Formularkontrolle' deaktiviert>

< / Etikett >

< / div >

Es folgt die Erklärung der oben genannten Klassen:



  • Gruppe formen “ ist eine flexible Klasse, die die einfachste Möglichkeit bietet, Strukturen in Formulare einzufügen.
  • Formularkontrolle “ fügt den Formularelementen automatisch Stile hinzu.

Ausgabe

Fügen Sie ein weiteres Eingabefeld ohne das „ Behinderte ” Attribut:

< div Klasse = 'Gruppe formen' >

< Etikett > Geben Sie Ihren Vater ein Name

< Eingang Art = 'Text' Klasse = 'Formularkontrolle' >

< / Etikett >

< / div >

Es kann beobachtet werden, dass das erste Eingabefeld deaktiviert und das zweite aktiviert ist:

Wie deaktiviere ich die Select-Box-Option?

Um ein Auswahlfeld im Formular zu erstellen, verwenden Sie das HTML „ ' Element. Die ' ”-Elemente werden dann hinzugefügt, um Box-Elemente auszuwählen.

Beachten Sie in diesem Beispiel, dass die zweite Option mit dem „ Behinderte ” Attribut:

< div Klasse = 'Gruppe formen ' >

< Etikett > Behinderte Wählen Sie Kiste aus

< wählen Klasse = 'Formularkontrolle' >

< Möglichkeit >auswählen< / Möglichkeit >

< Möglichkeit deaktiviert> Behinderte auswählen< / Möglichkeit >

< Möglichkeit >Menü< / Möglichkeit >

< / wählen >

< / Etikett >

< / div >

Ausgabe

Wie deaktiviere ich das Kontrollkästchen-Eingabeelement?

Lassen Sie uns ein weiteres Kontrollkästchen für die Formularsteuerung erstellen. Um das Kontrollkästchen zu deaktivieren, muss das „ Behinderte ”-Attribut wird wie folgt angegeben:

< div Klasse = 'Formularcheck' >

< Etikett Klasse = 'form-check-label' >

< Eingang Klasse = 'Formular-Check-Eingabe' Art = 'Kontrollkästchen' deaktiviert>

Du kannst check das nicht



Ausgabe

Wie deaktiviere ich das Tasteneingabeelement?

Sie können auch ein HTML-Schaltflächenelement für die Formularübermittlung hinzufügen. Lassen Sie uns nun diese Schaltfläche deaktivieren, indem Sie die Schaltfläche „ Behinderte ' Klasse:

< Knopf Art = 'einreichen' Klasse = 'btn btn-primary btn-lg deaktiviert' >Senden< / Knopf >

Ausgabe

Es ging darum, die Eingabefelder in Bootstrap zu deaktivieren.

Fazit

In Bootstrap können die Formularsteuerelemente mit dem „ Behinderte ” Attribut oder Klasse. Das Attribut wird innerhalb des Start-Tags des Elements platziert. Andererseits ist die „ Behinderte ” Klasse wird innerhalb der “ Klasse ” Attribut. Dieser Artikel hat Beispiele bereitgestellt, um zu veranschaulichen, wie die Formularsteuerelemente in Bootstrap deaktiviert werden.