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

JavaScript zum Erzielen eines Skin-Effekts (Ändern des Hintergrunds)

In diesem Artikel wird der spezifische JavaScript...

CSS imitiert Fernbedienungstasten

Hinweis: Diese Demo wurde in der Miniprogrammumge...

Detaillierte Erläuterung des Falls des JavaScript-Upload-Dateilimitparameters

Projektszenario: 1. Einschränkungen beim Hochlade...

So erstellen Webdesigner Bilder für Retina-Displays

Besonderer Hinweis: Dieser Artikel wurde basieren...

Lösung für MySQL-Verbindungsausnahme und Fehler 10061

MySQL ist ein relationales Datenbankverwaltungssy...

Vue implementiert das Hoch- und Herunterladen von Dateien

In diesem Artikelbeispiel wird der spezifische Co...

MySql-Import - CSV-Datei oder tabulatorgetrennte Datei

Manchmal müssen wir Daten aus einer anderen Bibli...

Detaillierte Erklärung zur Installation von MariaDB 10.2.4 auf CentOS7

CentOS 6 und frühere Versionen stellen MySQL-Serv...

Analyse der Prinzipien von Docker-Containern

Inhaltsverzeichnis 01 Was ist das Wesen eines Con...

So stellen Sie eine Verbindung zum MySQL-Visualisierungstool Navicat her

Nach der Installation von Navicat Der folgende Fe...

So verwenden Sie das Marquee-Tag im XHTML-Code

Im Forum habe ich gesehen, dass der Internetnutzer...