Jump to content
Lara Marques

HTML e PHP na mesma página

Recommended Posts

Lara Marques

Boa tarde eu estou a fazer uma confirmação de email e palavra-passe com ligação a base de dados. O que eu queria fazer era quando o email ou a palavra passe não são encontrados que diga essa mesma frase por abaixo dos botões de login e cancelar e o que ele está a fazer é dar essa frase noutra página. Acham que me podiam ajudar?

Documento HTML:

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}

/* Full-width input fields */
input[type=email], input[type=password] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

/* Set a style for all buttons */
button {
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 49%;
}

button:hover {
  opacity: 0.8;
}

/* Extra styles for the cancel button */
.cancelbtn {
  width: 49%;
  padding: 14px 20px;
  background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer {
  text-align: center;
  margin: 24px 0 12px 0;
  position: relative;
}

.container {
  padding: 16px;
}

span.psw {
  float: right;
  padding-top: 16px;
}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  padding-top: 60px;
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
  border: 1px solid #888;
  width: 30%; /* Could be more or less, depending on screen size */
}

/* The Close Button (x) */
.close {
  position: absolute;
  right: 25px;
  top: 0;
  color: #000;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: red;
  cursor: pointer;
}

/* Add Zoom Animation */
.animate {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
  from {-webkit-transform: scale(0)} 
  to {-webkit-transform: scale(1)}
}
  
@keyframes animatezoom {
  from {transform: scale(0)} 
  to {transform: scale(1)}
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
  span.psw {
     display: block;
     float: none;
  }
  .cancelbtn {
     width: 100%;
  }
}
</style>
</head>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div align="right">
<button class="w3-button w3-cyan" onclick="document.getElementById('id01').style.display='block'">Login</button></div>

<div id="id01" class="modal">

  <form class="modal-content animate" action="login.php" method="post" name="login">
    <div class="container">
      <label for="Email"><b>Email</b></label>
      <input type="email" placeholder="Insere o email" name="Email" required>

      <label for="Senha"><b>Password</b></label>
      <input type="password" placeholder="Insere a palavra-passe" name="Senha" required>
<p></p>
      <button type="submit">Login</button>
      <button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button>
      </div>

  </form>
</div>
<style>
.w3-button {width:150px;}
</style>
</body>
</html>

 

Documento PHP:

<?php
$Email=$_POST['Email'];
$Senha=$_POST['Senha'];
        
$conexao = new mysqli("localhost", "root", "", "biblioteca");

mysqli_select_db ($conexao, "biblioteca");
    $aluno = "select * from aluno WHERE Email= '".$Email."'";
    $aluno = "select * from aluno WHERE Senha= '".$Senha."'";
    $resultado = mysqli_query($conexao,$aluno);
    $n_registos = mysqli_num_rows ($resultado);
    
    if ($n_registos ==0)
    {echo '<h3> Email ou senha não encontrado! </h3>';}

?>

Obrigada

Share this post


Link to post
Share on other sites
veaoum

Terás de usar javascript, procura por XML HttpRequest, com isto vais conseguir enviar os dados para verificação e consuante o resultado fazeres submit ao form ou mostrares a mensagem numa determinada div que queiras.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.