Forms are the primary way users interact with websites - they let users send data to servers, search for content, log in to accounts, complete purchases, and more. Every time you've searched on Google, logged into a social media account, or filled out a survey online, you've used an HTML form.
Forms collect user input and can submit that data to a server for processing. Even if you're building a frontend-only application, understanding forms is essential because they're the foundation of user interaction on the web.
https://www.youtube.com/watch?v=VLeERv_dR6Q
<!-- Simple search form -->
<form>
<label for="search">Search:</label>
<input type="text" id="search" name="search">
<button type="submit">Search</button>
</form>
<!-- Contact form -->
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<label for="message">Message:</label>
<textarea id="message" name="message"></textarea>
<button type="submit">Send</button>
</form>
<aside> 💡
Info
Forms are like paper forms digitized - they have fields to fill in, labels describing what goes where, and a submit button to send the data. The main difference is that HTML forms can validate input and provide immediate feedback.
</aside>
<form> ElementThe <form> element wraps all form controls and defines how the data should be submitted.
<form action="/submit" method="POST">
<!-- Form controls go here -->
</form>
Key attributes:
action - URL where form data is sent when submittedmethod - HTTP method to use (GET or POST)
GET - Adds data to URL, visible in address bar, used for searchesPOST - Sends data in request body, not visible in URL, used for sensitive dataname - Identifies the form (useful when you have multiple forms)<!-- Search form using GET -->
<form action="/search" method="GET">
<input type="text" name="q">
<button type="submit">Search</button>
</form>
<!-- Submits to: /search?q=user-entered-text -->
<!-- Login form using POST -->
<form action="/login" method="POST">
<input type="email" name="email">
<input type="password" name="password">
<button type="submit">Log In</button>
</form>
<!-- Submits data in request body, not in URL -->
When to use GET vs POST:
Use GET when:
Use POST when:
<aside> ⚠️
Warning
Never use GET for passwords, credit card numbers, or other sensitive data. GET requests appear in browser history, server logs, and can be shared via URL. Always use POST for sensitive information.
</aside>
<input type="text">The most basic form control for single-line text:
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<!-- With additional attributes -->
<label for="city">City:</label>
<input
type="text"
id="city"
name="city"
placeholder="Enter your city"
required
maxlength="50"
>
Common attributes:
id - Unique identifier (connects to <label>)name - Key sent to servervalue - Default/pre-filled valueplaceholder - Hint text that disappears when typingrequired - Must be filled before submittingmaxlength - Maximum number of charactersminlength - Minimum number of charactersreadonly - User can't editdisabled - Input is inactive<input type="email">Specialized input for email addresses with built-in validation:
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
Benefits:
multiple attribute to allow multiple emails<!-- Allow multiple email addresses -->
<label for="recipients">Recipients:</label>
<input type="email" id="recipients" name="recipients" multiple>
<input type="password">Hides characters as user types:
<label for="password">Password:</label>
<input
type="password"
id="password"
name="password"
required
minlength="8"
>
Security notes:
<input type="number">For numeric values with increment/decrement controls:
<label for="age">Age:</label>
<input
type="number"
id="age"
name="age"
min="18"
max="100"
step="1"
>
<label for="price">Price:</label>
<input
type="number"
id="price"
name="price"
min="0"
step="0.01"
placeholder="0.00"
>
Attributes:
min - Minimum valuemax - Maximum valuestep - Increment/decrement amount (use 0.01 for currency)<aside> ⌨️
Hands On
Create a simple form with text input for name and email input for email address. Add labels and make both fields required. Test it in your browser - try submitting without filling fields or with invalid email format.
</aside>
<input type="checkbox">For yes/no choices or selecting multiple options:
<!-- Single checkbox -->
<input type="checkbox" id="subscribe" name="subscribe">
<label for="subscribe">Subscribe to newsletter</label>
<!-- Multiple checkboxes (same name for grouping) -->
<p>Select your interests:</p>
<input type="checkbox" id="html" name="interests" value="html">
<label for="html">HTML</label>
<input type="checkbox" id="css" name="interests" value="css">
<label for="css">CSS</label>
<input type="checkbox" id="js" name="interests" value="javascript">
<label for="js">JavaScript</label>
<!-- Pre-checked checkbox -->
<input type="checkbox" id="terms" name="terms" required checked>
<label for="terms">I agree to the terms and conditions</label>
Key points:
value attribute to specify what gets sent when checkedchecked attribute to pre-selectname to group them<input type="radio">For choosing one option from a group:
<p>Select your experience level:</p>
<input type="radio" id="beginner" name="level" value="beginner" checked>
<label for="beginner">Beginner</label>
<input type="radio" id="intermediate" name="level" value="intermediate">
<label for="intermediate">Intermediate</label>
<input type="radio" id="advanced" name="level" value="advanced">
<label for="advanced">Advanced</label>
Important:
name