How to Create an Input Field in HTML

Use the <input> element when you want users to enter data such as text, email addresses, passwords, numbers, or search terms. Input fields are the foundation of forms, login pages, search bars, and sign-up flows.

What you’ll build or solve

You’ll learn how to create an input field in HTML with the correct type, label, and name. You’ll also know how to choose the right input type for the data you want to collect.

When this approach works best

This approach is the right choice when users need to type or select a value on the page.

Common real-world scenarios include:

• Name and email fields
• Password login inputs
• Search bars
• Number fields
• Newsletter sign-up forms

This is a bad idea when the content is read-only and does not need user interaction. In that case, use plain text or a button instead.

Prerequisites

You only need:

• A basic HTML file
• A text editor
• Basic HTML knowledge

Step-by-step instructions

Step 1: Add the <input> element with the correct type

Use the <input> tag and choose the type that matches the expected data.

<label for="name">Name</label>
<input type="text" id="name" name="name">

For other input types, change only the type value.

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

What to look for:

• Use text for general typing
• Use email for email addresses
• Use password for hidden password input
• Match the label for value to the input id
• Add a name so the value is useful in a form

Examples you can copy

Text input

<label for="username">Username</label>
<input type="text" id="username" name="username">

Email input

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

Password input

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

Common mistakes and how to fix them

Mistake 1: Forgetting the name attribute

What the reader might do:

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

Why it breaks: the field appears correctly, but the value has no key when submitted inside a form.

Corrected approach:

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

Mistake 2: Using the wrong input type

What the reader might do:

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

Why it breaks: the browser cannot help with email validation or mobile keyboard optimization.

Corrected approach:

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

Mistake 3: Leaving out the label

What the reader might do:

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

Why it breaks: users and screen readers do not get a clear field description.

Corrected approach:

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

Troubleshooting

If clicking the label does nothing, match the label for value to the input id.

If the wrong mobile keyboard appears, switch to the correct input type such as email, number, or password.

If the field data is missing after submission, add a name attribute.

If the field feels unclear, add a proper label above or next to it.

Quick recap

• Use <input> to collect user data
• Choose the correct type for the value
• Add a matching <label>
• Use id and name attributes
• Use specialized types like email and password when possible