HTML Form Elements
Building blocks for interactive forms
🧩 What are Form Elements?
Form elements are the building blocks of HTML forms. Each element serves a specific purpose for collecting different types of user input.
<!-- Different form elements -->
<input type="text"> <!-- Text input -->
<textarea></textarea> <!-- Multi-line text -->
<select></select> <!-- Dropdown list -->
<button></button> <!-- Action button -->
Common Form Elements
Input
Single-line user input
<input type="text" name="name">Textarea
Multi-line text input
<textarea name="message"></textarea>Select
Dropdown selection list
<select name="country">
<option>USA</option>
</select>Button
Clickable action buttons
<button type="submit">Send</button>🔹 Input Element
The most versatile form element with many types:
<!-- Text input -->
<input type="text" name="username" placeholder="Enter username">
<!-- Password input -->
<input type="password" name="password" placeholder="Enter password">
<!-- Email input -->
<input type="email" name="email" placeholder="Enter email">Output:
🔹 Textarea Element
For longer text input like comments or messages:
<!-- Multi-line text area -->
<textarea name="comments" rows="4" cols="50" placeholder="Enter your comments..."></textarea>
<!-- With default content -->
<textarea name="bio" rows="3">Tell us about yourself...</textarea>Output:
🔹 Select Element
Create dropdown lists for user selection:
<!-- Simple dropdown -->
<select name="country">
<option value="">Choose a country</option>
<option value="us">United States</option>
<option value="uk">United Kingdom</option>
<option value="ca">Canada</option>
</select>
<!-- Multiple selection -->
<select name="skills" multiple>
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="js">JavaScript</option>
</select>Output:
🔹 Button Element
Different types of buttons for form actions:
<!-- Submit button -->
<button type="submit">Submit Form</button>
<!-- Reset button -->
<button type="reset">Clear Form</button>
<!-- Regular button -->
<button type="button" onclick="alert('Hello!')">Click Me</button>Output:
🔹 Complete Form Example
Combining different form elements:
<form action="/register" method="post">
<!-- Text inputs -->
<input type="text" name="name" placeholder="Full Name" required>
<input type="email" name="email" placeholder="Email" required>
<!-- Dropdown -->
<select name="age_group" required>
<option value="">Select Age Group</option>
<option value="18-25">18-25</option>
<option value="26-35">26-35</option>
<option value="36+">36+</option>
</select>
<!-- Textarea -->
<textarea name="bio" placeholder="Tell us about yourself..." rows="3"></textarea>
<!-- Buttons -->
<button type="submit">Register</button>
<button type="reset">Clear</button>
</form>