Forms are one of the most important elements in HTML. They allow users to interact with your website by entering data, making selections, and submitting information. Every time you log in, search, or fill out a contact form, you're using HTML forms.
What Are HTML Forms?
HTML forms are containers for different types of input elements like text fields, checkboxes, radio buttons, and submit buttons. They collect user input and send it to a server for processing, or handle it with JavaScript on the client side.
Common uses of forms include:
- Login and registration pages
- Search bars
- Contact forms
- Checkout and payment forms
- Survey and feedback forms
- Comment sections
- Newsletter signups
The Form Element
Every form starts with the <form> element. This element acts as a container for all form controls and defines how the data will be submitted.
<form>
<!-- Form inputs go here -->
</form>Important Form Attributes
The action Attribute
The action attribute specifies where to send the form data when submitted. This is usually a URL to a server-side script.
<!-- Send data to a server script -->
<form action="/submit-form">
<!-- form inputs -->
</form>
<!-- Send data to external URL -->
<form action="https://example.com/process">
<!-- form inputs -->
</form>
<!-- No action - handle with JavaScript -->
<form>
<!-- form inputs -->
</form>The method Attribute
The method attribute defines how the form data should be sent. The two main methods are GET and POST.
<!-- GET method - data visible in URL -->
<form action="/search" method="get">
<!-- Best for search forms and non-sensitive data -->
</form>
<!-- POST method - data hidden in request body -->
<form action="/login" method="post">
<!-- Best for passwords and sensitive data -->
</form>📝 GET vs POST:
- GET: Appends data to URL, visible in browser history, good for searches and filtering
- POST: Sends data in request body, more secure, good for sensitive information
A Simple Form Example
Let's create a basic contact form to see how everything works together.
<form action="/submit-contact" method="post">
<h2>Contact Us</h2>
<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 Message</button>
</form>The Input Element
The <input> element is the most common form control. It can display many different types of inputs depending on its type attribute.
<!-- Text input -->
<input type="text" name="username">
<!-- Email input -->
<input type="email" name="email">
<!-- Password input -->
<input type="password" name="password">
<!-- Submit button -->
<input type="submit" value="Submit">The name Attribute
The name attribute is crucial—it identifies the data when the form is submitted. Without a name, the input's value won't be sent.
<!-- This input WILL be submitted -->
<input type="text" name="username">
<!-- This input WON'T be submitted (no name) -->
<input type="text">Submit Buttons
Every form needs a way for users to submit their data. There are several ways to create a submit button.
<!-- Using input element -->
<input type="submit" value="Submit Form">
<!-- Using button element (recommended) -->
<button type="submit">Submit Form</button>
<!-- Button with custom styling content -->
<button type="submit">
<span>🚀</span> Send Message
</button>Complete Form Example
Here's a complete, functional signup form:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sign Up Form</title>
<style>
form {
max-width: 400px;
margin: 50px auto;
padding: 20px;
border: 1px solid #ddd;
border-radius: 8px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
input {
width: 100%;
padding: 8px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
button {
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<form action="/signup" method="post">
<h2>Create Account</h2>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<button type="submit">Sign Up</button>
</form>
</body>
</html>Form Structure Best Practices
Group Related Fields
Keep related form fields together for better organization:
<form>
<!-- Personal Information Section -->
<h3>Personal Information</h3>
<label for="firstname">First Name:</label>
<input type="text" id="firstname" name="firstname">
<label for="lastname">Last Name:</label>
<input type="text" id="lastname" name="lastname">
<!-- Contact Information Section -->
<h3>Contact Information</h3>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone">
<button type="submit">Submit</button>
</form>Use Clear Labels
Always use <label> elements and connect them to inputs with the for attribute:
<!-- Correct: Label connected to input -->
<label for="email">Email Address:</label>
<input type="email" id="email" name="email">
<!-- Also correct: Label wrapping input -->
<label>
Email Address:
<input type="email" name="email">
</label>Common Form Patterns
Search Form
<form action="/search" method="get">
<label for="search">Search:</label>
<input type="search" id="search" name="q" placeholder="Search...">
<button type="submit">Search</button>
</form>Newsletter Signup
<form action="/subscribe" method="post">
<h3>Subscribe to Our Newsletter</h3>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="your@email.com" required>
<button type="submit">Subscribe</button>
</form>Key Takeaways
- Forms collect user input using the
<form>element - The
actionattribute specifies where to send data - The
methodattribute defines how to send data (GET or POST) - Every input needs a
nameattribute to be submitted - Use
<label>elements for accessibility - Submit buttons trigger form submission
- POST method is more secure for sensitive data
- GET method is good for searches and shareable URLs
What's Next?
Now that you understand the basics of forms, the next lesson will dive into text input fields—exploring different input types like text, email, password, and search. You'll learn how to create various text inputs and when to use each type.