Post
Ask Question

How To Connect A Signup Form With Database

Hello there! Today we are going to learn how to connect MySQL database with HTML form. Does it sound hard?? Actually it is very easy. I am a beginner website developer from India. I thought that website development would be easy with online tutorials. But, when I came to this topic it was very hard. So, I searched a lot of online tutorials but none of them worked for me. So, with hours of hard work, I finally made it.

Sign up form

First, we have to create a sign up form. So, I made this form with CSS and HTML. You can customize the form accordingly.

  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <style>  
  6.         y {  
  7.             font-size: 25px;  
  8.             color: black;  
  9.         }  
  10.   
  11.         form {  
  12.             border: 3px solid #f1f1f1;  
  13.         }  
  14.   
  15.         input[type=text],  
  16.         input[type=password] {  
  17.             \ background-color: white;  
  18.             border: 20px;  
  19.             width: 50%;  
  20.             height: 100%;  
  21.             padding: 12px 20px;  
  22.             margin: 8px 0;  
  23.             display: inline-block;  
  24.             border: 1px solid #ccc;  
  25.             box-sizing: border-box;  
  26.             position: center;  
  27.         }  
  28.   
  29.         button {  
  30.             text-decoration: none;  
  31.             background-color: #72a7ff;  
  32.             border: none;  
  33.             color: black;  
  34.             padding: 15px 20px;  
  35.             width: 100%;  
  36.             font-family: :'Didact Gothic';  
  37.             font-size: 25px;  
  38.             text-align: middle;  
  39.             display: inline-block;  
  40.             margin: 4px 2px;  
  41.             -webkit-transition-duration: 0.2s;  
  42.             transition-duration: 0.4s;  
  43.             cursor: pointer;  
  44.         }  
  45.   
  46.         .button:hover {  
  47.             background-color: #555;  
  48.             color: white;  
  49.         }  
  50.   
  51.         .container {  
  52.             padding: 16px;  
  53.         }  
  54.   
  55.         span.psw {  
  56.             float: right;  
  57.             padding-top: 16px;  
  58.         }  
  59.   
  60.         span.psw {  
  61.             display: block;  
  62.             float: none;  
  63.         }  
  64.     </style>  
  65. </head>  
  66.   
  67. <body>  
  68.     <form name="form1" action="" method="post" enctype="multipart/form-data">  
  69.         <div class="container">  
  70.             <y>  
  71.                 <p>  
  72.                     <center> <label for="uname"><b>Username</b></label> <input type="text" placeholder="Enter a unique Username or email id" name="uname" required></p>  
  73.                 </center>  
  74.                 <p>  
  75.                     <center> <label for="fname"><b>First name</b></label> <input type="text" placeholder="Enter your first name" name="fname" required></p>  
  76.                 </center>  
  77.                 <p>  
  78.                     <center> <label for="lname"><b>Last name </b></label> <input type="text" placeholder="Enter your last name" name="lname" required></p>  
  79.                 </center>  
  80.                 <p>  
  81.                     <center> <label for="adress"><b>Adress</b></label> <input type="text" placeholder="Enter your adress" name="adress" required></p>  
  82.                 </center>  
  83.                 <p>  
  84.                     <center> <label for="cno"><b>Contact Number</b></label> <input type="text" placeholder="Enter your contact number" name="cno" required></p>  
  85.                 </center>  
  86.                 <p> <button type="save" name="submit" value="add">Sign up</button></p> <label>  
  87.   
  88. </label> </y>  
  89.         </div>  
  90.     </form>  
  91. </body>  
  92.   
  93. </html>  

This is the form. Now, save the form as formname.php

Now for the fun part -- database connectivity

Before we move one, check that your xampp has started MySQL successfully.

database connectivity

Now, paste the following code after you close the HTML tag of your form code.

And in your database, create fields uname,uname,lname,cno,address.

  1. <?php  
  2. if (isset($_POST['submit'])) {  
  3.     extract($_POST);  
  4.     $servername = "localhost ";  
  5.     $username   = "root";  
  6.     $password   = "";  
  7.     $dbname     = "your db name";  
  8.     // Create connection  
  9.     $conn       = new mysqli($servername, $username, $password, $dbname);  
  10.     // Check connection  
  11.     if ($conn->connect_error) {  
  12.         die("Connection failed: " . $conn->connect_error);  
  13.     }  
  14.     $sql = "INSERT INTO `table_name` (fname,uname,lname,address,cno)  
  15.   
  16. VALUES ('$fname','$uname','$lname','$adress','$cno')";  
  17.     if ($conn->query($sql) === TRUE) {  
  18.         header('Location: login.php');  
  19.     } else {  
  20.         echo "Error: " . $sql . "<br>" . $conn->error;  
  21.     }  
  22.     $conn->close();  
  23. }  
  24. ?> 

 

Explanation of the database connection code:

First, look at the form code, I have written button type as save and button name as submit. And in the connection code I have written:

  1. if(isset($_POST['submit'])){  
  2. xtract($_POST);  

This means when the user clicks a button which is named as submit, it extracts the input data. And when I searched through the MySQL database tutorials, every tutorial actually tells you to change your root password. But, actually doing that can deny your access to your database. So, the default password is none, so we will leave it blank. Then in this code,

  1. // Create connection  
  2. $conn = new mysqli($servername, $username, $password, $dbname);  
  3. // Check connection  
  4. if ($conn - > connect_error)   
  5. {  
  6.     die("Connection failed: ".$conn - > connect_error);  
  7. }  

Don’t replace your servername, username, password and dbname. Leave this code as it is.

We have created a new MySQL connection and we are checking whether it is connected or not, so die ("Connection failed: " . $conn->connect_error); means if the database does not connect; it will show the message “Connection failed”.

Now this code:

  1. $sql = "INSERT INTO `table_name` (fname,uname,lname,address,cno)  
  2. VALUES('$fname', '$uname', '$lname', '$adress', '$cno')  
  3. ";  
  4. if ($conn - > query($sql) === TRUE) {  
  5.     echo“ record created successfully”  
  6. } else {  
  7.     echo "Error: ".$sql.  
  8.     "<br>".$conn - > error;  
  9. }  
  10. $conn - > close();  
  11. } ? >  

This means to insert the form values into the field values. And if the values are inserted successfully then show the message “record created successfully” and if an error arises show whatever the error is.

$conn->close(); means that you should now close the connection.

Done!

Now, you have created your sign up page successfully and linked it to the database successfully!!

If you have any troubleshooting questions, please comment below.
Next Recommended Reading How to Generate JSON Data from a MySQL Database using PHP