Insert HTML data into mysql database

Solution for Insert HTML data into mysql database
is Given Below:

I’ve create a HTML page which allows the user to type a username and password. When the user clicks the login button I need to put the username and password into a mysql database.

When I test it by typing the IP address of the website and entering username and password and press the login button it just goes to a blank page (this being the IPADDRESS/adduser.php. When I check the database nothing is entered.

I also want to redirect the user to a different page rather than to a blank page

I’m pretty new to this, but seem to have hit a brick wall, wondering if someone could help. Thanks.

HTML file:

<!DOCTYPE html>

/* Header/Title */
.header {
padding: 2px;
text-align: center;
background: rgb(49, 48, 48);
color: white;
font-size: 15px;

form {

    border: 5px solid #f1f1f1;
    background-color: white;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    text-align: center;      

input[type=password] {
    width: 40%;
    padding: 12px 20px;
    margin: 8px 0;
    border: 1px solid #ccc;
    box-sizing: border-box;              
background-color: rgb(180, 46, 46);

button {
    background-color: #265ec5;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 10%;

button:hover {
    opacity: 0.8;

.imgcontainer {
    padding: 20px;
    text-align: center;     

.container {
    padding: 16px;    

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



<div class="header">
        <img src="vs/banner.png"> 


    <form action="adduser.php" method="POST">       
    <div class="imgcontainer">
        <img src=
         "LINK TO IMAGE" width="250" height = "70"
            alt="Avatar" class="avatar">
    <h2 style="text-align:center;" > Sign In  </h2>
    <div class="container">
        <label><b> Username</b></label>
        <input type="text" name="user_name" required placeholder="enter valid username"
        oninvalid="this.setCustomValidity('Enter a valid email address')"
        <label><b>Enter password</b></label>
        <input type="password" placeholder="Enter Password" name="user_password" required place>
        <button type="submit">Login</button>

    <div class="container" style="background-color:#f1f1f1">
        <span class="psw">Forgot <a href="#">password?</a></span>
        <span class="usn_info">You must login using with valid username</span>



php file:



$conn = mysqli_connect($host, $user, $pass, $database);

if ($conn) {
die("Database connection failed: Insert User : Error = " . 


$sqlquery = "INSERT INTO user_login (user_name, user_password)
VALUES ('$user_name','$user_password')";

if (mysqli_query($conn, $sqlquery))
    echo "user added";



Warning: Do not use this code in production, read about SQL injection and sanitizing post values.

Your PHP variable names are all over the place. One second you’re declaring $username as the database login, but in the insert statement you’re also inserting $username which will insert the username “admin” into your database. Please be wary of this.

For starters, the “action=” in form tag determines where your user will redirect to after submitting the form. In your case, adduser.php. So make sure any PHP code to handle the form submission is inside adduser.php.



$hostname= "localhost";
$username = "admin"
$password = "admin";
$db = "logins";


if ($dbconnect->connect_error) {
die("Database connection failed: " . $dbconnect->connect_error);

if(isset($_POST['submit'])) {

$query = "INSERT INTO user_login (user_name, user_password)
VALUES ('$user_name', '$user_password')";

if ($dbconnect->query($query) === TRUE) {
echo "New record created successfully";



If everything is correct, upon submitting the form you will be redirected to adduser.php and this message will be echoed: “New record created successfully”.

In your php file, after inserting data to the data-base, write these 2 commands: