Building Your First HTML Form

If you’ve ever filled out a signup form, logged into a website, or searched on Google, you’ve used an HTML form. Forms are how websites collect information from people.

In this article, you’ll build your very first HTML form from scratch. You don’t need any coding experience. We’ll go step-by-step, look at short code examples, and explain exactly what each part does.

By the end, you’ll know how to:

Create a basic HTML page
Add a simple form
Use different input types (like text, email, and password)
Add labels, placeholders, and a submit button

Let’s get started.

Step 1: Set up a basic HTML page

First, we need a simple HTML file to work in. Think of this as the “blank sheet of paper” where your form will live.

Open a plain text editor:
- On Windows: Notepad or VS Code
- On Mac: TextEdit (set to plain text) or VS Code
Create a new file and save it as form-example.html on your desktop.

Now, add this basic HTML structure:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>My First HTML Form</title>
</head>
<body>
  <h1>Sign Up</h1>

  <!-- We'll add our form here soon -->

</body>
</html>

What this does:

<!DOCTYPE html> tells the browser this is an HTML5 document.
<html>...</html> is the root of the page.
<head>...</head> holds page information (like the title).
<body>...</body> holds what you actually see on the page.

Try it yourself: Save the file, then double-click it to open it in your web browser. You should see a page with the heading “Sign Up”.

That means your basic page is ready. Now, let’s add a form.

Step 2: Create your first form

We’ll add an empty form inside the <body> tag, under the heading.

Update your file like this:

<body>
  <h1>Sign Up</h1>

  <form action="/submit" method="post">
    <!-- Form fields will go here -->
  </form>
</body>

New pieces explained:

<form>...</form>: Wraps all your form fields.
action="/submit": Tells the browser where to send the form data. For now, this is just a placeholder.
method="post": Tells the browser how to send the data. post is commonly used when sending user info.

Right now, the form is invisible because it has no fields. Let’s fix that.

Step 3: Add a text input for a name

Let’s collect the user’s name using a text input.

Add this inside the <form> tag:

<form action="/submit" method="post">
  <!-- Name field -->
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" placeholder="Enter your name" />
</form>

What each part means:

<label for="name">Name:</label>: Text that describes the field. The for="name" links it to the input with id="name".
<input type="text" ... />: Creates a one-line text box.
id="name": A unique identifier used to connect the label to the input.
name="name": The key used when sending the data to a server.
placeholder="Enter your name": Light gray hint text inside the box.

What you should see: When you refresh the page in your browser, you’ll see the word “Name:” and a box where you can type something.

Try it yourself: Change the placeholder text to something fun, like "Your full name here", and refresh the page to see the change.

Step 4: Add email and password fields

Most signup forms ask for an email and password. Let’s add those.

Update your form so it looks like this:

<form action="/submit" method="post">
  <!-- Name field -->
  <label for="name">Name:</label>
  <input
    type="text"
    id="name"
    name="name"
    placeholder="Enter your name"
  />
  <br /><br />

  <!-- Email field -->
  <label for="email">Email:</label>
  <input
    type="email"
    id="email"
    name="email"
    placeholder="Enter your email"
  />
  <br /><br />

  <!-- Password field -->
  <label for="password">Password:</label>
  <input
    type="password"
    id="password"
    name="password"
    placeholder="Create a password"
  />
</form>

What’s new here:

type="email": Tells the browser this is an email field. Some browsers will check if the input looks like an email (has @, etc.).
type="password": Hides what the user types with dots or asterisks.
<br />: Adds a line break so fields appear on separate lines. This isn’t the prettiest layout, but it’s simple for beginners.

What you should see: Three labeled boxes: one for name, one for email, and one for password. The password field should hide the characters you type.

Try it yourself: Delete one of the <br /> tags, refresh the page, and see how it changes the layout. This helps you understand how line breaks affect spacing.

Step 5: Add a submit button

A form isn’t complete without a way to submit it. Let’s add a submit button.

Add this at the bottom of your form, inside the <form> tags:

  <!-- Submit button -->
  <br /><br />
  <button type="submit">Sign Up</button>

Your full form should now look like this:

<form action="/submit" method="post">
  <!-- Name field -->
  <label for="name">Name:</label>
  <input
    type="text"
    id="name"
    name="name"
    placeholder="Enter your name"
  />
  <br /><br />

  <!-- Email field -->
  <label for="email">Email:</label>
  <input
    type="email"
    id="email"
    name="email"
    placeholder="Enter your email"
  />
  <br /><br />

  <!-- Password field -->
  <label for="password">Password:</label>
  <input
    type="password"
    id="password"
    name="password"
    placeholder="Create a password"
  />
  <br /><br />

  <!-- Submit button -->
  <button type="submit">Sign Up</button>
</form>

What the button does:

<button type="submit">Sign Up</button> creates a clickable button.
When you click it, the browser will try to send the form data to the URL in action (/submit in this case).

Since you don’t have a real server set up, your browser might show an error or just reload. That’s OK. The goal here is to build the form structure.

Step 6: Make fields required (basic validation)

Often, you don’t want people to skip important fields. The required attribute tells the browser that a field must be filled in.

Update your inputs like this:

<input
  type="text"
  id="name"
  name="name"
  placeholder="Enter your name"
  required
/>

<input
  type="email"
  id="email"
  name="email"
  placeholder="Enter your email"
  required
/>

<input
  type="password"
  id="password"
  name="password"
  placeholder="Create a password"
  required
/>

What required does:

If you click Sign Up without filling in a required field, the browser will show a message and stop the form from being submitted.
This is a simple way to add basic validation without writing any extra code.

Try it yourself: Leave one field empty and click Sign Up. Notice how the browser warns you.

Step 7: Your complete form (put it all together)

Here is the full HTML file with everything we’ve built so far:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>My First HTML Form</title>
</head>
<body>
  <h1>Sign Up</h1>

  <form action="/submit" method="post">
    <!-- Name field -->
    <label for="name">Name:</label>
    <input
      type="text"
      id="name"
      name="name"
      placeholder="Enter your name"
      required
    />
    <br /><br />

    <!-- Email field -->
    <label for="email">Email:</label>
    <input
      type="email"
      id="email"
      name="email"
      placeholder="Enter your email"
      required
    />
    <br /><br />

    <!-- Password field -->
    <label for="password">Password:</label>
    <input
      type="password"
      id="password"
      name="password"
      placeholder="Create a password"
      required
    />
    <br /><br />

    <!-- Submit button -->
    <button type="submit">Sign Up</button>
  </form>
</body>
</html>

Open this in your browser and test it out. You’ve just built a working HTML form.

Try it yourself: Add one more field

You’ve done the hard part. Now, let’s practice by adding one more field on your own.

Challenge: Add a "Favorite color" field.

Hints:

Use type="text" for a simple text box.
Follow the same pattern as the name field.
Give it an id and name like favoriteColor.

Example structure (don’t copy exactly—try first):

<label for="favoriteColor">Favorite color:</label>
<input type="text" id="favoriteColor" name="favoriteColor" />

Refresh your page and see your new field appear. Celebrate that—you just extended your form by yourself.

Quick recap: What you learned

You’ve built your first HTML form from scratch. That’s a big step.

You learned how to:

Set up a basic HTML page
Use the <form> tag with action and method
Add text, email, and password inputs
Connect labels to inputs using for and id
Use placeholder to show helpful hints
Add a submit button and basic required validation

From here, you can explore more form fields like checkboxes, radio buttons, and dropdown menus. But even now, you already understand the core ideas behind web forms.

Keep experimenting, make small changes, and refresh your browser to see what happens. Every little improvement is progress, and you’re officially coding now.

Mudzinga

Building Your First HTML Form

Step 1: Set up a basic HTML page

Step 2: Create your first form

Step 3: Add a text input for a name

Step 4: Add email and password fields

Step 5: Add a submit button

Step 6: Make fields required (basic validation)

Step 7: Your complete form (put it all together)

Try it yourself: Add one more field

Quick recap: What you learned

About Percy Mudzinga

Related Articles

Building Your First HTML Form

Step 1: Set up a basic HTML page

Step 2: Create your first form

Step 3: Add a text input for a name

Step 4: Add email and password fields

Step 5: Add a submit button

Step 6: Make fields required (basic validation)

Step 7: Your complete form (put it all together)

Try it yourself: Add one more field

Quick recap: What you learned

About Percy Mudzinga

Related Articles

Never Miss an Update