Hot Posts

Sign Up form using html css and php

ALI BLOGS May 20, 2022

 

  1. First open Xampp local host server:
  2. open xampp folder ,create file signup in htdocs folder:
  3. open any browser and write localhost/phpmyadmin:
  4. create database ,create table:
  5. Open the signup folder in htdocs and code the html,css and php:
  6. here is the source code:
  7. make a file index.php


code:
Create file index.php: 

<html>

<head>

<link rel="stylesheet" href="style.css">

</head>

<body>

    <div class="main">

    <form action="signup.php" method="post">

        <h2><i>Sign Up</i></h2><br><br>

        <label for="">Full Name</label>

        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

        <input type="text" name="fname"  id="input">

<br><br>

        <label for="">User Name</label>

        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

        <input type="text" name="Uname" id="input">

<br><br>

        <label for="">Email</label>

        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

        <input type="email" name="email" id="input">

<br><br>

        <label for="">Password</label>

        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

        &nbsp;&nbsp;&nbsp;

        <input type="password" name="pas" id="input">

 

<br><br>

 

        <label for="">Confirm Password</label>

        &nbsp;&nbsp;&nbsp;

        <input type="password" name="Cpas" id="input">

    <br><br>

 

        <button type="submit" id="btn">Submit</button>

        <button type="reset" id="btn">Reset</button>

 

    </form>

 

</div>

</body>

</html>


Create a new file name as signup.php:

<?php

$_fullname=$_POST['fname'];

$_username=$_POST['Uname'];

$_email=$_POST['email'];

 

$_password=$_POST['pas'];

$_Cpassword=$_POST['Cpas'];

 

$_con=mysqli_connect('localhost','root','','bsse4a');

$_query="insert into SignUp value('$_fullname','$_username','$_email','$_password','$_Cpassword')";

mysqli_query($_con,$_query);

 

?>

 Make an other file of style.css after this write on your browser localhost/Signup(folder name made in htdocs ):

*{

    margin: 0px;

    padding: 0px;

}

h2{

    color: greenyellow;

    transition-property: all;

    transition-duration: 1s;

   

}

h2:hover{

    background-color: red;

    width: 170px;

    border-radius: 30px;

   

}

.main{

 

    background-color:black;

   

    width: 400px;

    height: auto;

    margin-top: 50px;

    margin-left: 100px;

    padding-left: 20px;

    padding-top: 30px;

    border: 10px solid green;

    border-radius: 10px;

    transition-property: all;

    transition-duration: 1s;

 

   

}

label{

    color:white;

    font-size: medium;

    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;

    font-weight: bold;

    padding: 2px;

   border: 2px solid white;

   border-radius: 12px;

   background-color: green;

}

#input{

    border: 2px solid white;

    border-radius: 25px;

    background-color: brown;

    font-size: 16px;

}

#input:hover{

    cursor: pointer;

    background-color: black;

    color: white;

   

}

#btn{

    padding: 10px;

    margin-left: 40px;

    border-radius: 20px;

    color: white;

    background-color: blue;

    font-size: 18px;

    font-weight: bold;

    cursor: pointer;

}

#btn:hover{

    cursor: pointer;

    background-color: black;

    color: white;

}


Tags:

Post a Comment

0 Comments