Ein Formular sendet E-Mails

Aufgabenstellung

Für die eigene Webseite soll ein Kontakt-Formular vorbereitet werden.

  • Liste für die Anrede (z.B. Frau, Herr)
  • Liste für den Titel (leer, Dr., Prof., Prof. Dr.)
  • Vorname (Beginnt mit Großbuchstaben und maximal 30 kleine Buchstaben)
  • Nachname (Beginnt mit Großbuchstaben und maximal 30 kleine Buchstaben und Bindestrich)
  • Geburtsdatum
  • E-Mail (valide E-Mail)
  • Straße und Hausnummer
  • Postleitzahl (5 Zahlen)
  • Stadt

Die Gestaltung des Formulars soll auf das Thema der eigenen Webseite abgestimmt sein. Das Formular soll den Nutzer bei der Eingabe der Daten unterstützen. Fehlerhafte Angaben sollen angezeigt werden. Es soll eine E-Mail mit den Formulardaten bei Betätigung des Senden Buttons verschickt werden. Als Vorlage dient das Form2Mail Paket. Dieses muß entsprechend angepasst werden. Wenn für das Thema der eigenen Webseite andere Anreden oder Titel stimmiger sind, dann können diese genutzt werden. Die übertragenen Daten sollen auch im Browser angezeigt werden.

Nutzerinnen und Nutzer die einfach so damit arbeiten wollen, sind herzlich dazu eingeladen aufkommende Fragen hier in die Kommentare zu schreiben.


Fakten und Ressourcen

CODEBeschreibung
NiveauEinsteiger


PackHTML und CSS Datei des Formulars inklusive PHP Script zum E-Mail senden gezipptes Paket. HINWEIS: Für den Betrieb von PHP und E-Mail muss ein Server aktiv sein.

Form2Mail.zip (10.1 KiB)

SheetPraktische Übersicht des HTML-, CSS-, Javascript und PHP-Quellcode von Form2Mail. Sehr hilfreich wenn man den Quellcode bespricht und für Notizen. 4 Seiten DIN A3.

CODE-Sheet-Form2Mail-A3 (1.2 MiB)

Skript

Im kostenlosen CODE Skript sind umfangreiche ergänzende Informationen und die gesamten Tabellen der Übersichten zu den HTML Elementen und CSS Eigenschaften, Scripts, Layout und andere Aspekte des Webdesigns wie z.B. praktische Beispiele für Javascript, PHP und MySQL.

CODE-Skript 1617 (7.7 MiB)

CardsDas CODE Cards Basispaket enthält die wichtigsten HTML und Attribute sowie CSS Selektoren, Eigenschaften und Werte. Für Formulare gibt es spezifische HTML Elemente und Attribute sowie CSS Pseudoclasses.

CODE-Cards-HTML-CSS-Basispaket.zip (1.4 MiB)

Try-itsViele Einzelteile ergeben in der Summe das Ganze. Hier auf der Plattform sind die Elemente der Simple Single Page in den Editoren als Try-its zum Experimentieren verfügbar.
Elemente semantisch gliedern und selektieren
Geschickt mit CSS selektieren
Design mit CSS
Text mit CSS gestalten
Inhalte verlinken
Aufbau und Inhalt des <head>
Bilder
Hintergrund-Bilder
Positions
Float und Clear
Transition
Try-itsSchwerpunkt dieser Lernsituation ist das Formular.
Grundelemente für ein HTML Formular
Dynamische Aktionen in einem HTML Formular
AbgabeterminNovember 2015 für 12GMTA
Bewertung• Funktionstüchtiges Formular
• E-Mail Versand erfolgt über PHP und ist getestet
• HTML Attribut "Pattern" ist angepasst
• Sauber verfasster und kommentierter Quellcode
• Pseudo-Classes unterstützen die Eingabe
• Gestalterische Anpassung an das eigene Thema
Einträge im Logbuch
Beständige und eigenverantwortliche Mitarbeit
Abgabetermin ist eingehalten
LogbücherLogbuch 12GMTA

Empfohlene Software

Diese kostenlose Open Source Software hat sich vielfach bewährt.

SoftwareBedeutung
Sublime Text 3Kostenloser Editor für alle Betriebssysteme mit vielen praktischen Funktionen. Es gibt noch eine ganze Reihe anderer Editoren die auch zu Empfehlen sind.
XamppKostenloser Server für alle Betriebssysteme um PHP und Datenbaken zu nutzen und lokal auf dem eigenen Computer zu entwickeln.
FirebugBei der Arbeit mit Quellcode ist es sehr hilfreich zu prüfen was im Browser ankommt. Firebug zeigt den CODE für HTML, CSS und Javascript und bietet auch die Möglichkeit diesen temporär in der Vorschau zu ändern. Firebug ist eine kostenlose Erweiterung für den Firefox Browser. Es gibt Firebug auch für Chrome. Für Safari sind vergleichbare Webentwickler-Tools eingebaut.
FileZillaWenn eine Webseite auf einen Webserver hochgeladen werden muss, wird meist das File-Transfer-Protokoll (FTP) benutzt. Um z.B. Daten auf einen Server im Internet zu spielen benötigst Du eine FTP Software. Filezilla ist eine sehr gute und kostenlose Lösung für alle Betriebssysteme. Mit dem FTP Programm lassen sich auch Lese- und Schreibrechte festlegen. Ebenso andere Sicherheitsaspekte wie .htaccess insofern dies nicht über den Dienst des Webserver gesteuert wird.

Aus Sicherheitsgründen ist hier die Vorstufe Form2PHP als echte Preview. Die optische Korrektur falscher Angaben, z.B. eine Postleitzahl mit Buchstaben oder 4 statt 5 Zahlen erfolgt über CSS Pseudoklassen die über das HTML Attribut Pattern definiert sind. Die E-Mail wird zusätzlich mit Javascript rudimentär geprüft, wobei dies bei modernen Browsern keine große Rolle mehr spielt. Damit der E-Mail Versand mit PHP statt finden kann, muss das Formular auf einem entsprechenden Server gehostet werden.

Schreibe einen Kommentar

Deine E-Mail Adresse wird später nicht angezeigt.

clear formSubmit