Web-Formulare für Websites erstellen (Praxis-Tutorial)

Web-Formulare für Websites erstellen (Praxis-Tutorial)

Webdesign, CMS & Entwicklung 44 Videos · 6.1 h Video-Training · Deutsch Stephan Haewß von Stephan Haewß

Wie du Web-Formulare für deine Websites erstellen kannst – Schritt für Schritt erklärt! Ob du Namen, E-Mail-Adressen, Passwörter abfragen, Checkboxen, Datumsangaben, Listen oder Dropdowns einbauen möchtest: Lerne in diesem Praxis-Tutorial, wie du vom ersten HTML-Formular zum vollständig funktionalen Web-Formular gelangst.

  • Web-Formulare erstellen – von den Grundlagen bis zu funktionalen Formularen
  • Felder zur Eingabe von E-Mail, Passwort und Co. korrekt erstellen und auslesen
  • Checkboxen, Radiobuttons, Dropdowns, mehrzeilige Texteingaben und mehr erstellen
  • Umfassendes, sechsstündiges Praxis-Tutorial von Entwickler Stephan Haewß
  • Mit Projektdateien zum Nachvollziehen der gezeigten Inhalte
  • Optimal für Web-Entwickler, Web-Designer und Frontendentwickler

Von der einfachen Namens- und E-Mail-Abfrage bis zum komplexeren Kontaktformular mit Upload-Funktion: Hier lernst du umfassend, Web-Formulare für deine Websites zu erstellen!

Inhalt

44 Videos, 364 Minuten

Web-Formulare erstellen – Einleitung

4 Videos · 31 Minuten
01 Offen Kostenlos

Web-Formulare erstellen: 1.1 | Einführung und Überblick

Hier erfährst du, worum es im Kurs geht und was du erwarten kannst.

02 Offen

Web-Formulare erstellen: 1.2 | HTML-Formulare – warum und wie verwenden?

Warum sollte man überhaupt HTML-Formulare nutzen und wie geht das generell?

03 Offen

Web-Formulare erstellen: 1.3 | Erstes Projekt erstellen

Hier wird das Projekt erstellt, in das das erste Formular integriert wird.

04 Offen

Web-Formulare erstellen: 1.4 | Das erste HTML-Formular

Du erstellst dein erstes einfaches Formular und lernst die grundlegende Struktur kennen.

01

Web-Formulare erstellen: 1.1 | Einführung und Überblick

3 min Offen
02

Web-Formulare erstellen: 1.2 | HTML-Formulare – warum und wie verwenden?

10 min Offen
03

Web-Formulare erstellen: 1.3 | Erstes Projekt erstellen

6 min Offen
04

Web-Formulare erstellen: 1.4 | Das erste HTML-Formular

12 min Offen

Formulare

3 Videos · 30 Minuten
05 Offen

Web-Formulare erstellen: 2.1 | Warum Formulare bzw. Form-Tag verwenden?

Wir beleuchten die vielfältigen Einsatzmöglichkeiten von HTML-Formularen in Webanwendungen.

06 Offen

Web-Formulare erstellen: 2.2 | Formulardaten mit JavaScript auslesen

Du lernst, wie du die von Benutzern eingegebenen Daten mit JavaScript ausliest und weiterverarbeitest.

07 Offen

Web-Formulare erstellen: 2.3 | Formularverschönerung und weitere Eingabetypen

Ich gehe auf die Gestaltungsmöglichkeiten von Formularen ein und stelle dir verschiedene Eingabefelder vor.

05

Web-Formulare erstellen: 2.1 | Warum Formulare bzw. Form-Tag verwenden?

11 min Offen
06

Web-Formulare erstellen: 2.2 | Formulardaten mit JavaScript auslesen

9 min Offen
07

Web-Formulare erstellen: 2.3 | Formularverschönerung und weitere Eingabetypen

10 min Offen

Eingabe-Validierung und Ereignisbehandlung für Formulare

9 Videos · 71 Minuten
08 Offen

Web-Formulare erstellen: 3.1 | Erste Validierung mit E-Mail-Eingabe

Du implementierst eine einfache E-Mail-Validierung, um sicherzustellen, dass die eingegebenen Daten dem E-Mail-Format entsprechen.

09 Offen

Web-Formulare erstellen: 3.2 | Input-Typ number und Attribute

Wir beschäftigen uns mit numerischen Eingaben und den dazugehörigen Attributen zur Einschränkung der möglichen Werte.

10 Offen

Web-Formulare erstellen: 3.3 | Auf Änderungen im input-Element reagieren

Du lernst, wie du in JS Ereignisse abfangen kannst, die beim Ändern des Inhalts eines Eingabefeldes auftreten.

11 Offen

Web-Formulare erstellen: 3.4 | Auf Änderungen mit addEventListener reagieren

Wir vertiefen das Thema Ereignisbehandlung und setzen addEventListener für flexiblere Reaktionen ein.

12 Offen

Web-Formulare erstellen: 3.5 | Übersicht: Das input-Element

Eine umfassende Zusammenfassung der verschiedenen input-Typen und ihrer Eigenschaften.

13 Offen

Web-Formulare erstellen: 3.6 | Attribute: readonly, disabled, placeholder, minlength, maxlength

Wir klären die wichtigsten Attribute, um das Verhalten von Eingabefeldern zu steuern.

14 Offen

Web-Formulare erstellen: 3.7 | Attribute: pattern und required

Du lernst, wie du mit regulären Ausdrücken und dem required-Attribut komplexe Validierungen durchführst.

15 Offen

Web-Formulare erstellen: 3.8 | Das spellcheck-Attribut

Wir zeigen dir, wie du die Rechtschreibprüfung in deinen Formularen aktivieren bzw. deaktivieren kannst.

16 Offen

Web-Formulare erstellen: 3.9 | Input-Typ password

Du erfährst, wie du Passwortfelder erstellst.

08

Web-Formulare erstellen: 3.1 | Erste Validierung mit E-Mail-Eingabe

8 min Offen
09

Web-Formulare erstellen: 3.2 | Input-Typ number und Attribute

7 min Offen
10

Web-Formulare erstellen: 3.3 | Auf Änderungen im input-Element reagieren

11 min Offen
11

Web-Formulare erstellen: 3.4 | Auf Änderungen mit addEventListener reagieren

8 min Offen
12

Web-Formulare erstellen: 3.5 | Übersicht: Das input-Element

4 min Offen
13

Web-Formulare erstellen: 3.6 | Attribute: readonly, disabled, placeholder, minlength, maxlength

12 min Offen
14

Web-Formulare erstellen: 3.7 | Attribute: pattern und required

9 min Offen
15

Web-Formulare erstellen: 3.8 | Das spellcheck-Attribut

3 min Offen
16

Web-Formulare erstellen: 3.9 | Input-Typ password

9 min Offen

Checkboxen

3 Videos · 23 Minuten
17 Offen

Web-Formulare erstellen: 4.1 | Checkbox – Grundlagen

Wir beginnen mit den Grundlagen der Checkboxen und ihren Einsatzmöglichkeiten.

18 Offen

Web-Formulare erstellen: 4.2 | Checkbox in JS verwenden

Du lernst, wie du den Zustand von Checkboxen mit JavaScript ausliest und setzt.

19 Offen

Web-Formulare erstellen: 4.3 | Checkbox stylen

Ich zeige verschiedene Möglichkeiten, um das Aussehen von Checkboxen anzupassen.

17

Web-Formulare erstellen: 4.1 | Checkbox – Grundlagen

7 min Offen
18

Web-Formulare erstellen: 4.2 | Checkbox in JS verwenden

6 min Offen
19

Web-Formulare erstellen: 4.3 | Checkbox stylen

10 min Offen

Formular-Eingabetypen und erweiterte Felder

12 Videos · 105 Minuten
20 Offen

Web-Formulare erstellen: 5.1 | Radiobuttons

Ich erkläre die Funktionsweise von Radiobuttons und wie du sie in deinen Formularen verwendest.

21 Offen

Web-Formulare erstellen: 5.2 | File Upload

Du lernst, wie du Benutzern erlaubst, Dateien hochzuladen.

22 Offen

Web-Formulare erstellen: 5.3 | File Input mit JS

Du vertiefst deine Kenntnisse zum Dateiupload und lernst, wie du die ausgewählte Datei mit JavaScript bearbeiten kannst.

23 Offen

Web-Formulare erstellen: 5.4 | Versteckte Eingabefelder

Ich gehe auf den Einsatz von versteckten Eingabefeldern für die Übermittlung zusätzlicher Informationen ein.

24 Offen

Web-Formulare erstellen: 5.5 | Zahleneingaben

Wir fassen die verschiedenen Möglichkeiten zur Eingabe von Zahlen zusammen.

25 Offen

Web-Formulare erstellen: 5.6 | Range Slider

Du lernst, wie du mit Range-Sliders einen bestimmten Bereich von Werten auswählen lässt und einen Schieberegler implementieren kannst.

26 Offen

Web-Formulare erstellen: 5.7 | Datums- und Zeiteingabe

Ich zeige dir, wie du Datums- und Zeiteingaben in deinen Formularen umsetzt.

27 Offen

Web-Formulare erstellen: 5.8 | E-Mail und URL

Wir konzentrieren uns auf die speziellen Eingabefelder für E-Mail-Adressen und URLs.

28 Offen

Web-Formulare erstellen: 5.9 | Color

Du lernst, wie du Farben über ein Farbauswahlfeld auswählen lässt.

29 Offen

Web-Formulare erstellen: 5.10 | Die Typen search und tel

Ich stelle dir die Eingabefelder für Suchbegriffe und Telefonnummern vor.

30 Offen

Web-Formulare erstellen: 5.11 | Mehrzeilige Texteingaben mit textarea

Du erfährst, wie du mehrzeilige Texteingaben mit dem textarea-Element realisierst.

31 Offen

Web-Formulare erstellen: 5.12 | Listen mit select

Ich erkläre, wie du aus wählbare Listen mit dem select-Element erstellst.

20

Web-Formulare erstellen: 5.1 | Radiobuttons

7 min Offen
21

Web-Formulare erstellen: 5.2 | File Upload

10 min Offen
22

Web-Formulare erstellen: 5.3 | File Input mit JS

7 min Offen
23

Web-Formulare erstellen: 5.4 | Versteckte Eingabefelder

7 min Offen
24

Web-Formulare erstellen: 5.5 | Zahleneingaben

5 min Offen
25

Web-Formulare erstellen: 5.6 | Range Slider

13 min Offen
26

Web-Formulare erstellen: 5.7 | Datums- und Zeiteingabe

13 min Offen
27

Web-Formulare erstellen: 5.8 | E-Mail und URL

8 min Offen
28

Web-Formulare erstellen: 5.9 | Color

4 min Offen
29

Web-Formulare erstellen: 5.10 | Die Typen search und tel

4 min Offen
30

Web-Formulare erstellen: 5.11 | Mehrzeilige Texteingaben mit textarea

15 min Offen
31

Web-Formulare erstellen: 5.12 | Listen mit select

12 min Offen

Erweiterte Formularstruktur und Validierung mit JavaScript und Frameworks

13 Videos · 108 Minuten
32 Offen

Web-Formulare erstellen: 6.1 | Gruppierung der Options

Du lernst, wie du die Optionen in einer Auswahlliste gruppieren kannst.

33 Offen

Web-Formulare erstellen: 6.2 | Vorschlagslisten mit datalist

Ich zeige dir, wie du Vorschlagslisten für Eingabefelder erstellst.

34 Offen

Web-Formulare erstellen: 6.3 | Das autocomplete-Attribut

Du lernst, wie du die automatische Vervollständigung von Eingaben aktivierst.

35 Offen

Web-Formulare erstellen: 6.4 | Formularabschnitte mit Fieldsets

Ich erkläre, wie du deine Formulare mit fieldset-Elementen strukturierst.

36 Offen

Web-Formulare erstellen: 6.5 | Validierung über JavaScript

Eine umfassende Einführung in die clientseitige Formularvalidierung mit JavaScript.

37 Offen

Web-Formulare erstellen: 6.6 | Serverseitige Behandlung mit Node.JS und Express

Ich zeige, wie du die gesendeten Formulardaten auf dem Server mit Node.js und Express empfängst.

38 Offen

Web-Formulare erstellen: 6.7 | Formdaten mit GET-Handler empfangen

Du lernst, wie du Formulardaten mit der GET-Methode empfängst.

39 Offen

Web-Formulare erstellen: 6.8 | Formdaten mit POST-Handler empfangen

Ich erkläre, wie du Formulardaten mit der POST-Methode empfängst.

40 Offen

Web-Formulare erstellen: 6.9 | Formulare und Formularelemente in React – Projekt anlegen

Wir beginnen mit der Erstellung eines React-Projekts und der Integration von Formularen.

41 Offen

Web-Formulare erstellen: 6.10 | Input-Elemente in React

Du lernst, wie du verschiedene Input-Elemente in React verwendest.

42 Offen

Web-Formulare erstellen: 6.11 | Select- und Textarea-Elemente in React

Wir setzen uns mit den select- und textarea-Elementen in React auseinander.

43 Offen

Web-Formulare erstellen: 6.12 | Formulare mit Alpine.js

Ich zeige, wie du Formulare mit dem JavaScript-Framework Alpine.js behandelst.

44 Offen

Web-Formulare erstellen: 6.13 | Formulare mit VueJs

Ich erkläre, wie du Formulare in Vue.js-Anwendungen integrierst.

32

Web-Formulare erstellen: 6.1 | Gruppierung der Options

7 min Offen
33

Web-Formulare erstellen: 6.2 | Vorschlagslisten mit datalist

13 min Offen
34

Web-Formulare erstellen: 6.3 | Das autocomplete-Attribut

5 min Offen
35

Web-Formulare erstellen: 6.4 | Formularabschnitte mit Fieldsets

8 min Offen
36

Web-Formulare erstellen: 6.5 | Validierung über JavaScript

8 min Offen
37

Web-Formulare erstellen: 6.6 | Serverseitige Behandlung mit Node.JS und Express

8 min Offen
38

Web-Formulare erstellen: 6.7 | Formdaten mit GET-Handler empfangen

7 min Offen
39

Web-Formulare erstellen: 6.8 | Formdaten mit POST-Handler empfangen

5 min Offen
40

Web-Formulare erstellen: 6.9 | Formulare und Formularelemente in React – Projekt anlegen

4 min Offen
41

Web-Formulare erstellen: 6.10 | Input-Elemente in React

13 min Offen
42

Web-Formulare erstellen: 6.11 | Select- und Textarea-Elemente in React

7 min Offen
43

Web-Formulare erstellen: 6.12 | Formulare mit Alpine.js

15 min Offen
44

Web-Formulare erstellen: 6.13 | Formulare mit VueJs

8 min Offen
Kommentare (1)

Kommentiere jetzt „Web-Formulare für Websites erstellen (Praxis-Tutorial)“