🌐beginner

HTML Forms — Collecting User Input

Learn how to create forms with text inputs, buttons, checkboxes, and dropdowns to collect information from users.

Why Forms Matter

Every login page, search bar, contact form, and sign-up screen uses HTML forms. They're how users send information to a website. Understanding forms is essential for building anything interactive.

A Simple Form

html

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

  <label for="email">Email:</label>
  <input type="email" id="email" placeholder="you@example.com">

  <label for="message">Message:</label>
  <textarea id="message" rows="4" placeholder="Type here..."></textarea>

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

Input Types

HTML gives you many input types: • type="text" — plain text • type="email" — email with validation • type="password" — hidden characters • type="number" — numbers only • type="checkbox" — tick box • type="radio" — pick one from a group • type="range" — slider • type="color" — color picker • type="date" — date picker

Dropdown & Checkboxes

html

<!-- Dropdown -->
<select id="color">
  <option value="red">Red</option>
  <option value="blue">Blue</option>
  <option value="green">Green</option>
</select>

<!-- Checkboxes -->
<label>
  <input type="checkbox" name="skills" value="html"> HTML
</label>
<label>
  <input type="checkbox" name="skills" value="css"> CSS
</label>

<!-- Radio buttons -->
<label>
  <input type="radio" name="level" value="beginner"> Beginner
</label>
<label>
  <input type="radio" name="level" value="advanced"> Advanced
</label>

Pro Tip

Always use <label> with your inputs — it makes forms accessible and lets users click the label to focus the input. Connect them using the 'for' attribute matching the input's 'id'.

Try It Yourself

Build a sign-up form for a coding club. Include: name, email, age (number), experience level (radio: beginner/intermediate/advanced), which languages they know (checkboxes), and a submit button.

HTML Basics — Your First Web Page

Ready to build?

Put what you learned into practice — pick a project and start coding.

Start Building Free