HTML Full Course [Day 10] [Hindi] 💻 | Forms (Part 2) - Radio, Checkbox, Dropdown 🚀 | Mohit Decodes

HTML Tutorial – Part 10: Forms (Part 2) — Radio, Checkbox & Dropdown

Welcome to Day 10 of the HTML Full Course [Hindi] by Mohit Decodes! Today, we dive deeper into HTML forms and learn how to use some essential form controls — radio buttons, checkboxes, and dropdown lists.

🔹 Radio Buttons (<input type="radio">)

Radio buttons allow users to select one option from a set of choices.

Example:

html
CopyEdit
<form>
<p>Select your gender:</p>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
<input type="radio" id="other" name="gender" value="other">
<label for="other">Other</label>
</form>

✅ Note: Radio buttons sharing the same name belong to one group.

🔹 Checkboxes (<input type="checkbox">)

Checkboxes let users select multiple options independently.

Example:

html
CopyEdit
<form>
<p>Select your hobbies:</p>
<input type="checkbox" id="reading" name="hobbies" value="reading">
<label for="reading">Reading</label><br>
<input type="checkbox" id="gaming" name="hobbies" value="gaming">
<label for="gaming">Gaming</label><br>
<input type="checkbox" id="traveling" name="hobbies" value="traveling">
<label for="traveling">Traveling</label>
</form>

🔹 Dropdown List (<select>)

Dropdowns let users pick one option from a collapsible list.

Example:

html
CopyEdit
<form>
<label for="country">Select your country:</label>
<select id="country" name="country">
<option value="india">India</option>
<option value="usa">USA</option>
<option value="uk">UK</option>
</select>
</form>

✅ You can also create multi-select dropdowns by adding the multiple attribute.

💡 Pro Tips:

  1. Always associate inputs with <label> for accessibility
  2. Use proper name and value attributes to capture user choices
  3. Combine with CSS for better styling and UX