An HTML form is essentially a delivery box for user data. You pack it with information using different input fields, seal it by clicking a submit button, and send it off to a server to be processed (like logging in, saving a setting, or sending a message).
Every form must be wrapped in a <form> tag. This shell tells the browser where to send the data and how to package it.
1.action
The URL or server endpoint where the data gets sent (e.g., /api/login).
2.method
The HTTP method used to send the data.
GET: Appends the form data directly to the URL. Use this for simple things like search bars, where security isn't a concern.
POST: Sends the data securely in the background. Use this for passwords, personal info, or large amounts of data.
<form action="/login" method="POST">
<!-- The input fields go in here -->
</form>
The most common tool inside a form is the element. Changing its type attribute completely transforms how it looks and behaves in the browser.
eg:
1.<input type="text"> - names, cities
Standard single-line text box
2.<input type="password"> - passwords
Text box that masks characters
3.<input type="email"> - Email addresses
Text box that requires an @ symbol
4.<input type="radio"> - Selecting a payment method
Circular button (pick exactly one)
5.<input type="checkbox"> - I agree to the terms
Square box (pick multiple)
6.<textarea> - Comments, bios, messages
A large, multi-line text box
7.<select> - Selecting a Country or State
A dropdown menu
Top comments (2)
Nice overview! One thing I’d add for beginners is that the name attribute is just as important as the input type. Without a name, the browser won’t include that field when the form is submitted. It’s a tiny detail that confuses almost everyone at first. Great beginner-friendly explanation!
I found the section about forms easy to follow. While practicing HTML, I realized forms are where static pages start becoming interactive. I'm still learning, so I'll probably rebuild this example and try adding a few more fields like radio buttons and checkboxes to understand how everything works together.