Everything we've built so far has been about displaying content. Forms are different - they're how your website actually collects information from users, whether that's a login screen, a contact form, or a checkout page. In this post, we're building real, working forms hands-on. We'll get into individual input types in more depth in the next post, so here we're focused on the overall structure and the fields you'll use constantly.
Quick Theory: The Form Container
Every form starts with a <form> tag, which wraps around all your input fields. Inside it, you'll place various input elements, labels, and a submit button. Let's build one immediately.
Practical: Your First Simple Form
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<br>
<button type="submit">Submit</button>
</form>Save this and open it in your browser. You'll see a text box and a submit button. Try typing something into the field and clicking submit - since we haven't set up a backend to actually process this data, the page will just reload, but the field and button themselves are fully functional.
Practical: Why <label> and for/id Matter
<label for="email">Email:</label>
<input type="email" id="email" name="email">Test this in your browser - click directly on the word "Email:" instead of clicking the input box itself. Notice the input field gets focused automatically. That's because the for attribute on the label matches the id on the input, linking them together. This isn't just a nice bonus - it's essential for accessibility, since screen readers rely on this connection to announce what each field is for.
Try This: A Broken Version (For Comparison)
<!-- Missing the for/id connection -->
<label>Email:</label>
<input type="email" name="email">Test this version too - clicking the label text no longer focuses the input. This small difference is exactly what separates a properly built form from a sloppy one, even though both might look identical visually.
Practical: Building a Contact Form
<form>
<label for="fullname">Full Name:</label><br>
<input type="text" id="fullname" name="fullname"><br><br>
<label for="email">Email Address:</label><br>
<input type="email" id="email" name="email"><br><br>
<label for="message">Message:</label><br>
<textarea id="message" name="message" rows="5" cols="30"></textarea><br><br>
<button type="submit">Send Message</button>
</form>Build this exact form. This introduces <textarea>, which is used whenever you need a larger, multi-line text input instead of a single-line field - perfect for messages, comments, or descriptions. The rows and cols attributes control its visible size.
Practical: Required Fields and Built-In Validation
<form>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<br><br>
<button type="submit">Subscribe</button>
</form>Try this - add the required attribute and then click submit without typing anything. The browser will block submission and show a small built-in message asking you to fill out the field. Now try typing something that isn't a valid email, like just "hello" with no @ symbol, and submit again - notice how the browser catches that too, since type="email" comes with automatic format validation built in.
Practical: Radio Buttons for Single-Choice Questions
<p>Choose your preferred contact method:</p>
<input type="radio" id="contact-email" name="contact-method" value="email">
<label for="contact-email">Email</label><br>
<input type="radio" id="contact-phone" name="contact-method" value="phone">
<label for="contact-phone">Phone</label><br>
<input type="radio" id="contact-text" name="contact-method" value="text">
<label for="contact-text">Text Message</label>Try this in your browser and click through the three options. Notice that selecting one automatically deselects the others - that behavior happens because all three inputs share the exact same name attribute value ("contact-method"), which groups them together as one question with mutually exclusive answers.
Practical: Checkboxes for Multiple-Choice Questions
<p>Which topics are you interested in?</p>
<input type="checkbox" id="topic-html" name="topics" value="html">
<label for="topic-html">HTML</label><br>
<input type="checkbox" id="topic-css" name="topics" value="css">
<label for="topic-css">CSS</label><br>
<input type="checkbox" id="topic-js" name="topics" value="js">
<label for="topic-js">JavaScript</label>Test this too - unlike radio buttons, you can select as many checkboxes as you want at once. This is the correct choice whenever multiple answers are genuinely valid, compared to radio buttons where only one answer makes sense.
Practical: A Dropdown Selection Menu
<label for="country">Country:</label>
<select id="country" name="country">
<option value="us">United States</option>
<option value="uk">United Kingdom</option>
<option value="ca">Canada</option>
<option value="au">Australia</option>
</select>Try this in your browser - clicking the dropdown reveals a list of options to choose from. This is generally the best choice when you have a long list of possible options, since it takes up far less visual space than a full list of radio buttons.
Practical: Grouping Related Fields with <fieldset>
<form>
<fieldset>
<legend>Personal Information</legend>
<label for="fname">First Name:</label><br>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last Name:</label><br>
<input type="text" id="lname" name="lname">
</fieldset>
</form>Try this - <fieldset> draws a visible box around a group of related fields, and <legend> gives that group a title. This becomes genuinely useful on longer forms with multiple sections, like splitting "Personal Information" from "Payment Details" on a checkout page.
Practical: Building a Complete Signup Form
Let's combine everything we've covered into one realistic signup form:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sign Up</title>
</head>
<body>
<h1>Create Your Account</h1>
<form>
<fieldset>
<legend>Account Details</legend>
<label for="username">Username:</label><br>
<input type="text" id="username" name="username" required><br><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email" required><br><br>
<label for="password">Password:</label><br>
<input type="password" id="password" name="password" required>
</fieldset>
<br>
<fieldset>
<legend>Preferences</legend>
<p>How did you hear about us?</p>
<select id="source" name="source">
<option value="friend">Friend</option>
<option value="search">Search Engine</option>
<option value="social">Social Media</option>
</select>
<br><br>
<input type="checkbox" id="newsletter" name="newsletter">
<label for="newsletter">Subscribe to our newsletter</label>
</fieldset>
<br>
<button type="submit">Create Account</button>
</form>
</body>
</html>Build this exact file and open it in your browser. Test the required fields by submitting empty, try the dropdown, check the checkbox. This is genuinely close to what real signup forms look like structurally, before any CSS styling gets applied on top.
Quick Theory: The action and method Attributes
<form action="/submit-form" method="POST">
...
</form>When you're ready to actually send form data somewhere, the action attribute specifies the URL that should receive the data, and method specifies how it's sent - usually GET for retrieving data or simple searches, and POST for submitting data like signups or messages. Since these require a backend server to actually process, we won't run this part live, but it's important to know this is what connects a form to real functionality.
Mistake to Avoid: Missing name Attributes
<!-- Don't do this -->
<input type="text" id="email">If an input doesn't have a name attribute, its value won't actually be included when the form is submitted, even though it looks completely normal on the page. Always double-check that every input meant to collect data has a proper name.
Mistake to Avoid: Forms Without Labels
<!-- Avoid this -->
<input type="text" id="phone" name="phone" placeholder="Phone Number">Relying only on a placeholder instead of a real <label> is a common but problematic shortcut. Placeholder text disappears the moment a user starts typing, and it isn't reliably announced by all screen readers. Always pair inputs with a proper, visible <label>.
Your Turn: Practice Exercise
- Build a simple event registration form with fields for name, email, and phone number.
- Add a dropdown asking which session the person wants to attend (with at least three options).
- Add a radio button group asking meal preference (e.g. vegetarian, non-vegetarian, vegan).
- Add a checkbox for agreeing to terms and conditions, marked as
required. - Group the fields into two
<fieldset>sections with appropriate legends. - Test submitting the form with fields empty to confirm your required fields are working.
Conclusion
Forms are how your website stops being a one-way street and starts actually collecting information from real users. If you built the examples in this post, you now have practical experience with text fields, text areas, radio buttons, checkboxes, dropdowns, and fieldsets - the core building blocks of nearly every form on the web. In the next post, we'll go much deeper with "HTML Input Types Explained", covering every single input type available in HTML5, including a few you've probably never used before.