Label IM Textfeld anstatt davor...? (Styling)

[Muckaveli]

Hallo zusammen,

ich arbeite gerade an einem Projekt, dass vom Design her sehr modern sein soll und ich möchte gerne, dass die Labels meiner Formular im Formular-Feld selbst stehen anstatt davor.
Wenn man in das Feld klickt, sollen sie verschwinden. Gerne auch mit Java-Skript (on focus).

Soweit so gut. Leider finde ich nirgends eine Möglichkeit um eine entsprechende Funktion in mein Formular einzubauen.
Zu den fertigen Formularen gibt es wohl keine Templates?

Es muss hierfür doch eine Lösung geben. Immerhin ist dies ja ein Design-Standard seit Jahren.

(Hier ein Beispiel).

Kann mir da Jemand weiterhelfen?
Danke

[cliffparnitzky]

Moin,

versuch es doch mal mit den Placeholdern.

Einfach kein Label angeben und im Platzhalter den gewünschten Feldnamen platzieren.

Gruß, Cliff

[JanoschSkuplik]

Neben der Möglichkeit das placeholder-Attribut zu nutzen, gibt es wie bereits angesprochen dafür auch JavaScript-Methoden. Für Mootools bsp. http://mootools.net/demos/?demo=Enhanced-Form.

[Muckaveli]

Danke für die Antworten!

Placeholder: Verstehe. Verschwindet der Text denn automatisch beim reinklicken, oder muss er erst mit Backspace gelöscht werden?

MooTools: Sieht gut aus! Wie kriege ich die Funktion denn in Contao? Erweiterung?

[JanoschSkuplik]

MooTools: Sieht gut aus! Wie kriege ich die Funktion denn in Contao? Erweiterung?

Vielleicht hilft dir die Website von Joe Ray weiter http://ck2013.may17.de/javascript-einbinden.html

[xchs]

Placeholder: Verstehe. Verschwindet der Text denn automatisch beim reinklicken, oder muss er erst mit Backspace gelöscht werden?

Ersteres.

[Muckaveli]

Danke Leute!

Ich habe mir jetzt beide Methoden angeguckt. Das Problem ist aber immer noch, dass ich das HTML ja irgendwie bearbeiten muss.

Bei der Placholder Methode muss ich

placeholder="bla"

in das Tag der Formularfelder einfügen.

Bei der MooTools Methode muss ich

name="bla"

einfügen.

In jedem Fall muss ich ja etwas zum HTML Code hinzufügen, oder habe ich da gerade einen Denkfehler?
Wie zum Henker kann ich diesen denn bearbeiten, wenn es kein template für das Formular gibt in Contao?

[cliffparnitzky]

In der jeweiligen Felddefinition gibt unter der Legend "Feldkonfiguration" ein Eingabefeld "Platzhalter"

Das muss das dann rein.

Gruß, Cliff

[Muckaveli]

Mein Fehler!
Das Formular, welches ich style möchte, stammt aus einer Erweiterung.
Es handelt sich um eine Member-Registrierung.

Tatsächlich lassen sich für "normale" Formulare Platzhalter eintragen.
Für dieses fehlt im Backend jedoch die Option

Es muss dennoch eine Möglichkeit geben oder!? Siehe Anhang


contao-reg.jpg

[cliffparnitzky]

Dafür würde ich vorschlagen, dass du das Template entsprechend anpasst.

Label rausschmeißen und die placeholder Attribute mit den Werten befüllen, die sonst in die Label gesetzt werden.

Gruß, Cliff

[Muckaveli]

Vielen Dank für deine Mühe Cliffen. Ich habe das so noch nie gemacht und muss es dieses eine Mal richtig verstehen, damit ich es in Zukunft eigenständig umsetzen kann

Wenn ich es richtig verstehe, dann habe ich im Template keinen Einfluss auf den HTML Code der einzelnen Felder, da sie direkt aus der DB ausgelesen werden?

Bitte schau dir mal diesen Anhang an (rot markiert):

contaot.jpg

Verstehe ich das richtig?
Wenn ja, kann ich dann theoretisch den entsprechenden Code in der DB editieren?
Oder wird der Code in einer PHP file generiert?

[cliffparnitzky]

Puh, hast recht, die Felder werden in der Modulklasse "vorgebaut".

Hmm, aber wie man das löst weiss ich so aus der Hüfte nicht.

Dann vlt. doch eine Javascript Lösung anstreben.

Gruß, Cliff

[Muckaveli]

Ich habe noch mal ein bisschen gegoogelt,...

ICH DACHTE, DIES SEI DIE LÖSUNG:

1) Labels per CSS über die Felder legen (z-index)

2) folgendes JavaSkript verwenden

function toggle(obj) {
	var item = document.getElementById(obj);
	if(item.style.visibility == 'hidden') { item.style.visibility = 'visible'; }
	else { item.style.visibility = 'hidden'; }
}

3) Im HTML dann folgendes verwenden

<div onmouseover="toggle('mylabel');" onmouseout="toggle('mydiv');">
<label id='mylabel'>Username</label>  
<input name="" type="text" />
</div>

Resultat:
Die Labels stehen "in" den Formularfeldern (genau genommen befinden sie sich darüber als Layer ).
Sobald man über ein Feld die Maus bewegt, aktiviert sich der toggle und das Label wird auf "hidden" gesetzt.


PROBLEM:
Rein theoretisch funktioniert das. Leider nur in diesem Falle nicht, dass ich ja IDs an die Labels vergeben muss und abermals das HTML editieren müsste (was ja nicht geht).

Irgend eine Idee?

[thepixture]

Ich steh gerade vor dem gleichen Problem.

Ich habe in allen Formularen aus optischen Gründen anstatt der Label nur die Placeholder anzeigen lassen. Jetzt möchte ich das natürlich ebenso mit dem Registrierungsformular machen.

Also hab ich mir die gerenderte Ausgabe kopiert, per Hand in das Template eingesetzt und angepasst.

vorher

<?php echo $this->fields; ?>

nachher

<input type="text" maxlength="255" required="" value="" class="text mandatory" id="ctrl_firstname" name="firstname" placeholder="<?php echo $GLOBALS['TL_LANG']['tl_member']['firstname'][0]; ?>*">
<input type="text" maxlength="255" required="" value="" class="text mandatory" id="ctrl_lastname" name="lastname" placeholder="<?php echo $GLOBALS['TL_LANG']['tl_member']['lastname'][0]; ?>*">
				
<fieldset class="radio_container mandatory" id="ctrl_gender">
	<input type="hidden" value="" name="gender">
	<span>
		<input type="radio" required="" checked="" value="female" class="radio" id="opt_5_0" name="gender"> <label for="opt_5_0" id="lbl_5_0"><?php echo $GLOBALS['TL_LANG']['MSC']['female']; ?></label>
	</span>
	<span>
		<input type="radio" required="" value="male" class="radio" id="opt_5_1" name="gender"> <label for="opt_5_1" id="lbl_5_1"><?php echo $GLOBALS['TL_LANG']['MSC']['male']; ?></label>
	</span>
</fieldset>
				
<input type="text" maxlength="255" value="" class="text" id="ctrl_company" name="company" placeholder="<?php echo $GLOBALS['TL_LANG']['tl_member']['company'][0]; ?>*">
<input type="text" maxlength="255" required="" value="" class="text mandatory" id="ctrl_email" name="email" placeholder="<?php echo $GLOBALS['TL_LANG']['tl_member']['email'][0]; ?>*">
<input type="password" value="" class="text password mandatory" id="ctrl_password" name="password" placeholder="<?php echo $GLOBALS['TL_LANG']['MSC']['password'][0]; ?>*">
<input type="password" value="" class="text password confirm mandatory" id="ctrl_password_confirm" name="password_confirm" placeholder="<?php echo $GLOBALS['TL_LANG']['MSC']['confirm'][0]; ?>*">

Die Placeholer hab ich mit den entsprechenden Sprachvariablen befüllt, somit funktioniert es auch bei mehrsprachigen Seiten. Außerdem hab ich anstatt des select-Feldes ein radio-button Menü verwendet.

Die Sicherheitsfrage hab ich erst mal weggelassen und ein erster Versuch zeigt, dass es so funktioniert, aber nur, wenn man eben auch die Sicherheitsfrage im Registrierungsformular deaktiviert hat.

Jetzt ist die Frage, wie bekomm ich das mit Sicherheitsfrage hin? Ansonsten sind ja ungewollte Anmeldungen schon vorprogrammiert.