HTML Form Elements
Discover diverse components available for constructing comprehensive input collection systems
Complete working example
Labelled form with local validation
Use explicit labels, named controls and native validation in a form that stays local.
Read the complete HTML document
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My code example</title>
<style>
:root{font-family:system-ui,sans-serif;color:#18223b}*{box-sizing:border-box}body{margin:0;min-height:100vh;padding:24px;background:#edf1ff;display:grid;place-items:center}main{min-width:0;width:min(100%,600px);background:white;border-radius:20px;padding:clamp(20px,5vw,32px)}h1{font-size:clamp(24px,5vw,32px);line-height:1.2;margin:0 0 16px}h2{font-size:20px;margin:24px 0 12px}p,li{line-height:1.65}a{color:#2545a8;text-underline-offset:3px}button,input,select,textarea{font:inherit}button{min-height:44px;border:1px solid #9eaed0;border-radius:10px;padding:10px 14px;background:#eff3ff;color:#18223b;cursor:pointer}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid #3658bf;outline-offset:3px}pre{max-width:100%;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;background:#eef2fa;padding:16px;border-radius:10px}code{font-family:ui-monospace,monospace}
label{display:block;font-weight:600;margin-bottom:8px}input,select,textarea{width:100%;padding:10px;border:1px solid #9eaed0;border-radius:8px}textarea{resize:vertical}
</style>
</head>
<body>
<main>
<h1>Plan a practice session</h1>
<form id="practice-form">
<p><label for="reader-name">Your name</label><input id="reader-name" name="readerName" required maxlength="60" autocomplete="name"></p>
<p><label for="reader-email">Email address</label><input id="reader-email" name="readerEmail" type="email" required autocomplete="email"></p>
<p><label for="topic">Topic</label><select id="topic" name="topic"><option value="html">HTML basics</option><option value="css">CSS styling</option><option value="js">JavaScript</option></select></p>
<p><label for="practice-note">Practice note (optional)</label><textarea id="practice-note" name="practiceNote" rows="3" maxlength="200"></textarea></p>
<button id="form-review" type="button">Review locally</button> <button type="reset">Clear form</button>
<p id="form-status" role="status">Practice only. No data is sent or saved.</p>
</form>
</main>
<script>
const form=document.querySelector('#practice-form'),status=document.querySelector('#form-status');
form.addEventListener('submit',event=>event.preventDefault());
document.querySelector('#form-review').addEventListener('click',()=>{if(!form.reportValidity())return;status.textContent='Ready to practice, '+form.elements.readerName.value.trim()+'. Nothing was submitted.';});
form.addEventListener('reset',()=>{status.textContent='Practice only. No data is sent or saved.';});
</script>
</body>
</html>How it works
Each visible label points to its control id; names identify the controls. required and type="email" use browser validation. The Review locally button checks validity and updates a status using textContent. It intentionally has no submit action, server, storage or email delivery.
Troubleshooting and limits
JavaScript is required for the local review message. Browser validation is user assistance, not server security or a guarantee that an address exists. A real form needs an approved backend, server validation, error handling and appropriate privacy information.
HTML supplies varied form components capturing distinct visitor input categories. Individual elements fulfill specialized roles delivering unique capabilities for building interactive data acquisition interfaces.
HTML Form Elements
The HTML <form> element can contain one or more of the following form elements:
<input><label><select><textarea><button><fieldset><legend><datalist><output><option><optgroup>
The <input> Element
The <input> element is the most important and versatile form element. It can be displayed in many ways, depending on the type attribute.
Example
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">The <input> element has many types. We'll cover them in detail in the next chapter (HTML Input Types).
The <label> Element
The <label> element defines a label for several form elements.
The <label> element is useful for:
- Screen readers: Will read out loud the label when the user focuses on the input
- Click target: Users can click the label to focus/toggle the input (helpful for checkboxes and radio buttons)
- Accessibility: Improves form usability for all users
The for attribute of the <label> tag should be equal to the id attribute of the <input> element to bind them together.
Example
<label for="cars">Choose a car:</label>
<input type="text" id="cars" name="cars">The <select> Element
The <select> element defines a drop-down list:
Example
<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>Result:
The <option> Element
The <option> elements define an option that can be selected.
By default, the first item in the drop-down list is selected.
To define a pre-selected option, add the selected attribute to the option:
Example - Pre-selected Option
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select>Allow Multiple Selections
Use the multiple attribute to allow the user to select more than one value:
Example
<label for="cars">Choose cars:</label>
<select id="cars" name="cars" size="4" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>Result:
Hold down Ctrl (Windows) or Command (Mac) to select multiple options
Visible Values
Use the size attribute to specify the number of visible values:
Example
<select id="cars" name="cars" size="3">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>The <textarea> Element
The <textarea> element defines a multi-line input field (a text area):
Example
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" cols="50">
Enter your message here...
</textarea>Result:
The rows attribute specifies the visible number of lines in a text area.
The cols attribute specifies the visible width of a text area.
You can also define the size of the text area by using CSS:
Example - Using CSS
<textarea id="message" name="message" style="width:100%; height:150px;">
Enter your message here...
</textarea>The <fieldset> and <legend> Elements
The <fieldset> element is used to group related data in a form.
The <legend> element defines a caption for the <fieldset> element.
Example
<form>
<fieldset>
<legend>Personal Information:</legend>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname"><br><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>Result:
The <datalist> Element
The <datalist> element specifies a list of pre-defined options for an <input> element.
Users will see a drop-down list of the pre-defined options as they input data.
The list attribute of the <input> element must refer to the id attribute of the <datalist> element.
Example
<form>
<label for="browser">Choose your browser:</label>
<input list="browsers" id="browser" name="browser">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Safari">
<option value="Edge">
<option value="Opera">
</datalist>
<input type="submit" value="Submit">
</form>Result:
💡 Tip
The datalist element provides autocomplete functionality. Users can still type their own values, but they'll also see suggestions from the datalist.
The <output> Element
The <output> element represents the result of a calculation (like one performed by a script).
Example
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
<label for="a">Number 1:</label>
<input type="range" id="a" name="a" value="50">
<label for="b">Number 2:</label>
<input type="number" id="b" name="b" value="50">
<br><br>
Total: <output name="result" for="a b">100</output>
</form>Result:
The <optgroup> Element
The <optgroup> element is used to group related options in a <select> element (drop-down list).
Example
<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
<optgroup label="Japanese Cars">
<option value="toyota">Toyota</option>
<option value="honda">Honda</option>
</optgroup>
</select>Result:
Complete Form Example with Multiple Elements
Example - Registration Form
<form action="/register.php" method="post">
<fieldset>
<legend>User Registration</legend>
<label for="username">Username:</label><br>
<input type="text" id="username" name="username" required><br><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email" required><br><br>
<label for="country">Country:</label><br>
<select id="country" name="country">
<option value="usa">United States</option>
<option value="uk">United Kingdom</option>
<option value="canada">Canada</option>
</select><br><br>
<label for="bio">Bio:</label><br>
<textarea id="bio" name="bio" rows="4" cols="50"></textarea><br><br>
<button type="submit">Register</button>
<button type="reset">Clear Form</button>
</fieldset>
</form>HTML Form Elements Summary
Test Your Knowledge
5 practice questions are available. Choose Start practice to try them.