Responsive Webseiten-Vorlage

Menü

Startseite > Formular

Formular: Gestaltungsvorschlag

Die Felder Anrede *, Name *, E-Mail * und Nachricht * sind Pflicht-Felder. Im Feld Website ist keine Eingabe erforderlich.

Formular: technische Hinweise

Die Funktionalität des Formulars müßte gesondert programmiert werden. Jetzt ist das Formular noch funktionslos: das action-Attribut des form-Elements ist leer, die Schaltflächen Vorschau und Senden bewirken also nichts. Wenn Ihr Verarbeitungsziel feststeht, müßten Sie im action-Attribut ein Server-Script (in PHP oder einer anderen server-seitigen Scriptsprache verfaßt) aufrufen.

Der Formular-Entwurf ist also nur ein Gestaltungsvorschlag mit dem Auswahlfeld Anrede und den input-Elementen für Name, E-Mail und Website sowie dem textarea-Element Nachricht. Je nach beabsichtigtem Verwendungszweck müßten Sie ggf. weitere Eingabefelder ergänzen. Das Formular eignet sich (auch ohne Medienabfrage) für breite Bildschirme und schmale Endgeräte gleichermaßen. Das Tabellen-Layout für die Eingabefelder ist vielleicht nicht mehr ganz zeitgemäß, aber genauso wirksam wie ein neumodisches Grid-Layout.

Für die Pflichtfelder sind über das Attribut required die browser-eigenen Prüfungen aktiviert. Wenn alternativ oder zusätzlich Javascript-Prüfungen durchgeführt werden sollen, müßten Sie im form-Element das Attribut onSubmit="return pruefen()" ergänzen. Natürlich sollten die Formular-Eingaben durch anschließende server-seitige Prüfungen validiert werden.

HTML-Quelltext:

<form id="formtab" name="formular" action="..." method="POST"
  autocomplete="off" enctype="multipart/form-data"
  accept-charset="utf-8" onSubmit="return pruefen()">
  ...
</form>
  

CSS-Quelltext:

#formtab ... {...}
  

Tipp: Wenn es Ihr Verarbeitungsziel ist, Formular-Eingaben per Email zu versenden, empfehle ich Ihnen aus Gründen der Sicherheit den Github-PHPMailer. Hierzu gibt's eine Anleitung von Werner Zenk.