JavaScript / Tipps / Eingabemaske

von: Werner Zenk

Wer schon einmal ein Archiv oder eine Datenbank im HTML-Format erstellt hat, weiß wie viel Arbeit darin steckt.
• Eingabe der Html-Tags, • Formatierung der Seite,
• Eingabe der Daten, • Überprüfen auf Fehler...

Hilfreich ist zum Beispiel eine Vorlage im HTML-Format, wo die Daten nur noch eingegeben werden müssen.
Nachteil: Bei einer größeren Seite geht im Quelltext schnell die Übersicht verloren. Das Editieren braucht Zeit und viele Eingabefehler werden übersehen.

Eine Eingabemaske ist die ideale Lösung. Einfach Daten eingeben, den „Button“ drücken - Fertig

Hier stelle ich Ihnen ein kleine Eingabemaske vor, die sehr schön
die Funktionsweise zeigt.



Eingabemaske:   „Filmarchiv”

Filmtitel:
Land:
Jahr:
Bildname:
Handlung:


 



Hier finden Sie das Beispiel mit der oberen Formatierung!

 

    Apostroph       Anführungszeichen      Form Name     Eingabefeld Name 

    Zeilenumbruch      Function      Variable      Text

  Quelltext:
<script languange="JavaScript">
 function Ausgabe() {
  var schreibe = '';
  schreibe += '<html>\n';
  schreibe += ' <head>\n';
  schreibe += '  <title> Filmarchiv </title>\n';
  schreibe += ' </head>\n';
  schreibe += '<body>\n\n';
  schreibe += '<p>\n';
  schreibe += ' <b> Filmtitel: </b>' + document.Formular.filmtitel.value + '<br>\n';
  schreibe += ' <b> Land: </b>' + document.Formular.land.value + '<br>\n';
  schreibe += ' <b> Jahr: </b>' + document.Formular.jahr.value + '<br><br>\n';
  schreibe += ' <b> Bild: </b><br>\n';
  schreibe += ' <img src="' + document.Formular.bildname.value + '" align="left">\n';
  schreibe += ' <b> Handlung: </b>' + document.Formular.handlung.value + '\n';
  schreibe += '</p>\n\n';
  schreibe += '</body>\n';
  schreibe += '</html>\n';
  document.Formular.anzeige.value = schreibe;
 }
</script>

<h3>Eingabemaske: Filmarchiv</h3>

<form name="Formular" action="" method="post">
 Filmtitel: <input type="text" name="filmtitel" size="50"> <br>
 Land: <input type="text" name="land" size="30"> <br>
 Jahr: <input type="text" name="jahr" size="5"> <br>
 Bildname: <input type="text" name="bildname" size="25"> <br>
 Handlung:<br>
 <textarea name="handlung" rows="7" cols="40"></textarea>
 <br><br>
 <input type="reset" value="NEU">
 <input type="button" value="EINGABE FERTIG" onClick="Ausgabe()">
 <br><br>
 <textarea name="anzeige" rows="10" cols="50"></textarea>
</form>


Die farbig hervorgehobenen Stellen sind sehr wichtig.
Ein falsch geschriebener   Eingabefeld Name oder ein vergessenes
    Anführungszeichen können zu einer Fehlermeldung führen.

Die Eingabemaske „Filmarchiv“ lässt sich problemlos erweitern.
Zum Beispiel mit den Darstellern, einer Kritik oder einer Bewertung.
    Und Ihre Meinung?
      Sie vermissen auf dieser Seite wichtige Informationen oder haben Hinweise für uns?
Martina:
Da habe ich doch was gefunden, was ich gar nicht gesucht habe, aber sehr gut gebrauchen kann. Danke!

Andy:
Schick, schick. Fast auf den Punkt, was ich gesucht habe. Müsste jetzt nur noch ein Auswahlmenü haben, dann wäre es auf mich zugeschnitten. Das werde ich aber sicher auch noch selbst hinbekommen. lol

Fen:
Vielen Dank!War genau das was ich gesucht habe.Top!

swor:
Super vielen Dank. Haargenau das was ich brauchte !

Chris:
Super! das habe ich gesucht. Ich bräuchte noch die Möglichkeit, dass wenn ein Eingabe-Feld leer ist, es bei der Ausgabe ignoriert wird. was wäre denn da der Code? Bin blutiger Anfänger. Vielen Dank! Chris
Hilfe finden Sie im » netzgemein.de - Forum. Auch als „Gast” können Sie dort Fragen stellen!  
 Das könnte Sie interessieren:
Sound bei Link-Klick - Beim Klicken auf dem Link wird ein Sound abgespielt.  Fenster on Top - Dieses Script bewirkt das sich das Fenster in gewissen ...  Buttons - Einige Buttons mit JavaScript-Funktionen.  Meldung mit Format - Eine Dialogbox formatieren.  Confirm - (Ein Geschenk :-)  Link mit Sicherheitsabfrage  Sendebutton mit Sicherheitsabfrage  Schriftgröße der Webseite mit JavaScript ändern  Bildschirmauflösung testen  Bildgröße mit dem Mausrad ändern  Hyperlinks anzeigen - Dieses Script zeigt die Anzahl der Hyperlinks dieser Seite an.  …mehr
© 2000-2012 Homepage-Total.de Kontakt - Impressum - Banner