How to create a strict Registration Form using HTML, PHP and MySQL

Posted on by

How to create a strict Registration Form using HTML, PHP and MySQL

php-register-form

Have you ever wanted to create a Registration Form that enforces strictly no blank Inputs. Search no more! This article has the full HTML, PHP and MySQL code required to enforce the typing on all the Inputs. The code also sets the form such that you cannot register without Agreeing to the Terms and Conditions. An addition is that the Password is not in Plaintext/Cleartext, and the form can be connected to a MySQL database so that the users are actually registered and exceptions raised otherwise.

NOTE:// The Database part is optional, and the HTML and PHP is coded such that the MySQL code is not necessary to run just the Form part without actual registrations in a database. Note that for working out of the box, you need to save the respective files as they are labeled.

The main code is in the file labeled “index.html“. Note that for the “NOTE” above, this is sufficient. The other two files labled “conn.php” && “register.php” are only in use if the MySQL database is to be connected. If you decide to go with those as well, make sure to change the details of the connection, that is, everything in the connection line below should be custom to your database;

$conn = mysqli_connect("localhost", "root", "", "spiders");

1. index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
</head>
<body>

<div class="col-md-3"></div>
<div class="col-md-6 well">
<h3 class="text-primary">PHP - Simple Registration Form</h3>
<hr style="border-top:1px dotted #ccc;"/>
<div class="col-md-6">
<form method="POST" action="">
<div class="form-group">
<label>Firstname</label>
<input type="text" class="form-control" name="firstname" required="required"/>
</div>
<div class="form-group">
<label>Lastname</label>
<input type="text" class="form-control" name="lastname" required="required"/>
</div>
<div class="form-group">
<label>Username</label>
<input type="text" class="form-control" name="username" required="required"/>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control" maxlength="12" name="password" required="required"/>
</div>
<p><input type="checkbox" id="toggle"/> I agree with the terms and conditions.</p>
<button class="btn btn-primary" id="register" name="register">Register</button>
</form>
</div>
<div class="col-md-6">
<?php include 'register.php'?>
</div>
</div>
<script>
var checkbox = document.getElementById("toggle");
var register = document.getElementById("register");
register.disabled = true;
checkbox.onchange = function(){
register.disabled = !this.checked;
}
</script> 
</body>
</html>

2. conn.php

<?php
$conn = mysqli_connect("localhost", "root", "", "spiders");

if(!$conn){
die("Error: Failed to connect to database!");
}
?>

3. register.php

<?php

require 'conn.php';

if(ISSET($_POST['register'])){
$firstname = $_POST['firstname'];
$lastname = $_POST['lastname'];
$username = $_POST['username'];
$password = $_POST['password'];

mysqli_query($conn, "INSERT INTO `user` VALUES('$firstname', '$lastname', '$username', '$password')" or die(mysqli_error());
echo "<h3>User account registered!</h3>";
} 
?>

 

How to create a strict Registration Form using HTML, PHP and MySQL
Websites | thetqweb