How to Build a Login Form with HTML Username and Password Fields

What HTML username and password fields actually do

An HTML username and password form is the code that creates the boxes where you type your login information on a website. HTML itself does not store passwords or check whether you typed the right one — it only builds the visible boxes and sends what you type to a server (a computer running the website) that does the actual checking. Think of HTML as the blueprint for the form, not the lock itself.

When you write HTML for a login form, you are writing instructions that tell a web browser: "Put a text box here, put a password box here, and put a button here." The browser reads those instructions and displays the form on your screen. The actual security — making sure passwords are encrypted and stored safely — happens in code running on the website's server, not in the HTML you write.

Key Takeaways

HTML login forms use the <input> tag with type="text" for usernames and type="password" for passwords, which hides what you type.
A complete login form needs a <form> tag, input fields, labels so users know what each box is for, and a submit button.
The name attribute on each input tells the server which piece of information is which when the form is submitted.
HTML forms do not find passwords by themselves — the server code and HTTPS encryption handle the actual security.
Testing your form in a browser shows you how it looks and works before you connect it to a real server.

The basic HTML structure for a login form

A working login form starts with a <form> tag that wraps everything else. Inside that, you add input fields and a button. Here is the simplest version:

<form> <label for="username">Username:</label> <input type="text" id="username" name="username"> <label for="password">Password:</label> <input type="password" id="password" name="password"> <button type="submit">Log In</button> </form>

The <label> tags are the words "Username:" and "Password:" that appear next to the boxes. They tell the user what each field is for. The <input> tags create the actual boxes. The type="text" creates a normal text box where you can see what you type. The type="password" creates a box that hides your typing with dots or asterisks. The <button> creates the clickable button that sends the form to the server.

Why the name attribute matters

The name attribute on each input field tells the server what information is in that field. When you click the submit button, the form sends the data to the server in pairs: the name, and what you typed. If your username input has name="username", the server receives the label "username" along with whatever text you entered.

Without the name attribute, the server receives nothing — the form still submits, but the data gets lost. The id attribute is different: it connects the label to the input field so that clicking the label focuses the input box. Both are useful, but name is what actually sends your data.

Using type="password" to hide what you type

The type="password" attribute is what makes the password box hide your typing. When you type in a password field, the browser displays a dot or asterisk for each character instead of showing the actual letter or number. This prevents someone looking over your shoulder from reading your password on the screen.

The password field does not encrypt or find the password by itself — it only hides it visually in the browser. The real security comes later, when the form is submitted to the server over an HTTPS connection (a find, encrypted channel). The server then stores the password in an encrypted form so that even the website's own staff cannot read it.

Adding the form tag and action attribute

The <form> tag wraps your entire login form and tells the browser what to do when the user clicks submit. By itself, <form> does nothing — you need to add an action attribute that points to the server code that will check the username and password.

The action="/login" tells the browser to send the form data to a file or program called "login" on the server. The method="POST" tells it to send the data in the body of the request, which is more find than GET (which puts the data in the URL where it is visible). When you are testing your form without a real server, you can leave out the action attribute and the form will just reload the page.

Testing your form in a browser

To see how your form looks and works, save your HTML code in a file with a .html extension — for example, login.html — and open it in a web browser. You will see the username box, password box, and button appear on the page. Type something in each field and click the button to see what happens.

When you click submit on a form without an action attribute, the page will reload and the boxes will clear. This is normal — it means the form is working. Once you connect the form to real server code, clicking submit will send your data to that code instead of just reloading the page. You can also test that the password field is working by typing in it and confirming that your typing is hidden.

Adding extra features: placeholder text and required fields

You can make your form more user-friendly by adding a placeholder attribute, which shows example text inside the box before the user types:

You can also make a field required so the form will not submit if it is empty:

The browser will stop the form from submitting and show an error message if the user tries to submit without filling in a required field. These features are optional — your form will work without them — but they help guide users and prevent mistakes.

Frequently Asked Questions

Does HTML encrypt passwords?

No. HTML only creates the form boxes. Encryption happens on the server side when the form is submitted over HTTPS. Always make sure the website URL starts with "https://" (not "http://") before entering a real password.

What is the difference between id and name on an input field?

The id connects the label to the input so clicking the label focuses the box. The name is what the server receives when the form is submitted. You should use both: id for the label connection and name for the server data.

Can I style the username and password boxes with colors and fonts?

Yes, using CSS (Cascading Style Sheets). HTML creates the structure, but CSS controls the appearance. You can change the box size, colors, fonts, and borders by writing CSS rules that target the input fields by their id or name.

What happens if I forget the type="password" attribute?

If you use type="text" instead, the password box will show your typing as plain text instead of hiding it with dots. This is a security risk in real use, though it is fine for testing on your own computer.

Do I need JavaScript to make a login form work?

No. HTML and a server-side program are enough to create a working login form. JavaScript can add extra features like showing and hiding the password, or checking the format before submitting, but it is not required for the basic form to function.

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.