Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
Choice inputs allow users to select from predefined options using checkboxes, radio buttons, or dropdown menus.
Checkboxes, radio buttons, and select dropdowns
<h2>Choice Input Types</h2>
<form class="form-container">
<!-- Checkboxes: Select multiple -->
<fieldset class="input-group">
<legend>Choose Your Interests:</legend>
<label>
<input type="checkbox" name="interests" value="sports"> Sports
</label>
<label>
<input type="checkbox" name="interests" value="music"> Music
</label>
<label>
<input type="checkbox" name="interests" value="reading"> Reading
</label>
<label>
<input type="checkbox" name="interests" value="travel"> Travel
</label>
</fieldset>
<!-- Radio Buttons: Select one -->
<fieldset class="input-group">
<legend>Preferred Contact Method:</legend>
<label>
<input type="radio" name="contact" value="email"> Email
</label>
<label>
<input type="radio" name="contact" value="phone"> Phone
</label>
<label>
<input type="radio" name="contact" value="sms"> SMS
</label>
</fieldset>
<!-- Dropdown/Select: Choose one from list -->
<div class="form-group">
<label for="country">Select Country:</label>
<select id="country" name="country">
<option value="">-- Choose a country --</option>
<option value="usa">United States</option>
<option value="canada">Canada</option>
<option value="uk">United Kingdom</option>
<option value="australia">Australia</option>
</select>
</div>
<button type="submit" class="btn">Submit</button>
</form>Loading preview...
Select multiple options
💡 Multiple choice
Select exactly one option
💡 Single choice
Dropdown list of options
💡 Space-saving
Use optgroup to organize options, or the multiple attribute for multi-select dropdowns.
Optgroups and multiple selections
<h2>Select & Datalist Examples</h2>
<form class="form-container">
<!-- Basic Select -->
<div class="form-group">
<label for="size">Choose Size:</label>
<select id="size" name="size">
<option value="">-- Select Size --</option>
<option value="xs">Extra Small</option>
<option value="s">Small</option>
<option value="m">Medium</option>
<option value="l">Large</option>
<option value="xl">Extra Large</option>
</select>
</div>
<!-- Select with Optgroup -->
<div class="form-group">
<label for="browser">Choose Browser:</label>
<select id="browser" name="browser">
<optgroup label="Desktop Browsers">
<option>Chrome</option>
<option>Firefox</option>
<option>Safari</option>
<option>Edge</option>
</optgroup>
<optgroup label="Mobile Browsers">
<option>Chrome Mobile</option>
<option>Safari Mobile</option>
<option>Firefox Mobile</option>
</optgroup>
</select>
</div>
<!-- Select with Multiple -->
<div class="form-group">
<label for="languages">Choose Languages (Ctrl+Click to select multiple):</label>
<select id="languages" name="languages" multiple size="4">
<option>English</option>
<option>Spanish</option>
<option>French</option>
<option>German</option>
<option>Japanese</option>
</select>
</div>
<button type="submit" class="btn">Submit</button>
</form>Loading preview...