HTML: Inputfeld ausgrauen – So gehts

Oft ist es erforderlich, das bestimmte Daten in einem Inputfeld vom Benutzer nicht geändert werden können. Du kannst ein Input Feld ausgrauen so das man den Wert nur lesen aber nicht bearbeiten kann.

So kannst du ein Eingabefeld (Input) in HTML ausgrauen:

Attribut disabled:

Dies ist die einfachste und gebräuchlichste Methode.

<input type="text" id="meinEingabefeld" disabled>

Erklärung:

• disabled ist ein HTML-Attribut, das du zu jedem Eingabefeld hinzufügen kannst.
• Wenn dieses Attribut gesetzt ist, ist das Eingabefeld deaktiviert und der Benutzer kann keine Eingaben mehr machen.
• Visuell wird das Eingabefeld in den meisten Browsern ausgegraut dargestellt.

CSS-Eigenschaft opacity:

Mit CSS kannst du die Opazität des Eingabefelds reduzieren, um es grau zu erscheinen.

#meinEingabefeld {
  opacity: 0.5;
}

Erklärung:

• opacity ist eine CSS-Eigenschaft, mit der du die Transparenz eines Elements steuern kannst.
• Werte zwischen 0 (vollständig transparent) und 1 (vollständig opak) sind möglich.
• In diesem Beispiel wird die Opazität auf 0.5 gesetzt, wodurch das Eingabefeld halbtransparent und grau erscheint.

CSS-Eigenschaft filter (nur ältere Browser):

In älteren Browsern kannst du den filter-Effekt verwenden, um das Eingabefeld grau zu färben.

#meinEingabefeld {
  filter: grayscale(1); /* Grad der Grauabstufung (0 = normal, 1 = komplett grau) */
}

Erklärung:

• filter ist eine CSS-Eigenschaft, mit der du verschiedene visuelle Effekte auf ein Element anwenden kannst.
• grayscale() erzeugt einen Graustufen-Effekt.
• Der Wert in Klammern (z. B. 1) gibt den Grad der Grauabstufung an.

Zusätzliche Informationen:

• Kombination von Methoden: Du kannst die Methoden disabled und opacity oder filter kombinieren, um den gewünschten Effekt zu erzielen.
• Barrierefreiheit: Achte darauf, dass deaktivierte Eingabefelder für Benutzer mit Behinderungen weiterhin erkennbar und mittels Tastatur bedienbar sind.
• Visuelle Gestaltung: Die Darstellung gegrauter Eingabefelder kann in verschiedenen Browsern und Betriebssystemen leicht variieren. Teste deine Implementierung daher sorgfältig.

Empfehlung:

Verwende das Attribut disabled, wenn du das Eingabefeld vollständig deaktivieren und gleichzeitig ausgrauen möchtest.

Verwende die CSS-Eigenschaft opacity, wenn du das Eingabefeld nur optisch ausgrauen möchtest, aber weiterhin interaktiv lassen willst.

Über mich

Domi

Hi ich bin’s Dominik. Auf Blogseite.com findest du alles was mich interessiert. Mag Games, liebe SEO, programmiere gerne und möchte dir mit verschiedenen Themen die mich begeistern einen Mehrwert liefern. Viel Spaß auf meiner Seite