HTML Readonly für ein Select-Tag
-
das Attribut
<select readonly> -
Verwenden Sie das Attribut
<select disabled>, um das Attributreadonlyfür einselect-Tag in HTML zu emulieren -
Verwenden Sie das Attribut
pointer-events: none, um das Attributreadonlyfür einselect-Tag in HTML zu emulieren - Abschluss
HTML, Hyper Text Markup Language, wird häufig zur Formatierung von Websites verwendet. CSS (Cascading Style Sheets) kann auch zum Gestalten formatierter Websites verwendet werden.
Nachfolgend sind einige Attribute aufgeführt, die in HTML und CSS verwendet werden, um das Verhalten des Benutzers und des Cursors zu steuern.
das Attribut <select readonly>
<select> ist das am häufigsten verwendete HTML-Tag, um Benutzereingaben von der Tastatur, der Maus oder dem Touchscreen zu erhalten. Typischerweise ermöglicht die Verwendung von <select> Benutzern, eine oder mehrere Optionen auszuwählen, während die Verwendung von <select readonly> Benutzern ermöglicht, den Wert nur anzuzeigen, anstatt ihn zu ändern.
Das Attribut readonly gibt an, dass die Eingabeelemente nicht editierbar und schreibgeschützt sind. Außerdem sind Text, URL, Telefonnummer, E-Mail, Passwort, Datum, Monat, Woche, Uhrzeit und Zahl die unterstützten Formate für schreibgeschützt.
Syntax:
<select readonly>
Aber <select readonly> ist heutzutage in HTML nicht gültig, da es bereits veraltet ist. Stattdessen können wir das Attribut disabled verwenden.
Verwenden Sie das Attribut <select disabled>, um das Attribut readonly für ein select-Tag in HTML zu emulieren
Das Attribut deaktiviert ist ein boolesches Attribut, das verwendet wird, um anzugeben, dass die Dropdown-Liste deaktiviert ist. Die Verwendung von disabled ermöglicht es, die Elemente nicht anklickbar und unbrauchbar zu machen und entzieht den Benutzern die Kontrolle.
Außerdem wird das Eingabefeld als nicht zutreffend angezeigt und deaktiviert die Verwendungsmöglichkeit.
Syntax:
<select disabled>
Lassen Sie uns diese Syntax anhand eines Beispiels erläutern, indem Sie eine Dropdown-Liste erstellen, um eine klarere Vorstellung zu bekommen.
Beispielcode:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML disabled Attribute</title>
</head>
<body style="text-align: center;">
<h1 style = "color: brown;"> HTML Select Disabled Attribute </h1><br>
<p style="color: black; font-size: large"> What is your Home Country? </p>
<p style="color: grey"> (Selection of choice is disabled) </p>
<select disabled>
<option value="Sri Lanka">Sri Lanka</option>
<option value="India">India</option>
<option value="Turkey">Turkey</option>
</select>
</body>
</html>
Zuerst haben wir eine HTML-Datei geöffnet, indem wir ihren Meta-Zeichensatz mit dem Titel HTML-deaktiviertes Attribut definiert und <body> mit allen Elementen geöffnet haben, die so gestaltet sind, dass der Inhalt nach dem Schließen von <head> zentriert bleibt.
Dann haben wir den Namen der Überschrift als HTML Select Disabled Attribute mit <h1> und brauner Farbe definiert. Einen Zeilenumbruch nach der Überschrift bekamen wir mit <br>.
Definieren Sie dann eine Frage: Was ist Ihr Heimatland? mit <p> und mit grosser Schriftgrösse und schwarzer Farbe. Danach haben wir einen Satz (Auswahl der Wahl ist deaktiviert) mit einer grauen Farbe definiert.
Dann wird mit <select disabled> die Dropdown-Liste deaktiviert. Auch wenn es mit <select disabled> deaktiviert ist, haben wir einige Werte dafür als Sri Lanka, Türkei und Indien definiert.
Am Ende der HTML-Datei werden alle verwendeten Tags konsequent geschlossen.
Laut Ausgabe ist die deaktivierte Dropdown-Liste grau und außerhalb der Kontrolle des Benutzers. Benutzer können nicht auf Optionen aus der Dropdown-Liste klicken oder sie auswählen; so funktioniert die Funktion <auswählen deaktiviert>.
Der Unterschied zwischen schreibgeschützt und deaktiviert besteht darin, dass die Verwendung von schreibgeschützt Benutzern hilft, die von ihnen bereitgestellten Eingaben anzuzeigen, während deaktiviert Benutzern nicht anklickbare Elemente bereitstellt.
Verwenden Sie das Attribut pointer-events: none, um das Attribut readonly für ein select-Tag in HTML zu emulieren
pointer-events ist eine andere Methode, die wir anstelle von <select readonly> verwenden können. Sogar readonly unterstützt Benutzer zumindest bei der Verwendung von none zusammen mit der Eigenschaft pointer-events zu sehen; Es deaktiviert die Pfeilklickereignisse des Benutzers.
Insgesamt steuert die Eigenschaft Zeigerereignisse die Reaktionen des Cursors, indem sie die Aktivitäten wie das Reagieren auf Mausereignisse, das Bewegen der Maus, das Klicken und mehr verwaltet. Die pointer-events mit dem Attribut none verhindern alle Klicks und steuern das Verhalten des Cursors auf Elementen.
Syntax:
pointer-events: none;
Definieren wir anhand eines Beispiels anhand von zwei Links in Social Media, wie sich pointer-events mit dem Attribut none verhalten. In diesem Beispiel haben wir eine HTML- und eine CSS-Datei erstellt.
HTML Quelltext:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>Using none in Pointer Events</title>
</head>
<body>
<p> Social Media </p>
<ul>
<li><a href="https://www.facebook.com">Facebook</a></li>
<li><a href="https://www.whatsapp.com">Whatsapp</a></li>
</ul>
</body>
</html>
In Anlehnung an den obigen HTML-Code haben wir zunächst den Dokumenttyp als HTML und den Meta-Zeichensatz nach dem Öffnen des <head> definiert. Außerdem haben wir die Datei style.css mit dem href verlinkt und einen Titel als Using none in Pointer Events definiert.
Nach dem Schließen von <head>, öffnete <body> und erstellte eine ungeordnete Liste namens Social Media zusammen mit zwei Listenelementen: Facebook und Whatsapp mit den zugehörigen Links.
style.css-Code:
p{
font-size: 40px;
color: blue;
}
li{
font-size: 20px;
color: brown;
}
a[href="https://www.whatsapp.com"]{
pointer-events: none;
}
Zuerst haben wir den Absatz Social Media so definiert, dass er in der styles.css blau mit einer Grösse von 40px erscheint. Außerdem ist die Liste der Artikel in Braun mit einer Schriftgröße von 20 Pixel.
Das pointer-events mit dem Attribut none wird für einen Social-Media-Link angewendet, um den Unterschied zu sehen.
Wie Sie in der obigen Ausgabe sehen können, zeigt es ein Handzeichen, wenn wir den Cursor auf Facebook bewegen. Aber wenn wir den Cursor auf Whatsapp bewegen, bleibt es nur als Pfeilzeichen.
Wir hoffen, Sie haben sich durch dieses Beispiel ein Bild von der Funktionalität pointer-event: none gemacht.
Abschluss
Insgesamt haben wir im gesamten obigen Inhalt besprochen, den Benutzerzugriff auf Eingabeelemente einzuschränken und sie auszuwählen und hervorzuheben. Obwohl es viele andere Methoden gibt, haben wir nur einige besprochen.
Auch die Verwendung von <select readonly> ist eine bereits veraltete Methode in HTML5. Anstatt es zu verwenden, können wir mit den oben genannten Techniken eine ähnliche Ausgabe erzielen.
Nimesha is a Full-stack Software Engineer for more than five years, he loves technology, as technology has the power to solve our many problems within just a minute. He have been contributing to various projects over the last 5+ years and working with almost all the so-called 03 tiers(DB, M-Tier, and Client). Recently, he has started working with DevOps technologies such as Azure administration, Kubernetes, Terraform automation, and Bash scripting as well.