Sign-up form best practices codelab

目录

This codelab shows you how to build a sign-up form that's secure, accessible, and easy to use.

Step 1: Use meaningful HTML

In this step you'll learn how to use form elements to make the most of built-in browser features.

Take a look at the HTML for your form in index.html. You'll see there are inputs for name, email and password. Each is in a section, and each has a label. The Sign up button is… a <button>! Later in this codelab, you'll learn the special powers of all these elements.

<input> elements don't have closing tags. That's because they are void (empty) elements: they don't have any content in themselves. A "/" character at the end of a void element is optional: either <input> or <input /> is OK.

<form action="#" method="post">
        
  <h1>Sign up</h1>
  
  <section>
    <label>Full name</label>
    <input>
  </section>
  
  <section>
    <label>Email</label>
    <input>
  </section>
  
  <section>
    <label>Password</label>
    <input>
  </section>
  
  <button id="sign-up">Sign up</button>
  
</form>

Click View App to preview your sign-up form. This shows you what a form looks like with no CSS other than the default browser styles.

Browser Default Styles lists default CSS for HTML elements.

Test your form

You could acquire a lot of hardware and set up a device lab, but there are cheaper and simpler ways to try out your form on a range of browsers, platforms and devices:

Testing your site on a range of devices and browsers is especially important for forms, because small problems can cause high bounce rates and cause users to give up on creating an account or completing a purchase.

Click View App to preview your sign-up form.

Step 2: Add CSS to make the form work better

Click View Source to return to your source code.

There's nothing wrong with the HTML so far, but you need to make sure your form works well for a range of users on mobile and desktop.

In this step you'll add CSS to make the form easier to use.

Copy and paste all the following CSS into css/main.css file:

https://glitch.com/edit/#!/sign-up-form-codelab-2

Click View App to see your styled sign-up form. Then click View Source to return to css/main.css.

Viewport in this context means the display area available for your page. Mobile phones have a smaller viewport than laptops, and a small browser window on a desktop monitor has a smaller viewport than a maximized browser window.

Step 3: Add attributes to help users enter data

In this step you add attributes to your input elements to enable the browser to store and autofill form field values, and warn of fields with missing or invalid data.

Update your index.html file so the form code looks like this:

<form action="#" method="post">
        
  <h1>Sign up</h1>
  
  <section>        
    <label for="name">Full name</label>
    <input id="name" name="name" autocomplete="name" 
           pattern="[\p{L}\.\- ]+" required>
  </section>

  <section>        
    <label for="email">Email</label>
    <input id="email" name="email" autocomplete="username"
           type="email" required>
  </section>
  
  <section>
    <label for="password">Password</label>
    <input id="password" name="password" autocomplete="new-password" 
           type="password" minlength="8" required>
  </section>
  
  <button id="sign-up">Sign up</button>
  
</form>

The type values do a lot:

Click View App and then click the Email label. What happens? Focus moves to the email input because the label has a for value that matches the email input's id. The other labels and inputs work the same way. Screenreaders also announce label text when the label (or the label's associated input) gets focus. You can try that using the ChromeVox extension.

Try submitting the form with an empty field. The browser won't submit the form, and it prompts to complete missing data and sets focus. That's because you added the require attribute to all the inputs. Now try submitting with a password that has less than eight characters. The browser warns that the password isn't long enough and sets focus on the password input because of the minlength="8" attribute. The same works for pattern (used for the name input) and other validation constraints. The browser does all this automatically, without needing any extra code.

Using the autocomplete value name for the Full name input makes sense, but what about the other inputs?

Sign-in form best practices has more tips for improving form design, layout, and accessibility.

Step 4: Help users enter secure passwords

With the form as it is, did you notice anything wrong with the password input?

There are two issues:

Don't make users guess!

Update the password section of index.html with the following code:

<section>
  <label for="password">Password</label>
  <button id="toggle-password" type="button" aria-label="Show password as plain text. 
          Warning: this will display your password on the screen.">Show password</button>
  <input id="password" name="password" type="password" autocomplete="new-password" 
         minlength="8" aria-describedby="password-constraints" required>
  <div id="password-constraints">Eight or more characters.</div>
</section>

This adds new features to help users enter passwords:

To enable the password-toggle button and show users information about password constraints, copy all the JavaScript below and paste it into your own js/main.js file.

https://glitch.com/edit/#!/sign-up-form-codelab-4

(The CSS is already in place from step 2. Take a look, to see how the password-toggle button is styled and positioned.)

Here's how your form should look at this point:

https://glitch.com/edit/#!/sign-up-form-codelab-4

Going further

This codelab doesn't cover several important features:

版本号 #3
由 壳壳虫 创建于 2026-10-31 21:44:45 UTC
由 cocobook-sync 更新于 2026-11-04 17:36:49 UTC