Eine kurze Erläuterung des Unterschieds zwischen schreibgeschützten und deaktivierten Eingabeattributen in HTML

Eine kurze Erläuterung des Unterschieds zwischen schreibgeschützten und deaktivierten Eingabeattributen in HTML

Sowohl die Optionen „Nur lesen“ als auch „Deaktiviert“ verhindern, dass Benutzer den Inhalt von Formularfeldern ändern. Es gibt jedoch subtile Unterschiede zwischen ihnen, die wie folgt zusammengefasst werden können:

Readonly ist nur für Eingaben (Text/Passwort) und Textbereiche gültig, während Disabled für alle Formularelemente gültig ist. Wenn jedoch ein Formularelement deaktiviert ist und wir das Formular per POST oder GET übermitteln, wird der Wert dieses Elements nicht weitergegeben, während Readonly den Wert weitergibt (Readonly akzeptiert Wertänderungen und kann zurückgesendet werden, während Disable Änderungen akzeptiert, aber keine Daten zurücksendet).

Die häufigsten Situationen sind:

1. In einem Formular ist ein eindeutiger Identifikationscode für den Benutzer voreingestellt, den der Benutzer nicht ändern darf. Der Wert muss jedoch beim Absenden übergeben werden. In diesem Fall sollte das Attribut auf schreibgeschützt gesetzt werden.

2. Es kommt häufig vor, dass der Benutzer nach dem formellen Absenden des Formulars warten muss, bis der Administrator die Informationen überprüft hat. Dadurch kann der Benutzer die Daten im Formular nicht ändern, sondern nur anzeigen. Da Deaktiviert eine Vielzahl von Elementen hat, sollte es zu diesem Zeitpunkt verwendet werden. Es ist jedoch zu beachten, dass auch die Schaltfläche „Senden“ deaktiviert werden sollte. Andernfalls wird der Wert in der Datenbank gelöscht, solange der Benutzer diese Schaltfläche drückt und auf der Datenbankbetriebsseite keine Integritätsprüfung durchgeführt wird. Wenn in diesem Fall readonly statt disabled verwendet wird, ist es immer noch in Ordnung, wenn das Formular nur Eingabe- (Text/Passwort) und Textbereichselemente enthält. Wenn andere Elemente vorhanden sind, z. B. select, kann der Benutzer den Wert neu schreiben und zum Senden die Eingabetaste drücken (Eingabe ist die Standardtaste zum Auslösen des Sendens).

3. Wir verwenden häufig JavaScript, um die Schaltfläche „Senden“ zu deaktivieren, nachdem der Benutzer darauf geklickt hat. Dies kann verhindern, dass der Benutzer in einer Umgebung mit schlechten Netzwerkbedingungen wiederholt auf die Schaltfläche „Senden“ klickt , wodurch Daten redundant in der Datenbank gespeichert werden.

Die Attribute disabled und readonly haben einige Gemeinsamkeiten. Wenn beispielsweise beide auf true gesetzt sind, kann das Formularattribut nicht bearbeitet werden. Beim Schreiben von JS-Code kommt es häufig vor, dass diese beiden Attribute verwechselt werden. Tatsächlich gibt es jedoch einige Unterschiede zwischen ihnen:

Wenn die Deaktivierung eines Eingabeelements auf „true“ gesetzt ist, kann das Formulareingabeelement nicht den Fokus erhalten und alle Benutzervorgänge (Mausklicks und Tastatureingaben usw.) sind für das Eingabeelement ungültig . Der wichtigste Punkt ist, dass das Formulareingabeelement beim Absenden des Formulars nicht übermittelt wird.

Schreibgeschützt gilt nur für Eingabeelemente wie Texteingabefelder, in die Text eingegeben werden kann. Wenn es auf „true“ gesetzt ist, kann der Benutzer den entsprechenden Text nicht bearbeiten, kann sich aber trotzdem darauf konzentrieren, und beim Senden des Formulars wird das Eingabeelement als Element des Formulars gesendet.

Der obige Artikel erläutert kurz den Unterschied zwischen den schreibgeschützten und deaktivierten Attributen der Eingabe in HTML. Dies ist der gesamte Inhalt, den der Editor mit Ihnen teilt. Ich hoffe, er kann Ihnen als Referenz dienen. Ich hoffe auch, dass Sie 123WORDPRESS.COM unterstützen werden.

Original-URL: http://blog.csdn.net/playboyanta123/article/details/12682419#comments

<<:  17 JavaScript-Einzeiler

>>:  MySQL-Reihe: Datenbankdesign, drei Paradigmen, Tutorial-Beispiele

Artikel empfehlen

Übersicht über MySQL-Statistiken

MySQL führt SQL durch den Prozess der SQL-Analyse...

26 häufig vergessene CSS-Tipps

Dies ist eine Sammlung häufig verwendeter, aber l...

Prinzipanalyse des UDP-Verbindungsobjekts und Anwendungsbeispiele

Ich habe zuvor zum Einstieg in UDP ein einfaches ...

Ein umfassendes Verständnis der funktionalen Komponenten von Vue.js

Inhaltsverzeichnis Vorwort Funktionale React-Komp...

Löschen von zwei Bildern mit derselben ID im Docker

Als ich heute einen Docker-Container erstellt hab...

Detaillierter Prozess zur Implementierung des 2048-Minispiels im WeChat-Applet

Rendern Beispielcode Heute werden wir das WeChat-...

Webdesign-Kenntnisse: Problem der adaptiven Höhe von Iframes

Manche Leute sind vielleicht noch nicht auf dieses...

JavaScript zur Implementierung der Webversion des Gobang-Spiels

In diesem Artikel wird der spezifische Code für J...

Wie Sie React forwardRef verwenden und was Sie beachten müssen

Bisher konnte react.forwardRef nicht auf höherwer...

Lebenszyklus und Ausführungsreihenfolge von React-Class-Komponenten

1. Zwei Möglichkeiten zum Definieren von Reaktion...