Ausführliche Erläuterung des -Tags von HTML und seiner Deaktivierungsmethode_HTML/Xhtml_Web-Seitenproduktion

Definition und Verwendung
-Tag wird zum Sammeln von Benutzerinformationen verwendet.
Je nach unterschiedlichen Typattributwerten haben Eingabefelder viele Formen. Eingabefelder können Textfelder, Kontrollkästchen, maskierte Textsteuerelemente, Optionsfelder, Schaltflächen usw. sein.
Unterschiede zwischen HTML und XHTML
In HTML hat das -Tag kein schließendes Tag.
In XHTML muss das -Tag ordnungsgemäß geschlossen werden.
Beispiel
Ein einfaches HTML-Formular mit zwei Texteingabefeldern und einer Schaltfläche zum Senden:

XML/HTML-CodeInhalt in die Zwischenablage kopieren

1. <form action="form_action.asp" Methode="get">
2. Vorname: <Eingabe Typ= "text" name="fname" />
3. Nachname: <Eingabe Typ= "text" name="lname" />
4. <Eingabe Typ="submit" Wert="Senden" />
5. Formular>

Das Attribut „disabled“ gibt an, dass das Eingabeelement deaktiviert werden soll.
Ein deaktiviertes Eingabeelement ist weder verfügbar noch anklickbar. Das Attribut „disabled“ kann so lange festgelegt werden, bis eine andere Bedingung erfüllt ist (z. B. wenn ein Kontrollkästchen aktiviert ist usw.). Anschließend müssen Sie JavaScript verwenden, um den deaktivierten Wert zu entfernen und den Wert des Eingabeelements auf „verfügbar“ umzustellen.

Die folgenden drei Schreibmethoden können die Eingabe deaktivieren

XML/HTML-CodeInhalt in die Zwischenablage kopieren

1. <Eingabe Typ="Text" deaktiviert="deaktiviert" Wert=„Deaktiviert“ />
2. <Eingabe Typ="Text" deaktiviert="deaktiviert" Wert=„Deaktiviert“ />
3. <Eingabe Typ="Text" deaktiviert="deaktiviert" Wert=„Deaktiviert“ />

Deaktivierte Eingaben sind standardmäßig grau und können über CSS gestaltet werden. Hinweis: IE9 und niedriger können die Schriftfarbe nicht ändern
1. Verwenden Sie CSS3: deaktivierte Pseudoelementdefinition

CSS-CodeInhalt in die Zwischenablage kopieren

1. //Chrome Firefox Opera Safari
2. Eingabe:deaktiviert{
3.  Rahmen: 1px durchgehend #DDD;
4. Hintergrundfarbe: #F5F5F5;
 
5. Farbe:#ACA899; 
}

2. Verwenden Sie Attributselektoren, um

zu definieren

CSS-Code

Inhalt in die Zwischenablage kopieren

1. //IE6 fehlgeschlagen
Eingabe[deaktiviert]{
 
3. Rahmen: 1px durchgehend #DDD;
4. Hintergrundfarbe: #F5F5F5;  
Farbe
5. :#ACA899;  }
3. Verwenden Sie die Klasse, um eine Klasse für die zu deaktivierende Eingabe zu definieren und hinzuzufügen

CSS-Code

Inhalt in die Zwischenablage kopieren

1. input.disabled{
2.  Rahmen: 1px durchgehend #DDD;
3. Hintergrundfarbe: #F5F5F5;
 
4. Farbe:#ACA899; 
}

Endergebnis:

CSS-Code

Inhalt in die Zwischenablage kopieren

1. //Chrome Firefox Opera Safari IE9
Eingabe:deaktiviert{
 
3. Rahmen: 1px durchgehend #DDD;
4. Hintergrundfarbe: #F5F5F5;  
Farbe
5. :#ACA899;  }
6. //IE8-
7. Eingabe[deaktiviert]{
8.  
Rahmen
9. : 1px durchgehend #DDD;
Hintergrundfarbe
10. : #F5F5F5;  Farbe
:
11. #ACA899;  }
//IE6 Verwenden von Javascript zum Hinzufügen der CSS-Klasse
12. "deaktiviert"
13. * html input.disabled{
 
14. Rahmen
:
15. 1px durchgehend #DDD; Hintergrundfarbe
:
16. #F5F5F5;  Farbe:
#ACA899
17. ;  }
Hinweis: IE8-Fehler
18. Da IE8 :disabled nicht erkennt, werden die Stile input[disabled] und input:disabled ungültig. Sie können erwägen, sie separat zu schreiben oder input[disabled] direkt zu verwenden. ;Die Schriftfarbe kann in IE9 und niedriger nicht geändert werden.
Demo