The Ultimate HTML5 & CSS3 Series Part 2: Forms Exercise error with Mosh Code

HTML/CSS
1

Hi I have uploaded Mosh’s code for solution but get an error when pressing the ‘sign in’ Button.
The error on the console is:

This page isn’t working right now If the problem continues, contact the site owner.
HTTP ERROR 405

Would appreciate anyones help with this.

this is the html code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Login</title>
    <link rel="stylesheet" href="css/normalize.css" />
    <link rel="stylesheet" href="css/Forms_Excersise1.css" />
  </head>
  <body>
    <form class="form-signin" action="" method="POST">
      <h1>Please sign in</h1>
      <div class="form-group">
        <input
          class="form-control"
          type="text"
          placeholder="Email address"
          minlength="5"
          maxlength="255"
          autofocus
        />
      </div>
      <div class="form-group">
        <input
          class="form-control"
          type="password"
          placeholder="Password"
          maxlength="255"
        />
      </div>
      <div class="form-group">
        <input type="checkbox" id="remember-me" />
        <label for="remember-me">Remember me</label>
      </div>
      <button class="btn">Sign in</button>
      <p class="muted">Copyright &copy; 2020</p>
    </form>
  </body>
</html>

This is one of the problem messages I am getting in visual studio:

Button type attribute has not been set.
2

Hi you can add an attribute to your button like: type="submit" but even if you add this nothing will happen when you submit the form because there is no backend logic to process form submissions as this is a front end course.

You could use the below service which is free to sign up, this will handle form submissions without needing to set up server side code. Then you can set up your form like:

<form action="https://formspree.io/f/<your-form-id-here>" method="POST">
      <input type="text" placeholder="Name" name="name" />
      <input type="text" placeholder="Email" name="email" />
      <button type="submit">Submit</button>
    </form>
1 Like
3

Hi lucidlear,
thanks for your reply much appreciated
I have updated the html code as below using Formspree link which seemed to work once only. However now I keep getting an error code in the console as below:

**Form Blocked**
**Form has been blocked due to suspected fraudulent activity**

Do you know what is causing this message, and is this something I can avoid by amending the code. Thanks again.

**amended html code:**

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Login</title>
    <link rel="stylesheet" href="css/normalize.css" />
    <link rel="stylesheet" href="css/Forms_Excersise1.css" />
  </head>
  <body>
    <form class="form-signin" action="https://formspree.io/f/mjvqggyp" method="POST">
      <h1>Please sign in</h1>
      <div class="form-group">
        <input
          class="form-control"
          type="text"
          placeholder="Email address"
          minlength="5"
          maxlength="255"
          name="Email address"
          autofocus
        />
      </div>
      <div class="form-group">
        <input
          class="form-control"
          type="password"
          placeholder="Password"
          maxlength="255"
          name="Password"
        />
      </div>
      <div class="form-group">
        <input type="checkbox" id="remember-me" name = "id" />
        <label for="remember-me">Remember me</label>

      </div>
      <button type="submit" class="btn">Sign in</button>
      
      <p class="muted">Copyright &copy; 2020</p>
    </form>
  </body>
</html>
4

Hi its likely because you are submitting a password field to form spree. That doesn’t really make sense right because the service is not designed for authentication purposes, it doesn’t have a database that is checking users etc so thats why its blocking you.

I believe its really only designed to submit simple forms with just text and email fields so then you can see that information from the submitted forms in your dashboard. So you can try removing the password field and just submit a text and email field, however bear in mind that form submission is a backend service and is outside the scope of HTML/CSS

1 Like