Form (HTML)

A Web-Formular, Web-Formular oder HTML -Form auf einen Website Ermöglicht einem Benutzer, Daten einzugeben, die an a gesendet werden Server zum Bearbeiten. Formen können ähneln Papier oder Datenbank Formulare, weil Webbenutzer die Formulare mithilfe von Kontrollkästchen ausfüllen. Radio Knöpfe, oder Textfelder. Zum Beispiel können Formulare zum Eintritt verwendet werden Versand oder Kreditkarte Daten, um ein Produkt zu bestellen, oder können verwendet werden, um Suchergebnisse von a abzurufen Suchmaschine.

Beschreibung

test
Probenformular. Die Form ist in einem eingeschlossen HTML -Tabelle für visuelles Layout.

Formulare sind in der eingeschlossen Html

Element. Dieses Element gibt das an Kommunikationsendpunkt Die in das Formular eingegebenen Daten sollten an und an eingereicht werden Methode die Daten übermitteln, ERHALTEN oder POST.

Elemente

Formulare können aus Standard bestehen grafische Benutzeroberfläche Elemente:

  • - eine einfache Textfeld Dies ermöglicht die Eingabe einer einzelnen Textzeile.
  • - Eine Art von Dies erfordert eine teilweise validierte E -Mail -Adresse
  • - Eine Art von Das erfordert eine Zahl
  • - ähnlich zu , es wird für Sicherheitszwecke verwendet, in denen die eingegebenen Zeichen unsichtbar sind oder durch Symbole wie * ersetzt werden
  • - a Radio knopf
  • - a Datei auswählen Steuerung für das Hochladen einer Datei
  • - a Reset-Knopf Wenn der Browser aktiviert wird, soll er die Werte auf seine Anfangswerte wiederherstellen.
  • - a Taste Dies sagt dem Browser, dass er Maßnahmen im Formular ergreifen soll (normalerweise um ihn an einen Server zu senden)
  • - ähnlich wie das Eingabefeld außer a Ermöglicht die Anzeige und Eingabe mehrerer Datenzeilen
  • - a Dropdown-Liste Dadurch wird eine Liste von Elementen angezeigt, aus denen ein Benutzer auswählen kann

Das Beispielbild rechts zeigt die meisten dieser Elemente:

  • Ein Textfeld, in dem nach Ihrem Namen gefragt wird
  • Ein Paar Optionsknöpfe, in denen Sie aufgefordert werden, Ihren Sex auszuwählen
  • a Das Feld auswählen Geben Sie eine Liste von Augenfarben zur Auswahl
  • Ein Paar Kontrollkästchen zum Klicken, wenn sie sich auf Sie bewerben
  • Ein Textbereich, um Ihre sportlichen Fähigkeiten zu beschreiben
  • Eine Schaltfläche Senden, um es an den Server zu senden

Diese Grundelemente bieten am häufigsten grafische Benutzeroberfläche (GUI) Elemente, aber nicht alle. Zum Beispiel gibt es keine Äquivalente zu a Baumsicht oder Rasteransicht.

Eine Gitteransicht kann jedoch mit einem Standard -HTML nachgeahmt werden Tisch mit jeder Zelle, die ein Texteingangselement enthält. Eine Baumansicht könnte auch durch verschachtelte Tische oder mehr nachgeahmt werden semantisch Angemessen, verschachtelt Listen. In beiden Fällen ist ein serverseitiger Prozess für die Verarbeitung der Informationen verantwortlich, während JavaScript die Benutzer-Interaktion übernimmt. Implementierungen dieser Schnittstellenelemente sind durch verfügbar JavaScript -Bibliotheken wie zum Beispiel JQuery.

HTML 4 führte die vor Tag, das eine Bildunterschrift in einer Benutzeroberfläche darstellen soll und einer bestimmten Formregelung zugeordnet werden kann, indem die Angabe des Ich würde Attribut der Kontrolle im Etikett Tag des Etiketts zum Attribut.[1] Auf diese Weise können Beschriftungen bei ihren Elementen bleiben, wenn ein Fenster geändert wird, und damit mehr desktopähnliche Funktionalität (z. B. Klicken auf ein Optionsfeld oder das Beschriftung des Kontrollkästchens aktiviert das zugehörige Eingangselement).

HTML 5 führt eine Reihe von Eingabe -Tags ein, die durch andere Schnittstellenelemente dargestellt werden können. Einige basieren auf Texteingangsfeldern und sollen bestimmte gemeinsame Daten eingeben und validieren. Diese beinhalten E -Mail -Adressen eingeben, Für Telefonnummern, für numerische Werte. Es gibt zusätzliche Attribute, um die erforderlichen Felder anzugeben, Felder, die eine Tastatur haben sollten Fokus Wenn die Webseite mit dem Formular geladen wird, und Platzhaltertext, der in dem Feld angezeigt wird, aber keine Benutzereingabe ist (z. B. der in vielen Sucheingabefeldern angezeigte Text -Suchtext, bevor ein Suchbegriff eingegeben wird). Diese Aufgaben wurden früher mit behandelt JavaScript, aber so häufig geworden, dass die Unterstützung für sie dem Standard aufgenommen wurde. Das Der Eingabetyp zeigt einen Kalender an, aus dem der Benutzer einen Datums- oder Datumsbereich auswählen kann.[2][3] Und die Farbe Eingabetyp kann als Eingabetxt dargestellt werden, der einfach den eingegebenen Wert überprüft, ist eine korrekte hexadezimale Darstellung einer Farbe gemäß der Spezifikation.[4] oder ein Color Picker -Widget (letzteres ist die in den meisten Browsern verwendete Lösung, die dieses Attribut unterstützen).

Vorlage

Wenn Daten, die in HTML -Formulare eingegeben wurden Http Meldung anfordern ERHALTEN oder POST. Historisch gesehen an Email Der Transport wurde ebenfalls genutzt.[5] Der Standard MIME -Typ (Internetmedientyp), Anwendung/X-WWW-Form-Urlencodedbasiert auf einer sehr frühen Version des allgemeinen URI prozentualer Kodierung Regeln mit einer Reihe von Änderungen wie z. Neue Zeile Normalisierung und Ersetzen von Räumen durch "+" Anstatt von "%20"Eine andere mögliche Codierung, Internetmedientyp Mehrfachfrist/Formdaten, ist auch verfügbar und ist für postbasierte Dateieinreichungen üblich.

Verwendung bei Programmiersprachen

Formulare werden normalerweise mit Programmen kombiniert, die in verschiedenen Verfahren geschrieben wurden Programmiersprache erlauben Entwickler Dynamik erstellen Websites. Die beliebtesten Sprachen sind sowohl clientseitige als auch/oder serverseitige Sprachen.

Obwohl jede Programmiersprache auf dem Server verwendet werden kann, um die Daten eines Formulars zu verarbeiten, sind die am häufigsten verwendeten Sprachen Skriptsprachen, die tendenziell stärker haben Saite Handhabungsfunktionalität als Programmiersprachen wie C und eine automatische Speicherverwaltung, die zur Verhütung hilft Pufferüberlauf Anschläge.

Client-Seite

Das de facto Client-Seite Scripting Sprache für Websites ist JavaScript. Verwenden von JavaScript auf der Dokumentobjektmodell (DOM) führt zur Methode von Dynamisches HTML Dies ermöglicht die dynamische Erstellung und Änderung einer Webseite im Browser.

Während die in Verbindung mit Formularen verwendeten kundenseitigen Sprachen begrenzt sind, können sie häufig dazu dienen, vorzugehen.Validierung der Formulardaten und/oder die Formulardaten zum Senden an ein serverseitiges Programm. Diese Verwendung wird jedoch durch ersetzt durch HTML5neu Eingang Feldtypen und erforderlich Attribut.

Serverseitige Ausführung

Der serverseitige Code kann eine große Auswahl an Aufgaben erledigen, um dynamische Websites zu erstellen, die aus technischen oder sicherheitsrelevanten Gründen den clientseitigen Code nicht können-von-von Authentifizierung a Anmeldung, zum Abrufen und Speichern von Daten in a Datenbank, zu Rechtschreibprüfung, zum Senden Email. Ein wesentlicher Vorteil für die serverseitige gegenüber der clientseitigen Ausführung ist die Konzentration der Funktionalität auf den Server, anstatt sich auf andere zu verlassen Internetbrowser Verschiedene Funktionen in konsistenten Implementieren, standardisiert Wege. Darüber hinaus führt die Verarbeitungsformulare auf einem Server häufig zu einer erhöhten Sicherheit, wenn die serverseitige Ausführung nicht den vom Client gelieferten Daten vertrauen soll, und enthält Techniken wie HTML sanitization. Ein Nachteil des Server -Seitencodes ist Skalierbarkeit- Die Server -Seitenverarbeitung für alle Benutzer tritt auf dem Server auf, während die Client -Seitenverarbeitung auf einzelnen Client -Computern stattfindet.

Registrierungsformular des PHP-basierten E-Commerce-Web-Shop-Software-Zencart

Interpretierte Sprachen

Manche der interpretierte Sprachen häufig verwendet, um interaktive Formen in der Webentwicklung zu entwerfen, sind häufig Php, Python, Rubin, Perl, JSP, Adobe Coldfusion und einige der häufig verwendeten kompilierten Sprachen sind Java und C# mit ASP.NET.

Php

Php ist eine sehr häufige Sprache, die für die serverseitige "Programmierung" verwendet wird, und ist eine der wenigen Sprachen, die speziell für speziell erstellt wurden Web Programmierung.[6][7]

Um PHP mit einem HTML -Formular zu verwenden, wird die URL des PHP -Skripts in der angegeben Aktion Attribut des Formular -Tags. Die Ziel -PHP $_POST oder $_GET Variablen abhängig vom Wert der Methode Attribut in der Form verwendet. Hier ist ein grundlegendes Formular -Handler -PHP -Skript, das den Inhalt der anzeigt Vorname Eingabefeld auf der Seite:

Form.html

 <html Lang="en"> <Kopf>  <Titel>BildenTitel> Kopf> <Karosserie>  <bilden Aktion="Form_handler.php">  <p> <Etikett>Name: <Eingang Name="Vorname" /> </Etikett> </p>  <p> <Taste Typ="einreichen">EinreichenTaste> </p>  bilden> Karosserie> html> 

Form_handler.php

 <html Lang="en"> <Kopf>  <Titel>AusgabeTitel> Kopf> <Karosserie>    // Dadurch wird das, was der Benutzer in die Seite "Form.html" eingegeben hat, gedruckt.  $ FirstName = filter_input(Input_get, "Vorname", Filter_sanitize_string);  Echo "Hallo, $ {Vorname}! ";  ?> Karosserie> html> 

Der obige Beispielcode verwendet PHPs filter_input() Funktionieren Sie die Eingabe des Benutzers, bevor Sie ihn auf die Seite einfügen. Einfach drucken (wiederholt) Benutzereingabe in den Browser, ohne ihn zuerst zu überprüfen in die Vorname Das Feld würde der Browser das Skript auf dem ausführen Form_handler.php Seite, als ob es vom Entwickler codiert worden wäre; Auf diese Weise könnte böswilliger Code ausgeführt werden. filter_input() wurde in PHP 5.2 eingeführt. Benutzer früherer PHP -Versionen könnten die verwenden htmlspecialchars() Funktion, oder Reguläre Ausdrücke Um den Benutzereingang zu sanieren, bevor Sie etwas damit tun.

Perl Programmiersprache

Perl ist eine andere Sprache, die oft für verwendet wird Web Entwicklung. Perlskripte werden traditionell als verwendet Gemeinsame Gateway -Schnittstelle Anwendungen (CGIs). Tatsächlich ist Perl eine häufige Art, CGIs zu schreiben, dass die beiden oft verwirrt sind. CGIs kann in anderen Sprachen als Perl geschrieben werden (Kompatibilität mit mehreren Sprachen ist ein Designziel des CGI -Protokolls) und es gibt andere Möglichkeiten, um Perl -Skripte mit einem zu interoperieren Webserver als Verwendung von CGI (wie z. Fastcgi, Plack oder Apache's mod_perl).

Perl CGIS war einst eine sehr häufige Art zu schreiben Web Applikationen. Viele Webhosts unterstützen heute jedoch nur PHP, und Entwickler von Webanwendungen suchen häufig mit ihnen Kompatibilität.

Ein moderner Perl 5 -CGI, der das CGI -Modul mit einer ähnlichen Form wie oben genannt aussieht:

Form_handler.pl

#!/usr/bin/env Perl verwenden strikt; verwenden CGI QW (: Standard); mein $ name = Param("Vorname"); drucken Header; drucken html(  Karosserie(  p("Hallo, $ Name!"),  ), ); 

Form-zu-E-Mail-Skripte

Zu den einfachsten und am häufigsten benötigten Arten von serverseitigem Skript gehört das, was einfach den Inhalt eines eingereichten Formulars per E-Mail senden. Diese Art von Drehbuch wird häufig von genutzt SpammerUnd viele der beliebtesten Form-zu-E-Mail-Skripte sind jedoch anfällig für Entführungen, um Spam-E-Mails zu senden. Eines der beliebtesten Skripte dieses Typs war "Formmail.pl" hergestellt von Matts Drehbucharchiv. Heutzutage wird dieses Skript aufgrund mangelnder Aktualisierungen, Sicherheitsbedenken und der Schwierigkeit der Konfiguration nicht mehr weit verbreitet.

Bilden Bauherren

Einige Unternehmen bieten Formulare an als Hosted Service. Normalerweise geben diese Unternehmen eine Art visuelles Editor, Berichterstattungsinstrumente und Infrastrukturen zum Erstellen und Hosten der Formulare an, die in Webseiten eingebettet werden können.[8] Web-Hosting Unternehmen bieten ihren Kunden Vorlagen als Add-On-Service. Andere Formular -Hosting -Dienste bieten kostenlose Kontaktformulare an, die ein Benutzer auf einer eigenen Website installieren kann, indem sie den Code des Dienstes in die HTML der Website einfügen.

Geschichte

HTML -Formulare wurden zuerst von der implementiert Viola Browser.[9]

Siehe auch

Verweise

  1. ^ "HTML/Elements/Label". W3.org Wiki.
  2. ^ Satrom, Brandon (November 2011). "Bessere Webformen mit HTML5 -Formen". MSDN Magazine. Microsoft. Abgerufen 2014-02-20.
  3. ^ "Formen - HTML5". W3.org. W3c. Abgerufen 2014-02-20.
  4. ^ "Eingangstyp = Farbe-Farb-Well-Steuerung". W3.org. W3c. Abgerufen 2014-10-31.
  5. ^ Benutzer-Agent-Support für E-Mail-basiert Html Formulareingabe unter Verwendung eines "Mailto" URL Als Formaktion wurde in RFC 1867 Abschnitt 5.6 während der HTML 3.2 -Ära vorgeschlagen. Verschiedene Webbrowser haben es implementiert, indem sie ein separates E -Mail -Programm unter Verwendung ihres eigenen rudimentären Programms aufrufen SMTP Fähigkeiten oder durch Werden Internet -Suiten Durch die Implementierung des gesamten E -Mail -Clients. Obwohl es manchmal unzuverlässig ist, war es kurz beliebt, um Formaten zu übertragen, ohne einen Webserver einzubeziehen oder CGI Skripte.
  6. ^ "PHP: Hypertext -Präprozessor".
  7. ^ "Encyclopedia Web".
  8. ^ Garofalo, Josh. "Intro in Online -Formulare und Formbauer". Blitzen Blog.
  9. ^ "Violawww". webdesignmuseum.org. Webdesign Museum. Abgerufen 17. Februar 2022.

Externe Links