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 HTML 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
