Selbsterklärende Formularfelder

[rony12]

Hallo,

ich baue gerade ein Formular für eine Webseite - das Formular inkl. Logik dahinter ist fertig - nun wollte ich es so gestallten, dass es sich "selbst erklärt".
Den leuten ist nicht immer klar, welche eingabe in welches Feld gehört.

Nun ist das Formaular recht mittig zentriert, es gibt also die Möglichkeit rechts un Links ein paar Infos für jedes Feld anzuzeigen.

Ich wollte nun links eine kleine Erklärung für jedes feld anzeigen lassen und rechts Beispiele...

Die Erklärung und das Bsp. sollen angezeigt werden, wenn man mit der Maus über das <div> hovert oder das <input/> Feld z.B. mit [TAB] fixiert wird.
Aktuell mache ich das mittles Javascript - aber ich meine gehört zu haben, dass das auch mittles CSS3 funktionieren soll - ist da was dran?

Mein aktueller Code:

<div onmouseover="document.getElementById('erklaerung').innerHTML='Wenn du das Gefühl hast, dass du deinem Titel noch eine kurze Aussage mit auf den Weg geben möchtest, ist hier der richtige Platz.';" style="margin-top: 15px;">
                <h3>Untertitel:</h3>
                <p><input type="textfield" id="untertitel" placeholder="Untertitel" title="Untertitel" name="untertitel" onkeyup="count_ut(this.value);"/></p>
                <div class="hinweis" id="hinweis_untertitel"></div>
           </div>

eig. wollte ich das mittles Funktionsaufruf machen:

<div onmouseover="untertitel();"> lala </div>


<script type='text/javascript'>
function untertitel() {
    document.getElementById('erklaerung').innerHTML = "Wenn du das Gefühl hast, dass du deinem Titel noch eine kurze Aussage  mit auf den Weg geben möchtest, ist hier der richtige Platz.";
}
</script>

Aber das funktioniert nicht :/

 

[racer320kmh]

Da gibt's ja auch gar kein Element mit der ID "erklaerung"!
Mach es doch so:
In dem div machst noch ein div mit der Eigenschaft display: none;

Dann im CSS

div:hover div {
display: block;
margin: ...;
}

Oder schau mal hier.
Du musst aber eigentlich nur getElementById('erklaerung') durch getElementById('hinweis_untertitel') ersetzen.

 

[Daaron]

Nutzt du HTML5 als DOCTYPE?
Dann könntest du jedem <input> ein passendes "data-" - Attribut mitgeben. Eigenschaften, die mit data- beginnen, können vom Entwickler frei festgelegt werden. Du könntest z.B. schreiben:

<input type="text" name="untertitel" data-description="Hier kommt meine Untertitel-Beschreibung" />

Und jetzt etwas CSS-Magie:

input[data-description]:after
{
 content: attr(data-description);
}

und natürlich die passende Positionierung/Formatierung in dem :after - Element, wie du es brauchst.

 

[rony12]

danke schonmal...

@Daaron - danke, das kannte ich noch garnicht. Aber ich glaube, da ich ja zwei unterschiedliche Hinhalte aufrufen will, ist das aktuell nicht geeignet...


Wie ich gemerkt habe, kann man mit der Methode von racer320kmh nur "verwante" DIVs steuern.
Da bei mir aber beide DIVs nicht viel miteinander zu tun haben - also acuh in komplett anderen elementen stehen, wäre ich sehr interessiert, ob es da eine andere Lösung mittels CSS gibt ?

 

[Daaron]

@Daaron - danke, das kannte ich noch garnicht. Aber ich glaube, da ich ja zwei unterschiedliche Hinhalte aufrufen will, ist das aktuell nicht geeignet...

Ich hab den Kram nicht getestet, nur aus analogen Problemstellungen abgeleitet... Aber es sollte für alles Mögliche funktionieren.

Das :after - Pseudo-Element erhält als Inhalt eben genau den Wert, den die Variable "data-description" des betroffenen Elementes (auf das sich :after bezieht) hat.

Probier doch mal folgendes:

<a href="https://www.computerbase.de">Computerbase</a><br/>
<a href="http://heise.de">Heise</a>
<a href="http://golem.de">Golem</a>

a:after
{
content: attr[href];
margin-left: 10px;
}

Wenn alles sauber läuft, steht jetzt 10px hinter jedem Seitenname die passende URL.

 

[asdfman]

Aber wenn man das Formular erklären muss, ist es doch nicht mehr selbsterklärend!

Spoiler

Bitte nicht flamen, war nur Spaß!