ad

Wednesday, June 26, 2024

Forgot Password form

 



Forgot Password form

How to Create Forgot Password form using  html | bootstrap

👇ஃ Create a  Forgot Password Form with source codeஃ

Source Code  :-

HTML ,bootstrap Source code:- 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <link rel="stylesheet"  
href="css/bootstrap.css">
    <title>Forgot password</title>
</head>
<body>
    <div class="col-md-4  bg-white shadow-lg
mx-auto mt-5 p-3">
    <h3 class="text-center text-primary">
Forgot Password</h3>
    <form>
        <label>Email Address</label>
        <input type="email" name="en"
class="form-control"
placeholder="seeta@gmail.com">
       
        <div class="text-center">
            <input type="submit" name="b1"
class="btn btn-danger mt-1"

value="Forgot Password"></div>
 
            <div class="text-center">
                <a href="login.php"
 value="Back"
class="btn btn-primary mt-1">Back</a>
            </div>
</Form>

</div>
</body>
</html>


     

How to Create Forgot Password form using  html | bootstrap


Forgot Password form



Labels:

Monday, June 24, 2024

simple Login form in html

login form




How to Create Login form using  html | bootstrap

👇ஃ Create a  Login  Form with source codeஃ

Source Code  :-

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
content="width=device-width,
initial-scale=1.0">
    <title>Login page </title>
    <link rel="stylesheet"
href="css/bootstrap.css">

</head>
<body><br><br>
    <div class="col-md-7 bg-white bg-white
shadow-lg mt-5 p-3
mx-auto" >
    <!-- end contact section -->
 
  <!-- footer section start -->

  <?php include 'navigationbar.php';?>

<!-- footer  section Start --><br></br>
    <h1 class="text-center text-primary">
Login Form</h1>
    <form>
        <label>Email</label>
        <input type="email" name="em"
required value=""
placeholder ="Enter Email Address"
class="form-control">
           <label>Password</label>
        <input type="password" name="pws"
placeholder="Enter Password"
        class="form-control mt-1"
required value="">
       
        <div class="text-center">
            <input type="submit" name="b1"
value="Login"
class="btn btn-danger mt-2">
</div>
            <div class="text-center">
        <a href="register.php"
class="btn btn-primary mt-1">
Create An Account?</a>
        <div>
        </div>
       
       
</form>  
</div>
<?php

?>
</body>
</html>

How to Create Login form using  html | bootstrap

login form

Labels:

Registration Form

Registration Form
 

Responsive Register Form design using HTML 


Source Code :-

HTML  Source code:- 


<Doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" cont
ent="width=device-width, initial-scale=1.0">
    <link rel="stylesheet"
href="css/bootstrap.css">
    <title>Registration page</title>
   </head>
<body>
    <div class="col-md-4 bg-white
shadow-lg mx-auto mt-5 p-3">

    <h3 class="text-center text-primary">
Registration Form</h3>
    <Form>
        <label>Name</label>
        <input type="text" name="Name"
required value=""class="form-control">
       <label>Mobile  Number</label>
       <input type="text" name="mobile num"
required value="" class="form-control">
       <label>Address</label>
       <input type ="text" name="addr"
required value="" class="form-control">
       <label>Email</label>
       <input type="email" name="em"
required value="" class="form-control">
       <label>Password</label>
       <input type="pass" name="pws"
required value="" class="form-control">
       
       <div class="text-center">
        <input type ="submit"
value="Register" name="b1"
        class=" mt-1 btn btn-primary">            
</div>
         
   </div>

    </form>
    </div>
</body>
</html>

Responsive Registration Form page  design using HTML



Responsive Register Page design using HTML



Related Post :-

php program factorial number program

php syntax

php data type

Labels:

how to create Feedback form

Feedback Form design template


 How to Create Feedback Form using  html and CSS

👇ஃ Create a  Feedback Form with source codeஃ

Source Code 


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content=
"width=device-width,initial-scale=1.0">
    <title>Responsive Form Card</title>
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax
/libs/font-awesome/6.5.1/css/all.min.css">
    <link rel="stylesheet" href="index.css">
<style>
    /*style.css */
@import url(
'https://fonts.googleapis.com/
css2?family=Poppins&display=swap');

body {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: column;
    height: 60vh;
    background-color: ;
    font-family: 'Poppins', sans-serif;

}

.textup {
    text-align: center;
    color: rgb(11, 118, 11);
    font-weight: 700;
}

i {
    margin-right: 3px;
}

.form-box {
    background-color: ;
    box-shadow: 0 0 10px rgba(36, 67, 40, 0.8);
    padding: 15px;
    border-radius: 8px;
    width: 500px;
}

form {
    max-width: 400px;
    margin: 0 auto;
}

 

input[type="radio"] {
    margin-right: 8px;
}

label {
    display: block;
    margin-bottom: 8px;
    font-size: 17px;
    color: #000000;
    font-weight: 600;
}

input,
textarea {
    width: 100%;
    padding: 8px;
    margin-bottom: 12px;
    box-sizing: border-box;
    border-radius: 10px;

}

button {
    background-color:#6495ED;
    color: #fff;
    padding: 10px;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    width: 100%;
    font-size: 15px;
    transition: .2s linear;
}

button:hover {
    background-color: #FA8072;
    border: none;
    transform: translateY(-10px);
}



    </style>
</head>

<body>
     <!-- end contact section -->
 
  <!-- footer section start -->

  <?php include 'navigationbar.php';?>

<!-- footer  section Start --><br></br>
     
    <div class="form-box">
       
        <div class="textup">
             
        </div>
<center> <h1><b>Feedback Form</b></h1>
</center> <br><br>
        <form>
           
           <label for="uname">
          <i class="fa fa-solid fa-user"></i>
                Name
            </label>
            <input type="text" id="uname"
                name="uname" required>

            <label for="email">
           <i class="fa fa-solid fa-envelope">
</i>
                Email Address
            </label>
            <input type="email" id="email"
                name="email" required>

            <label for="phone">
          <i class="fa-solid fa-phone"></i>
                Phone No
            </label>
            <input type="tel" id="phone"
                name="phone" required>
            <label for="msg">
            <i class="fa-solid fa-comments"
              style="margin-right: 3px;"></i>
                Write your Feedback:
            </label>
            <textarea id="msg" name="msg"
                rows="4" cols="10" required>
            </textarea><br> <br>
            <button type="submit">
                Submit
            </button>
        </form>
    </div>
   
</body>

</html>


How to Create Feedback Form using  html and CSS

Feedback Form design template
Related Post :-
Labels:

How to create a Navigation bar Frontend project

 
Navigation bar design template

How to Create Navigation bar using  html and CSS, JS

👇ஃ Create a  Navigation bar with source codeஃ

Source Code 

<html>
    <head>
    <meta charset="UTF-8">
    <meta name="viewport"
content="width=device-width,
initial-scale=1.0">
    <title>User Login</title>
    <link rel="stylesheet"
href="css/bootstrap.css">
  <style>
.dropbtn {
  background-color:#0096FF;
  color: white;
  padding: 10px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
  background-color: #2980B9;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: pink;
  min-width: 160px;
  overflow: auto;
  box-shadow:  rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 16px 12px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {background-color: #ddd;}

.show {display: block;}
    </style>
</head>
<div class="bg-white shadow container mt-5 p-3
text-center mx-auto">
                <a href="home.php" class="btn
btn-primary">
                   Home
                </a>
                <body style="background-color:
white;">


<div class="dropdown">
  <button onclick="myFunction()"
class="dropbtn btn btn-primary">
Dress</button>
  <div id="myDropdown"
class="dropdown-content">
    <a href="product1.php">Women Lehenga Choli
</a>
    <a href="#product2.php">Sharara Suit</a>
    <a href="product3.php">Anarkali  Suit</a>
  </div>
</div>
                <a href="About.php"
class="btn btn-primary">
                    About us
                </a>
<a href="contact.php" class="btn btn-primary">
                    Contact Us
                </a>

                <a href="feedback.php"
class="btn btn-primary">
                    Feedback
                </a>
                <a href="login.php"
class="btn btn-primary">
                    Login
                </a>
        </div>
        <script>

function myFunction() {
  document.getElementById("myDropdown").
classList.toggle("show");
}

// Close the dropdown if the user clicks
outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.
getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
</script>    
 </html>

 How to Create Navigation bar using  html and CSS, JS

OutPut :- 

navigation bar

php assignment operators

Css element selector

Labels:
Subscribe to: Comments (Atom)