CSS deaktiviert

CSS deaktiviert

Ein Kaskadenstilblatt ist ein wichtiger Teil beim Erstellen und Entwerfen einer Webseite. "Deaktiviert" ist ein Selektor in CSS und wird in den Tags verwendet, um die Elemente von HTML zu deaktivieren. Dieser Selektor wird auf die HTML -Formulare einschließlich der Textfelder, Schaltflächen, Kontrollkästchen usw. angewendet. In diesem Artikel werden wir sehen, wie die deaktivierte Funktion auf die verschiedenen Elemente in HTML angewendet wird.

Feld deaktiviertes Text

Ein Textfeld ist ein Abschnitt, in dem der Benutzer seine Eingabe eingibt, die auf der Website gespeichert werden soll. Dieses Textfeld wurde als aktiviertes Textfeld entwickelt, um den Wert vom Benutzer zu erhalten. In einigen Fällen müssen wir jedoch möglicherweise einige Textfelder deaktivieren. In diesem Beispiel werden wir sehen, wie das Textfeld über HTML und CSS deaktiviert werden kann.

Wir starten den Code mit dem Kopfabschnitt. Der Titel wird der Webseite gegeben, an der wir arbeiten. Danach verwenden wir das Style -Tag, um den Inhalten, die wir im HTML -Körper erstellen, alle Styling -Eigenschaften hinzuzufügen. Zusätzlich zum einfachen deaktivierten Textfeld verwenden wir einige zusätzliche Elemente, um die Arbeit und Funktionalität der deaktivierten und aktivierten Elemente problemlos auszuarbeiten.

Im Style -Tag haben wir zunächst das Feld aktiviertes Eingabetxt. Wir erstellen drei Textfelder in der HTML-Portion-zwei, die aktiviert sind, während der dritte deaktiviert ist. Der Eingangstyp für das Feld ist "Text". Es bedeutet, dass es nur einen Text akzeptiert. Wir verwenden also die CSS -Tags für die aktivierten Textfelder.

1
Input [type = text]: aktiviert

Dadurch werden nur die Textfelder gestaltet, die so eingestellt sind, dass sie aktiviert werden sollen. Wir wenden das hellgraue als Hintergrundfarbe auf beide Felder an. In ähnlicher Weise wird das CSS nach dem Feld aktiviertes Text für das Feld "Behindertes Text" deklariert. Um das Feld deaktivierter Text vom Aktivierten zu unterscheiden, ist die Hintergrundfarbe dunkelgrau und die Schriftfarbe ist auf weiß eingestellt.

Um einige Effekte auf alle fähigen oder deaktivierten Felder anzuwenden, verwenden wir nur das "Eingabe" -Word. Auf diese Weise werden die Stile auf alle drei Textfelder angewendet. Der erste Effekt ist der Randtop. Diese „Rand“ -Funktion ist der überschrittene Bereich der Form. Zum Beispiel hat das rechteckige Textfeld den Rand von 10 Pixel aus der oberen Richtung. Es bedeutet, dass das Feld in der oberen Richtung 10 Pixel nach oben beträgt.

1
2
3
Eingabe
Rand: 10px;

In ähnlicher Weise wird nach dem Rand der Rand der Form auch mit der Größe des Randes und der Farbe angewendet, die als braun eingestellt sind. Für die im Textfeld eingegebene Textgröße, um den Text leicht lesbar zu machen, setzen wir die Größe der Schriftart auf 16 Pixel.

1
2
3
4
5
Grenze: 1px fest braun;
Schriftgröße: 16px;

Eine weitere Funktion, die in CSS verwendet wird. Wir verwenden einfach das Tag für den Körper. Dies liegt daran, dass der Inhalt im Körperabschnitt der HTML -Tags erstellt wird. Da sich der gesamte Inhalt im Texttyp befindet, verwenden wir einfach die Textausrichtung in die Mitte.

1
2
3
4
5
Körper
Text-Align: Mitte;

Entlang des Textfelds gibt es eine Überschrift oder eine Etikett. Dieses Etikett wird auch über CSS gestaltet. Das Gewicht einer Schrift ist die Eigenschaft, die auf den Text angewendet wird, um sie entweder mutig, kursiv usw. zu machen. Hier haben wir das Gewicht als fett ausgewählt.

1
Schriftdicke: fett;

Wenn Sie nun in Richtung des Körperabschnitts von HTML gehen, wird die Überschrift mit der Verwendung des

Schild. Da die Textfelder und Schaltflächen Teil eines Formulars sind, wird das Tag hier angewendet. Wir deklarieren ein einzelnes Tag für das aktivierte Textfeld.

1
2
3


Das Etikett wird als „Alter“ angegeben. Das Textfeld wird über den Eingangstyp deklariert. Wert ist der Abschnitt, der den Namen oder den Platzhalter enthält, um ein Wort zu tragen, das im Textfeld angezeigt wird. Der
Tag ist für die Pause, die zur nächsten Zeile umschaltet. Jetzt wird das Feld deaktivierter Text mithilfe der Beschriftung "Adresse" deklariert. Nach der Bereitstellung des Eingabetext deklarieren wir "deaktiviert", um das Textfeld deaktiviert zu machen.

1

Danach ist die Form des Formulars geschlossen. Die HTML -Tags sind ebenfalls geschlossen.

Wenn wir die Datei im Browser ausführen, sehen Sie, dass die Ausgabe wie das angehängte Bild aussieht. Alle drei Etiketten zusammen mit den Textfeldern werden angezeigt. Zwei von ihnen sind aktiviert, während der dritte deaktiviert ist. Das gesamte CSS -Styling, das wir gemacht haben, werden auf den Inhalt angewendet. Das deaktivierte Feld ist dunkel, um zwischen aktiviert und deaktiviert zu unterscheiden.

Jetzt werden wir sehen, wie dieses Formular funktioniert. Wir können die Werte in die ersten beiden Felder eingeben, sobald sie aktiviert sind. Der Name und das Alter sind in den Feldern eingegeben.

Jetzt sehen wir das Feld "Behinderten Text". Sie werden sehen, dass es nicht wie in den vorherigen Feldern bearbeitet werden kann.

Textbereich deaktiviert

Wir werden einen Textbereich verwenden, um ihn wie im Feld deaktiviert zu machen. Alle Codes für Kopf und Körper des HTML werden auf die gleiche Weise angewendet. Ein neuer Feature -Knopf ist im Körper gestaltet. Dies beinhaltet die Farbe, Höhe und Breite des Knopfes.

Im Körperabschnitt der HTML wird ein Textbereich erstellt. Wir definieren die Zeilen und Spalten, um ein bestimmtes Rechteck für den Schreibzweck zu bilden. Das Wort "deaktiviert" wird dem Tag hinzugefügt, um die Arbeit des Textbereichs zu deaktivieren.

1

Darüber hinaus fügen wir der Webseite eine Schaltfläche hinzu. Es wird nicht deaktiviert. Danach wird ein Formular nach dem Tag geschlossen.

Wenn die Webseite auf dem Browser ausgeführt wird. Dies kann aufgrund der behinderten Arbeit nicht bearbeitet oder entfernt werden.

Abschluss

Deaktiviert ist eine Funktion, mit der einige Funktionen des HTML -Inhalts deaktiviert werden. Wenn Sie über sein Beispiel sprechen, wird es auf das Formular angewendet. Wir haben meistens gesehen, dass einige Felder beim Ausfüllen eines Formulars auf der Website nicht gemäß den Anforderungen unserer Berechtigung bearbeitet werden können. Dies geschieht, indem dieses Feld deaktiviert wird. Wir haben die beiden Elemente erklärt, die in den HTML- und CSS -Tags deaktiviert werden können, die die Textfelder und den Textbereich sind. Beide Elemente sind Teil des Formular -Tags. Andernfalls wird nur der Text auf der Webseite angezeigt.