Formular mit CSS gestalten @ tutorials.de: Tutorials, Forum & Hilfe

Rexo · 22.11.05 20:55

Hallo,

ich steh vor einem Problem beim Coden eines Kontaktformulars.
Die Idee ist aus den langweiligen Standardschaltflächen eine etwas ansprechendere Variante zu erzielen.

Es stellt kein Problem dar, die einzelnen inputs, textareas und co. optisch zu gestalten und zu positionieren (z.b feiner Rand statt dem klobigen, oder was auch immer).

Nun aber zum eigentlichen Problem:
Ich möchte, dass sich die Hintergrundgrafik ändert, wenn ein User das Feld "aktiviert".
Ist dies nur mit CSS möglich?

Eine Lösung der Art (onmouseover="...", onkeypress="...", onfocus="..." und co.) scheiden aus, da diese auf Javascript beruhen. Ich möchte die Seite aber ohne! JS funktional und optisch "sauber" halten.

3 Zustände:
1) Hintergrundbild des Inputs vorhanden
2) User "aktiviert" das Feld (durch "keypress", a:active oder was auch immer) -> Hintergrundbild verschwindet bzw. wird weiss (gesamte Fläche)
3) Wenn der User etwas eingegeben hat bleibt die Hintergrundgrafik auf weiss
-> wenn er nichts eingegeben hat (und das Feld wieder verlässt)ändert sich die Grafik wieder auf den im Pkt. 1) genannten Hintergrund

Alternativ kann Pkt 3) auch auf dem weissen Hintergrund von Pkt 2 bleiben (was die Sache wohl deutlich vereinfacht bzw. überhaupt mit CSS realisierbar macht

)

Hat jemand ne Idee oder ein Link mit einem Lösungsvorschlag?

Grüsse

hpvw · 22.11.05 21:11

Meines Wissens ist das nicht mit CSS alleine möglich.
Da es sich aber um ein rein optisches Feature handelt, welches bei Abwesenheit die Verwendung der Seite nicht einschränkt, halte ich JavaScript für ein "zulässiges" Mittel.

Gruß hpvw

Rexo · 23.11.05 14:21

hab leider schon mit dieser Antwort gerechnet

Rein "theoretisch" müsste es machbar sein, wenn das Input-Feld Hover-Eigenschaften (und damit auch a.active) annehmen würde.
Hab auch schon versucht, den Input in ein div zu packen und dieses zu ändern, doch leider kann man ein div nur bei einem Link verändern
-> "toten" Link eingefügt <a href="#"></a> und gehofft auf diesem Weg zu den Hover-Eigenschaften zu gelangen, doch leider hat es auch nicht funktioniert.

... aber therotisch

Azi · 23.11.05 14:48

Probiers mal so:

HTML-Code:

<input type="text" class="blubb">

Code :

1
2
3

.xyz:active{
background-color=#0060FF;
}

Edit:Klappt aber auf jeden Fall nicht im IE, der kennt :active nur bei a.

hpvw · 23.11.05 15:14

Ich muss das mal teilweise zurücknehmen.
Mit focus kann man zumindest das gerade editierte Feld hervorheben. Im IE funktioniert das natürlich nicht.

Hier ein Beispiel:

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
    <meta http-equiv="Content-Type"
        content="application/xhtml+xml; charset=UTF-8" />
    <title>Eingabefelder mit wechselndem Hintergund</title>
<style type="text/css" media="screen">
.bgChanging {
    color:#000;
    background:#fff;
    border:1px #363 solid;
}
.bgChanging:focus {
    color:#000;
    background:#cfc;
}
</style>
</head>
<body>
<h1>Eintrag</h1>
<div>
    <form action="./send.php" method="post">
        <p>
            <input
                type="text"
                name="title"
                class="bgChanging" />
        </p>
        <p>
            <textarea
                name="message"
                class="bgChanging"
                cols="40"
                rows="10"></textarea>
        </p>
        <p>
            <input
                name="send"
                type="submit"
                value="Senden" />
        </p>
    </form>
</div>
</body>
</html>

Mit Attributselektoren zum value-Attribut hätte ich gedacht, lässt sich noch mehr machen, aber das wollte nicht so richtig.

Gruß hpvw

Rexo · 23.11.05 15:33

Ihr bringt den Stein wieder ins Rollen

War eben auf der Suche nach einem Hack für den IE mit seinem Problem die Hovereigenschaften nur dem a - Tag zu "gönnen". Und ich wurde fündig

http://www.xs4all.nl/~peterned/csshover.html

Damit scheint es möglich allen! Elementen seine Hover-Eigenschaften zu geben (was ja in FF schon länger ging).

Aber dennoch funktioniert das Element :focus nicht. Oder mach ich irgendwas falsch?

Laut deren "Anleitung":
#inputfeld:focus {
background-color: green; }

und die Einbindung von Version 2.01.050927 (1.41 and :focus) einbinden.

body {
behavior: url(csshover2.htc);
}

mit hover klappt es, aber nicht mif focus.. vllt. ist es auch noch ein "Bug" der aktuellen Version.

Aber hab mich doch eben sehr über das hilfreiche *.htc gefreut

Oder funktioniert es bei jemand?

@hpvw:

Hab in deinem Code das *.htc mal eingebunden, Doch :focus funktioniert lieder nicht, aber das mouseover schon... komisch

Maik · 23.11.05 16:33

Zitat von Rexo

Ich möchte die Seite aber ohne! JS funktional und optisch "sauber" halten.

Der von dir genannte Behavior-Hack mit der csshover2.htc beruht aber auf Javascript.

Zitat von csshover2.htc

Code :

<attach event="ondocumentready" handler="parseStylesheets" />
<script>
/**
 *  Whatever:hover - V2.01.050927 - hover, active & focus
 *  ------------------------------------------------------------
 *  (c) 2005 - Peter Nederlof
 *  Peterned - http://www.xs4all.nl/~peterned/
 *  License  - http://creativecommons.org/licenses/LGPL/2.1/
 *
 *  Whatever:hover is free software; you can redistribute it and/or
 *  modify it under the terms of the GNU Lesser General Public
 *  License as published by the Free Software Foundation; either
 *  version 2.1 of the License, or (at your option) any later version.
 *
 *  Whatever:hover is distributed in the hope that it will be useful,
 *  but WITHOUT ANY WARRANTY; without even the implied warranty of
 *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
 *  Lesser General Public License for more details.
 *
 *  Credits and thanks to:
 *  Arnoud Berendsen, Martin Reurings, Robert Hanson
 *
 *  howto: body { behavior:url("csshover.htc"); }
 *  ------------------------------------------------------------
 */
 
var csshoverReg = /(^|\s)((([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active))|((a|input|textarea):unknown)/i,
currentSheet, doc = window.document, hoverEvents = [], activators = {
    onhover:{on:'onmouseover', off:'onmouseout'},
    onactive:{on:'onmousedown', off:'onmouseup'},
    onunknown:{on:'onfocus', off:'onblur'}
}
 
function parseStylesheets() {
    if(!/MSIE (5|6)/.test(navigator.userAgent)) return;
    window.attachEvent('onunload', unhookHoverEvents);
    var sheets = doc.styleSheets, l = sheets.length;
    for(var i=0; i<l; i++) 
        parseStylesheet(sheets[i]);
}
    function parseStylesheet(sheet) {
        if(sheet.imports) {
            try {
                var imports = sheet.imports, l = imports.length;
                for(var i=0; i<l; i++) parseStylesheet(sheet.imports[i]);
            } catch(securityException){}
        }
 
        try {
            var rules = (currentSheet = sheet).rules, l = rules.length;
            for(var j=0; j<l; j++) parseCSSRule(rules[j]);
        } catch(securityException){}
    }
 
    function parseCSSRule(rule) {
        var select = rule.selectorText, style = rule.style.cssText;
        if(!csshoverReg.test(select) || !style) return;
        
        var pseudo = select.replace(/[^:]+:([a-z-]+).*/i, 'on$1');
        var newSelect = select.replace(/(\.([a-z0-9_-]+):[a-z]+)|(:[a-z]+)/gi, '.$2' + pseudo);
        var className = (/\.([a-z0-9_-]*on(hover|active|unknown))/i).exec(newSelect)[1];
        var affected = select.replace(/:(hover|active|unknown).*$/, '');
        var elements = getElementsBySelect(affected);
        if(elements.length == 0) return;
 
        currentSheet.addRule(newSelect, style);
        for(var i=0; i<elements.length; i++)
            new HoverElement(elements[i], className, activators[pseudo]);
    }
 
function HoverElement(node, className, events) {
    if(!node.hovers) node.hovers = {};
    if(node.hovers[className]) return;
    node.hovers[className] = true;
    hookHoverEvent(node, events.on, function() { node.className += ' ' + className; });
    hookHoverEvent(node, events.off, function() { node.className = node.className.replace(new RegExp('\\s+'+className, 'g'),''); });
}
    function hookHoverEvent(node, type, handler) {
        node.attachEvent(type, handler);
        hoverEvents[hoverEvents.length] = { 
            node:node, type:type, handler:handler 
        };
    }
 
    function unhookHoverEvents() {
        for(var e,i=0; i<hoverEvents.length; i++) {
            e = hoverEvents[i]; 
            e.node.detachEvent(e.type, e.handler);
        }
    }
 
function getElementsBySelect(rule) {
    var parts, nodes = [doc];
    parts = rule.split(' ');
    for(var i=0; i<parts.length; i++) {
        nodes = getSelectedNodes(parts[i], nodes);
    }   return nodes;
}
    function getSelectedNodes(select, elements) {
        var result, node, nodes = [];
        var identify = (/\#([a-z0-9_-]+)/i).exec(select);
        if(identify) return [doc.getElementById(identify[1])];
        
        var classname = (/\.([a-z0-9_-]+)/i).exec(select);
        var tagName = select.replace(/(\.|\#|\:)[a-z0-9_-]+/i, '');
        var classReg = classname? new RegExp('\\b' + classname[1] + '\\b'):false;
        for(var i=0; i<elements.length; i++) {
            result = tagName? elements[i].all.tags(tagName):elements[i].all; 
            for(var j=0; j<result.length; j++) {
                node = result[j];
                if(classReg && !classReg.test(node.className)) continue;
                nodes[nodes.length] = node;
            }
        }   return nodes;
    }
</script>

Rexo · 23.11.05 19:06

Hi,

ist das Skript wirklich in Javascript geschrieben?

Es taucht der Tag "language="JavaScript" type="text/JavaScript"" nicht auf, und wenn ich im Browser Javascript manuell deaktiviere funktioniert das Skript weiterhin.

Grüsse,
Rexo

Maik · 23.11.05 19:12

In dem <script> -Element fehlen zwar die Attribute language='JavaScript' und type='text/javascript', aber die Syntax erinnert doch sehr an Javascript

PuReSteeL · 24.11.05 12:05

Das unsichtbare Javascript

Rexo · 24.11.05 12:24

wenn ich im Browser Javascript manuell deaktiviere funktioniert das Skript weiterhin.

Hab mich ein wenig über htc (HTML Component) schlauch gemacht.
Ein paar Fakten:

- "Limitation
At present, only IE 5.0 or later browsers support this HTC technology. Microsoft is still waiting for World Wide Web Consortium adoption. So, to successfully deploy this control on a Web site, a browser detection routine is required to ensure the user is running a version of IE 5.0 or later before launching the components. "

- mit JS deaktivert, funktioniert das Skript weiterhin

-Introduced in Internet Explorer 5, HTCs provide a simple mechanism to implement DHTML behaviors in script. An HTC file is nothing but an HTML file, saved with an .htc extension, that contains scripts and a set of HTC-specific custom elements that expose properties, methods, and events that define the component.

Ein paar Links:
http://msdn.microsoft.com/library/de...o/creating.asp

http://msdn.microsoft.com/library/de...s/overview.asp

Nun zurück zu meinem Problem:

Funktioniert bei jemand die :focus-Eigenschaft für ein beliebiges Element mit der obigen *.htc Erweiterung?

Grüsse,
Rexo

Gumbo · 24.11.05 12:41

Probier mal Folgendes, um den Elementen temporär die Klasse „foobar“ zuzuweisen:

Code :

window.onload = function() {
    var inputElements = document.getElementsByTagName("input");
    for(var i=0; inputElements.length; i++) {
        var inputType = inputElements[i].getAttribute("type");
        if( !inputType || inputType.toLowerCase() != "text" || inputType.toLowerCase() != "password" ) {
            continue;
        }
        inputElements[i].onfocus = new Function("this.className += ' foobar'");
        inputElements[i].onblur  = new Function("this.className = this.className.replace(/\bfoobar\b/s, '')");
    }
}

Ist bisher jedoch ungetestet.

Rexo · 24.11.05 18:56

Hi Gumbo,

hab deinen Code direkt im body-Bereich eingefügt.

<body hier_steht_dein_Code >

Ich hab das htc-File als behavior behalten und dein Code eingefügt - hat aber nicht funktioniert, oder hab ich dich falsch verstanden?

Grüsse,
Rexo

PS: Ich hab das Testfile von hpvw mit deinem Code + htc-File mal zu einem neuen File zusammengefasst. So kann jeder "schneller" experimentieren

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
    <meta http-equiv="Content-Type"
        content="application/xhtml+xml; charset=UTF-8" />
    <title>Eingabefelder mit wechselndem Hintergund</title>
<style type="text/css" media="screen">
.bgChanging {
    color:#000;
    background:#fff;
    border:1px #363 solid;
}
.bgChanging:focus {
    color:#000;
    background:#cfc;
}
[b] img, div { behavior: url(csshover2.htc) }[/b]
</style>
</head>
 
<body [i]window.onload = function() {
    var inputElements = document.getElementsByTagName("input");
    for(var i=0; inputElements.length; i++) {
        var inputType = inputElements[i].getAttribute("type");
        if( !inputType || inputType.toLowerCase() != "text" || inputType.toLowerCase() != "password" ) {
            continue;
        }
        inputElements[i].onfocus = new Function("this.className += ' foobar'");
        inputElements[i].onblur  = new Function("this.className = this.className.replace(/\bfoobar\b/s, '')");
    }
} [/i]
>
<h1>Eintrag</h1>
<div>
    <form action="./send.php" method="post">
        <p>
            <input
                type="text"
                name="title"
                class="bgChanging" />
        </p>
        <p>
            <textarea
                name="message"
                class="bgChanging"
                cols="40"
                rows="10"></textarea>
        </p>
        <p>
            <input
                name="send"
                type="submit"
                value="Senden" />
        </p>
    </form>
</div>
</body>
</html>

PS: csshover2.htc kann man sich hier herunterladen
http://www.xs4all.nl/~peterned/htc/csshover2.htc

Maik · 24.11.05 19:16

Wenn du Gumbos Lösungsvorschlag verwenden willst, dann solltest du den Script-Code in einem <script> -Element notieren:

HTML-Code:

<script type="text/javascript">
window.onload = function() {
	var inputElements = document.getElementsByTagName("input");
	for(var i=0; inputElements.length; i++) {
		var inputType = inputElements[i].getAttribute("type");
		if( !inputType || inputType.toLowerCase() != "text" || inputType.toLowerCase() != "password" ) {
			continue;
		}
		inputElements[i].onfocus = new Function("this.className += ' foobar'");
		inputElements[i].onblur  = new Function("this.className = this.className.replace(/\bfoobar\b/s, '')");
	}
} 
</script>

Rexo · 24.11.05 21:11

Hab den Code verbessert:

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
    <meta http-equiv="Content-Type"
        content="application/xhtml+xml; charset=UTF-8" />
    <title>Eingabefelder mit wechselndem Hintergund</title>
<style type="text/css" media="screen">
.bgChanging {
    color:#000;
    background:#fff;
    border:1px #363 solid;
}
.bgChanging:focus {
    color:#000;
    background:#cfc;
}
 img, div { behavior: url(csshover2.htc) }
</style>
<script type="text/javascript">
window.onload=function() {
    var inputElements = document.getElementsByTagName("input");
    for(var i=0; inputElements.length; i++) {
        [b]var inputType = inputElements[i].getAttribute("type");[/b]
        if( !inputType || inputType.toLowerCase() != "text" || inputType.toLowerCase() != "password" ) {
            continue;
        }
        inputElements[i].onfocus = new Function("this.className += ' foobar'");
        inputElements[i].onblur  = new Function("this.className = this.className.replace(/\bfoobar\b/s, '')");
    }
} 
</script>
</head>
 
<body>
<div>
    <form action="./send.php" method="post">
        <p>
            <input
                type="text"
                name="title"
                class="bgChanging" />
        </p>
        <p>
            <textarea
                name="message"
                class="bgChanging"
                cols="40"
                rows="10"></textarea>
        </p>
        <p>
            <input
                name="send"
                type="submit"
                value="Senden" />
        </p>
    </form>
</div>
</body>
</html>

Es kommt die Fehlermeldung: "'undefined' ist Null oder kein Objekt". Ich hab oben die Zeile markiert, in der laut dem Debugger der Fehler auftauch (wobei der Fehler ja oft eine Zeile darüber auftaucht..).
Da ich mich mit der Syntax von JS leider wenig bis gar nicht auskenne, bin ich auf eure Hilfe angewiesen

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

THW Site neu gestalten

Access Formular dynamisch gestalten

kontextmenu gestalten

Design mit php gestalten ?

E-Mail:

Abonnieren Abbestellen