How can I add two CSS types into an embedded HTML echo command and also perform a form validation technique?


#1

Question one

How can I make my echo html paragraphs bold? here is what I tried below 'text-align:center,font-weight: bold'?

 echo "<div style='text-align:center,font-weight: bold'><p>Hello ". $_SESSION['username entered']."please enter the correct username or password for this login page.</p></div>";

 echo "<div style='text-align:center'><p>Hi, you left the form feilds blank, please your username/password.</p></div>";

Question two

When the user inputs a username such as “circle” into my code how can I get that random username the user enters and get it to pop up and say “Hi, [OUTPUT USERNAME THE USER INPUTTED] please enter the correct username/password.” If I use the username this will tell the user the actual correct username for the form which I don’t want.

PHP

    <?php
   session_start();

   //Selectional statement
   if ($_SERVER['REQUEST_METHOD'] === 'POST') {
       $user = $_POST["username"];
       $pass = $_POST["password"];
       //login aspect
       if($user != "" || $pass != ""){
           if($user=="test1"&&$pass=="test1"){
               $_SESSION['login'] = "OK";
               $_SESSION['username'] = $user;
               $_SESSION['password'] = $pass;

               header('Location: protected.php');    //Links with protected php file

           }else{  //If this codition is met output the below
               $_SESSION['login'] = "";
               echo "<div style='text-align:center,font-weight: bold'><p>Hello ". $_SESSION['username entered']."please enter the correct username or password for this login page.</p></div>";

           }
       }else{
         $_SESSION['login'] = "";
         echo "<div style='text-align:center'><p>Hi, you left the form feilds blank, please your username/password.</p></div>";
       }
   }
   ?>

HTML

         <!-- Form Input Part -->
         <form class="text-center" method="post">
            <div class="form-group w-50 mx-auto">
               <!-- First Name input section -->
               <label for="username">USERNAME:</label>
               <input id="username" class="form-control" type="text" maxlength="15" name="username" placeholder="Input your username.">
            </div>
            <div class="form-group w-50 mx-auto">
               <!-- Last Name input section -->
               <label for="password">PASSWORD:</label>
               <input type="password" class="form-control" type="text" maxlength="15" name="password" placeholder="Input your password.">
            </div>
            <!-- Form Button Submission -->
            <button type="submit" class="btn btn-dark">
            Login
            <i class="fas fa-sign-in-alt"></i>
            </button>
         </form>
      </div>