2
\$\begingroup\$

Problem statement

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

Expected Output

enter image description here

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?

\$\endgroup\$
8
  • \$\begingroup\$ you shouldn't need anything absolute here, and for responsive just add a media query breakpoint @media (min-width: 768px){} and make the containers block instead of inline \$\endgroup\$
    – caub
    Dec 22 '15 at 15:54
  • 2
    \$\begingroup\$ Strange problem statement: "Create one form". I see two independent (and mutually exclusive) forms in that screenshot. I also see some odd text/poor UI ("Remember me?" with a question mark, "Your" capitalized). Oh and the "Register" button doesn't line up with the fields above it... Mostly, though, the task is more about CSS than HTML5 it seems. Sure, HTML5 tags are useful for behavior (i.e. email-type fields), but matching the screenshot is a pure layout task regardless of HTML-flavor. In all, a pretty poor problem statement. Where the heck did this come from? \$\endgroup\$
    – Flambino
    Dec 22 '15 at 16:57
  • \$\begingroup\$ @Flambino From here. Would you please suggest the recommended layout, without any hesitation in ignoring minor/major errors in problem statement. \$\endgroup\$ Dec 22 '15 at 23:18
  • \$\begingroup\$ @overexchange Oh, the layout is fine. It just struck me as odd that the problem statement specifically mentioned HTML5, but said nothing of CSS, though that's the bigger task here. CSS is about layout and styling, so a visual reference makes sense for that. But HTML is about structure and semantics, yet the exercise doesn't give you anything to check your work against. It's as though a writing teacher told you "Write a novel in English. I don't care what it's about or if it's any good, but the finished book should look exactly like this." That wouldn't be a useful writing exercise. \$\endgroup\$
    – Flambino
    Dec 22 '15 at 23:35
  • \$\begingroup\$ @Flambino We know, what technologiess we want for required layout, given. So, getting into the correctness of problem statement, is unnecessary. Expected layout speaks a lot more than the problem statement. \$\endgroup\$ Dec 22 '15 at 23:45
4
\$\begingroup\$

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.

\$\endgroup\$
4
  • \$\begingroup\$ What about action="javascript:void(0)"? Is it the right usage? \$\endgroup\$ Dec 22 '15 at 23:58
  • \$\begingroup\$ You'll likely replace that at some point with the uri of the actual script that handles the input. Even if you use javascript to login using ajax, you still want to have an actual script uri in there in case javascript is turned off. \$\endgroup\$
    – Sumurai8
    Dec 23 '15 at 9:27
  • \$\begingroup\$ I modified the code accordingly here but the height of the container2 does not grow accordingly \$\endgroup\$ Dec 24 '15 at 8:00
  • \$\begingroup\$ This is not the place to get help on how to fix that. I do not see a @media query though. See sketchingwithcss.com/samplechapter/cheatsheet.html for more information too. \$\endgroup\$
    – Sumurai8
    Dec 24 '15 at 9:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.