Module 6: Forms · Lesson 7 of 7
How to Make a Sign Up Form in HTML: Full Project
All lessons in Module 6
Goal: Build a full sign-up form with labels and built-in checks.
Learn
Filling in a good sign-up form takes no thought. Each box has a label, each question gets the right control, and the browser catches mistakes before anything is sent. Go through this checklist for every field:
- Does it have a connected
<label>? - Does it have a
name, so its value is actually sent? - Is it the best
typeor control for the question? - Which rules does it need:
required,minlength,min? - Do related choices sit in a
<fieldset>with a<legend>?
Once it's done, play the most annoying user you can imagine. Submit it empty. Use a short password. Skip the checkbox. The browser should stop you each time. The W3C forms accessibility tutorial (opens in a new tab) covers more patterns, part by part.
The short version
- Each field gets a connected label, a
name, and thetypeor control that fits the question. - Validation attributes such as
requiredandminlengthcatch mistakes before the form is sent. - Put related radio buttons in a
<fieldset>whose<legend>asks the question. - Test it the way an annoying user would. Submit it empty, too short and unticked, and check that the browser stops you.
Example
<form>
<label for="user">Username</label>
<input type="text" id="user" name="user" required minlength="3">
<label><input type="checkbox" name="news" value="yes"> Send me the newsletter</label>
<button type="submit">Sign up</button>
</form>Your task
The Starlight Book Club needs a sign-up form. Build it inside the <form> that is already there:
- A required username text box.
- A required
type="email"box. - A required password box with
minlength="8". - A
<select>for favorite genre with at least 3 options. - A
<fieldset>with a<legend>and at least 2 radio buttons, for example: meet online or in person. - A required checkbox:
I agree to the club rules. - A
type="submit"button.
Give every control a name and a label. In total that means at least 6 named controls and 6 labels.
Ctrl+Enter checks your code. Try Visual edit to change the page directly, DOM tree to see how the browser reads it, and Outline to hear it like a screen reader.
Quick quiz
Common mistakes
Wrong
<label for="password">Password</label>
<input type="password" id="pw" name="pw" required minlength="8">Right
<label for="pw">Password</label>
<input type="password" id="pw" name="pw" required minlength="8">The for value has to match the input's id exactly, and here it points at an id that doesn't exist, so the password box has no label.
Wrong
<select id="genre" name="genre" required>
<option>Choose a genre</option>
<option value="fantasy">Fantasy</option>
</select>Right
<select id="genre" name="genre" required>
<option value="">Choose a genre</option>
<option value="fantasy">Fantasy</option>
</select>With no value, an option sends its text and required accepts the prompt as an answer, while value="" forces a real pick.
Go deeper
Live sign-up forms add a few attributes that make a big difference. Use method="post". With the default GET method from forms and inputs, the password would show up in the address bar, the browser history and the server logs. Serve the form over HTTPS too, so the data is encrypted in transit.
Password managers work better with the autocomplete attribute (opens in a new tab): autocomplete="username" on the username, autocomplete="email" on the email and autocomplete="new-password" on the password. The manager then offers to generate a strong password and save it. A login form uses current-password for the same field.
Fewer fields get more sign-ups. Ask for what you need today. The favorite genre can wait. Every extra box gives people one more reason to quit.
Put hints about the rules beside the fields, as well as in error messages. "At least 8 characters" under the password box stops the error before it happens.
Frequently asked questions
How do I make a sign up form in HTML?
Put one labelled control per piece of information inside a <form>. That means a text input for the username, type="email" for the email and type="password" for the password. Each one gets a name plus required and length rules. Radio buttons go together in a fieldset. Add a required terms checkbox, and close with <button type="submit">.
How do I set a minimum password length in HTML?
Put minlength on the password input, along with required: <input type="password" name="pw" required minlength="8">. The browser will refuse a shorter password and tell the visitor why. Mention the rule in the label or in a hint under the field as well, so people see it before they type. The built-in validation lesson covers the other rules.
Where does the data from an HTML sign up form go?
To the address in the form's action attribute. A program on that server reads each name=value pair, checks it a second time and saves the new account, usually in a database (opens in a new tab). HTML by itself cannot store accounts. On a sign-up form, set method="post" as well, which keeps the password out of the page address.