HTML – Lists, Tables & Forms
intermediate25 XP

Forms – Collecting User Input!

Build real sign-up forms and search bars β€” the same type of form used on Google, Instagram and every website!

Forms β€” How Websites Talk to You! πŸ“

Every time you search on Google, sign up for a game, or comment on YouTube, you're using an HTML form! Let's build one.

Basic Form Structure

HTML
<form action="/submit" method="post">
  <!-- form fields go here -->
  <button type="submit">Submit</button>
</form>

Input Types β€” The Building Blocks

HTML
<!-- Text input -->
<label for="name">Your Name:</label>
<input type="text" id="name" placeholder="Type your name...">

<!-- Password (hides what you type) -->
<label for="pass">Password:</label>
<input type="password" id="pass" placeholder="Enter password">

<!-- Email input (validates email format) -->
<label for="email">Email:</label>
<input type="email" id="email" placeholder="you@example.com">

<!-- Number input -->
<label for="age">Age:</label>
<input type="number" id="age" min="5" max="18">

<!-- Checkbox -->
<input type="checkbox" id="agree"> 
<label for="agree">I agree to the rules</label>

<!-- Radio buttons (pick ONE option) -->
<input type="radio" name="pet" value="dog"> Dog 🐢
<input type="radio" name="pet" value="cat"> Cat 🐱
<input type="radio" name="pet" value="fish"> Fish 🐠

Dropdown Menu (Select)

HTML
<label for="country">Country:</label>
<select id="country">
  <option value="uk">United Kingdom πŸ‡¬πŸ‡§</option>
  <option value="us">United States πŸ‡ΊπŸ‡Έ</option>
  <option value="au">Australia πŸ‡¦πŸ‡Ί</option>
</select>

Text Area (Multi-line text)

HTML
<label for="bio">Tell us about yourself:</label>
<textarea id="bio" rows="4" placeholder="Write something cool..."></textarea>

🌟 Complete Sign-Up Form

HTML
<form>
  <h2>Join Kids Coding Academy! πŸš€</h2>
  
  <label for="username">Username:</label><br>
  <input type="text" id="username" placeholder="CoolCoder123"><br><br>
  
  <label for="email">Email:</label><br>
  <input type="email" id="email" placeholder="you@email.com"><br><br>
  
  <label for="level">Experience level:</label><br>
  <select id="level">
    <option>Complete Beginner</option>
    <option>Some Experience</option>
    <option>Intermediate</option>
  </select><br><br>
  
  <input type="checkbox" id="terms">
  <label for="terms">I agree to learn loads of cool stuff!</label><br><br>
  
  <button type="submit">Sign Me Up! πŸŽ‰</button>
</form>

Quick check

01/3

Which input type hides the text as you type (perfect for passwords)?