Detaillierte Erklärung des HTML-Tags <input> und wie man es deaktiviert

Detaillierte Erklärung des HTML-Tags <input> und wie man es deaktiviert

Definition und Verwendung
Das <input>-Tag wird zum Sammeln von Benutzerinformationen verwendet.
Abhängig vom Wert des Typattributs kann das Eingabefeld viele Formen haben. Eingabefelder können Textfelder, Kontrollkästchen, maskierte Textsteuerelemente, Optionsfelder, Schaltflächen usw. sein.
Unterschiede zwischen HTML und XHTML
In HTML hat das <input>-Tag kein schließendes Tag.
In XHTML müssen <input>-Tags ordnungsgemäß geschlossen werden.
Beispiele
Ein einfaches HTML-Formular mit zwei Texteingabefeldern und einer Senden-Schaltfläche:

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. < Formular   Aktion = "form_action.asp"   Methode = "get" >   
  2. Vorname: < Eingabe   Typ = "Text"   Name = "FName"   />   
  3. Nachname: < Eingabe   Typ = "Text"   Name = "lname"   />   
  4.    < Eingabe   Typ = "Senden"   Wert = "Senden"   />   
  5. </ form >   

Das deaktivierte Attribut gibt an, dass das Eingabeelement deaktiviert werden soll.
Ein deaktiviertes Eingabeelement ist weder nutzbar noch anklickbar. Die deaktivierte Eigenschaft kann festgelegt werden, bis eine andere Bedingung erfüllt ist (z. B. die Auswahl eines Kontrollkästchens usw.). Anschließend müssen Sie JavaScript verwenden, um den deaktivierten Wert zu entfernen und den Wert des Eingabeelements auf „Aktiviert“ zu setzen.
201585180424922.jpg (205×270)

Die folgenden drei Möglichkeiten 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 ausgegraut und können mit CSS formatiert werden. Hinweis: IE9 und darunter können die Schriftfarbe nicht ändern
1. Verwenden Sie die CSS3-Pseudoelementdefinition :disabled

CSS- CodeInhalt in die Zwischenablage kopieren
  1. //Chrome Firefox Opera Safari
  2. Eingabe:deaktiviert{
  3.      Rand : 1px   solide   #DDD ;
  4.      Hintergrundfarbe : #F5F5F5 ;
  5.      Farbe : #ACA899 ;
  6. }

2. Definieren Sie mit Attributselektoren

CSS- CodeInhalt in die Zwischenablage kopieren
  1. //IE6 ist fehlgeschlagen
  2. Eingabe[deaktiviert]{
  3.      Rand : 1px   solide   #DDD ;
  4.      Hintergrundfarbe : #F5F5F5 ;
  5.      Farbe : #ACA899 ;
  6. }

3. Verwenden Sie die Klasse, um den zu deaktivierenden Eingang zu definieren und eine Klasse hinzuzufügen

CSS- CodeInhalt in die Zwischenablage kopieren
  1. Eingabe.deaktiviert{
  2.      Rand : 1px   solide   #DDD ;
  3.      Hintergrundfarbe : #F5F5F5 ;
  4.      Farbe : #ACA899 ;
  5. }

Endergebnis:

CSS- CodeInhalt in die Zwischenablage kopieren
  1. //Chrome Firefox Opera Safari IE9+
  2. Eingabe:deaktiviert{
  3.      Rand : 1px   solide   #DDD ;
  4.      Hintergrundfarbe : #F5F5F5 ;
  5.      Farbe : #ACA899 ;
  6. }
  7. //IE8-
  8. Eingabe[deaktiviert]{
  9.      Rand : 1px   solide   #DDD ;
  10.      Hintergrundfarbe : #F5F5F5 ;
  11.      Farbe : #ACA899 ;
  12. }
  13. //IE6 Verwenden von Javascript zum Hinzufügen der CSS-Klasse „deaktiviert“   
  14. * html input.disabled{
  15.      Rand : 1px   solide   #DDD ;
  16.      Hintergrundfarbe : #F5F5F5 ;
  17.      Farbe : #ACA899 ;
  18. }

Hinweis: IE8-Fehler
Da IE8 :disabled nicht erkennt, sind die Stile input[disabled] und input:disabled ungültig. Sie können sie separat schreiben oder input[disabled] direkt verwenden. ; IE9 und darunter können die Schriftfarbe nicht ändern.

Demo

<<:  So verwenden Sie MySQL Binlog zum Wiederherstellen versehentlich gelöschter Datenbanken

>>:  Tutorial zum schnellen Bereitstellen von Clickhouse mit Docker-Compose

Artikel empfehlen

Die Magie des tbody-Tags beschleunigt die Anzeige von Tabelleninhalten

Sie haben sicher schon einmal die Webseiten andere...

Beispiel für die Bereitstellung von MySQL auf Docker

Inhaltsverzeichnis 1 Was ist eine Container-Cloud...

Lösen Sie das Problem verstümmelter chinesischer Schriftzeichen in Mysql5.7

Wenn Sie MySQL 5.7 verwenden, werden Sie feststel...

So implementieren Sie ein Dropdown-Menü für die HTML-Eingabe

Code kopieren Der Code lautet wie folgt: <html...

JS removeAttribute()-Methode zum Löschen eines Attributs eines Elements

Verwenden Sie in JavaScript die Methode removeAtt...

So optimieren Sie die MySQL-Leistung durch langsame MySQL-Abfragen

Mit zunehmender Anzahl von Besuchen steigt der Dr...

Beispielcode zum Erzielen eines Aushöhlungseffekts mit reinem CSS

Ich habe kürzlich den Aushöhlungseffekt untersuch...

Detaillierte Erläuterung der 6 Möglichkeiten der JS-Vererbung

Vererbung von Prototypketten Die Prototypenvererb...

Detaillierte Erklärung zur Verwendung des Alias-Befehls unter Linux

1. Verwendung von Pseudonymen Mit dem Alias-Befeh...

Installieren Sie MySQL 5.6 aus der Yum-Quelle im Centos7.4-System

Systemumgebung: centos7.4 1. Prüfen Sie, ob die D...

MySQL 8.0.12 Installations- und Nutzungs-Tutorial

Das Installations- und Verwendungstutorial für My...