Das Boolean-Attributreadonly, wenn vorhanden, macht das Element nicht veränderbar, was bedeutet, dass der Benutzer das Steuerelement nicht bearbeiten kann.

Probieren Sie es aus

<label for="firstName">First Name:</label><input name="firstName" type="text" value="Adam" /><label for="age">Age:</label><input name="age" type="number" value="42" readonly /><label for="hobbies">Hobbies:</label><textarea name="hobbies" readonly>Baseball</textarea>

label {  display: block;  margin-top: 1em;}input:read-only,textarea:read-only {  background-color: silver;}

Überblick

Wenn dasreadonly-Attribut für ein Eingabeelement angegeben ist, da der Benutzer die Eingabe nicht bearbeiten kann, nimmt das Element nicht an der Constraint-Validierung teil.

Dasreadonly-Attribut wird von textbasierten Formularelementen unterstützt, einschließlich:

• <input>-Elemente des Typs:
  • text
  • search
  • tel
  • url
  • email
  • password
  • date
  • month
  • week
  • time
  • datetime-local
  • number
• <textarea>

Das Attribut ist für alle anderen Elemente irrelevant, einschließlich<select> und<button>. Es gilt auch nicht für nicht-textuelle Eingabeelemente, einschließlich:

• hidden
• range
• color
• checkbox
• radio
• file
• submit
• image
• reset
• button

Eingaben, die dasreadonly-Attribut unterstützen, aber das Attribut nicht gesetzt haben, stimmen mit der:read-write-Pseudoklasse überein. Alle anderen Elemente stimmen mit der:read-only-Pseudoklasse überein.

Attributinteraktionen

Der Unterschied zwischendisabled undreadonly besteht darin, dass schreibgeschützte Steuerelemente weiterhin funktionieren und fokussierbar sind, während deaktivierte Steuerelemente keinen Fokus erhalten können, nicht mit dem Formular übermittelt werden und im Allgemeinen nicht als Steuerelemente funktionieren, bis sie aktiviert sind.

Da ein schreibgeschütztes Feld seinen Wert nicht durch Benutzerinteraktion ändern kann, hatrequired keine Auswirkungen auf Eingaben, bei denen dasreadonly-Attribut ebenfalls angegeben ist.

Die einzige Möglichkeit, den Wert desreadonly-Attributs dynamisch zu ändern, erfolgt über ein Skript.

Benutzerfreundlichkeit

Browser zeigen dasreadonly-Attribut an.

Constraint-Validierung

Wenn das Element schreibgeschützt ist, kann der Wert des Elements nicht vom Benutzer aktualisiert werden und nimmt nicht an der Constraint-Validierung teil.

Beispiel

HTML

<div>  <input type="text" value="Some value" readonly />  <label for="text">Text box</label></div><div>  <input type="date" value="2020-01-01" readonly />  <label for="date">Date</label></div><div>  <input type="email" value="Some value" readonly />  <label for="email">Email</label></div><div>  <input type="password" value="Some value" readonly />  <label for="pwd">Password</label></div><div>  <textarea readonly>Some value</textarea>  <label for="ta">Message</label></div>

Ergebnis

Spezifikationen

Browser-Kompatibilität

html.elements.input.readonly

html.elements.textarea.readonly

Siehe auch

• :read-only und:read-write
• <input>
• <select>