Basic Form Validation in HTML and PHP
Form validation is a important part of submitting form using PHP or other web development languages, it's mandatory to use form validation, otherwise hacker can play with your website or they can send spam etc, so it is important to learn form validation, today i am going to teach you basic form validation with HTML and PHP.
Now in HTML 5 there are many validation attributes like required, disabled, number, email, patterns, url many more, i added some html validation attributes for a simple validation, it's a just a little validation form a basic validation form that may help you for learning basic validation with HTML and PHP.
Let's start with HTML validation attributes, i used required attribute which is HTML 5 attribute, it's easy to set it, just write required on the last of your input types, after done, if user will not perform input and if user click on the submit button so a little box appear with the message of required.
I used required attribute in all input types, i also used on gender so if user not set gender then user will get a message box like this.
HTML Codes Explanation
I used form elements and attributes like action and method , it's important to set this for data sending or retrieving data on the page, action attribute is use for to do action, like if we set action="process.php" so it will perform the action process.php if we set nothing on action like this action="" so it will perform action to the current page as default, i am using method POST, for data sending or retrieving there are two ways POST And GET, for sending sensitive data always use POST method.
I created table i used tr table row and td table data, i used input types like text for user name, email for user email, number for mobile number, user can't enter text, only numbers are allowed, i used password for user password and radio for select gender then at the last i created submit button, it is very important to create submit button.
I tried to make my form validation page look cool and little attractive , so i tried to use CSS (Cascading Style Sheet), i hope you liked the design, let's don't talk about it, our focus should be on HTML, PHP.
HTML CODES WITH CSS
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
background:#eee;
}input[type=text], input[type=email], input[type=number], input[type=password]{
width:400px; height:40px; padding:0px 5px; margin-bottom:5px; font-size:20px; font-family:verdana; font-weight:normal; color:#aaa;
}
tr td{
font-size:20px; font-family:arial;
}
input[type=submit]{
cursor:pointer;width:100%; height:60px; border:none; background:orange; color:#fff; font-size:20px; margin-top:10px;
}
input[type=submit]:hover{
background:red;
}
.form-box{
width:450px; padding:10px; border:1px solid #ddd;margin:0 auto; margin-top:100px ;background:#fff; font-family:verdana;
}
</style>
</head>
<body>
<div class="form-box">
<center>
<h1>Form Validation</h1>
<form action="" method="post">
<table>
<tr><td><input type="text" name="name" id="" placeholder="Enter Full Name" required /></td></tr>
<tr><td><input type="email" name="email" id="" placeholder="Enter Email Address" required /></td></tr>
<tr><td><input type="number" name="mobile" id="" placeholder="Enter Mobile Number " required /></td></tr>
<tr><td><input type="password" name="pass" id="" placeholder="Choose Password" required /></td></tr>
<tr><td><input type="password" name="confirm_pass" id="" placeholder="Confirm Password" required /></td></tr>
<tr><td>Gender : <input type="radio" name="gender" value="male" id="" required /> Male <input type="radio" name="gender" value="female" id="" required/> Female</td></tr>
<tr><td><input type="submit" name="submit" value="Sign Up" /></td></tr>
</table>
</form>
</center>
</div>
</body>
</html>
PHP CODE
<?php
if(isset($_POST['submit']))
{
$name = $_POST['name'];
$email = $_POST['email'];
$mobile = $_POST['mobile'];
$pass = $_POST['pass'];
$confirm_pass = $_POST['confirm_pass'];
$gender = $_POST['gender'];
$num_length = strlen((string)$mobile);
if($num_length == 10) {
if($pass == $confirm_pass)
{
echo '<script type="text/javascript">alert("Account Created Successfuly");</script>';
}
else
{
echo '<script type="text/javascript">alert("Password do not match!");</script>';
exit();
}
}
else{
echo '<script type="text/javascript">alert("Mobile digits should be 10");</script>';
exit();
}
}
?>
PHP Code Explanation
I used isset() function to check the parameter in isset() function is set or not like i used if(isset($_POST['submit'])){} isset function will check if user clicked on submit or not if user clicked then if statements will execute.
I created some local variables like $name, $email etc, local variables are holding the value of user input.
I added little PHP validation like Mobile number can't be greater or lesser than 10 digits.
i added another validation to check if user password and confirm password is matching or not matching.
if you fill all the things correctly then you will receive the alert pop up from JavaScript.
Thanks, if you have any query or any problem just comment below.
I wanted to thank you for this excellent read!! I absolutely loved every bit of it. I have you book-marked to check out new stuff you post…
ReplyDeleteThanks for your personal marvelous posting! I genuinely enjoyed reading it, you might be a great author. I will make sure to bookmark your blog and may come back in the foreseeable future. I want to encourage continue your great work, have a nice holiday weekend!
ReplyDelete