A Complete Form

You have seen all the individual pieces. Now let's put them together into a real, complete form — the kind you would actually build for a project.

A registration form

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sign Up</title>
  </head>
  <body>

    <h1>Create an Account</h1>

    <form action="/register" method="post">

      <label for="fullname">Full Name</label>
      <input type="text" id="fullname" name="fullname" placeholder="Your full name">

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

      <label for="password">Password</label>
      <input type="password" id="password" name="password" placeholder="Choose a password">

      <label for="level">Experience Level</label>
      <select id="level" name="level">
        <option value="beginner">Just starting out</option>
        <option value="some">Know a bit</option>
        <option value="experienced">Built things before</option>
      </select>

      <label for="bio">About You</label>
      <textarea id="bio" name="bio" rows="4" placeholder="Tell us a little about yourself..."></textarea>

      <input type="checkbox" id="newsletter" name="newsletter" value="yes">
      <label for="newsletter">Send me updates by email</label>

      <button type="submit">Create Account</button>

    </form>

  </body>
</html>

Copy that into a new file called register.html and open it in your browser. That is a complete, real registration form.

What happens when the user clicks Submit?

The browser collects all the filled-in values and sends them to the URL in action (/register) using the method (post).

On the Python side, you receive those values by their name attributes. In Flask — a Python web framework you will use when you are ready — it looks like this:

fullname = request.form["fullname"]
email    = request.form["email"]
level    = request.form["level"]

The "fullname", "email", and "level" here match the name attributes in your form exactly. That is the connection between the HTML you write now and the Python you already know.

You have been building both sides without realising it

Every name attribute you have been setting on inputs, every action and method on the form — those exist so that Python can receive the data correctly. You have been building the bridge from day one.

Challenge

Create a new file called contact.html. Build a contact form with:

Name field
Email field
A subject dropdown with at least three options
A message textarea
A submit button that says "Send Message"

Use the full HTML skeleton. Indent everything cleanly. This one is worth keeping — real websites always have a contact page.

← More Input Types Next: What is CSS? →