Passwort vergessen - Template anpassen - placeholder anstatt labels

[Dee]

Tach zusammen

Habe das Modul "Passwort vergessen" erstellt und eingefügt.
Nun wollte ich die Labels entfernen und dafür "placeholder" einfügen.
Finde hierfür die entsprechenden Form-Felder aber nicht.
Bin davon ausgegangen, dass ich dies im Template "mod_passwort" anpassen kann, jedoch bin ich gerade etwas überfordert damit.
Sehe ich das richtig, dass dies hier angepasst werden müsste?:

<div class="fields">
          <?= $this->fields ?>
        </div>

Wie kann ich die jeweiligen "placeholder" den Form-Felder zuweisen?

[Andreas]

Ich würde das mit JS machen, das ist einfacher. Ich habe hier (leider nur für jQuery) ein Script, welches den Browser auf die Unterstützung von Placeholder kontrolliert und bei true die Labels ausblendet. Das kannst du ein wenig anpassen, sodass du das Placeholder-Attribut aus dem Label in die Felder setzt. Das FOR-Attribut passt immer zur Field-ID, damit ist es wahrscheinlich am einfachsten die Felder zu finden.
JS-Code:

(function($) {
  $(document).ready(function() {

    $('#top').addClass('js');

    // hide the labels if placeholders are supported
    var checkPlaceholderSupport = function() {
      var test = document.createElement('input');
      return ('placeholder' in test);
    }

    if(checkPlaceholderSupport()) {
      $('#top').addClass('knows_placehoder');
      $('.widget-text label, .widget-textarea label, .search .submit_container').addClass('invisible');
    }

  });
})(jQuery); 

Die Anpassung könnte ungefähr so aussehen (ungetestet)
JS-Code:

(function($) {
  $(document).ready(function() {

    $('#top').addClass('js');

    // Hide the labels if placeholders are supported
    var checkPlaceholderSupport = function() {
      var test = document.createElement('input');
      return ('placeholder' in test);
    }

    if(checkPlaceholderSupport()) {
      $('#top').addClass('knows_placehoder');
      $('.widget-text label, .widget-textarea label, .search .submit_container').addClass('invisible');

      // Build placeholder from label
      var labels = $('label');

      labels.each(function() {
        var formField = $('#' + $(this).attr('for'));

        if(formField.hasClass('text') || formField.hasClass('textarea')) {
          var dummyLabel = $(this).clone();
          dummyLabel.children().remove();
          var placeholderText = dummyLabel.text().trim();
          formField.attr('placeholder', placeholderText);
        }
      });
    }


  });
})(jQuery); 

[Dee]

Besten Dank Andreas für deinen Ansatz. Werde das mal versuchen so umzusetzen.

[ToNoma]

Kleiner Hinweis:
Placeholder anstatt Labels zu verwenden macht die Barrierefreiheit von Contao zunichte.
Warum? Siehe Punkt 3 bei "Formularfelder korrekt beschriften" auf https://www.zehe-edv.de/2016/01/08/d...her-webseiten/

[Andreas]

In dem Artikel siehst du auch Gegenstimmen dazu. z.B.

Das placeholder-Attribut ist – sinnvoll angewandt – eine wertvolle Hilfestellung für den User, Formularfelder im gewünschten Format auszufüllen, und Eingabefehler zu minimieren. Also ein Werkzeug zur Verbesserung der Usability. Beispiel: DD/MM/YYYY

Der Code oben ist für Formulare mit LABELs, sie werden dann unsichtbar geschaltet, wenn das Ausgabegerät PLACEHOLDER unterstützt. Sie werden nicht gelöscht oder vor Screenreadern versteckt, sondern nur mit der Klasse invisible https://github.com/contao/core/blob/...essed.css#L107 unsichtbar geschaltet.