Formularvorlage 05
    
HOME
QuellCode ZURÜCK SITEMAP  

 Formulare, Vorlage 05  (Anmeldung zum Turnier)

In diesem Beispiel 'Anmeldeformular Fun-Soccer' sind die Eingabefelder und die Prüfung der Eingaben auf die Bedingungen des Turniers zugeschnitten. Sie können die Vorlage für Ihre Bedürfnisse anpassen, indem sie Eingabefelder löschen oder hinzufügen.

Fun-Soccer:
  • mindestens 5 Spieler
  • zusätzlich 4 Auswechselspieler
  • Altersangabe für die Spieler
  • namentliche Meldung erforderlich

  Prüfung

Bei der Eingabe werden die erforderlichen Daten des Anmeldenden, das Feld für den Mannschaftsnamen und die ersten 5 Namensfelder für die Spieler überprüft (Eingabe ist erforderlich).

Formularelement    Prüfung  
Name ja
Vorname ja
Straße ja
PLZ Wohnort ja
E-Mail ja
Telefonnummer ja
Mannschaftsname  ja
Eingabefelder ersten 5 Spieler  ja
Datumseingabe mit Korrektur  ja



  Interessante Datumsprüfung

Interessant ist hier die Prüfung des eingetragenen Datums (nur wenn das Feld nicht leer bleibt). Fehlerhafte Eingaben (Tag / Monat / Jahr) werden gemeldet, Trennzeichen eingefügt bzw. korrigiert (Komma - Punkt). Schaltjahre werden berücksichtigt!

Testdatum eintragen:    

Außerdem werden zweistellige Jahreseinträge vervollständigt! So wird aus der Eingabe '221107' oder '22,11,07' der korrekte Eintrag '22.11.2007' .


  Aufwand

  • JavaScript in den Head-Bereich kopieren
  • CSS-Angaben in den Head-Bereich kopieren
  • Formulartabelle in den Body-Bereich kopieren
  • Email-Adresse eintragen
Die Formularelemente wurden mit CSS formatiert. Wenn sie die Formatierung beibehalten möchten (oder ändern wollen), müssen neben dem Script-Code auch die CSS-Anweisungen im Head-Bereich einkopiert werden (siehe Quellcode).


Anmeldung zum Fun-Soccer

Wir benötigen Name, Anschrift, Telefonnummer sowie eMail-Adresse des Anmeldenden. Tragen Sie bitte Namen, Vornamen und Geburtsdatum der teilnehmenden Spieler (mind. 5 ) ein. Eine Bestätigung Ihrer Anmeldung erhalten Sie schriftlich.

* Eingabe erforderlich


Wer meldet die Mannschaft an:

Name: *
Straße: *
PLZ Wohnort: *
E-Mail: *
Telefon: *
Mannschaft: *
Spieler 01 *  Geb.:
Spieler 02 *  Geb.:
Spieler 03 *  Geb.:
Spieler 04 *  Geb.:
Spieler 05 *  Geb.:
Spieler 06    Geb.:
Spieler 07    Geb.:
Spieler 08    Geb.:
Spieler 09    Geb.:
Kommentar:  
   
     



  Anpassungen der Emailadresse

Damit die Post auch ankommt müssen Sie natürlich auch Ihre email-adresse im Formular notieren. Die erste Anpassung ist also zwingend notwendig!


Ersetzen Sie in der Vorlagedatei (Zeile 340) IhreAdresse@web.de mit Ihrer wirklichen Emailadresse


  Info zur CSS-Formatierung dieses Beispiels

Zur Formatierung der Formularelemente und des Textes in diesem Formular verwende ich CSS-Anweisungen. Dabei habe ich allgemeine Klassen (input) oder eigene Klassen (.datum, #formtab, ...) im CSS-Bereich (im Kopf des HTML-Dokuments) definiert, die ich dann mittels 'class-Tags' oder 'id' eingebunden Habe. 

/* Eingabefelder allgemein */
input {
color:#000000;
font-family: monospace;
font-size:12px;
border:1px solid #C1C1FF;
padding:1px;
background-color: #FFFFFF;
width:250px;
height:20px;
}

/* Datumsfelder */
.datum {
color:#000000;
font-family: monospace;
font-size:12px;
border:1px solid #C1C1FF;
padding:1px;
background-color: #FFFFFF;
width:82px;
height:20px;
}

/* textarea notiz */
.notiz {
color:#000000;
font-family: monospace;
font-size:12px;
border:1px solid #C1C1FF;
padding:4px;
background-color: #FFFFFF;
width:330px;
height:100px;
}

/* buttons */
.butt {
font-family: Verdana,Arial,sans;
color:#0070C0;
font-size:12px;
border-style: 1px solid #9E8DE3;
background-color: #ECEEFD;
width:120px;
}

/* Text in der Formulartabelle */
#formtab td{
color:#6675B3;
font-family:Verdana,Arial,Helvetica;
font-size: 11px;
}
Die letzte Format-Anweisung (#formtab) gilt für alle Texte in Tabellenzellen (td) innerhalb der Tabelle, der eine ID zugeordnet wurde mit 

<table id="formtab" bgcolor="#EFEFEF" ...
Die anderen Formatierungen für selbst definierte Klassen (z.B. .datum) wurden mit dem 'class-Tag' eingebunden wie 

<input class="datum" name="Geb01" type="text" maxlength="10" ...





NACH OBEN