Question

我已经开始通过在Mac上的TextEditor中简单地编写HTML来创建网站。我设法将按钮创建为链接，并将某些页面互连在一起。我想随着时间的推移慢慢发展我的网站，例如添加数据库等。

我已经观看了有关如何创建登录页面的视频，并创建了一个登录页面，询问用户其用户名和密码。我已经完成了研究，但无法弄清楚如何将登录表单链接到Mac上另存为html文件的主网站页面。

这是我登录的HTML代码：

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>

Answer 1

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!

Answer 2

As you are telling you want to develop website using database. I assume this is only frontend part. If you want to verify username and password from database. You could use one of the server side language like PHP I say. You can use POST method to post data and action to post the data. For that may be you have to learn some PHP. Here I am providing some of the link that may be useful to you.

https://www.tutorialspoint.com/php/php_mysql_login.htm https://www.tutorialspoint.com/php/php_login_example.htm

Thanks

我如何将登录表单链接到计算机上的html网站

2 个答案: