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

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

Newer input types - high level

Search type - styling with CSS

Email type - introduction

Search type - intro

Email type - validation and benefits

Search type - pseudo classes and pseudo elements

Tel type

Url type

Number type

Range type

Using JavaScript to display dynamic range values

Step back

Date type - example

Date and time pickers

Color type

Common attributes you'll find on form widgets

#1 web form email challenge - intro

#1 web form email challenge - solution

#2 custom toggle - intro

#2 custom toggle - building HTML

#2 custom toggle - finishing off the toggle

#3 color picker challenge - intro

#3 color picker challenge - building the HTML

#4 custom range picker challenge - intro

#5 simple web form challenge - intro

#3 color picker challenge - adding JavaScript

#4 custom range picker challenge - building the HTML

#4 custom range picker challenge - adding JavaScript

#5 simple web form challenge - solution

Non input elements

Introduction

textarea - what is it

textarea - common attributes

textarea Challenge #1 - valid, invalid, not and placeholder-shown

textarea - resize property and summary

textarea vs input type=text

textarea Challenge #1 - Solution

textarea Challenge #2 - focus and blur events

textarea Challenge #2 - Solution

Autocomplete box - datalist

Autocomplete - attribute

important questions about datalist

Creating a dynamic datalist dropdown

Dropdown controls and the Select Box

datalist vs select - summary

Dropdown menus - summary

Output element challenge 1 - multiplication

Output element challenge 1 solution - multiplication

Output element - the oninput event

Output element - intro

Output element challenge 2 - display slider value

Output element challenge 2 solution - display slider value

Progress bar - intro

Progress bar - detail

Meter bar - intro

Minions Banana Song Full Song)

Meter bar - detail

Meter and progress bar - summary

Progress bar challenge #1 - intro (video progress)

Progress bar challenge #2 - intro (form progress)

Progress bar challenge #1 - solution (video progress)

Progress bar challenge #2 - solution (form progress) - HTML + CSS

Outro

Progress bar challenge #2 - solution (form progress) - JavaScript

Section intro

Styling web forms

Styling forms with CSS, pseudo classes and pseudo elements - intro

CSS box model

Pseudo classes - intro

required

Generated content

Pseudo classes - for forms

Building our base web form (also used in future lectures)

Adding generated content to our form (by using after)

Adding valid and invalid styling to our form (by using before)

enabled & disabled

valid & invalid

Radio boxes & checkboxes - checked state

in-range & out-of-range

Web form example - rundown of the HTML

Web form example - building our JavaScript

Radio boxes & checkboxes - default state

Radio boxes & checkboxes - indeterminate state

Pseudo classes - summary

types of client side validation on web forms

Built-in validation - overview

Quick example - valid invalid and required

JavaScript validation - the Constraint Validation API

Built-in validation - pattern attribute

setCustomValidity() method - 2 easy examples

CHALLENGE INTRO - setCustomValidity() method

JavaScript validation - intro

CHALLENGE SOLUTION - setCustomValidity() method

Building the HTML

CSS grid - an overview

Organizing the assets

Finishing off with CSS

AJAX - intro

AJAX vs ACTION

AJAX example - building the HTML

AJAX example - building the AJAX query

AJAX example - building the PHP file

How to submit web form data to a server - client side recap

PHP - how to receive form data

NODE - how to receive form data

AJAX example - error messages and finishing off the project

Outro - WELL DONE