Level:Beginner

HTML Forms

HTML forms collect user input—like contact messages, sign-ups, logins, and searches. In this lesson you’ll learn the core form elements, common input types, and the best practices that make forms accessible and user-friendly.

What is a Form?

  • A form is created with <form> and contains form controls like <input>, <select>, and <textarea>.
  • When submitted, the browser sends the form data to the URL in the action attribute.
  • The method attribute controls how data is sent:
    • GET: data goes in the URL (good for search forms)
    • POST: data goes in the request body (good for signups, logins)

The Two Most Important Rules

  • Always use a <label> for inputs. Connect it using for="id" (HTML) or htmlFor="id" (React).
  • Always include a name attribute on inputs. That is the key used when sending values.

Common Input Types

  • type="text" — normal text
  • type="email" — email format + mobile email keyboard
  • type="password" — hides typed characters
  • type="checkbox" — true/false option
  • type="radio" — choose one from a group (same name)
  • required, minLength, maxLength — built-in validation

Form Example

HTML Form Examplehtml
<!-- A basic HTML form -->
<form action="/submit" method="post">
  <label for="name">Name</label>
  <input id="name" name="name" type="text" placeholder="Jane Doe" required />

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

  <label for="topic">Topic</label>
  <select id="topic" name="topic">
    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="js">JavaScript</option>
  </select>

  <fieldset>
    <legend>Contact preference</legend>
    <label><input type="radio" name="contact" value="email" checked /> Email</label>
    <label><input type="radio" name="contact" value="phone" /> Phone</label>
  </fieldset>

  <label>
    <input type="checkbox" name="terms" required />
    I agree to the terms
  </label>

  <label for="message">Message</label>
  <textarea id="message" name="message" rows="4" placeholder="Write your message..."></textarea>

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

Preview

localhost:3000
Loading preview...