Create web forms for websites (practical tutorial) Language: German

Create web forms for websites (practical tutorial)

Web design, CMS & development 44 Videos · 6.1 h Video training · English Stephan Haewß by Stephan Haewß

How to create web forms for your websites - explained step by step! Whether you want to collect names, email addresses, passwords, checkboxes, dates, lists, or dropdowns: In this practical tutorial, you will learn how to go from the first HTML form to a fully functional web form.

  • Creating web forms - from the basics to functional forms
  • Create and read fields for entering email, password and such correctly
  • Create checkboxes, radio buttons, dropdowns, multi-line text inputs, and more
  • Comprehensive, six-hour hands-on tutorial by developer Stephan Haewß
  • With project files to recreate the displayed contents
  • Ideal for web developers, web designers, and front-end developers

From simple name and email inquiries to more complex contact forms with upload functionality: Here you will learn comprehensively how to create web forms for your websites!

content

44 Videos, 364 minutes

Creating web forms – Introduction

4 Videos · 31 minutes
01 Open free of charge

Creating web forms: 1.1 | Introduction and Overview

Here you will find out what the course is about and what you can expect.

02 Open

Creating web forms: 1.2 | HTML forms - why and how to use them?

Why should one even use HTML forms and how does that work in general?

03 Open

Creating web forms: 1.3 | Creating first project

Here the project is created, in which the first form is integrated.

04 Open

Creating web forms: 1.4 | The first HTML form

You create your first simple form and learn the basic structure.

01

Creating web forms: 1.1 | Introduction and Overview

3 min Open
02

Creating web forms: 1.2 | HTML forms - why and how to use them?

10 min Open
03

Creating web forms: 1.3 | Creating first project

6 min Open
04

Creating web forms: 1.4 | The first HTML form

12 min Open

Forms

3 Videos · 30 minutes
05 Open

Creating web forms: 2.1 | Why use forms or form tags?

We are exploring the various uses of HTML forms in web applications.

06 Open

Creating web forms: 2.2 | reading form data with JavaScript

You will learn how to read and process the data entered by users with JavaScript.

07 Open

Creating web forms: 2.3 | Form beautification and additional input types

I will discuss the design options of forms and introduce you to various input fields.

05

Creating web forms: 2.1 | Why use forms or form tags?

11 min Open
06

Creating web forms: 2.2 | reading form data with JavaScript

9 min Open
07

Creating web forms: 2.3 | Form beautification and additional input types

10 min Open

Input validation and event handling for forms

9 Videos · 71 minutes
08 Open

Creating web forms: 3.1 | First validation with email input

You are implementing a simple email validation to ensure that the entered data complies with the email format.

09 Open

Creating web forms: 3.2 | Input Type number and Attributes

We deal with numerical inputs and the associated attributes for restricting the possible values.

10 Open

Creating web forms: 3.3 | Reacting to changes in the input element

You will learn how to handle events in JS that occur when the content of an input field changes.

11 Open

Creating web forms: 3.4 | Responding to changes with addEventListener

We deepen the topic of event handling and use addEventListener for more flexible responses.

12 Open

Creating web forms: 3.5 | Overview: The input element

A comprehensive summary of the various input types and their properties.

13 Open

Creating web forms: 3.6 | Attributes: readonly, disabled, placeholder, minlength, maxlength

We clarify the most important attributes to control the behavior of input fields.

14 Open

Creating web forms: 3.7 | Attributes: pattern and required

You will learn how to perform complex validations with regular expressions and the required attribute.

15 Open

Creating web forms: 3.8 | The spellcheck attribute

We will show you how you can activate or deactivate the spell check in your forms.

16 Open

Creating web forms: 3.9 | Input type password

You will learn how to create password fields.

08

Creating web forms: 3.1 | First validation with email input

8 min Open
09

Creating web forms: 3.2 | Input Type number and Attributes

7 min Open
10

Creating web forms: 3.3 | Reacting to changes in the input element

11 min Open
11

Creating web forms: 3.4 | Responding to changes with addEventListener

8 min Open
12

Creating web forms: 3.5 | Overview: The input element

4 min Open
13

Creating web forms: 3.6 | Attributes: readonly, disabled, placeholder, minlength, maxlength

12 min Open
14

Creating web forms: 3.7 | Attributes: pattern and required

9 min Open
15

Creating web forms: 3.8 | The spellcheck attribute

3 min Open
16

Creating web forms: 3.9 | Input type password

9 min Open

Checkboxes

3 Videos · 23 minutes
17 Open

Creating web forms: 4.1 | Checkbox - Basics

We start with the basics of checkboxes and their possible uses.

18 Open

Creating web forms: 4.2 | Using checkbox in JS

You will learn how to read and set the state of checkboxes using JavaScript.

19 Open

Creating web forms: 4.3 | Styling checkboxes

I show various ways to customize the appearance of checkboxes.

17

Creating web forms: 4.1 | Checkbox - Basics

7 min Open
18

Creating web forms: 4.2 | Using checkbox in JS

6 min Open
19

Creating web forms: 4.3 | Styling checkboxes

10 min Open

Form input types and extended fields

12 Videos · 105 minutes
20 Open

Creating web forms: 5.1 | Radiobuttons

I explain the functionality of radio buttons and how to use them in your forms.

21 Open

Creating web forms: 5.2 | File Upload

You are learning how to allow users to upload files.

22 Open

Creating web forms: 5.3 | File Input with JS

You deepen your knowledge of file upload and learn how to process the selected file with JavaScript.

23 Open

Creating web forms: 5.4 | Hidden input fields

I will address the use of hidden input fields to transmit additional information.

24 Open

Create web forms: 5.5 | number entries

We summarize the various options for entering numbers.

25 Open

Creating web forms: 5.6 | Range Slider

You will learn how to let users select a specific range of values with range sliders and how to implement a slider.

26 Open

Creating web forms: 5.7 | Date and time input

I will show you how to implement date and time inputs in your forms.

27 Open

Create web forms: 5.8 | Email and URL

We focus on the special input fields for email addresses and URLs.

28 Open

Creating web forms: 5.9 | Color

You learn how to let users select colors via a color picker.

29 Open

Creating web forms: 5.10 | The types search and tel

I present to you the input fields for search terms and phone numbers.

30 Open

Creating web forms: 5.11 | Multiline text input with textarea

You will learn how to implement multiline text inputs with the textarea element.

31 Open

Create web forms: 5.12 | Lists with select

I explain how to create selectable lists with the select element.

20

Creating web forms: 5.1 | Radiobuttons

7 min Open
21

Creating web forms: 5.2 | File Upload

10 min Open
22

Creating web forms: 5.3 | File Input with JS

7 min Open
23

Creating web forms: 5.4 | Hidden input fields

7 min Open
24

Create web forms: 5.5 | number entries

5 min Open
25

Creating web forms: 5.6 | Range Slider

13 min Open
26

Creating web forms: 5.7 | Date and time input

13 min Open
27

Create web forms: 5.8 | Email and URL

8 min Open
28

Creating web forms: 5.9 | Color

4 min Open
29

Creating web forms: 5.10 | The types search and tel

4 min Open
30

Creating web forms: 5.11 | Multiline text input with textarea

15 min Open
31

Create web forms: 5.12 | Lists with select

12 min Open

Extended form structure and validation with JavaScript and frameworks

13 Videos · 108 minutes
32 Open

Creating web forms: 6.1 | Grouping the options

You'll learn how to group the options in a select list.

33 Open

Creating web forms: 6.2 | suggestion lists with datalist

I will show you how to create suggestion lists for input fields.

34 Open

Creating web forms: 6.3 | The autocomplete attribute

You will learn how to activate the automatic completion of inputs.

35 Open

Creating web forms: 6.4 | Form sections with fieldsets

I explain how you structure your forms with fieldset elements.

36 Open

Create web forms: 6.5 | Validation via JavaScript

A comprehensive introduction to client-side form validation with JavaScript.

37 Open

Creating Web Forms: 6.6 | Server-Side Handling with Node.JS and Express

I will show you how to receive the form data sent to the server using Node.js and Express .

38 Open

Creating web forms: 6.7 | Receiving form data with GET handler

You learn how to receive form data using the GET method.

39 Open

Creating web forms: 6.8 | Receiving form data with POST handler

I will explain how you receive form data using the POST method.

40 Open

Creating web forms: 6.9 | Creating forms and form elements in React - Setting up project

We are starting by creating a React project and integrating forms.

41 Open

Creating web forms: 6.10 | Input elements in React

You will learn how to use various input elements in React.

42 Open

Creating web forms: 6.11 | Select and Textarea elements in React

We are dealing with the select and textarea elements in React.

43 Open

Creating web forms: 6.12 | Forms with Alpine.js

I will show you how to handle forms with the JavaScript framework Alpine.js.

44 Open

Creating web forms: 6.13 | Forms with VueJs

I explain how you integrate forms into Vue.js applications.

32

Creating web forms: 6.1 | Grouping the options

7 min Open
33

Creating web forms: 6.2 | suggestion lists with datalist

13 min Open
34

Creating web forms: 6.3 | The autocomplete attribute

5 min Open
35

Creating web forms: 6.4 | Form sections with fieldsets

8 min Open
36

Create web forms: 6.5 | Validation via JavaScript

8 min Open
37

Creating Web Forms: 6.6 | Server-Side Handling with Node.JS and Express

8 min Open
38

Creating web forms: 6.7 | Receiving form data with GET handler

7 min Open
39

Creating web forms: 6.8 | Receiving form data with POST handler

5 min Open
40

Creating web forms: 6.9 | Creating forms and form elements in React - Setting up project

4 min Open
41

Creating web forms: 6.10 | Input elements in React

13 min Open
42

Creating web forms: 6.11 | Select and Textarea elements in React

7 min Open
43

Creating web forms: 6.12 | Forms with Alpine.js

15 min Open
44

Creating web forms: 6.13 | Forms with VueJs

8 min Open
Comments (1)

Comment now „Create web forms for websites (practical tutorial)“