Download Web Forms – Build & Master HTML Web forms In 2025 Course for Free

Web Forms - Section Introduction

Quick recap on web forms

How are web forms created

Project intro - let's build a web form

Profile header - setting it up

Profile header - finishing it off

Creating our first web form widget input

Why do we need to wrap our web form in a form element

A little more info about the input element

Styling our input widget

Intro to radio buttons

Creating an email widget

Take a step back radio buttons

Adding a dropdown menu to our web form

Adding a textarea widget to our web form

Building our radio button

Styling our radio button

What happens when you submit a form

Adding a checkbox to our web form

Adding a submit button to our web form

Recap of entire section

Outro

The form element

Why is knowing about the form attributes important

Attributes on the form

Table vs Web Form

What happens if you use a character outside of the specified encoding type

Attribute accept-charset (UTF)

Attribute accept-charset (ISO and ASCII)

Take a step back accept-charset

Theta Example - Servers Understand Hex (Part 3 of 3)

Name attribute

Accept attribute

Theta Example - URL Encoding (Part 1 of 3)

Action attribute

Action attribute example - front end example

Theta Example - Numerical Character References (Part 2 of 3)

Method attribute - GET

Method attribute - POST

Action attribute example - making our form dynamic

Action attribute example - intro to URLSearchParams()

HTTP vs HTML when it comes to METHOD types

Enctype attribute - GET example

Enctype attribute - introduction

GET vs POST

Enctype example - setting up a Node.js server

Enctype example - setting up HTML

Enctype attribute - what is boundary

Enctype example - analysis of multipart vs applicationx-www-form-urlencoded

Enctype attribute - POST

REL attribute

Autocomplete - example

Enctype - take a step back

novalidate - example

Autocomplete attribute

Target attribute introduction

novalidate - attribute introduction

Summary of the form wrapper

Target - example

Outro

Why do we see international characters

URL Encoding - Introduction

A little about URLs

How does URL encoding work

Understanding hex

Custom encoding with JavaScript - example

How does your browser URL encode spaces

International characters

The structure of a web form

fieldset - introduction

fieldset - examples

fieldset - attributes

Using the form attribute for styling purposes using HTMLFormElement.elements

fieldset - using the form attribute

Where does the input element come from

Assignment - web form introduction

input type=text - spellcheck attribute and value property

The input element is like a lime

input type=text - common attributes and introduction

Assignment - solution (without CSS)

Label attribute

Assignment - solution (with CSS)

Keep going! Web Forms are Awesome!

Using the pattern, title and required attribute with the password type

What are the original input types

Password does not help us with security

Input type=password

URLSearchParams() - introduction

Input type=hidden

Regular Expressions - introduction

Submitting a timestamp with input type=hidden

Hidden input type and databases

Using new attributes on buttons, and the difference between button and input

Different button types - fun example

Buttons - two ways to create buttons

Checkable items

Checkbox Challenge - intro

checked pseudo class

Radio buttons

Checkbox Challenge - solution with check mark

Image type

Image type - heatmap example

Checkbox Challenge - solution

Checkbox

File type

File type - how to style it

File type - using JavaScript to improve UI