HTML Forms

Forms are used to get user input - login forms, search bars, contact forms, and more.

1. The Form Tag (<form>)

The <form> tag is the main container for all form elements.

<form>
</form>

Live Preview:

2. Input Fields (<input>)

Used for single-line text like names, emails, and passwords.

<input type="text" placeholder="Your Name" />
<input type="email" placeholder="Your Email" />
<input type="password" placeholder="Your Password" />

Live Preview:

3. Textarea (<textarea>)

Used for large text inputs like messages.

<textarea placeholder="Your Message"></textarea>

Live Preview:

4. Dropdown (<select> <option>)

Allows users to pick an option from a list.

<select>
  <option>HTML</option>
  <option>CSS</option>
  <option>JavaScript</option>
</select>

Live Preview:

5. Buttons (<button>)

Used to submit a form.

<button type="submit">Send</button>

Live Preview:

6. Complete Mini Form

<form>
  <input type="text" placeholder="Your Name" />
  <input type="email" placeholder="Your Email" />
  <textarea placeholder="Your Message"></textarea>
  <select>
    <option>HTML</option>
    <option>CSS</option>
    <option>JavaScript</option>
  </select>
  <button type="submit">Send</button>
</form>

Live Preview:

Next Lesson → HTML Images

Previous Lesson → HTML Tables