0

I have recently started learning how to style forms and came across this particular form on w3schools. https://www.w3schools.com/howto/howto_css_login_form.asp.

I have pasted the same code that the website tells me to and it will not display correctly. Here is the code provided from the website.

Html:

<html>

<head>
    <title>TODO supply a title</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <form action="action_page.php">
        <div class="imgcontainer">
            <img src="images/avatar.jpg" alt="Avatar" class="avatar">
        </div>

        <div class="container">
            <label for="uname"><b>Username</b></label>
            <input type="text" placeholder="Enter Username" name="uname" required>

            <label for="psw"><b>Password</b></label>
            <input type="password" placeholder="Enter Password" name="psw" required>

            <button type="submit">Login</button>
            <label>
                <input type="checkbox" checked="checked" name="remember"> Remember me
            </label>
        </div>

        <div class="container" style="background-color:#f1f1f1">
            <button type="button" class="cancelbtn">Cancel</button>
            <span class="psw">Forgot <a href="#">password?</a></span>
        </div>
    </form>
</body>

</html>

CSS:

/* Bordered form */
form {
  border: 3px solid #f1f1f1;
}

/* Full-width inputs */
input[type=text], input[type=password] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

/* Set a style for all buttons */
button {
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
}

/* Add a hover effect for buttons */
button:hover {
  opacity: 0.8;
}

/* Extra style for the cancel button (red) */
.cancelbtn {
  width: auto;
  padding: 10px 18px;
  background-color: #f44336;
}

/* Center the avatar image inside this container */
.imgcontainer {
  text-align: center;
  margin: 24px 0 12px 0;
}

/* Avatar image */
img.avatar {
  width: 40%;
  border-radius: 50%;
}

/* Add padding to containers */
.container {
  padding: 16px;
}

/* The "Forgot password" text */
span.psw {
  float: right;
  padding-top: 16px;
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
  span.psw {
    display: block;
    float: none;
  }
  .cancelbtn {
    width: 100%;
  }
}

The link provided will show what the desired output looks like and this is the output that I get from running this code. current output

I have double-checked to make sure there are no extra tags inserted and everything is correct so I cannot see what could be causing this.

8
  • 3
    Looks like your CSS file is not being loaded. Your path to the file is probably not correct. Check the developer tools. Aug 8, 2019 at 22:18
  • hello, Bram. I do have another HTML file which is using this same style sheet with stylings for navigation bars and the like, I took those out for the purpose of this question to focus solely on the code that the website gives. the way i reference the css file in that HTML file is the same as this one and it works flawlessly Aug 8, 2019 at 22:24
  • Do you have any errors or notices in your dev tools if you reload the page? open your devtools by pressing F12.
    – Kevin B
    Aug 8, 2019 at 22:24
  • Hi, Kevin. I did not know about that Dev tools function. I opened Dev tools and in the console, it says 0 errors. I'm assuming that's what you were referring to? Aug 8, 2019 at 22:30
  • Okay so, I am not sure what happened but it appears to have just worked after I refreshed the page with dev tools open... I can't really supply an answer when I don't even know what I did. Anyway, it's fixed, thanks for the dev tools tip! Aug 8, 2019 at 22:37

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.