Student registration form

Question

Problem statement

Create one form having registration and student login fields for course using HTML5 elements and CSS3 styling.

Expected Output

Solution

    <style type="text/css">
        .div{
            height: 20px;
            background-color: #2A646C;
            width: 60%;
            margin: auto;
        }
        .form{
            background-color: #C4D8E2;
            height: 350px;
            width: 50%;
            margin: auto;
            padding-left: 10px;
            padding-right: 10px;
            position: relative;
        }
        .para1{
            height:20px;
            color: #5D8AA8;
            font-family: sans-serif;
            font-size: 12px;
        }
        .para2{
            width:50%;
        }
        .para3{
            width: 100%;
            margin-top: 0px;
        }
        .span1{
            font-weight: bold;
            font-family: "Times New Roman";
            font-size: 16px;
            color: #5D8AA8;
            margin-right: 5px;
        }
        .span2{
            color: #5072A7;
            font-weight: bold;
            font-family: "Times New Roman";
            font-size: 16px;
        }
        .span3, .span4{
            font-weight: bold;
            font-family: "Times New Roman";
            font-size: 14px;
            color: white;
        }
        .span3{
            margin-right: 5px;
        }
        .span4{
            color: white;
            font-style: underline;
            font-size: 10px;
            position: absolute;
            right: 10px;
            bottom: 20px;
        }
        .register{
            margin: 5px;
            width: 50%;
            position: relative;
        }
        .login{
            margin: 5px;
            width: 40%;
            height: 230px;
            position: absolute;
            right: 10px;
            top: 80px;
            background-color: #5072A7;
            padding-left: 10px;
            padding-right: 10px;
        }
        .submitbutton{
            border: 1px solid black;
            width: 20%;
            height: 30px;
            position: absolute;
            right: 70px;
        }
        .loginbutton{
            border: 1px solid orange;
            background-color: #5072A7;
            width: 20%;
            height: 30px;
            position: absolute;
            right: 10px;
            bottom: 40px;
        }
        .checkbox{
            color: white;
        }
    </style>

---

            <div class="div"></div><br><br>
    <form class="form" method="POST" action="javascript:void(0)" enctype="multipart/form-data">
        <h3>Enter the system</h3>
        <p class="para1"><span>It is necessary to login in Your account in order to sign up for a course.</span></p>
        <p class="para2"><span class="span1">ARE YOU NEW?</span><span class="span2">REGISTER</span></p>

        <div class="register">
            <input type="text" name="username" required placeholder="User name" autocompleter="off"
                            pattern="^[A-Za-z0-9._-]{6,10}$" size="40" maxlength="10">
            <br><br>
            <input type="email" name="emailid" required placeholder="Email" autocompleter="off"
                                pattern="^[A-Za-z0-9 _.-]+@[A-Za-z.-]+\.[A-Za-z]{3,4}$" size="40" maxlength="30">
            <br><br>
            <input type="password" name="password" required placeholder="Password" autocompleter="off"
                                pattern="^[A-Za-z0-9 _.-]{8,15}$" size="40" maxlength="15">
            <br><br>
            <input type="password" name="confirmpassword" required placeholder="Confirm Password" 
                                pattern="^[A-Za-z0-9 _.-]{8,15}$" size="40" maxlength="15" autocompleter="off">
            <br><br>
            <input type="submit" name="register" value="Register" class="submitbutton">
        </div>
        <div class="login">
            <p class="para3"><span class="span3">ALREADY A STUDENT?</span><span class="span4">LOGIN</span></p>
            <br><br>
            <input type="text" name="loginname" required placeholder="User name" autocompleter="off"
                            pattern="^[A-Za-z0-9._-]{6,10}$" size="40" maxlength="10">
            <br><br>
            <input type="password" name="loginpassword" required placeholder="Password" autocompleter="off"
                                pattern="^[A-Za-z0-9 _.-]{8,15}$" size="40" maxlength="15">
            <br><br>
            <input type="checkbox" name="remember" value="yes"><span class="checkbox">Remember me?</span>
            <br><br>
            <input type="submit" name="register" value="Login" class="loginbutton">
            <span class="span4">Forgot Password?</span>
        </div>

    </form>

---

1) How do you review the usage of position attribute? Can it be avoided for login div container, register button and loginbutton?

2) Can we improvise this code to be responsive?

3) Can the regex pattern be improved?

Answer 1

Styling and readability

You are using classes as id's, both by not using a class twice or more and by naming them after the specific element you are using the class for.

You do not use css-selectors to their full extent. You can select elements that appear as children of an other element for example, and you can select elements based on (part) of the value of an attribute. Consider using input[type=checkbox] span instead of .checkbox for example. Another part is that you do not select groups of elements based on what you want them to be. Want elements in the right box to have white text? Do not set the text color for each idclass that appears in there, but select #login and set the text color there.

The headers appear with different sizes, and one of the elements with class span4 appears below the form through the other element with class span4. You should make the layout consistent.

Validation, semantics and correctness

You should validate your code on the site of w3.

Validation shows that you use an attribute autocompleter for your input elements. This is a non-existing attribute. You likely meant to use autocomplete (without an 'r').

You use the pattern attribute without the title attribute. When the user enters an invalid value, it is not made clear to the user how to improve this. Add a title attribute to tell what input is expected.

Your login button and register button both have the name "register".

You can use a <label> element to better specify that the text in that element explains what a checkbox is for. Either make the checkbox input element a child of the label, or use the for attribute of the label to link the checkbox and label. In either case this has the added benefit that you can check and uncheck the checkbox by clicking the label.

You are using one form. This means that all input fields in that form that are marked as required must be filled in. Except that this means that you have to fill in both the registration part and the login part to be able to pass the form.

Responsiveness and use of position

There are various ways of making two boxes appear next to each other. Other ways of accomplishing this is by using float, or preferably flex boxes. The latter one will make it easier to create a responsive layout that displays well on other screen sizes.

Your over-usage of ids-disguised-as-classes might make it difficult to create a responsive layout, as you are thinking of elements as individual components, rather than of elements in relation to each other and what certain group of elements have in common. Since you have control over both the html and the css, there is no real reason why you shouldn't be able to create a responsive layout using @media queries. See mdn for more information about usage of flexboxes.