title: how do i link login form to html website on computer
body: <p>I have started to create a website by simply writing HTML on my Mac in TextEditor. I have managed to create buttons as links and interconnect some of the pages together. I want to slowly develop my website over time such as adding a database etc.</p>
  
  <p>I have watched a yt video on how to create a login page and I've created a login page that asks a user for their username and password. I've done my research and I can't figure out how to link the login form to the main website page saved as a html file only Mac.</p>
  
  <p>Here is the HTML code for my login:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    margin: 0;
    padding: 0;
    background: url(pic1.jpg);
    background-size: cover;
    background-position: center;
    font-family: sans-serif;
  }
  
  .loginbox {
    width: 320px;
    height: 420px;
    background: #000;
    color: #fff;
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    padding: 70px 30px;
  }
  
  .avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: absolute;
    top: -50px;
    left: calc(50% - 50px);
  }
  
  h1 {
    margin: 0;
    padding: 0 0 20px;
    text-align: center;
    font-size: 22px;
  }
  
  .loginbox p {
    margin: 0;
    padding: 0;
    font-weight: bold;
  }
  
  .loginbox input {
    width: 100%;
    margin-bottom: 20px;
  }
  
  .loginbox input[type="text"],
  input[type="password"] {
    border: none;
    border-bottom: 1px solid #fff;
    background: transparent;
    outline: none;
    height: 40px;
    color: #fff;
    font-size: 16px;
  }
  
  .loginbox input[type="submit"] {
    border: none;
    outline: none;
    height: 40px;
    background: #fb2525;
    color: #fff;
    font-size: 18px;
    border-radius: 20px;
  }
  
  .loginbox input[type="submit"]:hover {
    cursor: pointer;
    background: #ffc107;
    color: #000;
  }
  
  .loginbox a {
    text-decoration: none;
    font-size: 12px;
    line-height: 20px;
    color: darkgrey;
  }
  
  .loginbox a:hover {
    color: #ffc107;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  
  &lt;head&gt;
    &lt;title&gt;Login Form Design&lt;/title&gt;
    &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
  
    &lt;body&gt;
      &lt;div class="loginbox"&gt;
        &lt;img src="avatar.png" class="avatar"&gt;
        &lt;h1&gt;Login Here&lt;/h1&gt;
        &lt;form&gt;
          &lt;p&gt;Username&lt;/p&gt;
          &lt;input type="text" name="" placeholder="Enter Username"&gt;
          &lt;p&gt;Password&lt;/p&gt;
          &lt;input type="password" name="" placeholder="Enter Password"&gt;
          &lt;input type="submit" name="Login" value="Login"&gt;
          &lt;a href="#"&gt;Lost your password?&lt;/a&gt;&lt;br&gt;
          &lt;a href="#"&gt;Don't have an account?&lt;/a&gt;
        &lt;/form&gt;
  
      &lt;/div&gt;
  
    &lt;/body&gt;
  &lt;/head&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>