The basic purpose of form is to accept user data or store data from the users, which can be accessed in various ways, such as a survey, a new registration, while making payments, and much more. So here, in this section, we will learn how to store the user's input data into the database.
We will reuse our form which we styled in Chapter 3, Styling the Forms.
We will store the form data into a MySQL database using phpMyAdmin (open sourcetool to handle the administration of MySQL over World Wide Web).
For operating systems such as Linux, we use a XAMPP server.
The following is the server-side scripting code written in the same HTML page but the HTML file extension .html is changed to .php:
<?php
mysqli_connect("localhost", "root", "");
mysqli_select_db("DBpersonal_info");
if(isset($_REQUEST['submit']))
{
$errorMessage = "";
$Gender ="";
$Firstname=$_POST['Firstname'];
$Lastname=$_POST['Lastname'];
$Dob=$_POST['Dob'];
$Gender=$_POST['Gender'];
$Saddress=$_POST['Saddress'];
$City=$_POST['City'];
$State=$_POST['State'];
$Pincode=$_POST['Pincode'];
$Country=$_POST['Country'];
$Home=$_POST['Home'];
$Work=$_POST['Work'];
$Email=$_POST['Email'];
$Aaddress = $_POST['Aaddress'];
//Field validation
if(empty($Firstname)) {
$errorMessage .= "<li>You forgot to enter a first
name!</li>";
}
if(empty($Lastname)) {
$errorMessage .= "<li>You forgot to enter a last
name!</li>";
}
if(empty($Dob)) {
$errorMessage .= "<li>You forgot to select a date of
birth!</li>";
}
if(empty($Gender)) {
$errorMessage .= "<li>You forgot to select your
Gender!</li>";
}
if(empty($Saddress)) {
$errorMessage .= "<li>You forgot to enter street
address!</li>";
}
if(empty($City)) {
$errorMessage .= "<li>You forgot to enter city!</li>";
}
if(empty($State)) {
$errorMessage .= "<li>You forgot to enter state!</li>";
}
if(empty($Pincode)) {
$errorMessage .= "<li>You forgot to enter pincode!</li>";
}
if(empty($Country)) {
$errorMessage .= "<li>You forgot to select country!</li>";
}
if(empty($Home)) {
$errorMessage .= "<li>You forgot to enter home phone
number!</li>";
}
if(empty($Work)) {
$errorMessage .= "<li>You forgot to enter work phone
number!</li>";
}
if(empty($Email)) {
$errorMessage .= "<li>You forgot to enter email id!</li>";
}
//Check if the number field is numeric
if(is_numeric(trim($Pincode)) == false ) {
$errorMessage .= "<li>Please enter numeric pincode value!</li>";
}
if(is_numeric(trim($Home)) == false ) {
$errorMessage .= "<li>Please enter numeric home phone number!</li>";
}
if(is_numeric(trim($Work)) == false ) {
$errorMessage .= "<li>Please enter numeric workphone number!</li>";
}
//Check if the length of field is upto required
if(strlen($Pincode)!=6) {
$errorMessage .= "<li>Pincode should be 6 digits only!</li>";
}
if(strlen($Work)!=10) {
$errorMessage .= "<li>Work phone number should be 10 digits
only!</li>";
}
//Check for valid email format
if(!filter_var($Email, FILTER_VALIDATE_EMAIL)) {
$errorMessage .= "<li>You did not enter a invalid
email!</li>";
}
if ($errorMessage != "" ) {
echo "<p class='message'>" .$errorMessage. "</p>" ;
}
else{
//Inserting record in table using INSERT query
$insertTB="INSERT INTO `personal_info`.`personal`
(`Firstname`, `Lastname`, `Dob`, `Gender`, `Saddress`,
`Aaddress`, `City`, `State`, `Pincode`, `Country`, `Home`,
`Work`, `Email`) VALUES ('$Firstname', '$Lastname', '$Dob',
'$Gender', '$Saddress', '$Aaddress', '$City', '$State',
'$Pincode', '$Country', '$Home', '$Work', '$Email')";
mysqli_query($insertTB);
}
}
?>Before executing the code, our prerequisite is that first we have to create and select one database and then create a table to store the information. After that, we perform some validations on the form inputs, and then finally, we implement the Insert query so as to store the user's input data.
The following screenshot displays the error messages when the user does not enter any data and submits the form:
The following is the HTML code. The code remains the same but we have added the method= "POST" attribute in the <form> tag and the name attribute in the <input> types:
<form id="masteringhtml5_form" method="POST"> <label for="heading" class="heading">Health Survey Form</label> <fieldset class="fieldset_border"> <legend class="legend">Personal Information</legend> <div> <label for="name">Name</label><br> <input type="text" name="Firstname" class="name txtinput" placeholder="First" autofocus> <input type="text" name="Lastname" class="name txtinput" placeholder="Last"> </div><br> <div class="div_outer_dob"> <div class="div_dob"> <label for="dob">Date of Birth</label><br> <input type="date" name="Dob" value="date of birth" class="txtinput dateinput"> </div> <div class="gender"> <label for="gender">Gender</label><br> <input type="radio" name="Gender" value="male"> <span>Male</span> <input type="radio" name="Gender" value="female"> <span>Female</span> </div> </div> <div class="div_outer_address"> <label for="address">Address</label><br> <input type="text" name="Saddress" class="txtinput tb address_img" placeholder="Street Address"><br> <input type="text" name="Aaddress" class="txtinput tb address_img" placeholder="Address Line 2"><br> <input type="text" name="City" class="txtinput tb1 address_img" placeholder="City"> <input type="text" name="State" class="txtinput tb1 address_img" placeholder="State/Province"><br> <input type="text" name="Pincode" class="txtinput tb1 address_img" placeholder="Pincode"> <select name="Country" class="txtinput select address_img" > <option value="Country" class="select" >Select Country</option> <option value="India" class="select" >India</option> <option value="Australia" class="select" >Australia</option> </select> </div><br> <div> <label for="contact">Phone Number</label><br> <input type="tel" name ="Home" class="txtinput tb1 home_tel" placeholder="Home"> <input type="tel" name="Work" class="txtinput tb1 work_tel" placeholder="Work"> </div><br> <div> <label for="email">Email Address</label><br> <input type="email" name="Email" class="txtinput tb1 email" placeholder="[email protected]"> </div> </fieldset><br> <div class="submit"> <input type="submit" name="submit" class="submit_btn" value="Submit"> </div> </form>
By clicking on the Submit button, we can either redirect the user to a new page, or populate a message on the screen, or simply write a message on the screen giving confirmation that our form has been submitted successfully.
The following screenshot displays the form after the user has entered the values in the form:
The following snippet is the MySQL code:
//Creates database CREATE DATABASE personal_info //Creates table CREATE TABLE personal( Firstname VARCHAR(255) NOT NULL, Lastname VARCHAR(255) NOT NULL, Dob VARCHAR(255) NOT NULL, Gender VARCHAR(255) NOT NULL, Saddress VARCHAR(255) NOT NULL, Aaddress VARCHAR(255) NOT NULL, City VARCHAR(255) NOT NULL, State VARCHAR(255) NOT NULL, Pincode INT(11) NOT NULL, Country VARCHAR(255) NOT NULL, Home VARCHAR(255) NOT NULL, Work VARCHAR(255) NOT NULL, Email VARCHAR(255) NOT NULL)
In the preceding code, first we created a database and then we created a table to store the user's input data.
The following screenshot displays the values stored into the database after clicking on the Submit button:
