HTML forms use diverse interactive control elements—including <input>, <select>, <textarea>, <button>, <fieldset>, and <legend>—to capture structured data from users.
Each form element serves a distinct input collection role:
<!-- Multi-line text field -->
<textarea name="bio" rows="4" cols="50"></textarea>
<!-- Dropdown selection menu -->
<select name="country">
<option value="bd">Bangladesh</option>
<option value="us">United States</option>
</select>
<!-- Grouping related inputs -->
<fieldset>
<legend>Account Security</legend>
<input type="password" name="pin">
</fieldset>
Core form elements explained:
<input>: The primary self-closing form control supporting over 20 specialized input types.<textarea>: Multi-line expandable text input for longer comments or body messages.<select> & <option>: Dropdown menu interface for selecting single or multiple predefined choices.<button>: Clickable action button (type="submit", type="reset", or type="button").<fieldset> & <legend>: Groups related input fields visually and semantically with a titled legend border.flowchart TD
A["Form Control Elements"] --> B["<input> (Single-line text, checkboxes, radios)"]
A --> C["<textarea> (Multi-line comments & bio text)"]
A --> D["<select> -> <option> (Dropdown selection menus)"]
A --> E["<fieldset> -> <legend> (Grouped input containers)"]
A --> F["<button> (Action submission controls)"]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Form Elements Demonstration</title>
</head>
<body style="font-family: system-ui, sans-serif; background-color: #0f172a; color: #f8fafc; padding: 2rem;">
<h2>User Profile Settings</h2>
<form style="background-color: #1e293b; padding: 1.5rem; border-radius: 8px; max-width: 500px;">
<fieldset style="border: 1px solid #334155; border-radius: 6px; padding: 1rem; margin-bottom: 1rem;">
<legend style="color: #38bdf8; font-weight: bold; padding: 0 6px;">Location</legend>
<label for="country-select" style="display: block; margin-bottom: 0.5rem;">Select Country:</label>
<select id="country-select" name="country" style="width: 100%; padding: 8px; border-radius: 4px; border: 1px solid #334155; background-color: #0f172a; color: #f8fafc;">
<option value="us">United States</option>
<option value="uk">United Kingdom</option>
<option value="ca">Canada</option>
</select>
</fieldset>
<div style="margin-bottom: 1rem;">
<label for="user-bio" style="display: block; margin-bottom: 0.5rem;">Short Biography:</label>
<textarea id="user-bio" name="bio" rows="3" style="width: 100%; padding: 8px; border-radius: 4px; border: 1px solid #334155; background-color: #0f172a; color: #f8fafc;"></textarea>
</div>
<button type="submit" style="background-color: #2563eb; color: #ffffff; padding: 10px 18px; border: none; border-radius: 6px; cursor: pointer;">
Save Preferences
</button>
</form>
</body>
</html>
type="button" on non-submitting buttons: Inside forms, <button> defaults to type="submit". Specify type="button" for custom JavaScript action buttons to prevent accidental form submission.<fieldset> and <legend> for radio button groups: Helps screen readers communicate the question context when users tab through radio options.<option> placeholders in <select> menus: Add an initial disabled option like <option value="" disabled selected>Select an option</option>.Create a <select> dropdown menu with 3 options for selecting a user subscription tier (Free, Pro, Enterprise)!
Sign in to track your learning journey, earn industry-recognized certificates, and join our elite developer community.
Quick Access With
Experiment with the code from this lesson in our interactive playground.