Password Fields and Email Inputs

If you’ve ever signed up for a website, you’ve typed your email and a password into a form. In this article, you’ll learn how to build those basic pieces yourself using HTML: email inputs and password fields.

You don’t need any coding experience. We’ll go step-by-step, look at short code examples, and explain each part in plain language. By the end, you’ll have a simple signup form you can actually use in your own projects.

What you’ll learn

In this beginner-friendly guide, you’ll learn:

How to create a basic HTML form
How to add an email input that checks for valid email format
How to add a password field that hides the characters
How to make sure important fields are required before submitting
How to gently guide users with placeholders and labels

You’ll also get small “Try it yourself” ideas so you can experiment and gain confidence.

Step 1: Your first HTML form

A form is a section on a web page where users can type information (like email and password) and send it to a server.

Let’s start with the simplest form structure:

<!-- Example 1: A very basic form -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Simple Form</title>
</head>
<body>
  <form>
    <!-- Form content will go here -->
  </form>
</body>
</html>

What this does:

<!DOCTYPE html> tells the browser this is an HTML5 document.
<html>, <head>, and <body> are the basic building blocks of any web page.
<form> is where you’ll put all your input fields (like email and password).

Right now, the form is empty, so it won’t show anything useful. Next, we’ll add an email field.

Try it yourself:

Open a simple text editor (like Notepad or VS Code).
Copy the code above into a new file.
Save it as form.html.
Double-click the file to open it in your browser.

You should see a blank page. That’s expected—we haven’t added any inputs yet.

Step 2: Adding an email input

HTML gives us a special input type for emails: type="email". This helps the browser check that the user typed something that looks like an email address (for example, it contains an @ sign).

Update your form with this code:

<!-- Example 2: Form with an email input -->
<form>
  <label for="user-email">Email:</label>
  <input
    type="email"       
    id="user-email"    
    name="email"       
    placeholder="you@example.com" 
    required            
  >

  <button type="submit">Sign Up</button>
</form>

Line-by-line explanation:

<label for="user-email">Email:</label>
- A label describes what the input is for.
- for="user-email" links the label to the input with the same id.
- Clicking the label will focus the corresponding input.
<input type="email" ... >
- type="email" tells the browser this field should be an email.
- id="user-email" gives the field a unique identifier (used by the label and by scripts).
- name="email" is the key used when the form data gets sent to a server.
- placeholder="you@example.com" shows a light hint text inside the box.
- required means the user cannot submit the form until this field is filled in.
<button type="submit">Sign Up</button>
- Adds a button that sends (submits) the form.

What you’ll see:

A text box labeled “Email:” with faint placeholder text.
A “Sign Up” button.
If you click “Sign Up” without typing anything, the browser will warn you that the field is required.
If you type something that doesn’t look like an email (like hello), many browsers will show an error when you try to submit.

Try it yourself:

Change the placeholder text to something else.
Remove the word required and see how the browser behavior changes when you click “Sign Up”.

Step 3: Adding a password field

Now let’s add a password input. HTML has another special type for this: type="password". This hides the characters as the user types, usually showing dots or asterisks instead.

Extend your form like this:

<!-- Example 3: Email + password form -->
<form>
  <!-- Email field -->
  <label for="user-email">Email:</label><br>
  <input
    type="email"
    id="user-email"
    name="email"
    placeholder="you@example.com"
    required
  >
  <br><br>

  <!-- Password field -->
  <label for="user-password">Password:</label><br>
  <input
    type="password"          
    id="user-password"       
    name="password"          
    placeholder="At least 8 characters" 
    required                  
  >
  <br><br>

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

Key points about type="password":

It behaves like a regular text box, but the characters are hidden for privacy.
The actual text is still sent to the server; it’s just not visible on the screen.
placeholder can guide the user about password rules (for example, minimum length).

What you’ll see:

An Email box and a Password box, each with a label.
When you type in the password box, you’ll see dots instead of the characters.
Both fields must be filled in before the browser will submit the form because they’re marked as required.

Try it yourself:

Change placeholder="At least 8 characters" to your own message.
Remove required from the password field and test.
Try typing a long vs. short password; notice that the browser doesn’t enforce length yet—that’s something you’d usually handle with extra rules.

Step 4: Making the form more realistic

Let’s create a slightly more polished example that feels closer to a real signup form. We’ll add:

A page title
A heading above the form
A short password hint below the input

Here’s the complete example:

<!-- Example 4: Simple signup page with email and password -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Sign Up</title>
</head>
<body>
  <h1>Create Your Account</h1>
  <p>Please enter your email and choose a secure password.</p>

  <form>
    <!-- Email -->
    <label for="user-email">Email</label><br>
    <input
      type="email"
      id="user-email"
      name="email"
      placeholder="you@example.com"
      required
    >
    <br><br>

    <!-- Password -->
    <label for="user-password">Password</label><br>
    <input
      type="password"
      id="user-password"
      name="password"
      placeholder="At least 8 characters"
      required
    >
    <br>
    <small>Tip: Use a mix of letters, numbers, and symbols.</small>
    <br><br>

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

What’s new here:

<h1> adds a main heading to the page.
<p> adds an introductory sentence above the form.
<small> is used for smaller hint text under the password field.
We’re using <br> tags to add simple line breaks for spacing (not the prettiest, but easy for beginners).

Try it yourself:

Change the heading text to something like “Join Our Newsletter”.
Update the button text to “Create My Account”.
Add a second password field called “Confirm Password” by copying the password block and renaming the label and id.

Step 5: Helpful tips for beginners

Here are a few simple best practices when working with email and password fields:

Always use labels. They make your form clearer and more accessible for screen readers.
Use type="email" instead of type="text" for email fields. It gives users better error messages and, on mobile, often shows an email-friendly keyboard.
Use type="password" for passwords. Never use a plain text field for passwords on real sites.
Use required for important fields. This prevents users from accidentally sending blank forms.
Give helpful placeholders and hints. Tell users what you expect (like “At least 8 characters”).

You don’t have to master everything at once. Even getting one email field and one password field working is a solid start.

Quick recap and what’s next

You’ve learned how to:

Create a basic HTML form
Add an email input using type="email" with labels and placeholders
Add a password field using type="password" that hides what the user types
Make fields required so users can’t submit incomplete forms
Build a simple but realistic signup page

Your next steps could be:

Add a “Confirm Password” field and compare values using JavaScript (later).
Style your form with CSS to make it look more professional.
Connect your form to a real backend (for example, using a simple server) so data is actually stored.

For now, celebrate that you’ve taken a real step into web development. You can already build one of the most common parts of any website: a signup form with email and password fields. Keep experimenting, keep breaking things, and keep learning—you’re doing great.

Mudzinga