Bei mouseover Eingabefeld färben

Hallo,
wie kriege ich so etwas hin:

https://www.swp-potsdam.de/swp/de/verkehr/ueber-uns-…

Das bei den Formularfeldern die Farbe geändert wird, wenn ich mit der Maus darüberfahre. Und wenn ich was eingebe, dann bleibt die Farbe aber auch…

Geht das auch mit HTML oder JavaScript ?
Muss ich .php verwenden ?

danke, wissensfreak1

Hallo wissensfreak1,

Das bei den Formularfeldern die Farbe geändert wird, wenn ich
mit der Maus darüberfahre. Und wenn ich was eingebe, dann
bleibt die Farbe aber auch…

mit CSS.

Geht das auch mit HTML oder JavaScript ?

Nein. HTML ist für die Festlegung des Inhalts verantwortlich und JavaScript für die Interatkion mit dem Benutzer. Allein mit CSS wird die Formatierung verändert.

Muss ich .php PHP verwenden ?

Nein. PHP wird serverseitig ausgeführt, kann also gar nicht zu verändertem Aussehen beim Klienten führen.

Hier ein Link, um es nochmal richtig zu lernen:

http://fwpf-webdesign.de/einfuehrung

MfG, Florian J.

Hallo,
danke für die Antwort. Auf .php kam ich nur wegen der Adresse im Browser bei der Webseite. Ich kenn mich mit PHP nich so aus.

wissensfreak1

Hallo,
danke für die Antwort. Auf .php kam ich nur wegen der Adresse
im Browser bei der Webseite.

Bitte. PHP ist natürlich sinnvoll, wenn die Formulardaten auf der selben Seite verschickt werden sollen. Ansonsten kann man auch .html nehmen und im form-Tag beim Attribut action eine Seite seiner Wahl angeben, auf der die Daten dann weiterverarbeitet werden.

MfG, Florian J.

Hallo wissensfreak1,

in den Kopf (zwischen und folgenden Javascriptcode einbinden

_var highlightcolor="<b>#ff0000</b>"
var ns6=document.getElementById&&!document.all
var previous=’’
var eventobj

//Regular expression to highlight only form elements
var intended=/INPUT|TEXTAREA|SELECT|OPTION/

//Function to check whether element clicked is form element
function checkel(which){
if (which.style&&intended.test(which.tagName)){
if (ns6&&eventobj.nodeType==3)
eventobj=eventobj.parentNode.parentNode
return true
}
else
return false
}

//Function to highlight form element
function highlight(e){
eventobj=ns6? e.target : event.srcElement
if (previous!=’’){
if (checkel(previous))
previous.style.backgroundColor=’’
previous=eventobj
if (checkel(eventobj))
eventobj.style.backgroundColor=highlightcolor
}
else{
if (checkel(eventobj))
eventobj.style.backgroundColor=highlightcolor
previous=eventobj
}
}_

dann in den Formtag

**die entsprechenden onKeyUp für´s Überfahren mit der Mouse und onClick eben beim Reinklicken für´s schreiben reintun.
Zum Beispiel onKeyUp=„highlight(event)“ onClick=„highlight(event)“

Gruß, der Rosslauer.de

P.S. Den Teil var highlightcolor="#ff0000" natürlich anpassen.**

Hallo Rosslauer,
vielen Dank für deinen Script !

Gruß, wissensfreak

in den Kopf (zwischen und
folgenden Javascriptcode einbinden

Wieso mit JavaScript? Mit CSS kann man das einfacher und mit weniger Zeilen erledigen und man überlastet nicht das Dokument durch zusätzlichen Code. Außerdem haben dann alle, die kein JavaScript benutzen, auch was von diesem eigentlich sehr benutzerfreundlichem „Feature“.

MfG, Florian J.

Wieso mit JavaScript? Mit CSS kann man das einfacher und mit weniger Zeilen erledigen und man überlastet nicht das Dokument durch zusätzlichen Code. Außerdem haben dann alle, die kein JavaScript benutzen, auch was von diesem eigentlich sehr benutzerfreundlichem „Feature“.

…da hast sicher Recht, lieber Florian.
Als neugieriger Zeitgenosse frag ich mich jedoch: „Weshalb hast nicht einfach den CSS-Schnippsel hier gepostet :wink:
Hätte dem Fragesteller sicher mehr genützt als die Kritik an meinem Tipp :smile:

Im Übrigen soll es fast ebensoviele Leute geben die vorgegebene Styles deaktivieren bzw. ersetzen wie Javascript :wink:

Gruß, der Rosslauer

Gut, auch wenn man es eigentlich googlen kann…

Um das ganze in CSS zu regeln verwendet man die Pseudo-Klassen :hover und :active. Hover bestimmt das Aussehen beim Drüberfahren und active beim Reinklicken. Zusätzlich kann man noch :focus verwenden, was für die Formatierung beim Fokussieren mit der Tastatur verantwortlich ist.

input:hover, input:active, input:focus
{
color: #FFF;
background-color: #000;
}

Statt input kann man natürlich auch das HTML-Element seiner Wahl verwenden. Die Farbangaben in meinem Beispiel ersetzt man dann durch seine Wunschfarben (möglichst konstrastreich).

Im Übrigen soll es fast ebensoviele Leute geben die
vorgegebene Styles deaktivieren bzw. ersetzen wie Javascript
:wink:

Na… ob ich das glauben mag :wink:

MfG, Florian J.

Hallo,
vielen Dank für die ganzen Antworten von euch.

wissensfreak