Lecture 5: HTML Forms From Beginner to Advance

1. What is an HTML Form?

📖 Notes:

The fundamental truth is that a website isn't just a brochure for you to read. For the web to be useful, it needs a way to **collect information *from* the user** and send it back to the server.
Without this, you couldn't log in, search for a video, buy a product, post a comment, or send a message. The web would be a read-only library.

🎥 Watch:

2. input Tag

📖 Notes:

This is the most common form tag. It's a self-closing tag that creates an input field. Its behavior changes based on its type attribute.
The most basic type is text.

🎥 Watch:

3. label Tag

📖 Notes:

**The Problem:** We have a box, but the user has no idea what they are supposed to type into it. Is it for a name? An email? A search query? The box is meaningless without a description.

**The Solution:** We need to add a descriptive piece of text. The correct HTML tag for this is the label. It's a tag specifically designed to be the title for a form field.

🎥 Watch:

4. Name & Value Attributes

📖 Notes:

**The Problem:** When the form is submitted, the browser needs to package the data to send to a server. How does it label the data? If a user types "Arjun" in the first box, how does the server know that "Arjun" is the firstName? The id attribute is only for use *within* the page; it is not sent to the server.

**The Solution:** We need another attribute whose sole purpose is to be the **"data label"** or the **"key"** for the submitted value. This is the **name** attribute.

🎥 Watch:

5. Radio Buttons

📖 Notes:

**The Problem:** What if you want to ask a question where the user can only choose **one option** from a predefined list? For example, "What is your gender?" or "What is your T-shirt size (Small, Medium, Large)?" A text box is a bad solution—users could type anything ("Med", "M", "medium"), making the data inconsistent.

**The Solution:** We need an input type where selecting one option automatically de-selects all others. This is the **radio button**: .

This introduces a new rule. How does the browser know which radio buttons belong to the same question?

**The Rule:** All radio buttons in a single group **must share the same name attribute**. The name acts as the group identifier.

🎥 Watch:

6. checkboxes

📖 Notes:

**The Problem:** Now, what if you want to ask a question where the user can choose **multiple options**? For example, "Which toppings would you like on your pizza?" A radio button won't work, because you can only select one.

**The Solution:** We need an input type that allows for multiple selections. This is the **checkbox**: input type="checkbox".

Checkboxes that are part of the same question should also share the same name. This tells the server that all the selected values belong to the same category ("toppings").

🎥 Watch:

7. Mini Project

🎥 Watch:

8. button Tag

📖 Notes:

**The Problem:** Our  works, but it's very limited. You can only put plain text in it using the value attribute. What if you want a button with an image, or with bold text?

**The Solution:** Use the  element. It's a container tag, meaning it has an opening and closing tag. This allows you to put other HTML elements *inside* it.

🎥 Watch:

9. textarea Tag

📖 Notes:

**The Problem:** Our input type="text" is great for single lines of text like a name, but it's terrible for longer input, like a user comment or a shipping address. The text just scrolls sideways and becomes unreadable.

**The Solution:** We need a dedicated element for multi-line text input. This is the **textarea** tag.

Unlike input, textarea is a container tag (it has an opening and closing tag). It's also linked to a label using the same for and id pattern.

🎥 Watch:

10. Homework

🎥 Watch: