[SOLVED] how do i link login form to html website on computer

how do i link login form to html website on computer

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.

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.

Here is the HTML code for my login:

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;
}

<html>

<head>
  <title>Login Form Design</title>
  <link rel="stylesheet" type="text/css" href="style.css">

  <body>
    <div class="loginbox">
      <img src="avatar.png" class="avatar">
      <h1>Login Here</h1>
      <form>
        <p>Username</p>
        <input type="text" name="" placeholder="Enter Username">
        <p>Password</p>
        <input type="password" name="" placeholder="Enter Password">
        <input type="submit" name="Login" value="Login">
        <a href="#">Lost your password?</a><br>
        <a href="#">Don't have an account?</a>
      </form>

    </div>

  </body>
</head>

</html>

Solution

If you are purely trying to open the homepage from your login page, then you can use this code at the top of your code:

<form method="post" action="http://www.yourdomain.com/index.html">

or if you don't have a domain/hosting yet, then replace the http:// part to the path to the file where your index.html (or whatever you've called your other file)

This won't do any verification on the login form, but it will open the other page. For verification purposes it'd be better to use javascript/php. If you don't know javascript yet, I suggest you use this solution for now. Walk before you run and all that..

Good luck!