Ergebnis 1 bis 8 von 8

Thema: Ausfüllhilfe für User in einem Formular

  1. #1
    Youngster
    Registriert seit
    09.11.2006
    Beiträge
    10
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Ausfüllhilfe für User in einem Formular

    Hi all,

    ich habe auf meiner Seite ein Formular laufen, welches ich gerne mit "Hilfekommentaren" für die Nutzer ergänzen möchte.

    Als am besten erscheint mir unter allen Möglichkeiten so etwas zu realisieren, die Art wie Yahoo das gemacht hat.

    Wenn man zb. in das Feld für die Postleitzahl klickt, erscheint nebenstehend der Text "Über die Postleitzahl kann Yahoo! Ihnen den Webinhalt anbieten, etc" und sobald man das Feld wieder verlässt ist der Text wieder weg. Somit ist die Hilfe also nur dann sichtbar, wenn man sie auch braucht.

    Das finde ich super und hätte dieses Feauture auch gerne auf meiner Seite. Problem ist, dass ich aber leider nicht wie das am besten umzusetzten ist.

    Hoffe hier kann jemand helfen !
    Gruß
    Lilli
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Kaiser(in)
    Registriert seit
    26.07.2004
    Ort
    Server 2 von 3
    Alter
    27
    Beiträge
    2.512
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Hm, ich kann dir nicht viel Weiterhelfen. Ich kann dir nur sagen:

    Läuft über javaScript und Css.

    Das JavaScript merkt, wenn der User in das Feld klickt und über CSS wird dann das Infofenster sichtbar.


    Gruß
    Lukas
    Maybe this world is another planet's hell

  3. #3
    der/die Göttliche Avatar von jojo87
    Registriert seit
    23.03.2007
    Ort
    Leipzig
    Alter
    30
    Beiträge
    3.131
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    ein kleines Beispiel über javascript:
    Code:
    <html>
    <head>
    <title>Beispiel</title>
    <script type="text/javascript" rel="javascript">
    function showText(text, id) {
    var target = document.getElementById(id);
    target.innerHTML = text;
    return;
    }
    
    function leave(id) {
    var target = document.getElementById(id);
    target.innerHTML = "";
    }
    </script>
    </head>
    <body>
    <form action="" method="post">
    <p>Postleitzahl: <input type="text" name="plz" onClick="showText('Sie geben gerade ihre Postleitzahl ein', this.name)" onBlur="leave(this.name)" /><span id="plz"></span></p>
    </form>
    </body>
    </html>
    Viel Spaß,
    jojo

  4. #4
    Youngster
    Themenstarter

    Registriert seit
    09.11.2006
    Beiträge
    10
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard dankeschön

    wahrscheinlich seh ich den wald vor lauter bäumen nicht,
    aber wenn ich deinen code al htm. speicher und im ie öffne, seh ich zwar das Formularfeld aber nicht den Text "Sie geben gerade ihre Postleitzahl ein". Was mach ich falsch ?

  5. #5
    der/die Göttliche Avatar von jojo87
    Registriert seit
    23.03.2007
    Ort
    Leipzig
    Alter
    30
    Beiträge
    3.131
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Hm, du hast recht, im ie funktioniert es tatsächlich nicht.
    Entschuldige, ich habs da gar nicht getestet (hab mir den ie jetzt erst extra installiert).
    da bin ich jetzt auch etwas überfragt.......
    Vielleicht kann einer der js-Experten da mal nen Blick drauf werfen.

    Übrigens: Man kann das Ganze auch mit css lösen:
    HTML-Code:
    <form action="" method="post">
    <p class="input"><input type="text" name="wasauchimmer" size="20" /><span>Text, der vorerst nicht angezeigt wird</span></p>
    </form>
    und das CSS:
    HTML-Code:
    p.input {
    width: 150px; /*Anpassen, bis Text nicht mehr zu sehen ist*/
    overflow: hidden;
    }
    
    p.input:hover {
    width: auto;
    }
    Allerdings geht dies im IE6 auch nur mit der Js-Krücke von Son of Suckerfish
    Aber der Vollständigkeit halber sei es trotzdem erwähnt.

    Gruß,
    Jojo
    Geändert von jojo87 (27.09.2008 um 12:15 Uhr) Grund: Ergänzung

  6. #6
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard

    HTML-Code:
    <html>
    
    <head>
      <title></title>
      <script type="text/javascript">
      function showHint(text, position){
      var textziel= document.getElementById("info");
      var wrapper = document.getElementById("infowrap");
      textziel.innerHTML=text;
      wrapper.style.top = position;
      wrapper.style.visibility="visible";
     
      }
      </script>
      
      <style type="text/css">
    #info{
    width:300px;
    display:inline;
    margin-left:-35px;
    
    }
    
    #infowrap{
    position:absolute;
    visibility:hidden;
    margin-left:400px;
    background: #FFFFCC;
    border:1px solid #0FF000;
    }
    #infowrap img{
    float:left;
    position:relative;
    top:3px;
    left:-35px;
    }
    
      </style>
    </head>
    <body>
    <form action="" method="post">
    <div id="infowrap" style="top:10px;"><img src="http://home.arcor.de/synaptic/hilfe/leftarrow1w.gif" width="35" height="15" alt="" border="0"><p id="info">Text, der vorerst nicht angezeigt wird</p></div>
    
    <input type="text" name="inp_eins" id="inp_eins" size="20" onfocus="showHint('der Text der als info erscheinen soll<br />mit zeilenumbruch sogar', '15px');" />
    <hr />
    
    <input type="text" name="inp_zwei" id="inp_zwei" size="20" onfocus="showHint('der Text der als info erscheinen soll<br />mit zeilenumbruch sogar<br />und zeilenumbruch', '55px');" />
    <hr />
    
    <input type="text" name="inp_drei" id="inp_drei" size="20" onfocus="showHint('der Text der als info erscheinen soll<br />mit zeilenumbruch sogar<br />und zeilenumbruch<br />und mit zeilenumbruch<br />', '98px');" />
    <hr />
    
    <input type="text" name="inp_vier" id="inp_vier" size="20" onfocus="showHint('der Text der als info erscheinen soll<br />mit zeilenumbruch sogar<br />und zeilenumbruch<br />und mit zeilenumbruch<br />und zeilenumbruch', '135px');" />
    <hr />
    
    </form>
    </body>
    </html>
    
    
    musste halt nur messen wie die abstände von oben sind.. so haste nur ein einziges div und kloppst da den inhalt rein..
    code mit ie und ff getestet
    evtl müsste das script noch wat erweitert werden, damit die position nach browser angepasst wird
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  7. #7
    der/die Göttliche Avatar von jojo87
    Registriert seit
    23.03.2007
    Ort
    Leipzig
    Alter
    30
    Beiträge
    3.131
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Synaptic, kansst du mir evtl. sagen, was an meinem Script oben nicht stimmt? Also IE bezogen?
    Ich komm echt nicht drauf

  8. #8
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard

    naja du hast nen span der die id plz hat und nen input, der den namen plz hat damit haste fast schon zwei elemente mit derselben bezeichnung(grob gesagt) an sich sollte ja id und name voneinander getrennt sein, was der liebe IE nich so ganz kapiert. jetzt versuchst du über diese scheinbar gleiche referenz das zweite objekt zu packen, da schnallt der ie dann ab und schmeisst nen laufzeitfehler.

    also ich bin jetzt auch nur durch probieren zu diesem ergebnis gekommen.. wenn der input nen anderen namen hat und man das plz als id im funktionsaufruf in hochkomma setzt klappt es )

    nich vergessen: "nie etwas einfacher machen, als es schon ist^^-zumindest wenns schon stark reduziert wurde.... hrhrhr"
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

Ähnliche Themen

  1. Wie richte ich ein Anmelde Formular für User mit HTML ein ?
    Von Kevin20071 im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 26.02.2010, 20:17
  2. Druckenattribute bei einem Formular
    Von flow im Forum HTML & CSS Forum
    Antworten: 7
    Letzter Beitrag: 09.10.2007, 14:56
  3. Datei anhängen in einem Formular mit Javascript
    Von mbella26 im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 11
    Letzter Beitrag: 09.07.2007, 09:11
  4. Hilfe bei einem Formular!!!
    Von im Forum HTML & CSS Forum
    Antworten: 34
    Letzter Beitrag: 26.03.2006, 20:01
  5. Verbot von Zeichen in einem Formular
    Von Knüps im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 16.02.2006, 10:58

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •