HTML Forms — Collecting Input from Users

Why Forms Matter

Every time you search on Google, log into Instagram, or fill a delivery address on Amazon — that is an HTML form at work. Forms collect user input and send it to a server.

Basic Form Structure

<form action="/submit" method="POST">
  <!-- inputs go here -->
  <button type="submit">Send</button>
</form>

• action — the URL where form data is sent
• method="POST" — sends data hidden (for passwords, personal info)
• method="GET" — data appears in the URL (good for search forms)

Text Inputs

<label for="name">Your Name</label>
<input type="text" id="name" name="name" placeholder="Rahul Sharma">

<label for="email">Email Address</label>
<input type="email" id="email" name="email" placeholder="rahul@example.com">

<label for="phone">Phone</label>
<input type="tel" id="phone" name="phone">

<label for="age">Age</label>
<input type="number" id="age" name="age" min="1" max="100">

<label for="dob">Date of Birth</label>
<input type="date" id="dob" name="dob">

Always pair an <input> with a <label>. The for on the label must match the id on the input. This makes forms accessible — clicking the label focuses the input.

Textarea — Multi-line Text

<label for="message">Your Message</label>
<textarea id="message" name="message" rows="5" placeholder="Write here..."></textarea>

Dropdown

<label for="city">City</label>
<select id="city" name="city">
  <option value="">-- Select City --</option>
  <option value="mumbai">Mumbai</option>
  <option value="delhi">Delhi</option>
  <option value="bangalore">Bangalore</option>
</select>

Radio Buttons — Choose One

<p>What are you learning?</p>
<input type="radio" id="frontend" name="track" value="frontend">
<label for="frontend">Frontend</label>

<input type="radio" id="backend" name="track" value="backend">
<label for="backend">Backend</label>

<input type="radio" id="fullstack" name="track" value="fullstack" checked>
<label for="fullstack">Fullstack</label>

All radio buttons in a group share the same name — this ensures only one can be selected.

Checkboxes — Choose Multiple

<input type="checkbox" id="job" name="goals" value="job">
<label for="job">Get a job</label>

<input type="checkbox" id="freelance" name="goals" value="freelance">
<label for="freelance">Freelancing</label>

Required Fields

Add the required attribute to make a field mandatory. The browser will not submit the form if it is empty:

<input type="email" name="email" required>
<textarea name="message" required></textarea>

Complete Contact Form Example

<form action="/contact" method="POST">
  <label for="name">Name *</label>
  <input type="text" id="name" name="name" required placeholder="Your full name">

  <label for="email">Email *</label>
  <input type="email" id="email" name="email" required>

  <label for="subject">Subject</label>
  <select id="subject" name="subject">
    <option>General Inquiry</option>
    <option>Support</option>
    <option>Feedback</option>
  </select>

  <label for="msg">Message *</label>
  <textarea id="msg" name="message" rows="5" required></textarea>

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

Try It Yourself

Build a sign-up form for a coding course with: name, email, phone, city dropdown, track radio buttons (frontend/backend/fullstack), goals checkboxes, and a submit button.