Inhalt
1. Los geht’s!
In der heutigen Welt des Internets spielen Formulare eine entscheidende Rolle in der Kommunikation und Interaktion zwischen Benutzern und Webseiten. Sie ermöglichen es Benutzern, Informationen einzugeben und an den Webserver zu senden, zum Beispiel bei der Anmeldung, Registrierung, Bestellung von Produkten oder dem Senden von Feedback. In diesem Artikel werden wir Schritt für Schritt erklären, wie man ein HTML-Formular erstellt und gestaltet.
Mit Formularen kannst du beispielsweise folgende Dinge umsetzen:
- Benutzerregistrierung: Bei fast jeder Website, die eine Form der Benutzeranmeldung erfordert, werden HTML-Formulare verwendet, um Informationen wie Benutzernamen, Passwörter, E-Mail-Adressen usw. zu sammeln.
- Feedback und Kontaktformulare: Webformulare werden oft verwendet, um Feedback von Benutzern zu sammeln oder ihnen die Möglichkeit zu geben, Kontakt mit dem Seitenbetreiber oder Support-Team aufzunehmen.
- Suchfelder: Die meisten Websites haben eine Suchfunktion, und diese wird normalerweise mithilfe eines HTML-Formulars implementiert.
- Online-Shopping und Zahlungen: HTML-Formulare werden zur Erfassung von Versand- und Zahlungsinformationen in Online-Shops verwendet.
- Datenübermittlung und -verarbeitung: HTML-Formulare ermöglichen die Übermittlung von Daten an einen Server, wo sie verarbeitet und für verschiedene Zwecke gespeichert werden können, beispielsweise zur Datenanalyse, zur Benutzerprofilierung, zur Erstellung personalisierter Empfehlungen usw.
- Inhaltsverwaltungssysteme: In CMS wie WordPress oder Joomla werden HTML-Formulare verwendet, um es Benutzern zu ermöglichen, Inhalte zu erstellen, zu bearbeiten und zu löschen.
2. Grundlagen von HTML-Formularen
HTML-Formulare ermöglichen es Benutzern, Daten auf einer Webseite einzugeben und an den Webserver zu senden. Um ein besseres Verständnis der Grundlagen von HTML-Formularen zu erhalten, betrachten wir die wichtigsten Elemente und Attribute.
2.1. Das <form>-Element (HTML form)
Das <form>-Element ist das grundlegende Element, das als Container für alle Eingabefelder, Schaltflächen und andere interaktive Elemente dient, die in einem Formular verwendet werden. Um ein Formular in HTML zu erstellen, beginnen Sie mit dem Öffnen des <form>-Tags und schließen Sie es am Ende des Formularbereichs.
Beispiel:
<form> <!-- Eingabefelder und Schaltflächen hier einfügen --> </form>
2.2. Die wichtigsten Formular-Attribute
Formulare in hyper text markup language verwenden verschiedene Attribute, um das Verhalten und die Funktion des Formulars zu steuern. Die wichtigsten Attribute sind:
2.2.1. action
Das action-Attribut gibt die URL an, an die die Formulardaten gesendet werden sollen, wenn der Benutzer das Formular absendet. Die URL kann relativ oder absolut sein, je nach Bedarf. Wenn das action-Attribut weggelassen wird, werden die Daten an die URL der aktuellen Seite gesendet.
Beispiel:
<form action="/submit-form.php"> <!-- Eingabefelder und Schaltflächen hier einfügen --> </form>
2.2.2. method (HTML form method)
Das method-Attribut legt die HTTP-Methode fest, die zum Senden der Daten verwendet wird. Es gibt zwei Hauptmethoden: GET und POST. GET sendet die Daten als Teil der URL, während POST die Daten im Anfragekörper sendet. Im Allgemeinen wird POST für Formulare empfohlen, die sensible Daten enthalten oder die Datenänderungen auf dem Server verursachen.
Beispiel:
<form action="/submit-form.php" method="POST"> <!-- Eingabefelder und Schaltflächen hier einfügen --> </form>
2.2.3. enctype
Das enctype-Attribut spezifiziert, wie die Formulardaten kodiert werden, wenn sie an den Server gesendet werden. In den meisten Fällen ist es nicht erforderlich, dieses Attribut anzugeben, da der Browser die Daten automatisch als „application/x-www-form-urlencoded“ kodiert. Wenn Ihr Formular jedoch Dateiuploads erlauben soll, müssen Sie „multipart/form-data“ als Wert für das enctype-Attribut angeben.
Beispiel für ein Formular mit Dateiupload:
<form action="/upload-file.php" method="POST" enctype="multipart/form-data"> <!-- Eingabefelder und Schaltflächen hier einfügen --> </form>
Indem Sie diese Grundlagen von HTML-Formularen verstehen und die entsprechenden Elemente und Attribute verwenden, können Sie effektive und funktionale Formulare für Ihre Webseiten erstellen.
3. Verschiedene Eingabefelder
HTML bietet eine Vielzahl von Eingabefeldtypen, um unterschiedliche Arten von Informationen zu erfassen. In diesem Kapitel werden wir uns ausführlicher mit den verschiedenen Eingabefeldern beschäftigen.
3.1. Textfelder (HTML input Element)
Textfelder (<input type="text">) sind einfache Eingabefelder, die verwendet werden, um einzelne Textzeilen wie Namen, E-Mail-Adressen oder Telefonnummern zu erfassen. Sie können das placeholder-Attribut verwenden, um einen Beispieltext innerhalb des Felds anzuzeigen, der verschwindet, sobald der Benutzer mit der Eingabe beginnt.
Beispiel:
<label for="name">Name:</label> <input type="text" id="name" name="name" placeholder="Geben Sie Ihren Namen ein">
3.2. Passwortfelder (HTML input Passwort-Element)
Passwortfelder (<input type="password">) dienen zur Eingabe von Passwörtern und sorgen dafür, dass der eingegebene Text verborgen ist. Wie bei Textfeldern können Sie das placeholder-Attribut verwenden, um einen Beispieltext anzuzeigen.
Beispiel:
<label for="password">Passwort:</label> <input type="password" id="password" name="password" placeholder="Geben Sie Ihr Passwort ein">
3.3. Radio-Buttons (HTML Radio Button)
Radio-Buttons (<input type="radio">) ermöglichen die Auswahl einer Option aus einer Gruppe von Optionen. Jeder Radio-Button sollte das gleiche name-Attribut haben, um sicherzustellen, dass nur eine Option aus der Gruppe ausgewählt werden kann.
Beispiel:
<label for="gender-male">Männlich</label> <input type="radio" id="gender-male" name="gender" value="male"> <label for="gender-female">Weiblich</label> <input type="radio" id="gender-female" name="gender" value="female">
3.4. Checkboxen (HTML Checkbox)
Checkboxen (<input type="checkbox">) dienen zur Auswahl mehrerer Optionen aus einer Gruppe. Jede Checkbox kann unabhängig von den anderen ausgewählt oder deaktiviert werden.
Beispiel:
<label for="option1">Option 1</label> <input type="checkbox" id="option1" name="option1" value="option1"> <label for="option2">Option 2</label> <input type="checkbox" id="option2" name="option2" value="option2">
3.5. Dropdown-Menüs
Dropdown-Menüs (<select>) werden verwendet, um eine Liste von Optionen zu erstellen, aus der der Benutzer wählen kann. Verwenden Sie das <option>-Element, um einzelne Optionen innerhalb des <select>-Elements hinzuzufügen.
Beispiel:
<label for="country">Land:</label> <select id="country" name="country"> <option value="deutschland">Deutschland</option> <option value="frankreich">Frankreich</option> <option value="spanien">Spanien</option> </select>
3.6. Textbereiche (HTML Textarea-Element)
Textbereiche (<textarea>) ermöglichen die Eingabe von mehrzeiligem Text, zum Beispiel für Kommentare oder Beschreibungen. Sie können die Attribute rows und cols verwenden, um die sichtbare Größe des Textbereichs anzupassen. Auch hier kann das placeholder-Attribut verwendet werden, um einen Beispieltext anzuzeigen.
Beispiel:
<label for="message">Nachricht:</label> <textarea id="message" name="message" rows="5" cols="40" placeholder="Geben Sie Ihre Nachricht ein"></textarea>
3.7. Dateifelder
Dateifelder (<input type="file">) ermöglichen es Benutzern, Dateien von ihrem Computer auszuwählen und hochzuladen. Um Dateiuploads in einem Formular zu ermöglichen, müssen Sie das enctype-Attribut des <form>-Elements auf „multipart/form-data“ setzen.
Beispiel:
<label for="upload">Datei hochladen:</label><input type="file" id="upload" name="upload">
3.8. Schaltflächen (HTML submit-Button)
Schaltflächen in Formularen werden hauptsächlich zum Absenden oder Zurücksetzen der Formulardaten verwendet. Verwenden Sie <input type="submit"> oder <button type="submit"> zum Erstellen einer Schaltfläche zum Absenden des Formulars und <input type="reset"> oder <button type="reset"> zum Erstellen einer Schaltfläche zum Zurücksetzen des Formulars.
Beispiel:
<input type="submit" value="Senden"> <input type="reset" value="Zurücksetzen">
oder
<button type="submit">Senden</button> <button type="reset">Zurücksetzen</button>
Indem Sie diese verschiedenen Eingabefelder und Schaltflächen kennenlernen und richtig einsetzen, können Sie Formulare erstellen, die auf die spezifischen Bedürfnisse Ihrer Benutzer und Ihrer Webseite zugeschnitten sind. Wenn Sie Inhalte verarbeiten möchtest, beispielsweise speichern oder per E-Mail versenden, dann wird PHP benötigt. Siehe: PHP E-Mails versenden
4. Anpassen des Formular-Designs mit CSS
In diesem Kapitel werden wir uns darauf konzentrieren, wie Sie das Design Ihres Formulars mit CSS anpassen können, um eine ansprechende und benutzerfreundliche Benutzeroberfläche zu schaffen.
4.1. Verknüpfen einer externen CSS-Datei
Erstellen Sie zunächst eine separate CSS-Datei (z. B. styles.css) und verknüpfen Sie sie mit Ihrem HTML-Dokument, indem Sie das folgende Element innerhalb des <head>-Bereichs Ihres HTML-Dokuments hinzufügen:
<link rel="stylesheet" href="styles.css">
4.2. Grundlegende Stil-Anpassungen
Beginnen Sie mit grundlegenden Stil-Anpassungen, wie das Festlegen von Schriftarten, Schriftgrößen und Farben für die verschiedenen Elemente in Ihrem Formular.
Beispiel-CSS:
form {
font-family: Arial, sans-serif;
font-size: 14px;
max-width: 400px;
margin: 0 auto;
}
label {
display: block;
margin-top: 10px;
font-weight: bold;
}
input[type="text"],
input[type="email"],
input[type="password"],
textarea {
width: 100%;
padding: 5px;
border: 1px solid #ccc;
font-size: 14px;
}
input[type="submit"],
input[type="reset"],
button[type="submit"],
button[type="reset"] {
padding: 5px 10px;
background-color: #007bff;
border: none;
color: white;
cursor: pointer;
font-size: 14px;
margin-top: 10px;
}
4.3. Erstellen von benutzerdefinierten Stilen für Radio-Buttons und Checkboxen
Um benutzerdefinierte Stile für Radio-Buttons und Checkboxen zu erstellen, verwenden Sie CSS-Pseudoklassen wie :checked und ::before.
Beispiel-CSS:
input[type="radio"],
input[type="checkbox"] {
display: none;
}
input[type="radio"] + label,
input[type="checkbox"] + label {
position: relative;
padding-left: 30px;
cursor: pointer;
}
input[type="radio"] + label::before,
input[type="checkbox"] + label::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
display: inline-block;
width: 20px;
height: 20px;
border: 1px solid #ccc;
}
input[type="radio"] + label::before {
border-radius: 50%;
}
input[type="checkbox"]:checked + label::before {
background-color: #007bff;
}
input[type="radio"]:checked + label::before {
background-color: #007bff;
border-color: #007bff;
}
4.4. Hinzufügen von Hover- und Fokus-Effekten
Fügen Sie Hover- und Fokus-Effekte für Eingabefelder und Schaltflächen hinzu, um die Benutzerinteraktion zu verbessern.
Beispiel-CSS:
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus {
border-color: #007bff;
outline: none;
}
input[type="submit"]:hover,
input[type="reset"]:hover,
button[type="submit"]:hover,
button[type="reset"]:hover {
background-color: #0056b3;
}
input[type="submit"]:active,
input[type="reset"]:active,
button[type="submit"]:active,
button[type="reset"]:active {
background-color: #004085;
}
input[type="submit"]:focus,
input[type="reset"]:focus,
button[type="submit"]:focus,
button[type="reset"]:focus {
outline: none;
}
input[type="radio"]:checked + label::after,
input[type="checkbox"]:checked + label::after {
content: "";
position: absolute;
left: 5px;
top: 50%;
transform: translateY(-50%);
display: inline-block;
}
input[type="checkbox"]:checked + label::after {
width: 10px;
height: 16px;
border: solid white;
border-width: 0 3px 3px 0;
transform: translateY(-50%) rotate(45deg);
}
input[type="radio"]:checked + label::after {
width: 10px;
height: 10px;
background-color: white;
border-radius: 50%;
}
Mit diesen CSS-Beispielen können Sie das Design Ihres HTML-Formulars anpassen und eine ansprechende Benutzeroberfläche für Ihre Besucher schaffen. Je nach Ihren individuellen Designanforderungen können Sie die Farben, Schriftarten und Stile ändern oder weitere Anpassungen vornehmen, um das Formular nahtlos in das Gesamtdesign Ihrer Webseite zu integrieren.
Webformulare tragen jedoch auch Risiken und Herausforderungen. In Bezug auf die Datensicherheit können unzureichend geschützte Formulare ein Einfallstor für verschiedene Arten von Angriffen sein. Beispielsweise könnten Angreifer Cross-Site-Scripting (XSS) oder SQL-Injection-Angriffe verwenden, um sensible Benutzerdaten zu stehlen oder eine Website zu manipulieren. Sehe dir dazu den Artikel Formulareingaben mit PHP validieren an.
Ein weiteres Risiko ist, dass persönliche Daten, die über Formulare erfasst werden, möglicherweise nicht ordnungsgemäß geschützt oder verarbeitet werden. Dadurch kann es zu Datenschutzverletzungen kommen. In der Ära der DSGVO und anderer Datenschutzgesetze können solche Verstöße zu hohen Geldstrafen und Reputationsschäden führen.
Außerdem können schlecht gestaltete Formulare die Benutzererfahrung negativ beeinflussen. Formulare, die schwer zu navigieren sind, zu viele Informationen auf einmal erfordern oder verwirrende oder irreführende Anweisungen enthalten, können Benutzer abschrecken und dazu führen, dass sie den Vorgang abbrechen.
Daher ist es wichtig, dass wir als Webentwickler Best Practices für die Gestaltung und Implementierung von Webformularen befolgen. Das beinhaltet sowohl technische Aspekte wie die ordnungsgemäße Validierung von Eingaben und die Verwendung von HTTPS zur sicheren Übertragung von Formulardaten als auch Designaspekte wie die Bereitstellung klarer und benutzerfreundlicher Anweisungen und Feedback für dich als Benutzer. Nur so können wir sicherstellen, dass die Formulare ihre Rolle effektiv erfüllen und gleichzeitig deine Sicherheit und Privatsphäre gewahrt bleibt.
