<form action="/submit" method="POST">
<!-- Text input -->
<label for="name">Full Name:</label>
<input type="text" id="name" name="name" placeholder="Alice Smith" required>
<!-- Email -->
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<!-- Password -->
<label for="password">Password:</label>
<input type="password" id="password" name="password" minlength="8">
<!-- Number -->
<label for="age">Age:</label>
<input type="number" id="age" name="age" min="0" max="150">
<!-- Date -->
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">
<!-- Select dropdown -->
<label for="language">Favorite Language:</label>
<select id="language" name="language">
<option value="">-- Choose one --</option>
<option value="python">Python</option>
<option value="js">JavaScript</option>
<option value="rust">Rust</option>
</select>
<!-- Textarea -->
<label for="bio">About you:</label>
<textarea id="bio" name="bio" rows="4" cols="50"></textarea>
<!-- Checkboxes -->
<fieldset>
<legend>Interests:</legend>
<input type="checkbox" id="web" name="interest" value="web">
<label for="web">Web Development</label>
<input type="checkbox" id="data" name="interest" value="data">
<label for="data">Data Science</label>
</fieldset>
<!-- Radio buttons -->
<fieldset>
<legend>Experience:</legend>
<input type="radio" id="beginner" name="level" value="beginner">
<label for="beginner">Beginner</label>
<input type="radio" id="intermediate" name="level" value="intermediate">
<label for="intermediate">Intermediate</label>
</fieldset>
<!-- Submit button -->
<button type="submit">Submit</button>
<button type="reset">Clear</button>
</form>
⚠ Warning
Always associate labels with inputs using for and id attributes. Without this, screen readers can't tell users what an input is for, and clicking a label won't focus the input. This is basic accessibility.