Contaos Registrierungsformular mit Platzhaltern ("placeholder") ausstatten

von Oliver Richter (Kommentare: 0)

input-Felder wurden mit Platzhaltern (Inhalt der Label) ausgestattet
Bild: Labels wurden entfernt und die Platzhalter für jedes Eingabefeld eingestellt

Das Contao-Registrierungsformular bietet, meines Wissens nach, leider (noch?) keine Möglichkeit (Stand Januar 2014) bei Verwendung der HTML5-Ausgabe die dortigen Input-Felder mit Platzhaltern (Attribut "placeholder") auszustatten wie das mittlerweile im Formulargenerator von Contao möglich ist.

Einer meiner Kunden benötigte jedoch ein Registrierungsformular, in dem die Label-Elemente ausgeblendet und die Input-Felder mit einem Platzhalter-Wert (der dem des Labels entspricht) ausgestattet sind.

Dazu habe ich ein kleines Javascript auf JQuery-Basis eingesetzt was hier Abhilfe schafft und beide Probleme löst. Die in den Label-Elementen vorhandenen SPAN-Tags (Angabe "Pflichtfeld" und das Stern-Zeichen) werden vor dem Übertragen des Label-Wertes in das Input-Platzhalter-Feld noch entfernt.

 

$('.mod_registration input.text').each(function() 
 {
  $this = $(this);
  
  $label = $('label[for="'+ $this.attr('id') +'"]');
  
  if ($label.length > 0 ) 
   {  
    // Labels ausblenden
    $label.addClass('invisible');
    
    // SPAN-Tags im Label-HTML-Content entfernen
    $label.find('span').remove();
    
    // INPUT-Felder mit placeholder-Attribut ausstatten
    $this.attr('placeholder', $label.text() );
   }
 });

Zurück

Einen Kommentar schreiben

Bitte rechnen Sie 5 plus 5.

Bachten Sie: Für die Zuordnung Ihrer Nachricht werden die hier anzugebenden Daten Name, E-Mailadresse, Ihr Kommentar gespeichert. Sofern Sie den Wunsch der E-Mail-Benachrichtigung angegeben haben, wird aufgrund technischer Notwendigkeit auch dieser Wert gespeichert. Durch Absenden des Formulars erklären Sie sich damit einverstanden. Alternativ kontaktieren Sie mich bitte über meine E-Mailadresse oder Telefon.
Detaillierte und weitere Hinweise, insb. zum Widerrufsrecht finden Sie in der Datenschutzerklärung.

Sie befinden Sich in der Detailansicht eines Blog-Eintrags.

Um alle Blog-Einträge zu sehen, wechseln Sie bitte zur Nachrichten-Übersicht.