Create web forms (Tutorial)

Language: German

Create web forms for websites (practical tutorial)

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!

Zugriff auf alle Inhalte

In der Mitgliedschaft ab * € monatlich

oder

Inhalt in den Warenkorb

Sofort-Download nach Kauf: einmalig * €

Details

content: 6 h Video training
Licence: private and commercial Rights of use
Bonus: including working material

Creating web forms - Introduction

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.

To the text tutorial

Creating web forms: 1.2 | Using HTML forms - why and how?

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?

To the text tutorial

Create web forms: 1.3 | Create first project

Creating web forms: 1.3 | Creating first project

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

To the text tutorial

Creating web forms: 1.4 | The first HTML form

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

To the text tutorial

Forms

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

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

download project file

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.

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.

Input validation and event handling for forms

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.

Create web forms: 3.2 | Input type number and attributes

Creating web forms: 3.2 | Input Type number and Attributes

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

Create web forms: 3.3 | Respond to changes in the input element

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.

Create web forms: 3.4 | Respond to changes using addEventListener

Creating web forms: 3.4 | Responding to changes with addEventListener

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

Creating web forms: 3.5 | Overview: The input element

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

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

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

Creating web forms: 3.7 | Attributes: pattern and required

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

Creating web forms: 3.8 | The spellcheck attribute

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

Creating web forms: 3.9 | Input type password

You will learn how to create password fields.

Check boxes

Creating web forms: 4.1 | Checkbox - Basics

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

Creating web forms: 4.2 | Using checkboxes in JS

Creating web forms: 4.2 | Using checkbox in JS

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

Creating web forms: 4.3 | Styling checkboxes

I show various ways to customize the appearance of checkboxes.

Form input types and advanced fields

Creating web forms: 5.1 | Radiobuttons

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

Creating web forms: 5.2 | File Upload

You are learning how to allow users to upload files.

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.

Creating web forms: 5.4 | Hidden input fields

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

Creating Web forms: 5.5 | Numeric inputs

Create web forms: 5.5 | number entries

We summarize the various options for entering numbers.

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.

Creating web forms: 5.7 | Date and time entry

Creating web forms: 5.7 | Date and time input

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

Create web forms: 5.8 | Email and URL

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

Creating web forms: 5.9 | Color

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

Creating web forms: 5.10 | The types search and tel

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

Creating web forms: 5.11 | Multi-line text inputs with textarea

Creating web forms: 5.11 | Multiline text input with textarea

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

Create web forms: 5.12 | Lists with select

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

Extended form structure and validation with JavaScript and frameworks

Create web forms: 6.1 | Grouping the options

Creating web forms: 6.1 | Grouping the options

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

Create web forms: 6.2 | Suggestion lists with datalist

Creating web forms: 6.2 | suggestion lists with datalist

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

Create web forms: 6.3 | The autocomplete attribute

Creating web forms: 6.3 | The autocomplete attribute

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

Creating web forms: 6.4 | Form sections with fieldsets

I explain how you structure your forms with fieldset elements.

Create web forms: 6.5 | Validation via JavaScript

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

Creating web forms: 6.6 | Server-side processing with Node.JS and Express

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 .

download project file

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

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

Create web forms: 6.8 | Receive form data with POST handler

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

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

Creating web forms: 6.9 | Forms and form elements in React - setting up a project

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.

download project file

Creating web forms: 6.10 | Input elements in React

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

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

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

Creating web forms: 6.12 | Forms with Alpine.js

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

download project file

Creating web forms: 6.13 | Forms with VueJs

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

download project file

Details of the content

Web forms and their input fields - explained step by step
You want to expand your knowledge in developing web forms? In this tutorial, you will learn how to create functional forms with HTML, JavaScript, as well as server-side scripts and libraries. Whether it's a simple query for name and email or a complex contact form - after this course, you will be able to program your own web forms with the necessary input fields and integrate them into your websites.
The over six-hour video tutorial by software developer and tutor Stephan Haewß is aimed at everyone who wants to create web forms, developers who use forms in JS-UI frameworks, and web developers who want to query user inputs without much JavaScript. Ideal for web developers, web designers, front-end developers, beginners, and advanced users - and easy to follow with basic HTML knowledge.

HTML basics for forms on your websites

If you have no or only a few knowledge in the area of web forms, start the tutorial with the basics. Learn everything you need to know about the structure as well as various elements of an HTML form. Learn about various input fields such as checkboxes, radio buttons, file uploads, password fields, text, and their attributes and validation options. Acquire the ability to create user-friendly and accessible forms with various form elements.

Dynamic web forms, server-side processing & forms in modern JavaScript frameworks

The interaction with form elements can be controlled specifically with JavaScript to create a dynamic and user-friendly experience. This allows for reading, editing, and automatically validating inputs when necessary. Through client-side validation, incorrect or incomplete data can be intercepted directly from the user before being sent to the server. This improves data quality and reduces potential sources of errors. Another important aspect is the dynamic adaptation of forms to user inputs and interactions. All these aspects are covered in the video tutorial.

You will also learn about sending and receiving form data to the server and server-side processing using examples with Node.js and Express. Additionally, you will explore the use of web forms in modern JavaScript frameworks, such as integrating forms into React applications and creating reactive forms with React hooks and components. Get important tips on styling forms and form elements, as well as data security.

What you will learn in this hands-on tutorial

Use this course to acquire comprehensive knowledge in developing HTML forms. Learn about the different input fields and their specificities. Find out how to control form elements with JavaScript and how to apply attributes and validations. Also, see how to integrate forms into modern JavaScript frameworks such as React, VueJs, and AlpineJs.