HTML Forms

HTML Forms: Collecting User Input on Your Website

Forms are essential for interactive websites, allowing users to submit data. Let's explore how to create them in HTML.

1. Basic Form Structure

<form action="/submit-form" method="POST">
  <!-- Form elements go here -->
  <button type="submit">Submit</button>
</form>

2. Common Form Elements

Text Input

<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Your name">

Email Input

<label for="email">Email:</label>
<input type="email" id="email" name="email" required>

Password Input

<label for="pwd">Password:</label>
<input type="password" id="pwd" name="pwd" minlength="8">

3. Other Input Types

Radio Buttons

<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>

<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>

Checkboxes

<input type="checkbox" id="subscribe" name="subscribe" checked>
<label for="subscribe">Subscribe to newsletter</label>

Dropdown Select

<label for="country">Country:</label>
<select id="country" name="country">
  <option value="usa">United States</option>
  <option value="canada">Canada</option>
  <option value="uk">United Kingdom</option>
</select>

Textarea

<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" cols="50"></textarea>

4. Complete Contact Form Example

<form action="/contact" method="POST">
  <h3>Contact Us</h3>
  
  <label for="name">Full Name:</label>
  <input type="text" id="name" name="name" required>
  
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  
  <label for="subject">Subject:</label>
  <select id="subject" name="subject">
    <option value="question">Question</option>
    <option value="feedback">Feedback</option>
    <option value="support">Support</option>
  </select>
  
  <label for="message">Message:</label>
  <textarea id="message" name="message" required></textarea>
  
  <button type="submit">Send Message</button>
</form>

Forms are powerful tools for user interaction. Combine them with server-side processing to create dynamic web applications!