HTML Forms and Input Elements

What is a form?

Forms collect information from visitors: sign-ups, logins, contact messages and search boxes. The form sends data to a server, where PHP, Node.js or another language processes it.

A simple form

<form action="/submit" method="post">
  <label for="name">Name</label>
  <input type="text" id="name" name="name" required>

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

  <label for="msg">Message</label>
  <textarea id="msg" name="message" rows="4"></textarea>

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

Key attributes

• action is where the data is sent.
• method is get (data in the URL) or post (data in the request body). Use post for anything private.
• name is the key under which the value is sent. Without it, the field is not submitted.
• <label for="id"> links a label to its input and makes the field easier to tap.
• required makes the browser check that the field is filled.

Common input types

<input type="password" name="pwd">
<input type="number" name="age" min="1" max="100">
<input type="date" name="dob">
<input type="checkbox" name="agree" value="yes">
<input type="radio" name="level" value="beginner">
<input type="file" name="resume">

Select and options

<select name="course">
  <option value="html">HTML</option>
  <option value="css">CSS</option>
</select>

Practice

Build a registration form with name, email, a password, a course dropdown and a checkbox to accept terms.