Hannes Weninger: Textfeld vorbelegt

Hallo,

man kann ein textfield ja vorbelegen, z.B. wenn ich ein textfield "name" habe, dann schreib ich einfach placeholder="name@firma.de".

Hier http://www.elasticsearch.com/case-studies/ gibt es eine Form, wo nicht nur das Textfield vorbelegt ist sondern auch ein Icon links im Textfield ist.

Meine Frage wäre jetzt, wie ich das machen kann mit HTML5, CSS3 oder weiß jemand beispiele wie ich das machen kann?

vielen dank
Hannes

  1. Hi there,

    man kann ein textfield ja vorbelegen, z.B. wenn ich ein textfield "name" habe, dann schreib ich einfach placeholder="name@firma.de".

    Hier http://www.elasticsearch.com/case-studies/ gibt es eine Form, wo nicht nur das Textfield vorbelegt ist sondern auch ein Icon links im Textfield ist.

    Meine Frage wäre jetzt, wie ich das machen kann mit HTML5, CSS3 oder weiß jemand beispiele wie ich das machen kann?

    Also, ich hab mir einfach den Sourcecode angesehen und folgendes gefunden:

      
     <li class="icon name">  
                    <label for="Name">Name <span>*</span></label>  
                    <input tabindex="1" class="required combined-name" type="text" placeholder="Name" name="Name" />  
                </li>  
    
    

    und das sagt mir, daß das Icon nicht IM sondern VOR dem Textfeld ist. Das Textfeld selbst hat keinen Rahmen und durch das Einrahmen des <li>-Elements entsteht der Eindruck, daß das Icon Bestandteil des Input-Elements ist. Bleibt zu erwähnen, daß Du da auch selbst hättest draufkommen können...

    1. Hallo,

      Also, ich hab mir einfach den Sourcecode angesehen und folgendes gefunden:

      <li class="icon name">
                      <label for="Name">Name <span>*</span></label>
                      <input tabindex="1" class="required combined-name" type="text" placeholder="Name" name="Name" />
                  </li>

      
      >   
      > und das sagt mir, daß das Icon nicht IM sondern VOR dem Textfeld ist. Das Textfeld selbst hat keinen Rahmen und durch das Einrahmen des <li>-Elements entsteht der Eindruck, daß das Icon Bestandteil des Input-Elements ist.  
        
      und das sagt mir, dass du von hier ab geraten hast. Das Inputfeld hat ein Hintergrundbild mit entsprechendem padding-left.  
        
      
      > Bleibt zu erwähnen, daß Du da auch selbst hättest draufkommen können...  
      
      das stimmt allerdings...  
        
      vg ichbinich  
      
      -- 
      Kleiner Tipp:  
      Tofu schmeckt am besten, wenn man es kurz vor dem Servieren durch ein saftiges Steak ersetzt...
      
      1. Hi there,

        und das sagt mir, dass du von hier ab geraten hast. Das Inputfeld hat ein Hintergrundbild mit entsprechendem padding-left.

        In der Tat, ich habs nur überflogen. Was aber nichts daran ändert, daß der Blick in den Source jedem freisteht, auch dem OP... ;)

    2. @@Klawischnigg:

      nuqneH

      <li class="icon name">
                      <label for="Name">Name <span>*</span></label>
                      <input tabindex="1" class="required combined-name" type="text" placeholder="Name" name="Name" />
                  </li>

      
      >   
      > und das sagt mir, daß …  
        
      Mir sagt das, dass beim input-Element die ID vergessen wurde. @for von label bezieht sich auf IDs, nicht auf @name.  
        
      Dass @placeholder mit "Name" sinnlos ist, [sagte](https://forum.selfhtml.org/?t=216141&m=1481389) ich schon. Entweder entsorgen oder "[Simone Garfunkel](https://twitter.com/g16n/status/401007466487758848)" o.ä. als Wert vorsehen.  
        
      Qapla'
      
      -- 
      „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
      
      1. Hi there,

        Mir sagt das, dass beim input-Element die ID vergessen wurde. @for von label bezieht sich auf IDs, nicht auf @name.

        Ein Wordpress-Fehler?

        Dass @placeholder mit "Name" sinnlos ist, sagte ich schon.

        Eben. Wer heisst schon "Name"...

        Entweder entsorgen oder "Simone Garfunkel" o.ä. als Wert vorsehen.

        Naja, so heisst auch vermutlich auch niemand. (Bis eventuell auf um die Vierzigjährige, die Eltern mit komplett musikalischer Fehlbildung haben...

        1. @@Klawischnigg:

          nuqneH

          Naja, so heisst auch vermutlich auch niemand. (Bis eventuell auf um die Vierzigjährige, die Eltern mit komplett musikalischer Fehlbildung haben...

          Hehe, deren Greatest Hits (AMIGA-Ausgabe) war die erste Schallplatte*, die ich mir je kaufte.

          <♫>And here’s to you, Mrs. Robinson …</♫>

          Qapla'

          * Liebe Kinder, eine Schallplatte ist eine flache Scheibe aus meist schwarzem PVC (wird deshalb von Retro-Liebhaben auch Vinyl genannt), wo man Musik drauf speichern kann. Nicht wiederbeschreibbar, aber mit spitzen Gegenständen ist die Toninformation änderbar (sollte man nicht tun). Vorläufer der CD. Ihr wisst doch noch, was eine CD ist, oder?

          --
          „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
          1. Hi there,

            Naja, so heisst auch vermutlich auch niemand. (Bis eventuell auf um die Vierzigjährige, die Eltern mit komplett musikalischer Fehlbildung haben...

            Hehe, deren Greatest Hits (AMIGA-Ausgabe) war die erste Schallplatte*, die ich mir je kaufte.

            Ja, so ist das mit den Geschmäckern. Meine erste LP war afaik "Alpha Centauri" von Tangerine Dream.

            <♫>And here’s to you, Mrs. Robinson …</♫>

            Ja, da kann ich jetzt nicht mit. Wer Tangerine Dream kennt, weiss warum...;)

            1. Ja, da kann ich jetzt nicht mit. Wer Tangerine Dream kennt, weiss warum...;)

              Oh ja. "Bilder einer Ausstellung". Mit der orangen Orange (also keiner Castronate!) auf dem Cover.

              Jörg Reinholz

              1. @@Jörg Reinholz:

                nuqneH

                Oh ja. "Bilder einer Ausstellung".

                Verwechselst du gerade Tangerine Dream und Tomita?

                Qapla'

                --
                „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
                1. @@Jörg Reinholz:

                  nuqneH

                  Oh ja. "Bilder einer Ausstellung".

                  Verwechselst du gerade Tangerine Dream und Tomita?

                  Ja. Shit. Aber ich hab die Platten leider auch nicht mehr. Ich hatte beide. Die von TD mit der Orange und die von Tomita.

                  Jörg Reinholz

              2. Hi there,

                Ja, da kann ich jetzt nicht mit. Wer Tangerine Dream kennt, weiss warum...;)

                Oh ja. "Bilder einer Ausstellung". Mit der orangen Orange (also keiner Castronate!) auf dem Cover.

                Also das kenn ich nur als Adaption von Emerson Lake and Palmer. Die weiter unten angeführte Version von Tomita sagt mir auch nichts. Ich bin mir aber sicher, daß es von TD keine Version dazu gibt...

            2. höhö, ich bin so jung und knackig, ich hab mir in meinem Leben noch keine Schallplatte gekauft. Bei mir gab's gleich eine CD.

              Gruß
              Kinderpopo
              T-Rex

            3. @@Klawischnigg:

              nuqneH

              Ja, da kann ich jetzt nicht mit. Wer Tangerine Dream kennt, weiss warum...;)

              Ich mag auch Tangerine Dream. Hab  gar nicht so viel von denen, aber „Pergamon“ höre ich immer wieder gerne. Bin leider etwas zu jung um damals im Palast der Republik dabei gewesen zu sein.

              Wie kommen die eigentlich auf den Titel, wenn die Stücke doch Quichotte I & II heißen? Die Originalausgabe von AMIGA heißt einfach nur „Tangerine Dream“ und hat das schönere Cover.

              Hab den alten Herrn und seine jetzigen Mitstreiter aber von ein paar Jahren live gesehen.

              Qapla'

              --
              „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
              1. Hi there,

                Wie kommen die eigentlich auf den Titel, wenn die Stücke doch Quichotte I & II heißen? Die Originalausgabe von AMIGA heißt einfach nur „Tangerine Dream“ und hat das schönere Cover.

                Ja, das ist die Geldgier von Edgar Froese. Der covert sich seit 45 Jahren ständig selbst und hat auch noch die Chuzpe, das jedesmal auch anders zu nennen. Alleine von Tangram gibt es was weiss ich wieviel Versionen.

                Hab den alten Herrn und seine jetzigen Mitstreiter aber von ein paar Jahren live gesehen.

                Womit wir wieder beim Geschmack wären, aber die die letzten zwanzig Jahre waren aus meiner Sicht leider nur mehr ein fader Kommerzabklatsch...;(

                1. @@Klawischnigg:

                  nuqneH

                  Wie kommen die eigentlich auf den Titel, wenn die Stücke doch Quichotte I & II heißen? Die Originalausgabe von AMIGA heißt einfach nur „Tangerine Dream“ und hat das schönere Cover.

                  Ja, das ist die Geldgier von Edgar Froese. Der covert sich seit 45 Jahren ständig selbst

                  Was im Westen später als „Pergamon“ rauskam ist dieselbe Aufnahme wie auf der zuerst in der DDR erschienenen AMIGA-Platte, live aus dem Palast der Republik.

                  Qapla'

                  --
                  „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
                  1. Hi there,

                    Was im Westen später als „Pergamon“ rauskam ist dieselbe Aufnahme wie auf der zuerst in der DDR erschienenen AMIGA-Platte, live aus dem Palast der Republik.

                    Mir sagt AMIGA nichts, Wikipedia verrät mir, daß es sich wie vermutet um ein DDR-Label gehandelt hat. Die Geschichte mit TD im Palast der Republik ist mir flüchtig bekannt, anyway, die damals dort gespielte und aufgenommene Musik entspricht im wesentlichen der ebenfalls 1980 erschienen Platte "Tangram". 1986 ist das dann nocheinmal herausgekommen als "Pergamon live" oder so ähnlich. Die generelle Verwirrung bei TD ist oft, daß die live gespielten Nummern anders heissen als die im Studio aufgenommenen...

                    1. "Plast der Republik" gelesen *g*

          2. હેલો

            * Liebe Kinder, eine Schallplatte ist eine flache Scheibe aus meist schwarzem PVC (wird deshalb von Retro-Liebhaben auch Vinyl genannt), wo man Musik drauf speichern kann. Nicht wiederbeschreibbar,

            Nicht wiederbeschreibbar stimmt nicht ganz ;)

            બાય

            --
             .
            ..:
  2. @@Hannes Weninger:

    nuqneH

    man kann ein textfield ja vorbelegen, z.B. wenn ich ein textfield "name" habe, dann schreib ich einfach placeholder="name@firma.de".

    Nein, ein Placeholder ist keine Vorbelegung.

    Ein Placeholder erscheint, wenn das Eingabefeld keinen Wert (d.h. Leerstring) enthält.

    Eine Vorbelegung ist ein tatsächlicher Wert, der auch so übertragen wird, wenn der Nutzer ihn nicht ändert:
    <input value="Vorbelegung"/> bzw. <textarea>Vorbelegung</textarea>

    Hier http://www.elasticsearch.com/case-studies/ gibt es eine Form, wo nicht nur das Textfield vorbelegt ist sondern auch ein Icon links im Textfield ist.

    Schlechtes Beispiel für ein Formular. Es macht keinen Sinn, dass Label als Placeholder zu wiederholen.

    Und noch weniger Sinn macht es, Labels wegzulassen und nur Placeholder zu verwenden.

    Qapla'

    --
    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
  3. Hi

    Hallo,

    man kann ein textfield ja vorbelegen, z.B. wenn ich ein textfield "name" habe, dann schreib ich einfach placeholder="name@firma.de".

    Wenn das eine dieser Vorbelegungen wird, die ich erst aktiv löschen muss (die also nicht durch hineinklicken bereits gelöscht wird), dann mach die Seite mal nicht sooooo interessant, nicht dass ich da noch draufkomme und mich ärgere ...

    bye

    MH

    --
    war unregistriert "michaa"
    1. Om nah hoo pez nyeetz, michat!

      Wenn das eine dieser Vorbelegungen wird, die ich erst aktiv löschen muss (die also nicht durch hineinklicken bereits gelöscht wird), dann mach die Seite mal nicht sooooo interessant, nicht dass ich da noch draufkomme und mich ärgere ...

      placeholder ist keine Vorbelegung sondern ein Hinweis. Beispielsweise das Suchfeld oben rechts oder auch bei http://alternativ-tankstelle.de/tankstelle_bewerten.html?41%23ps-kw, wobei diese nicht als placeholder-Attribute ausgeführt sind sondern mittels http://bittersmann.de/articles/label-inside/.

      Matthias

      --
      Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Kran und Krankenschwester.