Forms: input label button
Build accessible HTML forms with labeled inputs, different input types, textareas, selects, and submit buttons.
Forms: input label button is a free Frontend Academy lesson on CoddyKit. This is lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Frontend Academy learning path, and your progress syncs across the web and the CoddyKit app. The Frontend Academy course includes 4 lessons in total.
Why HTML Forms?
Forms are the primary way users send data to a server: login, search, checkout, feedback. Browsers provide a huge amount of built-in behaviour — validation, keyboard input, mobile keyboards — that you get for free by using native form elements.
The <form> Element
The <form> element wraps all related controls. The action attribute sets the URL that receives the data; method sets GET or POST. For SPAs you often prevent the default submission and handle it with JavaScript.
<form action="/submit" method="POST">
<!-- inputs go here -->
</form>Text and Email Inputs
The <input> element is the workhorse of forms. The type attribute changes its behaviour. type="text" for free text, type="email" for email addresses (validates format and shows the right mobile keyboard).
<input type="text" name="username" placeholder="Enter your name">
<input type="email" name="email" placeholder="you@example.com">Password Number and Other Types
Other useful input types: password (hides characters), number (validates numeric, shows spinners), date (shows date picker), range (slider), checkbox (boolean toggle), radio (one-of-many choice).
<input type="password" name="pass">
<input type="number" name="age" min="0" max="120">
<input type="date" name="birthday">
<input type="range" min="0" max="100" value="50">The <label> Element — Critical for Accessibility
Every input must have an associated <label>. The label tells users (and screen readers) what the field is for. Clicking the label focuses the input. Use the for attribute matching the input's id.
<label for="username">Username</label>
<input type="text" id="username" name="username">Textarea and Select
Use <textarea> for multi-line text (e.g., comments). Use <select> with <option> children for dropdown choices. Always include a default empty option with a prompt like "Choose a category".
<textarea name="message" rows="4" placeholder="Write your message..."></textarea>
<select name="level">
<option value="">Select level...</option>
<option value="a1">A1 Beginner</option>
<option value="b1">B1 Intermediate</option>
</select>Checkboxes and Radio Buttons
Group related checkboxes with a <fieldset> and <legend>. Radio buttons sharing the same name allow only one selection. Each needs its own label.
<fieldset>
<legend>Preferred languages</legend>
<label><input type="checkbox" name="lang" value="js"> JavaScript</label>
<label><input type="checkbox" name="lang" value="ts"> TypeScript</label>
</fieldset>Buttons: submit reset button
<button type="submit"> submits the form. type="reset" clears all fields. type="button" does nothing by default and is used with JavaScript event listeners. Always set the type — the default is submit.
<button type="submit">Send Message</button>
<button type="reset">Clear Form</button>
<button type="button" id="preview">Preview</button>Grouping Inputs with <fieldset>
<fieldset> groups related controls visually and semantically. The required <legend> provides a caption. Screen readers announce the legend before each control in the group, giving context.
The name Attribute — What Gets Submitted
When a form is submitted, browsers send the name=value pair for each control. Only controls with a name attribute are included. For checkboxes, only checked ones are sent.
<input type="text" name="firstName" value="Alice">
<!-- Submits: firstName=Alice -->Autofill and autocomplete
Set autocomplete attribute values like email, given-name, new-password, or current-password to help password managers and browser autofill fill in forms correctly.
<input type="email" name="email" autocomplete="email">
<input type="password" name="pass" autocomplete="current-password">Quick Check
What is the purpose of the for attribute on a <label> element?
Recap: Accessible HTML Forms
Every input needs a label. Choose the right input type for the data. Group related controls with fieldset. Use button type=submit for submission. Leverage native form features — validation, keyboard navigation, autofill — before adding JavaScript.
Learn HTML with an AI tutor — free
Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.
- Courses
- 41
- Lessons
- 163
Frequently Asked Questions
Is the “Forms: input label button” lesson free?
Yes — the full text of “Forms: input label button” is free to read here on the web. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Frontend Academy course, upgrade to CoddyKit PRO. The Frontend Academy course includes 4 lessons in total.
What will I learn in “Forms: input label button”?
Build accessible HTML forms with labeled inputs, different input types, textareas, selects, and submit buttons. You practise Frontend Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Frontend Academy?
No prior experience is required. Frontend Academy on CoddyKit is structured for beginners through advanced learners, so you can start here or from the beginning and move at your own pace. This is lesson 4 of 4.
How long does the “Forms: input label button” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Frontend Academy lesson?
Yes. Every Frontend Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Document Structure: DOCTYPE html head body
- Semantic Tags: header nav main article footer
- Text Images Links and Lists
- Forms: input label button