Recreating a form!

Week 2: 2/4 Tuesday


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">

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

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

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

            <input type="email" name="email" id="email" required title="Please enter a valid email">

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

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


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

                <select name="Month">

                <select name="Day">

                <select name="Year">

            <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>

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

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



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 ‘’, 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