HTML Form Elements
HTML Form Elements
HTML form elements are used to collect user input. They include text fields, buttons, checkboxes, radio buttons, dropdowns, and more. All form elements are usually placed inside the <form> tag.
Common Form Elements
| Element | Description | Example |
|---|---|---|
<input type="text"> | Single-line text input | <input type="text" name="username"> |
<input type="password"> | Password input | <input type="password" name="pwd"> |
<input type="email"> | Email input with validation | <input type="email" name="email"> |
<input type="number"> | Numeric input | <input type="number" name="age"> |
<textarea> | Multi-line text input | <textarea name="message"></textarea> |
<select> + <option> | Dropdown selection | <select name="country"><option>India</option></select> |
<input type="radio"> | Radio buttons (select one) | <input type="radio" name="gender" value="male"> Male |
<input type="checkbox"> | Checkboxes (select multiple) | <input type="checkbox" name="hobby" value="reading"> Reading |
<button> / <input type="submit"> | Submit button | <button type="submit">Submit</button> |
<input type="reset"> | Reset button | <input type="reset"> |
<input type="file"> | File upload | <input type="file" name="upload"> |
<input type="hidden"> | Hidden data sent to server | <input type="hidden" name="userID" value="123"> |
<label> | Label for form elements | <label for="username">Username:</label> |
<fieldset> | Groups related elements | <fieldset><legend>Personal Info</legend>...</fieldset> |
<legend> | Title for <fieldset> | <legend>Contact Details</legend> |
Example Form with Multiple Elements
Output Preview
Text input for Name
Email input for Email
Radio buttons for Gender
Checkboxes for Hobbies
Dropdown for Country
Textarea for Message
Submit and Reset buttons
