HTML form controls like radio buttons, checkboxes, and dropdowns are used to collect different types of user input. They help users select options easily.
Radio Buttons
Radio buttons are used when a user can select only one option from a group.
Example of Radio Buttons
<input type=”radio” name=”gender” value=”male”> Male
<input type=”radio” name=”gender” value=”female”> Female
How Radio Buttons Work
All radio buttons in a group must have the same name attribute. This ensures only one option can be selected at a time.
Checkboxes
Checkboxes are used when a user can select multiple options.
Example of Checkboxes
<input type=”checkbox” name=”hobby” value=”reading”> Reading
<input type=”checkbox” name=”hobby” value=”sports”> Sports
<input type=”checkbox” name=”hobby” value=”music”> Music
How Checkboxes Work
Each checkbox works independently, so users can select one or more options.
Dropdown (Select Menu)
A dropdown is used to show a list of options in a compact way. Users can select only one option unless multiple selection is enabled.
Example of Dropdown
<select> <option>Pakistan</option> <option>India</option> <option>USA</option> </select>
Multiple Selection Dropdown
You can allow multiple selections by adding the multiple attribute.
Example of Multiple Dropdown
<select multiple> <option>HTML</option> <option>CSS</option> <option>JavaScript</option> </select>
Summary
Radio buttons allow one selection, checkboxes allow multiple selections, and dropdowns provide a compact list of options. These elements make forms more interactive and user-friendly.