User Input with Forms

Create interactive forms to collect user data using HTML's input elements.

Basic Form Elements

<form>
  <label>
    Name: <input type="text" name="name">
  </label>
  <button type="submit">Send</button>
</form>
→

Essential components:

  • <form> - Input container
  • <input> - Various field types
  • <textarea> - Multi-line text

Input Variants

<!-- Email input -->
<input type="email" name="email" required>

<!-- Message field -->
<textarea name="message" rows="4"></textarea>
→
Email: 
Message field:

Common attributes:

  • type - Defines input behavior
  • name - Identifies form data
  • required - Mandatory field

Common Errors

<!-- Missing labels -->
<input type="text"> <!-- No name/label -->

<!-- Wrong button type -->
<button>Submit</button> <!-- Defaults to submit -->

Practical Use: Newsletter Signup

<form class="newsletter">
  <input type="email" name="email" placeholder="Enter email">
  <label>
    <input type="checkbox" name="terms"> Accept terms
  </label>
  <button type="submit">Subscribe</button>
</form>
→

Your Task: Contact Form

Create a form containing:

  1. Text input for name
  2. Email input field
  3. Message textarea
  4. Submit button
Section 1/5Basic Form Elements

Basic Form Elements

Essential components:<form> - Input container<input> - Various field types<textarea> - Multi-line text

User Input with Forms

Create interactive forms to collect user data using HTML's input elements.

Basic Form Elements

<form>
  <label>
    Name: <input type="text" name="name">
  </label>
  <button type="submit">Send</button>
</form>
→

Essential components:

  • <form> - Input container
  • <input> - Various field types
  • <textarea> - Multi-line text

HTML Editor

Preview