How to Build a Username and Password Form in HTML

What HTML Code Creates a Login Form

An HTML login form is built with the <form> tag, which holds input fields for a username and password. The form itself does not store data or check passwords — it only collects what the user types and sends it somewhere else (usually to a server or backend system) to be processed. You write the HTML structure, then add other languages like JavaScript or PHP to make the form actually work.

The simplest login form uses three main pieces: a <form> container, <input> fields for the username and password, and a <button> to submit. Here is the bare minimum:

This code creates three visible elements on the page: a text box, a password box (where characters show as dots), and a clickable button. When someone clicks the button, the form sends the username and password to wherever you tell it to go.

Key Takeaways

The <form> tag wraps all the input fields and the submit button together as one unit.
Use type="text" for the username field and type="password" for the password field so characters are hidden as dots.
The name attribute on each input tells the server which field is which when the form is submitted.
A <button type="submit"> sends the form data to the location specified in the form's action attribute.
HTML alone does not check passwords or store usernames — you need a backend language like PHP, Python, or Node.js to process the data securely.

The Form Tag and Where Data Goes

The <form> tag has two important attributes: action and method. The action tells the browser where to send the username and password when the user clicks submit. The method tells it how to send them — usually POST for sensitive data like passwords.

Here is a form that sends data to a file called login.php:

When the user clicks the button, the browser collects whatever is in the username and password fields and sends it to login.php. That PHP file then checks whether the username and password match what is stored in a database. If they do, it logs the user in. If they do not, it shows an error.

If you do not write an action attribute, the form sends data back to the same page it is on. This is useful for testing but not for real login systems.

Input Fields: Text, Password, and Labels

The <input> tag creates a box where the user can type. The type attribute changes what kind of box it is. type="text" shows what you type normally. type="password" hides each character as a dot or asterisk for security.

The name attribute is how the server knows which field is which. If you name one field "username" and another "password", the backend code receives them with those names and can tell them apart. Without a name, the server receives nothing from that field.

The placeholder attribute shows light gray text inside the box as a hint. It disappears when the user starts typing. Here is a form with labels, which is better for accessibility:

<form action="login.php" method="POST"> <label for="user">Username</label> <input type="text" id="user" name="username" placeholder="Enter your username"> <label for="pass">Password</label> <input type="password" id="pass" name="password" placeholder="Enter your password"> <button type="submit">Log In</button> </form>

The <label> tag creates text that is linked to an input field. The for attribute on the label matches the id on the input. This makes the form easier to use on phones and helps screen readers understand what each field is for.

The Submit Button and Form Submission

A <button type="submit"> is the standard way to send a form. When clicked, it automatically collects all the data from every input field in the form and sends it to the action URL using the method you specified.

You can also use an <input type="submit"> instead, which works the same way but looks slightly different:

The value attribute sets the text that appears on the button. Both approaches work; <button> is more modern and easier to style with CSS.

Do not use type="button" without JavaScript, because it does nothing on its own. A button with no type attribute also does nothing unless you add JavaScript to handle the click.

Adding Basic Styling with CSS

HTML creates the form structure, but CSS makes it look good. Here is a straightforward example that centers the form and adds spacing:

This CSS makes the form 300 pixels wide, centers it on the page, adds a light border, and styles the button with a blue background. The inputs stretch to fill the width of the form, and the button is straightforward to click.

What Happens After the Form Is Submitted

When the user clicks submit, the browser sends the username and password to the file listed in the action attribute. That file (usually written in PHP, Python, Node.js, or another backend language) receives the data and decides what to do with it.

A real login system does this: it takes the username the user typed, searches a database for that username, then checks whether the password matches. If both are correct, it creates a session or token so the user stays logged in. If either is wrong, it shows an error message and the user stays on the login page.

HTML cannot do any of this by itself. HTML only collects the information and sends it. The backend code is what makes login actually work. This is why you cannot build a real login system with HTML alone — you need at least one other language.

Common Mistakes to Avoid

The most common mistake is forgetting the name attribute on input fields. Without it, the server receives nothing from that field, even though the user typed something. Always give every input a name.

Another mistake is using type="text" for the password field instead of type="password". This shows the password in plain text on the screen, which is a security problem if someone is looking over the user's shoulder.

A third mistake is forgetting the action attribute on the form. Without it, the form sends data back to the same page, which usually does nothing unless you have written JavaScript to handle it. Always specify where the form should send its data.

Finally, do not put the actual password-checking code in HTML or JavaScript. Both are visible to anyone who looks at the page source. Passwords must always be checked on the server side, where the code is hidden.

Frequently Asked Questions

Can I make the password field show a "show password" toggle?

Yes, but you need JavaScript. You can add a checkbox or button that switches the input's type between "password" and "text". When the user clicks it, JavaScript changes the type, and the dots turn into visible letters. This is a nice feature for mobile users who often mistype passwords.

What if I want to remember the username next time?

Add autocomplete="username" to the username input and autocomplete="current-password" to the password input. This tells the browser it is safe to offer to save and fill in these fields. Never use autocomplete on password fields in a shared computer.

Do I need to validate the form in HTML?

You can add required to each input to prevent submission if a field is empty. You can also use type="email" instead of type="text" if you want the browser to check that the username looks like an email. However, the real validation always happens on the server, because HTML validation can be bypassed.

What is the difference between POST and GET?

POST sends the username and password in the request body, hidden from the URL. GET puts them in the URL itself, where they are visible. Always use POST for login forms because passwords should never appear in the URL or browser history.

Can I style the form without CSS?

HTML has some built-in styling attributes like size and maxlength, but they are limited. CSS is the proper way to make forms look good. You can write CSS in a <style> tag in the HTML file, or link to a separate CSS file.

This guide is for general information only and is not medical, financial, legal, or other professional advice. For decisions specific to your situation, consult a qualified professional. See our Editorial Policy.