Formular mit Value und Passwort

[Günni]

Hallo,

ich habe mich heute mit Formularen befasst und stehe jetzt vor einem Problem.

Das ist mein Code:

  
<input type="PASSWORD" name="pass" value="Passwort" onclick="this.value=''" size="10" style="background-color:#fff;color:#000; border:1px solid #0066cc; padding: 0px; font-size: 16px;">  
<input name="sent" type="hidden" id="sent" value="login">  

value="Passwort" wird nicht angezeigt, da stehen die verschlüsselten Punkte. Die sollen da auch stehen, allerdings erst, wenn der User sein Passwort eingibt. Bis der User in das Feld klickt, soll da "Passwort" erscheinen.

Meine google-Suche hat ein paar Ansätze gefunden, allerdings keinen, der in Firefox und IE funktionierte. Vielleicht habe ich auch die falschen Stichwörter bei der Suche gewählt, wie auch immer, es würde mich freuen, wenn Ihr mir helfen könntet.

Danke - Gruß ünni

[bleicher]

Grüße,
Passwordfelder zeigen Sternchen, Kühe geben Milch und Ökos labern Kake.
Das sind grundlegende Eigenschaften des Universums die sich ohne blasphemische Praktiken nicht manipulieren lassen.
MFG
bleicher

[Der Martin]

Hallo,

Passwordfelder zeigen Sternchen, Kühe geben Milch und Ökos labern Kake.
Das sind grundlegende Eigenschaften des Universums die sich ohne blasphemische Praktiken nicht manipulieren lassen.

YMMD!  :-)

Ciao,
 Martin

[ChrisB]

Hi,

Meine google-Suche hat ein paar Ansätze gefunden, allerdings keinen, der in Firefox und IE funktionierte.

Na dann brauchst du ja nur noch das jeweils „funktionierende” von diesen kombinieren.

MfG ChrisB

[Cheatah]

Hi,

value="Passwort" wird nicht angezeigt, da stehen die verschlüsselten Punkte. Die sollen da auch stehen, allerdings erst, wenn der User sein Passwort eingibt. Bis der User in das Feld klickt, soll da "Passwort" erscheinen.

und wenn der Browser durch einen Automatismus (derer die meisten Browser _mehrere_ haben) das richtige Passwort einträgt, soll es ebenfalls im Klartext lesbar sein? Der User hat schließlich nicht in das Feld geklickt. Wenn er mit der Tabulator-Taste (oder andere Tastatursteuerungsvarianten) hinein gelangt, hat er das übrigens auch nicht.

Im Themenbereich HTML/XHTML existiert keine Lösung. In anderen, wie beispielsweise JavaScript, musst Du Dich mit einer Vielzahl Problemen beschäftigen, die allesamt sicherheitsrelevant sind. Bist Du hierzu in der Lage?

Cheatah

[Günni]

Im Themenbereich HTML/XHTML existiert keine Lösung. In anderen, wie beispielsweise JavaScript, musst Du Dich mit einer Vielzahl Problemen beschäftigen, die allesamt sicherheitsrelevant sind. Bist Du hierzu in der Lage?

Danke für die Antwort. Auf Deine Frage muss ich mit "nein" antworten. Ich bin davon ausgegangen, dass es eine relativ simple Lösung für das Problem geben könnte. Wenn das nicht der Fall ist, verzichte ich darauf.

Vielen Dank!

[Cheatah]

Hi,

Danke für die Antwort. Auf Deine Frage muss ich mit "nein" antworten. Ich bin davon ausgegangen, dass es eine relativ simple Lösung für das Problem geben könnte. Wenn das nicht der Fall ist, verzichte ich darauf.

ich kann Dir verraten, dass diese Funktionalität eine der größten Aufwands-Konglomerate[1] ergab, die ich bei meinem letzten größeren Projekt hatte. Auch für mich war es also nicht ohne, und ich konnte die meisten Schwierigkeiten vorhersehen. Zugegebenermaßen hingen noch ein paar mehr Faktoren daran, die bei Dir vermutlich nicht vorliegen; dennoch bleibt es eine Aufgabe, die schwieriger ist, als es den Anschein haben mag.

Cheatah

[1] Man mag es auch als "ewige Frickelei" titulieren.

[ChrisB]

Hi,

und wenn der Browser durch einen Automatismus (derer die meisten Browser _mehrere_ haben) das richtige Passwort einträgt, soll es ebenfalls im Klartext lesbar sein? Der User hat schließlich nicht in das Feld geklickt.

Dazu fiel mir gerade auch noch ein, dass es auch die gewohnte Funktionalität meines Passwort-Managers unterbinden würde, wenn man den Typ des Feldes ändert, so dass er initial text ist, und dann erst auf password umgeschaltet wird (was im IE nicht funktioniert) - denn ohne password-Feld im Formular fühlt der sich gar nicht zuständig. Und auf Funktionalität, auf die ich als Nutzer Wert lege, zu Gunsten eines solchen Gimmicks zu verzichten, wäre grober Blödsinn.

Die einzige halbwegs brauchbare Methode wäre also m.E., das Passwortfeld ganz normal im Formular zu belassen und an ihm keinesfalls zu manipulieren - und höchstens den Text „Passwort” initial darüber zu positionieren o.ä.

MfG ChrisB

[Günni]

Die einzige halbwegs brauchbare Methode wäre also m.E., das Passwortfeld ganz normal im Formular zu belassen und an ihm keinesfalls zu manipulieren - und höchstens den Text „Passwort” initial darüber zu positionieren o.ä.

Was heißt das? (den Text „Passwort” initial darüber zu positionieren) bzw. wie realisiert man das? Danke!

[ChrisB]

Hi,

Was heißt das? (den Text „Passwort” initial darüber zu positionieren) bzw. wie realisiert man das?

Per CSS, in diesem Falle in Kombination mit JavaScript (Element dynamisch erzeugen, den ohne JavaScript hat es ja keine Daseinsberechtigung).

MfG ChrisB

[Gunnar Bittersmann]

@@ChrisB:

nuqneH

Die einzige halbwegs brauchbare Methode wäre also m.E., das Passwortfeld ganz normal im Formular zu belassen und an ihm keinesfalls zu manipulieren - und höchstens den Text „Passwort” initial darüber zu positionieren o.ä.

Oder darunter – als Hintergrundbild:

  
input[type="password"] { background: url(password.png) no-repeat left center }  
input[type="password"]:focus { background: none }

Dass man die Höhe des Eingabefeldes nicht kennt, der Textgrafik aber eine „passende“ Höhe geben muss, wird man verschmerzen können.

Qapla'

[ChrisB]

Hi,

Dass man die Höhe des Eingabefeldes nicht kennt, der Textgrafik aber eine „passende“ Höhe geben muss, wird man verschmerzen können.

Dass man weder Schriftgrösse noch Schriftart kennt, vielleicht schon weniger.

MfG ChrisB

[Gunnar Bittersmann]

@@ChrisB:

nuqneH

Dass man die Höhe des Eingabefeldes nicht kennt, der Textgrafik aber eine „passende“ Höhe geben muss, wird man verschmerzen können.

Dass man weder Schriftgrösse noch Schriftart kennt

Ja, das meinte ich. Daraus ergibt sich ja die Höhe des Eingabefeldes.

vielleicht schon weniger.

Naja, dann passt es halt nicht bei allen Nutzern ideal. Die Textgrafik mag bei manchen etwas zu klein wirken, bei anderen etwas zu groß. So wichtig isses ja nicht.

Qapla'

[bleicher]

Grüße,
CSS? und so bald der focus weg ist? die Lösung wird etwas unschön aussehen, was bei reinen schmücksachen wie diese ist, doch ein grundlegendes Problem ist.
MFG
bleicher

[ChrisB]

Hi,

CSS? und so bald der focus weg ist?

Attributselektor für value ;-)

MfG ChrisB

[Cheatah]

Hi,

CSS? und so bald der focus weg ist?
Attributselektor für value ;-)

hm, ich bin mir gerade nicht sicher, ob sich das Attribut aus CSS-Sicht verändert, wenn man eine Eingabe tätigt. Vermutlich bietet sich eine Kombination zwischen CSS und JavaScript an, so dass nur bei aktivem JavaScript das Indiz für "zeige 'Passwort' an" ein- und ausgeschaltet wird.

Cheatah

[Gunnar Bittersmann]

@@Cheatah:

nuqneH

hm, ich bin mir gerade nicht sicher, ob sich das Attribut aus CSS-Sicht verändert, wenn man eine Eingabe tätigt.

Nope.

Vermutlich bietet sich eine Kombination zwischen CSS und JavaScript an, so dass nur bei aktivem JavaScript das Indiz für "zeige 'Passwort' an" ein- und ausgeschaltet wird.

Yep.

Qapla'

[Gunnar Bittersmann]

@@bleicher:

nuqneH

CSS? und so bald der focus weg ist?

Dann wurde vermutlich das Formular abgeschickt und eine neue Seite erscheint.

Ja, es kann auch geschehen, dass Sternchen/Punkte über der Hintergrundgrafik stehen, und ja, das sieht blöd aus.

Ich wollte nur eine simple Lösung in die Runde werfen, die ohne JavaScript auskommt. Ideale Darstellung ist von dieser nicht zu erwarten.

Qapla'

[Günni]

es würde mich freuen, wenn Ihr mir helfen könntet.

@Bleicher: Das war meine Bitte. Zuvor habe ich mir Mühe gegeben, eine höfliche Frage zu formulieren. Wo bitte liegt Dein Problem, wenn ich so eine - mit Verlaub - derart dämliche Antwort von Dir erhalte?

[ChrisB]

Hi,

@Bleicher:

Antworte bitte an der richtigen Stelle im Thread; auf das Posting, auf das du dich beziehst.

MfG ChrisB

[Beat]

Das ist mein Code:

<input type="PASSWORD" name="pass" value="Passwort" onclick="this.value=''" size="10" style="background-color:#fff;color:#000; border:1px solid #0066cc; padding: 0px; font-size: 16px;">
<input name="sent" type="hidden" id="sent" value="login">

  
Dein Problem würde sich in nichts auflösen, wenn du dem Input-Feld ein Label Element beigesellen würdest.  
  
mfg Beat

-- 

><o(((°>           ><o(((°>  

   <°)))o><                     ><o(((°>o  
Der Valigator leibt diese Fische

[Gunnar Bittersmann]

@@Beat:

nuqneH

Dein Problem würde sich in nichts auflösen, wenn du dem Input-Feld ein Label Element beigesellen würdest.

Welches sich auch gleich nutzen lässt, um hinter (in z-Richtung) dem Eingabefeld dargestellt zu werden:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
  <head>  
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>  
    <title>TEST</title>  
    <script type="text/javascript">[code lang=javascript]document.documentElement.className += " js";
~~~</script>  
    <style type="text/css">  
~~~css
.js label  
{  
  color: #666;  
  position: absolute;  
  text-indent: .2em;  
}

</style>
  </head>
  <body>
    <label for="passwordinput">Passwort</label>
    <input id="passwordinput" type="password"/>
    <script type="text/javascript">
//[code lang=xml]<![CDATA[
var passwordinput = document.getElementById("passwordinput");
passwordinput.label = passwordinput.previousSibling.nodeType == 3 ? passwordinput.previousSibling.previousSibling : passwordinput.previousSibling;
passwordinput.onfocus = function ()
{
  this.label.style.display = "none";
};
passwordinput.onblur = function ()
{
  this.label.style.display = this.value ? "none" : "block";
};
//]]>[/code]
    </script>
  </body>
</html>[/code]

Qapla'