🔘 Chapter Roadmap
In the previous chapter, we learned about basic text inputs. Now, we will look at Advanced Form Elements that allow users to pick from lists, write long paragraphs, and upload files!
1 Radio Buttons
Radio buttons let a user select ONLY ONE option from a list of choices (like answering a True/False question or picking a Gender).
name attribute. If they have different names, the user will be able to select all of them!
<input type="radio" name="gender" value="Female"> Female
2 Checkboxes
Unlike radio buttons, Checkboxes let a user select ZERO, ONE, or MULTIPLE options (like choosing your hobbies or pizza toppings).
<input type="checkbox"> JS
3 Dropdown List (<select>)
If you have 50 choices (like picking a Country), radio buttons take up too much space! A Dropdown Menu is the perfect solution. It uses a <select> wrapper, and each choice is an <option> inside it.
<option>Toyota</option>
4 Textareas, Files & Resets
✍️ Multi-line Text (<textarea>)
A standard <input type="text"> is only one line high. For long comments or addresses, we use a <textarea>. We control its size using rows (height) and cols (width).
<textarea rows="4" cols="50">Type your message here...</textarea>
📁 File Uploads
Want the user to upload a profile picture or a PDF document? Use the file input type!
<input type="file">
🧹 The Reset Button
If a user makes a mess of a massive form, the Reset button magically clears every single box back to blank!
<input type="reset" value="Clear Form">