Beginner's Guide to Building an HTML Form with Input Fields

Create a Simple HTML Form with Name, Email, and Password Fields

Creating a form in HTML is one of the most essential skills for any web developer. Whether you're building a contact form, login form, or registration page, HTML forms are used to collect input from users.

In this guide, you'll learn how to create a basic HTML form with three common fields:

Name
Email
Password

Let’s get started step-by-step.

🔹 Step 1: Create the Basic HTML Structure

Before creating the form, we need a basic HTML page structure. This includes:

Explanation:

<!DOCTYPE html>: Declares that this is an HTML5 document.
<html>: Root element that wraps all content.
<head>: Contains the title and other metadata.
<title>: Sets the title of the web page.
<body>: All visible content goes inside the body tag.

🔹 Step 2: Add the Form Tag

Now let’s insert a form element inside the <body>:

Explanation:

<form>: Starts the form.
action="#": Where the form data will be sent. We’re using # for now.
method="post": Sends data securely (especially useful for passwords).

🔹 Step 3: Add Input Fields – Name, Email, Password

Now let’s add the three input fields and a submit button inside the form:

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

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

  <label for="password">Password:</label><br>
  <input type="password" id="password" name="password" required><br><br>

  <input type="submit" value="Submit">
</form>

🔍 Explanation of Each Part

✅ `<label for="name">Name:</label>`

This is a text label for the name field.
The for attribute connects the label to the id of the input field.

✅ `<input type="text" id="name" name="name">`

type="text": Creates a text box for name input.
id and name: Important for identifying the field.
required: Makes the field mandatory to fill.

✅ `<input type="email" id="email" name="email">`

type="email": Ensures the user enters a proper email format.
Browsers will show an error if the email format is incorrect.

✅ `<input type="password" id="password" name="password">`

type="password": Hides the input by displaying dots or asterisks.
Used for secure data like login passwords.

✅ `<input type="submit" value="Submit">`

Creates a submit button.
Clicking this sends the data to the server (or does nothing in our example since action="#").

🧪 Final Code – Copy and Paste

Here’s the full code with everything combined:

<!DOCTYPE html>
<html>
<head>
  <title>Simple HTML Form</title>
</head>
<body>

  <h2>Registration Form</h2>

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

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

    <label for="password">Password:</label><br>
    <input type="password" id="password" name="password" required><br><br>

    <input type="submit" value="Submit">
  </form>

</body>
</html>

🎉 Output Preview

When this code runs in a browser, you’ll see:

A heading: "Registration Form"
Fields: Name, Email, Password
A Submit button

Try entering values and hitting Submit — although the data won't go anywhere right now, the browser will check if all fields are filled.

🛠️ Tips for Beginners

Always use label tags — they improve accessibility.
Use required to make sure users don’t skip fields.
Use type="email" and type="password" to improve user experience and validation.
Eventually, you can connect the form to a server with PHP, Node.js, or other languages.

📌 Conclusion

You’ve just learned how to create a basic HTML form with name, email, and password fields! This is the foundation of most login, registration, and contact pages. Once you're comfortable with forms, you can explore things like validation, styling with CSS, or processing with JavaScript.

TOPICS MENTIONED IN THIS ARTICLE

HTML form tutorial

create HTML form

name email password form HTML

HTML form input fields

beginner HTML form guide

Beginner's Guide to Building an HTML Form with Input Fields

Follow us on

Create a Simple HTML Form with Name, Email, and Password Fields

🔹 Step 1: Create the Basic HTML Structure

🔹 Step 2: Add the Form Tag

🔹 Step 3: Add Input Fields – Name, Email, Password

🔍 Explanation of Each Part

✅ `<label for="name">Name:</label>`

✅ `<input type="text" id="name" name="name">`

✅ `<input type="email" id="email" name="email">`

✅ `<input type="password" id="password" name="password">`

✅ `<input type="submit" value="Submit">`

🧪 Final Code – Copy and Paste

🎉 Output Preview

🛠️ Tips for Beginners

📌 Conclusion

TOPICS MENTIONED IN THIS ARTICLE

Website

Policies and Guidelines

Contact Us

Beginner's Guide to Building an HTML Form with Input Fields

Follow us on

Create a Simple HTML Form with Name, Email, and Password Fields

🔹 Step 1: Create the Basic HTML Structure

🔹 Step 2: Add the Form Tag

🔹 Step 3: Add Input Fields – Name, Email, Password

🔍 Explanation of Each Part

✅ <label for="name">Name:</label>

✅ <input type="text" id="name" name="name">

✅ <input type="email" id="email" name="email">

✅ <input type="password" id="password" name="password">

✅ <input type="submit" value="Submit">

🧪 Final Code – Copy and Paste

🎉 Output Preview

🛠️ Tips for Beginners

📌 Conclusion

TOPICS MENTIONED IN THIS ARTICLE

Website

Policies and Guidelines

Contact Us

✅ `<label for="name">Name:</label>`

✅ `<input type="text" id="name" name="name">`

✅ `<input type="email" id="email" name="email">`

✅ `<input type="password" id="password" name="password">`

✅ `<input type="submit" value="Submit">`