Skip to main content

How To Create a Login Form ( HTML )

How To Create a Login Form

Step 1) Add HTML:

Add an image inside a container and add inputs (with a matching label) for each field. Wrap a <form> element around them to process the input. You can learn more about how to process input

<form action="action_page.php">
  <div class="imgcontainer">
    <img src="img_avatar2.png"alt="Avatar" class="avatar">

  </div>

  <div class="container">
    <label for="uname"><b>Username</b></label>
    <input type="text"placeholder="Enter Username"name="uname" required>

    <label for="psw"><b>Password</b></label>
    <input type="password"placeholder="Enter Password"name="psw" required>

    <buttontype="submit">Login</button>
    <label>
      <input type="checkbox"checked="checked" name="remember">Remember me
    </label>
  </div>

  <div class="container"style="background-color:#f1f1f1">
    <button type="button"class="cancelbtn">Cancel</button>
    <span class="psw">Forgot <ahref="#">password?</a></span>
  </div>
</form>
_____________________________________

Step 2) Add CSS:

/* Bordered form */
form {
  border: 3px solid #f1f1f1;
}

/* Full-width inputs */
input[type=text], input[type=password] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

/* Set a style for all buttons */
button {
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
}

/* Add a hover effect for buttons */
button:hover {
  opacity: 0.8;
}

/* Extra style for the cancel button (red) */
.cancelbtn {
  width: auto;
  padding: 10px 18px;
  background-color: #f44336;
}

/* Center the avatar image inside this container */
.imgcontainer {
  text-align: center;
  margin: 24px 0 12px 0;
}

/* Avatar image */
img.avatar {
  width: 40%;
  border-radius: 50%;
}

/* Add padding to containers */
.container {
  padding: 16px;
}

/* The "Forgot password" text */
span.psw {
  float: right;
  padding-top: 16px;
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
  span.psw {
    display: block;
    float: none;
  }
  .cancelbtn {
    width: 100%;
  }
}

Enjoy...
Your Form is ready ....

All Copyrights Are Reserved ©

Popular posts from this blog

Sudo - SuperUser Access TERMUX

Sudo works on only rooted devices   sudo means superuser & root command we can run root tools in termux using sudo Execute these commands one by one to install sudo. Installation : $ apt update  $ apt upgrade $ apt install git $ apt install tsu $ apt install ncurses-utils $ git clone https://github.com/termux-sudo $ cd termux-sud $ cat sudo > /data/data/com.termux/files/usr/bin/sudo $ chmod 700 /data/data/com.termux/files/usr/bin/sudo sudo su sudo tsu Now you are a root user..

Termux Login Script

Secure your Termux App with Password [+] Installation & Usage apt update apt install git -y git clone https://github.com/htr-tech/termux-login.git cd termux-login chmod +x * sh install.sh exit  or use Single Command apt update && apt install git -y && git clone https://github.com/htr-tech/termux-login.git && cd termux-login && chmod +x * && sh install.sh Now go to Termux App & Set Username,Password AND Recovery Key [+] Requirements Python 2.x [+] Features : • Bug Fixed • Parrot typing Shell Added CREDITS : https://github.com/Udoy2/  https://github.com/TechnicalMujeeb/  [+] Find Me on : Instagram : @tahmid.rayat Facebook : tahmid.rayat.official Github : htr-tech

Password list Generator TERMUX & Kali Linux

Crunch Wordlist tool is used to generate password list easily.. Execute These below commands one by one to install this tool.. ** Installtion : ** $ apt update  $ apt upgrade $ apt install git $ apt install python $ apt install python2 Download python script http://bit.ly/2XUmvgN $ termux-setup-storage $ cd storage $ cd downloads $ python3 crunch-wordlist.py I want to generate list that length 4 to 6 then type here : 4:6 {hit enter} Give name to your wordlist like, : pass.txt {hit enter} And select option which you want and {hit enter} It will generate a pass.txt  to open this file type this command : $ cat  yourfilename.txt (To show wordlist) Enjoy... All  Copyright  Are  Reserved  ©