The Form Element
Every HTML form starts with a <form> tag, which wraps every input, label, and button that belongs together. Two attributes control what happens when it's submitted.
<form action="/submit" method="post"> <!-- inputs go here --> </form>
- ✓action is the address the form's data is sent to when submitted.
- ✓method is usually "get" (data appears in the URL) or "post" (data is sent invisibly in the request body).
- ✓This course focuses on building the form itself — actually processing submitted data needs a backend, which is outside this course.
Label, Input & the for/id Link
Every input needs a <label> describing what it's for. Connect them using a matching for attribute on the label and id attribute on the input — this isn't optional polish, it's what lets screen readers and click-to-focus work correctly.
<label for="name">Full Name</label> <input type="text" id="name" name="name" placeholder="Enter your full name" required>
Labels this field's data when the form is submitted — required for the value to be sent at all.
A unique identifier used to link the input to its <label>.
Faint hint text shown inside an empty field — not a substitute for a real label.
Prevents the form from submitting until this field has a value.
Beyond Plain Text
The type attribute changes what kind of input <input> becomes — different keyboards on mobile, built-in validation, and different controls entirely.
A standard single-line text field.
Validates for a basic email format and shows an email keyboard on mobile.
Masks the typed characters as dots.
Restricts input to numbers, often with up/down arrows.
A toggle that can be checked or unchecked independently of others.
One choice from a group — inputs sharing the same name become mutually exclusive.
Shows a native date picker.
Radio buttons only behave as a group — where picking one unpicks the others — if they all share the exact same name value. Give each one a different id, but the same name.
Textarea, Select & Button
Beyond <input>, three more elements round out most forms: a multi-line text box, a dropdown menu, and a submit button.
<label for="bio">Short Bio</label> <textarea id="bio" name="bio" rows="4"></textarea> <label for="course">Course</label> <select id="course" name="course"> <option>HTML & CSS</option> <option>C Programming</option> </select> <button type="submit">Sign Up</button>
Breaking Down What You Just Learned
<form action method>Wraps the whole form and defines where and how the data gets sent on submit.
<label for> + idConnects a label to its input for accessibility — clicking the label focuses the field.
type attributeChanges an <input> into a text field, email field, checkbox, radio button, date picker, and more.
<textarea> / <select> / <button>Round out the toolkit — multi-line text, dropdown choices, and the action to submit.
name attributeRequired on every field so its value is actually included when the form is submitted.
Try It Yourself
Build a two-field form: a text input for "Favorite Language" and a select dropdown with three options. Give every input a properly linked <label>, and add a submit <button>.
Build a Course Sign-Up Form
A complete, accessible form
Create a new file called day8.html inside your course folder and build a sign-up form using everything from today.
- Start with the full DOCTYPE, html, head, and body structure, and wrap everything in a <form>.
- Add labeled text inputs for "Full Name" and "Email" (using type="email"), both required.
- Add a <select> dropdown for "Preferred Course" with at least three <option> values.
- Add two radio buttons sharing the same name for "Beginner" and "Experienced."
- Add one checkbox for "Subscribe to updates."
- Add a <textarea> labeled "Why do you want to join?" and a submit <button> at the end.
Recap
Wraps every field and defines where the data is sent using action and method.
for and id link a label to its field for accessibility and usability.
text, email, password, number, checkbox, radio, and date each give different behavior.
Handle multi-line text, dropdown choices, and submitting the form.
Key Takeaways
- <form> wraps a group of fields and defines where the data goes with action and method.
- Every input needs a <label> linked via matching for and id attributes.
- The type attribute transforms <input> into text, email, checkbox, radio, date, and more.
- <textarea>, <select>, and <button> complete the standard form toolkit.
- The name attribute is required on every field for its data to be submitted at all.
Module 01 Complete!
You've covered every core HTML building block — structure, text, links, images, lists, tables, and forms. Module 02 goes deeper into semantic HTML and putting it all together in a real page.
Start Day 09 →