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 — 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, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
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.
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, and the Frontend Academy course includes 4 lessons in total. 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.
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; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.
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.