如何使用创建帐户页面将新帐户放入html文件

时间:2019-07-16 21:11:23

标签: javascript html

我正在尝试保存从createaccount.html文件收集的帐户信息,例如用户名和密码,以便可以在login.html页面中使用它们。我是html css和javascript场景的新手,不知道PHP。如果必须是PHP,请解释一下我将如何输入PHP。以下是createaccount.html文件和login.html文件。

createaccount.html

 function check(form){
   if(form.psw.value == form.repsw.value && form.repsw.value == form.psw.value){
     alert('Passwords Match')
   } else {
      alert('Passwords do not match')
   }
 }
          
 h1 {
   text-align: center;
 }
            
 .passwordcheck{
    color: white;
    background-color: #333;
    padding: 5px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
  }
  <head>
    <title> Create a Account </title>
  </head>
  <body>
    <h6> All questions with a * are required</h6>
    <h1> Create an Account </h1>
    <form>
      <div align='center'>
        Username <input class='username' type='text' placeholder='Username' required>*<br>
        Password <input class='password' type='password' name='psw' placeholder='Password' required>*<br>
        Retype Password <input class='password' type='password' name='repsw' placeholder='Retype Password' required>*
        <input type='button' onclick='check(this.form)' class='passwordcheck' value='Check Password'><br>
        Email <input class='email' type='text' placeholder='johndoe476@gmail.com' required>*<br>
        Phone Number <input class='number' type='text' placeholder='815-555-5035'><br>
        Gender *<br>
        <input type='radio' name='gender' value='Male'> Male<br>
        <input type='radio' name='gender' value='Female'> Female<br>
        <input type='submit' value='Create Account'>
      </div>
    </form>
  </body>

login.html

function check(form){
  if (form.username.value == 'Xander2355' && form.psw.value == 'Blackops3') {
    window.open('practicelog.html')
  } else {
    alert('This username or password is incorrect');
  }
}
h1 {
  text-align: center;
}
            
.button {
  cursor: pointer;
}
            
.username{
  border-color: #333;
  border-width: 1px;
  border-bottom: none;
}
            
.password{
  border-color: #333;
  border-width: 1px;
} 
<!DOCTYPE html>
  <html>
    <head>
      <title> Login </title>
    </head>
    <body>
      <h1> Login </h1>
      <div align='center'>
    <form>
      <input class='username' type='text' name='username' placeholder='Username' required>
      <br>
      <input class='password' type='password' name='psw' placeholder='Password' required>
      <br>
      <input type='button' onclick='check(this.form)' value='Login'>
    </form>
  </div>
  <div align='right'>
    <a onclick='window.location.href = "createaccount.html";' class='button'> Create Account</a>
  </div>   
</body>

1 个答案:

答案 0 :(得分:0)

如果您仅出于学习目的而进行操作,请使用localStorage存储帐户数据。可以将创建的每个帐户另存为名称/值对。了解更多here

如果要进行生产,请使用后端服务器,该服务器提供API来使用数据库存储,检索,更新,删除和验证用户帐户,以永久保存数据。是的,首先使用PHP和MySQL。查找更多信息here