How To Submit Username And Password In HTML And PHP- letsbug
Today we are creating a small project that many of you might have come across. This is a basic username and password submission project in PHP. Which is often in colleges. In this project we are going to ask the user to enter a username and a password.
We will have a frontend page in html and a Xampp PHP server. When the user clicks on submit button we send the username and password to the server. Where it will be validated against our conditions.
If the username and password is correct then we will display the user "you are logged in" else will display "invalid". so let's get started.
Prerequisite:
- Basic
- HTML
- CSS
- JAVASCRIPT
- PHP CONCEPTS
- Basics only.
Submit Username and Password In HTML and PHP
Our project folder will look like this.
-userNamePassword
- server
- index.php
- index.html
code: index.php
<?php$username = isset($_POST['username']) ? $_POST['username'] : '';$password = isset($_POST['password']) ? $_POST['password'] : '';$submitBtn = isset($_POST['submitBtn']);$realUsername = 'admin';$realPassword = 'admin';if (isset($submitBtn)) {if ($username == '' || $password == '') {echo '<p>Please enter a username and password</p>';} else {if ($username == $realUsername && $password == $realPassword) {echo '<p>You are logged in!</p>';} else {echo '<p>Incorrect username or password</p>';}}}?>
code:index.html
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>User Name Password Submission</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}body {background-color: #f5f5f5;width: 100vw;height: 70vh;display: flex;flex-direction: column;justify-content: center;align-items: center;}.container {padding: 2rem;border: 1px solid #ccc;background-color: #fff;box-shadow: 0 0 20px #ccc;border-radius: 5px;}.container h1 {font-size: 2em;margin-top: 0;margin-bottom: 0;font-weight: lighter;}.container form {margin-top: 20px;}.input input {width: 100%;padding: 12px 20px;margin: 8px 0;display: inline-block;border: 1px solid #ccc;border-radius: 4px;}.input label {font-size: 1.2em;font-weight: lighter;color: #333;}button {width: 100%;padding: 12px 20px;margin: 8px 0;display: inline-block;border: 1px solid #ccc;border-radius: 4px;background-color: #f5f5f5;}</style></head><body><section class="container"><h1>User Name Password Submission</h1><form action="./server/index.php" method="post"><div class="input"><label for="username">Username:</label><input type="text" name="username" id="username" placeholder="Enter your username"></div><div class="input"><label for="password">Password:</label><input type="password" name="password" id="password" placeholder="Enter your password"></div><button type="submit" name="submitBtn">Submit</button></form></section></body></html>
output:
 |
| Frontend HTML page |
 |
| When username and password is incorrect |
 |
| When username and password is correct |
You can following on github my github username is Aniket-git-hub
Comments
Post a Comment