Icon in ein Textfeld

[IsyChan]

Guten Abend,

mein HTML

<form name="formular" method="post" action="">
	<label for="name">Ihr Name</label>
	<input type="text" name="name" id="name" value="">
	<input type="submit" name="abschicken" id="abschicken" value="Senden">
</form>

Ist es möglich dieses Icon http://fortawesome.github.io/Font-Awesome/icon/user/ in das Feld Name zu platzieren?

Bitte keine Diskussion über type="submit" da ich dieses nicht ändern kann!

[Auge]

Hallo

mein HTML

<form name="formular" method="post" action="">
	<label for="name">Ihr Name</label>
	<input type="text" name="name" id="name" value="">
	<input type="submit" name="abschicken" id="abschicken" value="Senden">
</form>

Ist es möglich dieses Icon http://fortawesome.github.io/Font-Awesome/icon/user/ in das Feld Name zu platzieren?

Nein. Input hat keinen Inhalt, darf keine HTML-Elemente enthalten. Ein solches brauchst du, um das Zeichen des Fonts auszugeben. Du kannst aber mit input#name:before oder input#name:after das Zeichen vor oder hinter das Eingabefeld platzieren.

Tschö, Auge

[Orlok]

Hallo

Nein. Input hat keinen Inhalt, darf keine HTML-Elemente enthalten. Ein solches brauchst du, um das Zeichen des Fonts auszugeben. Du kannst aber mit input#name:before oder input#name:after das Zeichen vor oder hinter das Eingabefeld platzieren.

Möglich, dass ich mich irre oder dich falsch verstanden habe, aber soweit ich weiß, sind bei Elementen ohne Inhalt auch keine Pseudoelemente erlaubt:

„The ::before and ::after pseudo-elements can be used to describe generated content before or after an element's content.“

Gruß,

Orlok

[Auge]

Hallo

… Du kannst aber mit input#name:before oder input#name:after das Zeichen vor oder hinter das Eingabefeld platzieren.

Möglich, dass ich mich irre oder dich falsch verstanden habe, aber soweit ich weiß, sind bei Elementen ohne Inhalt auch keine Pseudoelemente erlaubt:

„The ::before and ::after pseudo-elements can be used to describe generated content before or after an element's content.“

Jetzt, wo du's sagst …

… recht hassu. Und das, wo das vor nicht einmal einer oder zwei Wochen hier irgendwo schon Thema war.

Tschö, Auge

[Matthias Apsel]

Hallo Auge,

„The ::before and ::after pseudo-elements can be used to describe generated content before or after an element's content.“

Jetzt, wo du's sagst …

… recht hassu. Und das, wo das vor nicht einmal einer oder zwei Wochen hier irgendwo schon Thema war.

siehe http://forum.selfhtml.org/self/2015/jul/16/css-after-bild-einfuegen-und-diesem-eine-klasse-zuweisen/1645712#m1645712

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Auge

… Du kannst aber mit input#name:before oder input#name:after das Zeichen vor oder hinter das Eingabefeld platzieren.

Möglich, dass ich mich irre oder dich falsch verstanden habe, aber soweit ich weiß, sind bei Elementen ohne Inhalt auch keine Pseudoelemente erlaubt:

Du irrst. Bei nicht ersetzten Elementen mit Inhaltsmodell „empty“ ist generierter Inhalt möglich.

input ist ein ersetztes Element – das ist generierter Inhalt nicht möglich.

… recht hassu.

Nö, hatter nicht.

Und das, wo das vor nicht einmal einer oder zwei Wochen hier irgendwo schon Thema war.

Und genau der Unterschied schon behandelt wurde.

LLAP 🖖

[Gunnar Bittersmann]

@@Auge

Input hat keinen Inhalt, darf keine HTML-Elemente enthalten. Ein solches brauchst du, um das Zeichen des Fonts auszugeben.

Nein, man kann das Symbol ja auch als Hintergrundbild einbinden.

Das Symbol ist doch aber Text (Iconfont)? Text als Hintergrundbild?

SVG – entdecke die Möglichkeiten …

[Auge]

Hallo

Input hat keinen Inhalt, darf keine HTML-Elemente enthalten. Ein solches brauchst du, um das Zeichen des Fonts auszugeben.

Nein, man kann das Symbol ja auch als Hintergrundbild einbinden.

Es ging hier explizit um einen Font, nicht um ein Hintergrundbild.

Das Symbol ist doch aber Text (Iconfont)? Text als Hintergrundbild?

Ich habe nirgends von einem Hintergrundbild geschrieben, das warst du. Wenn du deinen und meinen Text nicht mehr unterscheiden kannst, mach' eine Pause und lass' mich mit deinem religiösen Eifer in Ruhe.

Tschö, Auge

[Gunnar Bittersmann]

@@Auge

Nein, man kann das Symbol ja auch als Hintergrundbild einbinden.

Es ging hier explizit um einen Font

Nichts anderes schrieb ich.

nicht um ein Hintergrundbild.

Das eine schließt das andere nicht aus. Wie ich zu verstehen gab: Text als Hintergrundbild, SVG macht’s möglich.

Ich habe nirgends von einem Hintergrundbild geschrieben, das warst du.

Ja, eben.

Wenn du deinen und meinen Text nicht mehr unterscheiden kannst, mach' eine Pause und lass' mich mit deinem religiösen Eifer in Ruhe.

Vielleicht lege nicht ich beim Schreiben zu viel Eifer an den Tag, sondern du zu wenig beim verstehenden Lesen?

LLAP 🖖

[Jörg Reinholz]

Moin!

lass' mich mit deinem religiösen Eifer in Ruhe.

Na, Auge? Du gibst doch sonst viele gute Antworten. Die Antwort von Gunnar war durchaus zielführend und also kein Grund, so wenig wohlwollend zu formulieren.

Jörg Reinholz

[Matthias Apsel]

Hallo IsyChan,

<form name="formular" method="post" action="">
	<label for="name">Ihr Name</label>
	<input type="text" name="name" id="name" value="">
	<input type="submit" name="abschicken" id="abschicken" value="Senden">
</form>

Ist es möglich dieses Icon http://fortawesome.github.io/Font-Awesome/icon/user/ in das Feld Name zu platzieren?

In das Feld hinein möchtest du es sicher nicht haben. Aber davor wäre es sinnvoll. Es bietet sich an, das label-Element zu verwenden. Die Dokumentation von font-awesome ist recht ausführlich.

Bis demnächst
Matthias

[IsyChan]

Hallo Matthias,

In das Feld hinein möchtest du es sicher nicht haben. Aber davor wäre es sinnvoll. Es bietet sich an, das label-Element zu verwenden. Die Dokumentation von font-awesome ist recht ausführlich.

doch, das Icon soll in das Feld, wie ich es in Photoshop gezeichnet habe.

Wenn ich einen Namen eintragen, soll es sich so verhalten

[Matthias Apsel]

Hallo IsyChan,

doch, das Icon soll in das Feld, wie ich es in Photoshop gezeichnet habe.

Wenn ich einen Namen eintragen, soll es sich so verhalten

Das Icon ist nicht in dem Feld, es sieht nur so aus, als würde es sich in dem Feld befinden. Beide genannten Lösungsvorschläge sollten zielführend sein. Wie sind denn deine CSS-Kenntnisse?

Bis demnächst
Matthias

[IsyChan]

Hallo Matthias,

Das Icon ist nicht in dem Feld, es sieht nur so aus, als würde es sich in dem Feld befinden. Beide genannten Lösungsvorschläge sollten zielführend sein. Wie sind denn deine CSS-Kenntnisse?

achso, dann habe ich doch falsch verstanden. CSS solala, ich google sehr viel und kopiere mir dann einiges zusammen.

[Matthias Apsel]

Hallo IsyChan,

achso, dann habe ich doch falsch verstanden. CSS solala, ich google sehr viel und kopiere mir dann einiges zusammen.

Schau in unser Wiki. Deine Suchbegriffe lauten ‚before‘, ‚padding‘, ‚border‘, ‚background‘. Auch http://wiki.selfhtml.org/wiki/CSS/Anwendung_und_Praxis/Formulare_mit_CSS_gestalten_und_validieren könnte hilfreich sein.

Bis demnächst
Matthias

[IsyChan]

Hallo Matthias,

Schau in unser Wiki. Deine Suchbegriffe lauten ‚before‘, ‚padding‘, ‚border‘, ‚background‘. Auch http://wiki.selfhtml.org/wiki/CSS/Anwendung_und_Praxis/Formulare_mit_CSS_gestalten_und_validieren könnte hilfreich sein.

hab es so versucht: http://codepen.io/anon/pen/LpEZvN leider ohne Erfolg. Mein #name::before wird einfach nicht angezeigt. Die http://fortawesome.github.io/ habe ich natürlich eingebunden.

[Gunnar Bittersmann]

@@IsyChan

hab es so versucht: http://codepen.io/anon/pen/LpEZvN

Bitte verlinken.

leider ohne Erfolg. Mein #name::before wird einfach nicht angezeigt.

Natürlich nicht. Wie in diesem Thread bereits gesagt wurde, können ersetzte Elemente (wie input und img) keinen generierten Inhalt haben.

LLAP 🖖

[IsyChan]

Hallo LAP,

das heißt also, ich pack das ganze in ein

<span class="fa fa-user"></span>

und binde dieses VOR dem input ein?

[Gunnar Bittersmann]

@@IsyChan

das heißt also, ich pack das ganze in ein

<span class="fa fa-user"></span>

und binde dieses VOR dem input ein?

Nö, wozu? Warum nutzt du nicht das Element, was schon da ist: das Label? IIRC wurde auch das schon gesagt.

Könnte dann so aussehen.

LLAP 🖖

[IsyChan]

Hallo LLAP,

Nö, wozu? Warum nutzt du nicht das Element, was schon da ist: das Label? IIRC wurde auch das schon gesagt. Könnte dann so aussehen.

vielen Dank für deine Hilfe. Eine Frage du kennst dich scheinbar gut mit HTML und CSS aus, ist es denn nötig <label for="name">Ihr Name</label> einzufügen genauer gesagt Ihr Name?

Könnte man es nicht lieber so machen:

<form name="formular" method="post" action="">
   <label for="name"></label>
   <input type="text" name="name" id="name" value="" placeholder="Ihr Name"><br>
   <button type="submit" id="abschicken">Formular abschicken</button>
</form>

Ich finde einfach das Label über dem Textfeld bzw. vor dem Textfeld sieht vom Design nicht gerade schön aus :/

EDIT: So finde ich es sehr viel schöner

[Gunnar Bittersmann]

@@IsyChan

ist es denn nötig <label for="name">Ihr Name</label> einzufügen genauer gesagt Ihr Name?

Ja, ist es. Jedes Eingabefeld braucht eine Beschriftung, sonst wissen Nutzer assistiver Technologien (Screenreader) nicht, was in das Feld einzutragen ist.

Könnte man es nicht lieber so machen:

Nein, kann man nicht. Das placeholder-Attribut ist für kurze Hinweise, wie ein Feld auszufüllen ist, nicht was da rein soll. “The placeholder attribute should not be used as a replacement for a label.” [HTML5]

Die Beschriftung eines Eingabefeldes muss i.A. auch noch erkennbar sein, nachdem eine Eingabe erfolgte.

Ich finde einfach das Label über dem Textfeld bzw. vor dem Textfeld sieht vom Design nicht gerade schön aus :/

„Design ist nicht nur, wie es aussieht und wie es sich anfühlt. Design ist, wie es funktioniert.“ (Steve Jobs)

Form follows function.

LLAP 🖖

[IsyChan]

Hallo LLAP,

Nein, kann man nicht. Das placeholder-Attribut ist für kurze Hinweise, wie ein Feld auszufüllen ist, nicht was da rein soll. “The placeholder attribute should not be used as a replacement for a label.” [HTML5]

Die Beschriftung eines Eingabefeldes muss i.A. auch noch erkennbar sein, nachdem eine Eingabe erfolgte.

damit willst du also sagen, dass die GANZ großen wie Google, Facebook, Twitter, Bild.de, Yahoo uvm. es komplett falsch machen? Denn genau so wird es bei den ganz großen umgesetzt. Scheinbar stört dieses absolut niemanden und es wird auch auf die Mobile Version keine Rücksicht genommen, warum? Der Anteil ist wohl einfach noch viel zu gering?

Ich erstelle eine Erotik Seite, da gehe ich eher davon aus, dass man sich Bilder und Videos NICHT auf dem Hand anschaut sondern wie früher am PC.

Sorry, aber mir muss eine Seite gefallen, sonst habe ich absolut keine Lust an der Seite zu arbeiten und kann es auch beim Kunden nicht so rüber bringen. Daher muss ich abwegen.

Edit: Sieht doch so absolut scheiße aus, kann ich keinem Kunden zumuten

[IsyChan]

Hallo LLAP,

Die Beschriftung eines Eingabefeldes muss i.A. auch noch erkennbar sein, nachdem eine Eingabe erfolgte.

dann solltest du aber ganz dringend deinen Text überarbeiten: http://bittersmann.de/articles/label-inside/ dort schreibst du man kann das Label mit JS in das Input Feld legen und beim klicken ausblenden. Das widerspricht sich mit dem, was du mir vorhin geschrieben hast.

Kann das sein, dass du dir die Sachen so legst wie sie dir am besten passen? Wo steht geschrieben dass man ein Label unbedingt braucht? Laut validator.w3.org darf das Label auch leer sein, es wird kein Fehler angezeigt.

[Auge]

Hallo

Hallo LLAP,

Öhm, das ist sein Abschiedsgruß, nicht sein Name.

Die Beschriftung eines Eingabefeldes muss i.A. auch noch erkennbar sein, nachdem eine Eingabe erfolgte.

dann solltest du aber ganz dringend deinen Text überarbeiten: http://bittersmann.de/articles/label-inside/ dort schreibst du man kann das Label mit JS in das Input Feld legen und beim klicken ausblenden. Das widerspricht sich mit dem, was du mir vorhin geschrieben hast.

Nicht unbedingt. Gunnar sagt, das Label soll unbedingt da sein. Es soll einem Benutzer, der z.B. einen Screenreader nutzt, mitteilen, worum es bei dem Eingabefeld geht. Das passiert auch, denn das Element ist, auch wenn es im Desktop- oder Smartphonebrowser woanders (optisch im Eingabefeld) positioniert ist, da. Das ist sogar davon unabhängig, ob der Screenreader JavaScript unterstützt, oder nicht. Für JS-fähige Browser sieht das aber tatsächlich wie ein Platzhalter aus.

Kann das sein, dass du dir die Sachen so legst wie sie dir am besten passen?

Öhhhm …

Wo steht geschrieben dass man ein Label unbedingt braucht? Laut validator.w3.org darf das Label auch leer sein, es wird kein Fehler angezeigt.

Die Nichtverwendung eines Labels macht ein Dokument tatsächlich nicht invalide. Es macht ein Formular im Dokument unter bestimmten Voraussetzungen (Benutzung mit einem vom Entwicker nicht berücksichtigten Zugangsprogramm) schwer oder nicht benutzbar. Abgesehen von gesetzlichen Anforderungen, die auf eine privat(wirtschaftlich) betriebene Website nicht zutreffen, sollte es doch Anspruch des Betreibers eines Webangebots – damit auch des Erstellers – sein, keine Barrieren für potentielle Benutzer zu errichten.

Tschö, Auge

[IsyChan]

Hallo Auge,

Nicht unbedingt. Gunnar sagt, das Label soll unbedingt da sein. Es soll einem Benutzer, der z.B. einen Screenreader nutzt, mitteilen, worum es bei dem Eingabefeld geht. Das passiert auch, denn das Element ist, auch wenn es im Desktop- oder Smartphonebrowser woanders (optisch im Eingabefeld) positioniert ist, da. Das ist sogar davon unabhängig, ob der Screenreader JavaScript unterstützt, oder nicht. Für JS-fähige Browser sieht das aber tatsächlich wie ein Platzhalter aus.

Gunnar hat mir aber geschrieben die Beschriftung muss auch noch zu erkennen sein, wenn eine Eingabe getätigt wurde. Mit seinem JS Code ist dieses nicht mehr der Fall. Schreibe ich etwas, klicke ich aus dem Feld, bleibt mein geschriebenes drin. Was eigentlich in das Feld weiß erfahre ich erst, wenn ich das geschriebene wieder lösche.

Die Nichtverwendung eines Labels macht ein Dokument tatsächlich nicht invalide. Es macht ein Formular im Dokument unter bestimmten Voraussetzungen (Benutzung mit einem vom Entwicker nicht berücksichtigten Zugangsprogramm) schwer oder nicht benutzbar. Abgesehen von gesetzlichen Anforderungen, die auf eine privat(wirtschaftlich) betriebene Website nicht zutreffen, sollte es doch Anspruch des Betreibers eines Webangebots – damit auch des Erstellers – sein, keine Barrieren für potentielle Benutzer zu errichten.

das heißt also, ich könnte es so umsetzten:

<label for="name" class="label_name">Ihr Name</label>

  .label_name {
    margin-top: -256587458px
  }

dann ist es zwar noch da und für einen Screenreader noch zu lesen, aber der User wird damit nicht belästigt und es macht mein Design nicht unschön.

In meiner Zielgruppe gibt es aber "sorry für den Ausdruck" keine Behinderten Menschen. Die Mädels würden dieses zum Glück dankend ablehnen.

[Auge]

Hallo

… keine Barrieren für potentielle Benutzer zu errichten.

das heißt also, ich könnte es so umsetzten:

<label for="name" class="label_name">Ihr Name</label>

  .label_name {
    margin-top: -256587458px
  }

dann ist es zwar noch da und für einen Screenreader noch zu lesen, aber der User wird damit nicht belästigt und es macht mein Design nicht unschön.

Ob die Details passen, weiß ich nicht aus dem Hut, aber ja, es ist grundsätzlich möglich, die Elemente aus dem Blickfeld zu nehmen.

In meiner Zielgruppe gibt es aber "sorry für den Ausdruck" keine Behinderten Menschen. Die Mädels würden dieses zum Glück dankend ablehnen.

Komische Einstellung, andere Baustelle.

Tschö, Auge

[IsyChan]

Hallo Auge,

Ob die Details passen, weiß ich nicht aus dem Hut, aber ja, es ist grundsätzlich möglich, die Elemente aus dem Blickfeld zu nehmen.

muss ich also schauen was es derzeit an Geräten gibt und was bei diesen die Maximale Auflösung ist.

Edit:

So geht es

.versteckmich {
    position: absolute;
    left: -32768px;
    top: -32768px;
    width: 0;
    height: 0;
  }

Und mein HTML

<label for="name"><span class="versteckmich"Ihr Name</span></label>

[Auge]

Hallo

Hallo Auge,

Ob die Details passen, weiß ich nicht aus dem Hut, aber ja, es ist grundsätzlich möglich, die Elemente aus dem Blickfeld zu nehmen.

muss ich also schauen was es derzeit an Geräten gibt und was bei diesen die Maximale Auflösung ist.

Die maximale Auflösung? Naja, Ich habe schon von Leuten gelesen, die ein 4K-TV-Gerät als Display benutzen. Wenn die ihren Browser zu allem Überfluss auch noch im Vollbildmodus laufen lassen sollten, kennst du das ohne Handstände [^1] erreichbare, momentan technisch mögliche Maximum.

Tschö, Auge

[^1] Nicht, dass es nicht grundsätzlich möglich wäre, mehrere Displays zusammenzuschalten.

[Gunnar Bittersmann]

@@IsyChan

das heißt also, ich könnte es so umsetzten:

  .label_name {
    margin-top: -256587458px
  }

Nein, keine gute Idee.

Google macht’s besser.

In meiner Zielgruppe gibt es aber "sorry für den Ausdruck" keine Behinderten Menschen. Die Mädels würden dieses zum Glück dankend ablehnen.

Was ist das für eine menschenverachtende Gülle?

LLAP 🖖

[IsyChan]

Hallo,

Was ist das für eine menschenverachtende Gülle?

ist in diesem Gewerbe leider so. Durch die Filme wird Geld verdient, glaubst du ein Mädel lässt sich mit einem "Behinderten" Menschen Filmen (auch wenn er nur eine Brille auf hat)? Nein denn diese Filme kommen bei uns in Deutschland nicht gut an, das wiederum bedeutet, kein Verdienst!

[Gunnar Bittersmann]

@@IsyChan

Die Beschriftung eines Eingabefeldes muss i.A. auch noch erkennbar sein, nachdem eine Eingabe erfolgte.

dann solltest du aber ganz dringend deinen Text überarbeiten: http://bittersmann.de/articles/label-inside/

Unbedingt. Steht auf der Todo-Liste.

Kann das sein, dass du dir die Sachen so legst wie sie dir am besten passen?

Nein. Du hast eine Jugendsünde von mir entdeckt.

LLAP 🖖

[IsyChan]

Hallo,

Kann das sein, dass du dir die Sachen so legst wie sie dir am besten passen? Nein. Du hast eine Jugendsünde von mir entdeckt.

steht bei Google direkt an zweiter Stelle. So viel musste ich gar nicht suchen :)

[MrMurphy1]

Hallo

Sorry, aber mir muss eine Seite gefallen, sonst habe ich absolut keine Lust an der Seite zu arbeiten und kann es auch beim Kunden nicht so rüber bringen. Daher muss ich abwegen.

Die Hauptursache für benutzerunfreundliche Webseiten.

Edit: Sieht doch so absolut scheiße aus, kann ich keinem Kunden zumuten

Schon mal CSS probiert?

Gruss

MrMurphy

[IsyChan]

Hallo MrMurphy,

Die Hauptursache für benutzerunfreundliche Webseiten.

mag sein, aber auch ein Grafiker arbeitet viel lieber an Grafiken die IHM gefallen! Ich muss die Seite bei Kunden vorstellen, was bringt es mir dann eine Seite die toll auf dem Handy ausschaut obwohl die HD Videos niemals so gut auf dem Handy rüber kommen wie auf dem PC, ich aber nicht komplett dahinter stehe. Wenn du mal als Verkäufer gearbeitet hast, dann wüsstest du jetzt die Antwort!

Schon mal CSS probiert?

klar, wie du auf dem Bild sehen kannst, ist das mit CSS gestylte

<form name="formular" method="post" action="">
   <label for="name" class="label_name">Ihr Name</label>
   <input type="text" name="name" id="name" value=""><br>
   <button type="submit" id="abschicken">Formular abschicken</button>
</form>

  * {
    box-sizing: border-box;
  }

  form {
    width: 500px;
  }

  input[type="text"], 
  input[type="password"], 
  input[type="email"], 
  input[type="url"], 
  input[type="tel"], 
  input[type="number"], 
  input[type="date"], 
  textarea, 
  select {
    height: 42px;
    padding: 10px;
    border-radius: 5px;
    border: none;
    font-size: 16px;
    width: 100%;
    position: relative;
    background-color: #f2f2f2;
  }

  label {
    margin: 0 0 8px 4px;
    color: #999999;
  }

  label[for="name"]::after {
    font-family: "FontAwesome"; 
    content: "\f007";
    display: block;
    position: absolute;
    font-size: 20px;
    text-align: center;
    line-height: 60px;
    height: 42px;
    width: 36px;
    z-index: 1;
    opacity: 0.33;
  }

  #name {
    padding-left: 50px;
  }

  button {
    margin-top: 1em;
  }

[Gunnar Bittersmann]

@@IsyChan

Die Beschriftung eines Eingabefeldes muss i.A. auch noch erkennbar sein, nachdem eine Eingabe erfolgte.

damit willst du also sagen, dass die GANZ großen wie Google, Facebook, Twitter, Bild.de, Yahoo uvm. es komplett falsch machen? Denn genau so wird es bei den ganz großen umgesetzt.

Schon wir doch mal auf Googles Anmeldeseite.

Ein Eingabefeld. Ja, da ist dem Nutzer noch zuzumuten, dass er noch weiß, wofür das gut ist.

Bei mehreren Eingabefeldern auf einer Seite sieht das anders aus. Besonders, wenn man alles ausgefüllt hat und die Eingabe wegen ungültig ausgefülltem/n Feld(ern) nicht angenommen wird, ist es schwer etwas zu korrigieren, wenn Eingabefelder keine sichtbare Beschriftung mehr haben.

Deshalb sagte ich „i.A.“. Wenn du den speziellen Fall nur eines Eingabefeldes auf deiner Seite hast …

Übrigens hat das Eingabefeld dort ein Label:

<label class="hidden-label" for="Email">E-Mail-Adresse eingeben</label>

Per CSS wird es visuell versteckt (Screenreader lesen das immer noch vor):

.hidden-label {
    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px);
    height: 0px;
    width: 0px;
    overflow: hidden;
    visibility: hidden;
}

Ich erstelle eine Erotik Seite, da gehe ich eher davon aus, dass man sich Bilder und Videos NICHT auf dem Hand anschaut sondern wie früher am PC.

Wenn ich deine Inhalte konsumieren wollen würde, dann eher auf der Couch als auf dem Bürostuhl. Also eher auf einem mobilen Gerät.

LLAP 🖖

[IsyChan]

Hallo,

Übrigens hat das Eingabefeld dort ein Label:

<label class="hidden-label" for="Email">E-Mail-Adresse eingeben</label>

Per CSS wird es visuell versteckt (Screenreader lesen das immer noch vor):

.hidden-label {
    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px);
    height: 0px;
    width: 0px;
    overflow: hidden;
    visibility: hidden;
}

schaut laut http://caniuse.com/#search=clip nicht wirklich gut aus. Was spricht gegen meine Option: http://forum.selfhtml.org/self/2015/sep/2/icon-in-ein-textfeld/1649129#m1649129

Und Google setzt ebenfalls als Hinweis auf placeholder

<input id="Passwd" name="Passwd" type="password" placeholder="Passwort" class="">

Wenn ich deine Inhalte konsumieren wollen würde, dann eher auf der Couch als auf dem Bürostuhl. Also eher auf einem mobilen Gerät.

Es geht hier um Videos. Lassen wir das Thema Erotik mal außen vor. Schaust du dir HD Videos von z.B. von Netflix oder Youtube auf dem Handy? Könnte ich nicht. In Filmen möchte ich etwas sehen und zwar in guter Qualität.

[Gunnar Bittersmann]

@@IsyChan

.hidden-label {
    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px);
    height: 0px;
    width: 0px;
    overflow: hidden;
    visibility: hidden;
}

schaut laut http://caniuse.com/#search=clip nicht wirklich gut aus.

Doch, das funktioniert browserübergreifend und wird so bspw. von HTML5Boilerplate verwendet.

Was spricht gegen meine Option: http://forum.selfhtml.org/self/2015/sep/2/icon-in-ein-textfeld/1649129#m1649129

Hatte ich doch verlinkt.

Wenn ich deine Inhalte konsumieren wollen würde, dann eher auf der Couch als auf dem Bürostuhl. Also eher auf einem mobilen Gerät.

Es geht hier um Videos. Lassen wir das Thema Erotik mal außen vor. Schaust du dir HD Videos von z.B. von Netflix oder Youtube auf dem Handy?

Mobiles Gerät heißt nicht unbedingt Handy.

In Filmen möchte ich etwas sehen und zwar in guter Qualität.

Ein Handy direkt vor den Augen erschient auch nicht kleiner als ein Fernseher in 3 Metern Entfernung.

LLAP 🖖