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)?