Intro to HTML Forms - Full Stack Web Dev Bootcamp Day 1 (2024-06-17)

This lecture goes over HTML forms.
You first learn that you need to use the form tag as the container for all the form input elements.
You get to know the input tag that is very versatile and can take on many forms via the type attribute.
You learn to create a simple sign up form that has the user type in a name, email, password, date of birth. All of that using the input element.
You learn how the input of type email can validate the email format (like requiring the user type an at sign).
You see how the input of type password hides the characters the user types.
You see how the input of type date shows a calendar widget where the user can click a specific date.
The lesson also goes over inputs of type radio, where you have to pick from a list of choices. You learn that enclosing the input and text in a label allows the user to pick a choice by just clicking the text instead of the circle.
You learn to group radio buttons under the same name attribute.
Along the way you also learn that the name attribute is necessary for the backend server to understand what information is being sent.
The lecture also shows how to allow the user to type multiple lines with a textarea element.
You also learn how to create checkboxes to mark more than once choice.
Along the way you learn about the Developer Tools (DevTools) that is opened by pressing F12 or right-click anywhere, Inspect. You learn to monitor the form submission and see if data is being sent correctly.
You learn about GET versus POST method of HyperText Transfer Protocol (HTTP). For forms, you want to choose POST to avoid exposing the form data in the URL, because servers usually log the URL.
The lesson briefly goes over built-in HTML form validation.
You also find out the frontend can be tampered with using the DevTools, so you should always treat the frontend as insecure by default. All the enforcement of rules and validation should always be implemented in the backend server.
Source Code: github.com/nbktechworld/full-...