Formularbearbeitung

Webformulare sind einer der Hauptinteraktionspunkte zwischen einem Benutzer und einer Website oder Anwendung. Formulare ermöglichen Benutzern die Eingabe von Daten, die in der Regel zur Verarbeitung und Speicherung an einen Webserver gesendet werden oder clientseitig verwendet werden, um die Oberfläche in irgendeiner Weise sofort zu aktualisieren (z ein anderes Element in eine Liste aufnehmen oder eine UI-Funktion ein- oder ausblenden). Der HTML-Code eines Webformulars besteht aus einem oder mehreren Formularsteuerelementen (manchmal auch als Widgets bezeichnet) sowie einigen zusätzlichen Elementen zur Strukturierung des Gesamtformulars – sie werden oft als HTML-Formulare bezeichnet.

Ein Formular kann über den Namen oder eine ID angesprochen werden.

<html>
    <body>
        <form name="formular">
            <input type="text" name="feld1" value="Feld 1">
            <input type="text" name="feld2" value="Feld 2">

        </form>
    </body>
</html>

Zugriff auf das Formular ist über document.forms möglich. Entweder über den index oder über den Formularnamen.

alert(document.forms[0].elements[1].value);
alert(document.forms.formular.elements.feld2.value);

Die Steuerelemente können ein- oder mehrzeilige Textfelder, Dropdown-Felder, Schaltflächen, Kontrollkästchen oder Optionsfelder sein und werden meistens mit dem <input>-Element erstellt, obwohl es auch einige andere Elemente gibt, die es zu lernen gilt. Formularsteuerelemente können auch so programmiert werden, dass sie bestimmte Formate oder einzugebende Werte erzwingen (Formularvalidierung) und mit Textetiketten kombiniert werden, die ihren Zweck sowohl für sehende als auch für blinde Benutzer beschreiben.

Ok, lassen Sie uns versuchen, den HTML-Code für unser Formular zu erstellen. Wir verwenden die folgenden HTML-Elemente: <form>, <label>, <input>, <textarea> und <button>. Bevor Sie fortfahren, erstellen Sie eine lokale Kopie unserer einfachen HTML-Vorlage – hier geben Sie Ihr Formular-HTML ein. Das <form>-Element Alle Formulare beginnen mit einem <form>-Element, wie folgt:

<form action="/my-handling-form-page" method="post">

</form>

Dieses Element definiert formal ein Formular. Es ist ein Container-Element wie ein <section>- oder <footer>-Element, aber speziell zum Enthalten von Formularen; Es unterstützt auch einige spezifische Attribute, um das Verhalten des Formulars zu konfigurieren. Alle seine Attribute sind optional, aber es ist üblich, immer mindestens die Aktions- und Methodenattribute festzulegen: Das Aktionsattribut definiert den Ort (URL), an den die gesammelten Daten des Formulars gesendet werden sollen, wenn es gesendet wird. Das method-Attribut definiert, mit welcher HTTP-Methode die Daten gesendet werden sollen (normalerweise get oder post).

Hinweis: Wir werden uns später in unserem Artikel zum Senden von Formulardaten ansehen, wie diese Attribute funktionieren.

Fügen Sie vorerst das obige <form>-Element in Ihren HTML-<body> ein. Die Elemente <label>, <input> und <textarea> Unser Kontaktformular ist nicht komplex: Der Teil der Dateneingabe enthält drei Textfelder mit jeweils einem entsprechenden <label>: Das Eingabefeld für den Namen ist ein einzeiliges Textfeld. Das Eingabefeld für die E-Mail ist eine Eingabe vom Typ E-Mail: ein einzeiliges Textfeld, das nur E-Mail-Adressen akzeptiert. Das Eingabefeld für die Nachricht ist ein <textarea>; ein mehrzeiliges Textfeld. In Bezug auf HTML-Code benötigen wir etwa Folgendes, um diese Formular-Widgets zu implementieren:

<form action="/my-handling-form-page" method="post">
 <ul>
  <li>
    <label for="name">Name:</label>
    <input type="text" id="name" name="user_name">
  </li>
  <li>
    <label for="mail">E-mail:</label>
    <input type="email" id="mail" name="user_email">
  </li>
  <li>
    <label for="msg">Message:</label>
    <textarea id="msg" name="user_message"></textarea>
  </li>
 </ul>
</form>

Die <li>-Elemente dienen dazu, unseren Code bequem zu strukturieren und das Styling zu erleichtern (siehe später im Artikel). Aus Gründen der Benutzerfreundlichkeit und Zugänglichkeit fügen wir jedem Formularsteuerelement ein explizites Label hinzu. Beachten Sie die Verwendung des for-Attributs für alle <label>-Elemente, deren Wert die ID des Formularsteuerelements ist, mit dem es verknüpft ist – so verknüpfen Sie ein Formularsteuerelement mit seinem Label. Dies hat einen großen Vorteil – es verknüpft das Label mit dem Formularsteuerelement, sodass Benutzer von Maus-, Trackpad- und Touch-Geräten auf das Label klicken können, um das entsprechende Steuerelement zu aktivieren, und es bietet auch einen zugänglichen Namen, den Bildschirmlesegeräte vorlesen können an ihre Nutzer. Weitere Informationen zu Formularbeschriftungen finden Sie unter So strukturieren Sie ein Webformular. Auf dem <input>-Element ist das wichtigste Attribut das type-Attribut. Dieses Attribut ist äußerst wichtig, da es die Darstellung und das Verhalten des <input>-Elements definiert. Weitere Informationen hierzu finden Sie später im Artikel Grundlegende systemeigene Formularsteuerelemente.

In unserem einfachen Beispiel verwenden wir den Wert <input/text> für die erste Eingabe — den Standardwert für dieses Attribut. Es stellt ein einfaches einzeiliges Textfeld dar, das jede Art von Texteingabe akzeptiert. Für die zweite Eingabe verwenden wir den Wert <input/email>, der ein einzeiliges Textfeld definiert, das nur eine wohlgeformte E-Mail-Adresse akzeptiert. Dies verwandelt ein einfaches Textfeld in eine Art „intelligentes“ Feld, das einige Validierungsprüfungen der vom Benutzer eingegebenen Daten durchführt. Es bewirkt auch, dass auf Geräten mit dynamischen Tastaturen, wie Smartphones, ein geeigneteres Tastaturlayout für die Eingabe von E-Mail-Adressen (z. B. standardmäßig mit einem @-Symbol) angezeigt wird. Weitere Informationen zur Formularvalidierung finden Sie später im Artikel zur clientseitigen Formularvalidierung.

Beachten Sie zu guter Letzt die Syntax von <input> vs. <textarea></textarea>. Dies ist eine der Besonderheiten von HTML. Das <input>-Tag ist ein leeres Element, was bedeutet, dass es kein schließendes Tag benötigt. <textarea> ist kein leeres Element, d. h. es sollte mit dem richtigen End-Tag abgeschlossen werden. Dies hat Auswirkungen auf eine bestimmte Funktion von Formularen: die Art und Weise, wie Sie den Standardwert definieren. Um den Standardwert eines <input>-Elements zu definieren, müssen Sie das value-Attribut wie folgt verwenden

<input type="text" value="standardmäßig wird dieses Element mit diesem Text gefüllt">

Das <button>-Element Das Markup für unser Formular ist fast abgeschlossen; Wir müssen nur eine Schaltfläche hinzufügen, damit der Benutzer seine Daten senden oder „absenden“ kann, sobald er das Formular ausgefüllt hat. Dies geschieht mit dem <button>-Element; Fügen Sie direkt über dem schließenden Tag </ul> Folgendes hinzu:

<li class="button">
  <button type="submit">Send your message</button>
</li>

Das Element <button> akzeptiert auch ein type-Attribut – dieses akzeptiert einen von drei Werten: Submit, Reset oder Button. Ein Klick auf eine Senden-Schaltfläche (der Standardwert) sendet die Daten des Formulars an die Webseite, die durch das action-Attribut des <form>-Elements definiert ist. Ein Klick auf eine Reset-Schaltfläche setzt alle Formular-Widgets sofort auf ihren Standardwert zurück. Aus UX-Sicht gilt dies als schlechte Praxis, daher sollten Sie die Verwendung dieser Art von Schaltflächen vermeiden, es sei denn, Sie haben wirklich einen guten Grund, einen einzufügen. Ein Klick auf eine Schaltfläche bewirkt… nichts! Das klingt albern, aber es ist erstaunlich nützlich, um benutzerdefinierte Schaltflächen zu erstellen – Sie können die von Ihnen gewählte Funktionalität mit JavaScript definieren.

Hinweis: Sie können auch das Element <input> mit dem entsprechenden Typ verwenden, um eine Schaltfläche zu erzeugen, zum Beispiel <input type=“submit“>. Der Hauptvorteil des <button>-Elements besteht darin, dass das <input>-Element nur reinen Text in seinem Label zulässt, während das <button>-Element vollständigen HTML-Inhalt zulässt, was komplexere, kreativere Schaltflächeninhalte ermöglicht.

Formulardaten an Ihren Webserver senden Der letzte und vielleicht schwierigste Teil besteht darin, Formulardaten auf der Serverseite zu verarbeiten. Das Element <form> definiert, wohin und wie die Daten dank der Aktions- und Methodenattribute gesendet werden. Wir geben jedem Formularsteuerelement einen Namen. Die Namen sind sowohl client- als auch serverseitig wichtig; Sie teilen dem Browser mit, welchen Namen er jedem Datenteil geben soll, und auf der Serverseite lassen sie den Server jedes Datenteil mit seinem Namen behandeln. Die Formulardaten werden als Name/Wert-Paare an den Server gesendet. Um die Daten in einem Formular zu benennen, müssen Sie das name-Attribut in jedem Formular-Widget verwenden, das ein bestimmtes Datenelement sammelt. Schauen wir uns noch einmal einen Teil unseres Formularcodes an:

<form action="/my-handling-form-page" method="post">
 <ul>
  <li>
    <label for="name">Name:</label>
    <input type="text" id="name" name="user_name" />
  </li>
  <li>
    <label for="mail">E-mail:</label>
    <input type="email" id="mail" name="user_email" />
  </li>
  <li>
    <label for="msg">Message:</label>
    <textarea id="msg" name="user_message"></textarea>
  </li>

  ...

In unserem Beispiel sendet das Formular 3 Datenelemente namens „user_name“, „user_email“ und „user_message“. Diese Daten werden mit der HTTP-POST-Methode an die URL „/my-handling-form-page“ gesendet. Auf der Serverseite erhält das Skript unter der URL „/my-handling-form-page“ die Daten als Liste von 3 Schlüssel/Wert-Elementen, die in der HTTP-Anfrage enthalten sind. Wie dieses Skript mit diesen Daten umgeht, liegt bei Ihnen. Jede serverseitige Sprache (PHP, Python, Ruby, Java, C# usw.) hat ihren eigenen Mechanismus zur Verarbeitung von Formulardaten. Es würde den Rahmen dieses Leitfadens sprengen, sich eingehend mit diesem Thema zu befassen, aber wenn Sie mehr wissen möchten, haben wir später einige Beispiele in unserem Artikel zum Senden von Formulardaten bereitgestellt.

Bitte beachten: die Datei hat eine css Konfigruation:

form {
  /* Center the form on the page */
  margin: 0 auto;
  width: 500px;
  /* Form outline */
  padding: 1em;
  border: 1px solid #CCC;
  border-radius: 1em;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

form li + li {
  margin-top: 1em;
}

label {
  /* Uniform size & alignment */
  display: inline-block;
  width: 90px;
  text-align: right;
}

input,
textarea {
  /* To make sure that all text fields have the same font settings
     By default, textareas have a monospace font */
  font: 1em sans-serif;

  /* Uniform text field size */
  width: 300px;
  box-sizing: border-box;

  /* Match form field borders */
  border: 1px solid #999;
}

input:focus,
textarea:focus {
  /* Additional highlight for focused elements */
  border-color: #000;
}

textarea {
  /* Align multiline text fields with their labels */
  vertical-align: top;

  /* Provide space to type some text */
  height: 5em;
}

.button {
  /* Align buttons with the text fields */
  padding-left: 90px; /* same size as the label elements */
}

button {
  /* This extra margin represent roughly the same space as the space
     between the labels and their text fields */
  margin-left: .5em;
}

Formulardaten an Ihren Webserver senden Der letzte und vielleicht schwierigste Teil besteht darin, Formulardaten auf der Serverseite zu verarbeiten. Das Element <form> definiert, wohin und wie die Daten dank der Aktions- und Methodenattribute gesendet werden. Wir geben jedem Formularsteuerelement einen Namen. Die Namen sind sowohl client- als auch serverseitig wichtig; Sie teilen dem Browser mit, welchen Namen er jedem Datenteil geben soll, und auf der Serverseite lassen sie den Server jedes Datenteil mit seinem Namen behandeln. Die Formulardaten werden als Name/Wert-Paare an den Server gesendet. Um die Daten in einem Formular zu benennen, müssen Sie das name-Attribut in jedem Formular-Widget verwenden, das ein bestimmtes Datenelement sammelt. Schauen wir uns noch einmal einen Teil unseres Formularcodes an:

<form action="/my-handling-form-page" method="post">
 <ul>
  <li>
    <label for="name">Name:</label>
    <input type="text" id="name" name="user_name" />
  </li>
  <li>
    <label for="mail">E-mail:</label>
    <input type="email" id="mail" name="user_email" />
  </li>
  <li>
    <label for="msg">Message:</label>
    <textarea id="msg" name="user_message"></textarea>
  </li>

  ...

Weiter