Learn HTML -- What if I wanted a different PATTERN ATTRIBUTE 🤔?

HTML-CSS
1

Tell us what’s happening:

Hi,
What if I wanted to request that a more complex password is required, such as it must have lower and upper case, number and symbols/characters. How would I put that requirement into the code so that the password field would accept only that.

According to the challenge instruction below, this is how I supposed to set the pattern for a moderate/mild password. :point_down:Preformatted text

Add a pattern attribute to the password input element to require the input match: [a-z0-5]{8,}

<label for="new-password">Create a New Password: <input id="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Registration Form</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Registration Form</h1>
    <p>Please fill out this form with the required information</p>
    <form method="post" action='https://register-demo.freecodecamp.org'>
      <fieldset>
        <label for="first-name">Enter Your First Name: <input id="first-name" type="text" required /></label>
        <label for="last-name">Enter Your Last Name: <input id="last-name" type="text" required /></label>
        <label for="email">Enter Your Email: <input id="email" type="email" required /></label>
        <label for="new-password">Create a New Password: <input id="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
      </fieldset>

<!-- User Editable Region -->

      <fieldset>

      </fieldset>

<!-- User Editable Region -->

      <fieldset></fieldset>
      <input type="submit" value="Submit" />
    </form>
  </body>
</html>

/* file: styles.css */
body {
  width: 100%;
  height: 100vh;
  margin: 0;
  background-color: #1b1b32;
  color: #f5f6f7;
}

label {
  display: block;
  margin: 0.5rem 0;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36 Edg/110.0.1587.50

Challenge: Learn HTML Forms by Building a Registration Form - Step 24

Link to the challenge:

2

The pattern at play here is called a RegEx (Regular Expression). It’s covered later in Javascript, but its a matching function to test text.

[a-z0-5]{8,}

The [..] indicates a single character, and whats inside indicates what its allowed to be(in this case something between a-z or 0-5), while the {..} indicates how many times that required character needs to repeat(in this case, minimum 8 times, no maximum). So it means repeat any set of lowercase or numbers 0-5 a minimum of 8 times.

Regex is pretty complicated, so can’t really explain too much more without writing a book… To check for different types of characters throughout the string you have to use what they call look ahead/behind expressions to check for something while not exactly matching it… I pulled this one off of a StackOverflow thread… It checks for any set of characters that has at least one number, a lowercase, an uppercase, and a non-word character (that last [\W])… although if you wanted to specify exact what type of special chars you’ll except may want to replace that W with [-+_!@#$%^&*.,?]

(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*\W)

A note, I did not actually test that in an HTML textbox to see if it worked… just an example of how it might look.

3

Hi,
thank you for your response. Even though I don’t really understand it, I appreciate your effort. Nonetheless, it gives me an idea of what a complex password request might look like. I will keep looking into it.

Thank you.

4

Yeah, its not surprising you don’t understand… the regex was one thing I found to be not very intuitive, and while simplistic, I always have to go back to my notes to remember it. Like I said, there is an entire class section explaining what a regex is, how its written, and how to use it… you’ll get to it soon.

One other note… for a more complex password verification, Javascript, or the backend server would actually be used to verify the password format, not just the pattern field in the HTML. What that means is after the password is submitted, the programming in the background would actually check it. You’ll see stuff like that in the backend programming section of the classes. There are many ways to solve this problem. Happy coding:)