Lesson 8: Forms & User Input

⏱ ~25 min Lesson 8 of 10 💚 Free

Forms are how users interact with websites — searching, signing up, logging in, placing orders. Every input field, button, and dropdown you have ever used is an HTML form element.

Key Concepts

The <form> Element

Wrap all form controls in <form>. The action attribute says where to send the data. The method attribute is usually post (sends data securely) or get (puts data in the URL).

Input Types

<input type='text'> is a text field. type='email' validates email format. type='password' hides the text. type='number' accepts numbers. type='checkbox' is a checkbox. type='submit' is the submit button.

Labels and Accessibility

Every input should have a <label> linked to it using the for attribute matching the input's id. This tells screen readers what the field is for and lets users click the label to focus the input.

🆕 Live Editor

Edit the code — the preview updates live!

HTML
CSS
PREVIEW

✅ Check Your Understanding

1. What does type='password' do?

2. Why use <label> with inputs?

3. What method sends form data securely?

← Lesson 7Lesson 9 →