![]() |
|
Startseite Was ist ein Kontaktformular? Formular erstellen Spamschutz Screenshots Download Installationsanleitung Systemanforderungen Erweiterung bestellen Lizenzbedingungen Impressum Kontakt Support Board ![]() |
HTML Formular erstellen - so wird es gemacht!Wir stellen Ihnen einen umfangreichen Artikel auf dieser Unterseite zur Verfügung, welche ihnen die Elemente eines Formulars erklärt. Dieser Artikel soll Ihnen dabei behilflich sein, dass Kontaktformular selber zu erweitern, welches sie auf dieser Seite kostenlos herunterladen und für ihre Homepage verwenden können. Inhaltsverzeichniss:
Einleitung
Bestätigt der Nutzer durch einen Klick auf den zum Formular gehörenden Button, dass er seine Angaben abschicken möchte, sendet der Client die eingetragenen Daten an einen Webserver. Der Server wiederum verarbeitet die erhaltenen Angaben je nach Anwendung weiter. Zu beachten ist, dass die Übertragung per „Name“ & „Value“ Paar erfolgt. Die Attribute eines form-Elements legen fest, welche Übertragungsform der Client nutzt, welche Kodierung erfolgt und an welche Adresse die Daten geschickt werde. Da es sich bei „Submit“ um den Standardwert für type handelt, hat es keine Auswirkungen, den Typ wegzulassen. Besonders häufig sind Formulare auf Login-Seiten oder Sozialen Netzwerken zu finden. Das Absenden der eingetragenen Daten ermöglicht das Hypertext Transfer Protocol. Es existieren unterschiedliche Elemente, die ein HTML Formular nutzt, um mit ihrer Hilfe Daten zu erfassen. Wie das HTML Formulare erstellen gelingtUm in HTML ein Formular zu definieren, müssen sämtliche Eingabefelder mit dem Tag <form></form>
umschlossen sein. <form> nimmt verschiedene Attribute auf. Über „action“ ist
es beispielsweise möglich, zu bestimmen, welche Aktion der Submit-Button bei einem Klick ausführt.
In der Regel handelt es sich um eine Datei, beispielsweise ein Script, das die eingetragenen Daten
in dem Formular auswertet. Der Wert „name“ legt einen Namen für das Formular fest. Das Programm nutzt diesen Wert, um zu erkennen, von welchem Formular die gesendeten Daten stammen. So kann beispielsweise eine einzige JSP mehrere Formulare bearbeiten und das HTML Formulare Erstellen ist erleichtert. Mit einem Input-Feld Daten in einem HTML Formular erfassenDas wohl typischste Feld für ein Formular ist das input-Feld. Es legt eine Art kleine Box an, in der der Nutzer die gewünschten Daten einträgt. Das Attribut „type“ bestimmt, um welche Art von Input es sich handelt. „text“ steht für ein normales Eingabefeld, das ein Wort oder einen Satz als Eingabe erwartet. Über seine Attribute lässt sich ein Input-Feld mit text-Typ weiter spezifizieren. Mit dem Merkmal „name“ können JavaScript, PHP-Scripts oder auch CGI-Scripts auf das Formularfeld zugreifen und für weitere Verarbeitungszwecke nutzen. Das Attribut „size“ bestimmt die Anzeigenlänge, die Maßeinheit sind Zeichen. „maxlength“ wiederum bestimmt die interne Feldlänge. Ist diese interne Feldlänge größer als die über size angegebene Feldlänge, so ermöglicht der Browser bei einer längeren Eingabe automatisch das Scrollen. Beispiel:
Ausgabe: Soll ein „input“-Feld bereits einen vorgegebenen Wert haben, der sich jedoch nach Belieben ändern lässt, so ist das Schlüsselwort „value“ sehr nützlich. Es gibt an, mit welchem Wort das Feld bereits beim Anzeigen des Formulars gefüllt ist. Code Beispiel:
Ausgabe: Ein weiterer Typ für ein Eingabefeld ist „search“. Wie sein Name schon vermuten lässt, nimmt es Suchwörter, beispielsweise um einen Eintrag in einem Gästebuch zu finden, auf. Allerdings unterscheidet es sich vom Typ „text“ lediglich geringfügig. Code Beispiel:
Ausgabe:
Unter Umständen, beispielsweise bei einem Formular auf einer Login-Seite, ist es von Nöten, ein Passwort einzutragen. Unbefugte dürfen dieses beim Tippen nicht lesen. Es ist sehr wichtig, dass kleine Sternchen eingegebene Passwörter augenblicklich unleserlich machen. Hierbei hilft der Typ „password“. Platzhalter ersetzen automatisch sämtliche Geheimnummern und Passwörter, Personen im gleichen Raum können die vertrauliche Angabe des Anwenders nicht mitlesen. Code Beispiel:
Ausgabe: Die Typen „tel“ und „url“ nehmen eine Telefonnummer, beziehungsweise eine URL auf und geben sie als solche an den Server weiter. Wenn Sie dieses Formularfeld mit dem Type „tel“ auf den Telefon auswählen, steht die Nummerntastatur zur verfügung. Code Beispiel:
Ausgabe: Bei manchen Formularen ist es wünschenswert, dass sich zusätzliche Informationen in einem Formular „zwischenspeichern“ lassen, damit der Server sie ebenfalls empfängt und weiterverarbeitet. Diese Informationen sind allerdings nicht für den User gedacht, sondern dienen lediglich internen Zwecken. In solchen Fällen ist ein input-Feld mit dem Schlüsselwort „hidden“ sehr hilfreich. Es ist für den Nutzer nicht sichtbar, lässt sich jedoch über „value“ durch den Programmierer mit jedem beliebigen Wert füllen und an den Server zur Weiterverarbeitung weiterreichen. Wenn es etwas mehr Text sein darf – die Textarea für das HTML Formulare nutzen
Code Beispiel:
Ausgabe: Hier jedoch liegt für viele Entwickler ein kleiner Stolperstein! Mit „rows“ und „cols“ lässt sich lediglich die Anzeigengröße der „textarea“ bestimmen, nicht jedoch, wie lang ein eingegebener Text sein darf. Dieser ist theoretisch unbegrenzt und lässt sich über JavaScript begrenzen. Befüllt der User die „textarea“ über ihren sichtbaren Bereich hinaus, stattet der Browser das Textfeld automatisch mit Scrollbalken aus. So kann der Nutzer problemlos durch einen längeren Text scrollen. Das Attribut „warp“ bestimmt, ob bei einem längeren Text ein Umbruch erfolgt. Als mögliche
Werte sind „hard“ oder „soft“ bekannt. Ein harter Zeilenumbruch sorgt dafür,
dass der Browser stets dann einen Zeilenumbruch generiert, sobald der Text die durch das „cols“-Attribut
angegebene Zeichenlänge überschreitet. Wird also „wrap=‘hard‘“
gesetzt, ist „cols“ verpflichtend anzugeben. Wie jedes andere Tag, muss auch „textarea“
korrekt abgeschlossen werden. Der End-Tag </textarea> ist sehr wichtig und nicht
auszulassen. Mit Auswahllisten Werte beim HTML Formulare erstellen vorgebenFormulare beinhalten nicht nur Felder, in denen der Nutzer selbst eine Angabe einträgt. Genauso weit verbreitet sind Auswahllisten. Sie geben dem User eine Menge an Elementen vor, aus denen er den passenden auswählt. Die Auswahlliste beginnt mit dem Tag <select>. Jede Auswahlliste hat einen internen Bezeichnernamen, der durch das Attribut „name“ festgelegt wird. Mit Hilfe des Bezeichnernamens können Server oder Client feststellen, von welcher Auswahlliste der Eintrag stammt und ihn entsprechend weiterverarbeiten. Das Attribut „size“ bestimmt die Größe der Liste, sprich die Anzahl der anzuzeigenden Einträge. Hat die Liste mehr Elemente als in „size“ angegeben, so generiert der Browser automatisch Scrollbalken, mit deren Hilfe der User durch die Liste scrollt. Um eine „Dropdown-Liste“ zu erzeugen, setzt der Entwickler „size“ einfach auf 1 oder lässt das Attribut komplett weg. <option>…</option> legt die einzelnen Elemente der Liste an. Zwischen dem öffnenden und abschließen Tag steht der jeweilige Text des Listeneintrags. Es lassen sich unbegrenzt viele Einträge definieren. Die Breite der Listenanzeige ist über HTML nicht beeinflussbar. Der Browser ermittelt sie automatisch anhand des längsten Eintrages. Es gibt jedoch die Möglichkeit, diese Breite mit Hilfe von CSS zu verändern. Mitunter ist es gewünscht, mehrere Einträge auswählen zu dürfen. Um dies zu ermöglichen, fügt der Entwickler dem select-Tag lediglich ein „multiple“ hinzu. Der Nutzer selbst kann diese Mehrfachauswahl nicht unmittelbar erkennen. Aus diesem Grund sollte das Formular selbst stets darauf hinweisen, dass sich auch mehrere Elemente auswählen lassen. Soll ein Eintrag bereits vorausgewählt sein, so erweitert der Entwickler den jeweiligen option-Tag mit einem „selected“. Code Beispiel:
Ausgabe:
Mit einem Button die Daten in einem HTML Formular abschickenDas Tag <button> legt einen klickbaren Button auf der Seite an. Über das Attribut „name“ gibt der Entwickler dem Button einen Namen. Name und Beschriftung bei einem Button sind jedoch zwei Paar Schuh‘! Ein Name dient lediglich dem Client, zu erkennen, von welchem Button die Aktion ausging. Der Nutzer sieht diesen jedoch nicht. Um einen Button zu beschriften, schreibt der Entwickler den gewünschte Text einfach zwischen das öffnende und schließende Tag. Folgende Varianten liefern nicht dasselbe Ergebnis: Es werden drei verschiedene Arten von Buttons unterstützt, die das jeweilige „type“-Attribut bestimmt. Sie geben an, welches Verhalten der Button bei einem Mausklick aufweist. Der default-Wert für das Attribut „type“ ist im Übrigen submit. Fehlt das type-Attribut oder wird ein unbekannter Wert genutzt, wird automatisch type=“submit“ gesetzt. Der Typ „button“ ist hilfreich, wenn der Client Berechnungen oder Bearbeitungen
vornimmt. Es findet kein Absenden von Formularen statt. Stattdessen lassen sich die eingetragenen
Daten vom Client beispielsweise mit JavaScript weiterverarbeiten und ein Ergebnis ausgeben.
Ausgabe:
Diese Codezeile legt einen Button mit der Beschriftung „Berechnen“ an. Die ID in seiner Definition ist eindeutig und ermöglicht, dass JavaScript anschließend auf die Daten zugreifen kann. Der Type submit sendet das Formular. Es handelt sich hierbei, wie bereits kurz angesprochen, um den default-Wert. Ist „type“ nicht explizit gesetzt, fügt der Compiler automatisch den Typ „submit“ ein. Eine weitere Möglichkeit für „type“ stellt das Schlüsselwort „reset“ dar. Wie sein Name schon vermuten lässt, sorgt es beim Klick auf den Button dafür, dass das Formular die eingetragenen Daten zurücksetzt. Copyright © 2006- 2023 by KontaktFormular-Script.de
|