Recreating a form!

Week 2: 2/4 Tuesday

Link: https://www.crunchyroll.com/login#signup_form

Screenshot of Crunchyroll Sign Up Page

The input types I used for this exercise were:
Email, Text (for the username), Password, Radio (for the gender), Checkbox (for giving the user the option of receiving email updates from this site), and Submit.

For this site, I wanted to create the basics of it but I didn’t want to stop there. I checked every input type individually as if I were actually signing up to see what notices popped up if I didn’t put enough characters in or if there were any limitations. Doing that helped me to make this recreation a bit more legit!

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form Exercise</title>
</head>

<body>
    <h1><strong>Sign Up for a Free Account</strong></h1>

    <h4>Please join Crunchyroll! It's only one click away!</h4>

    <form>
        <div>
            <p>Email</p>
            <input type="email" name="email" id="email" required title="Please enter a valid email">
        </div>

        <div>
            <p>User Name</p>
            <input type="text" pattern=".{3,30}" required title="Username must be 3-30 characters (only letters, numbers, underscores, and hyphens).">
        </div>

        <div>
            <p>Password</p>
            <input type="password" name="password" id="password" minlength="6" required title="Passwords must be at least 6 characters, but no spaces.">
        </div>

        <div>
            <label>Birthday

                <!-- I won't put all the months, days or years :( -->

                <select name="Month">
                    <option>Month</option>
                    <option>Jan</option>
                    <option>Feb</option>
                    <option>Mar</option>
                    <option>Apr</option>
                </select>

                <select name="Day">
                    <option>Day</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                </select>

                <select name="Year">
                    <option>Year</option>
                    <option>2020</option>
                    <option>2019</option>
                    <option>2018</option>
                    <option>2017</option>
                </select>
            </label>
        </div>

        <div>
            <input type="radio" name="gender" id="female">
            <label for="female">Female</label>

            <input type="radio" name="gender" id="male">
            <label for="male">Male</label>

            <input type="radio" name="gender" id="other">
            <label for="other">Other</label>
        </div>

        <div>
            <input type="checkbox" name="updates" id="updates">
            <label for="updates">Yes, keep me posted on updates related to Crunchyroll.</label>
        </div>

        <button type="submit">Create Account</button>
    </form>

</body>

</html>

Diving right into the code, I made the email, username, and password inputs required, of course. For the email, if you didn’t include the ‘@whatever.com’, a notice popped up that read “Please enter a valid email” (achieved this using the title attribute). For the username, I used a pattern attribute to put the minimum and maximum characters you could put in. The range was from 3-30 and if you went under or over, the ‘notice’ read “Username must be 3-30 characters (only letters, numbers, underscores, and hyphens)” (I used the title attribute again!) For the password, I used the minlength attribute and put it to 6, and the ‘notice’ was “Passwords must be at least 6 characters, but no spaces.” For the Birthday part, I used a select element to add the month, day and year although I was only able to add 4 options for each. Moving forward, the submit button was kind of shocking in a way because although it is a submit button the words inside the button don’t necessarily have to be “submit” haha, it’s weird but I find it cool and useful.

Leave a Comment

css.php