How To Create Login And Register Button In The Same Form In Html

How TO - Login Form

Learn how to create a responsive login grade with CSS.

Click on the push button to open up the login form:

Try it Yourself »

How To Create a Login Form

Step ane) Add HTML:

Add an prototype within a container and add inputs (with a matching characterization) for each field. Wrap a <course> element around them to procedure the input. You can learn more most how to procedure input in our PHP tutorial.

Case

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

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

    <push button type="submit">Login</button>
    <label>
      <input blazon="checkbox" checked="checked" proper noun="recall"> Remember me
    </label>
</div>

<div form="container" mode="background-color:#f1f1f1">
<button blazon="button" class="cancelbtn">Cancel</button>
<bridge class="psw">Forgot <a href="#">password?</a></bridge>
</div>
</form>

Step 2) Add CSS:

Example

/* 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;
edge: 1px solid #ccc;
box-sizing: border-box;
}

/* Set a way for all buttons */
button {
background-color: #04AA6D;
color: white;
padding: 14px 20px;
margin: 8px 0;
edge: none;
cursor: pointer;
width: 100%;
}

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

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

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

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

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

/* The "Forgot countersign" 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) {
bridge.psw {
    display: block;
    float: none;
  }
  .cancelbtn {
width: 100%;
  }
}

Try information technology Yourself »

How To Create a Modal Login Form

Step 1) Add together HTML:

Example

<push button onclick="document.getElementById('id01').style.display='block'">Login</push button>

<div id="id01" class="modal">
<span onclick="certificate.getElementById('id01').fashion.brandish='none'"
course="close" title="Close Modal">×</span>

<form class="modal-content animate" action="/action_page.php">
    <div class="imgcontainer">
      <img src="img_avatar2.png" alt="Avatar" class="avatar">
    </div>

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

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

      <button type="submit">Login</button>
      <characterization>
        <input blazon="checkbox" checked="checked" proper noun="recollect"> Remember me
      </label>
    </div>

    <div form="container" fashion="groundwork-color:#f1f1f1">
      <button type="push" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</push button>
      <bridge class="psw">Forgot <a href="#">password?</a></span>
    </div>
</class>
</div>

Step 2) Add CSS:

Example

/* The Modal (groundwork) */
.modal {
  brandish: none; /* Hidden by default */
  position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
  top: 0;
width: 100%; /* Total width */
  top: 100%; /* Total elevation */
overflow: auto; /* Enable scroll if needed */
background-colour: rgb(0,0,0); /* Fallback color */
background-colour: rgba(0,0,0,0.4); /* Black westward/ opacity */
padding-tiptop: 60px;
}

/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 5px auto; /* 15% from the top and centered */
border: 1px solid #888;
width: fourscore%; /* Could be more or less, depending on screen size */
}

/* The Shut Button */
.close {
  /* Position it in the top right corner outside of the modal */
position: accented;
right: 25px;
superlative: 0;
  colour: #000;
  font-size: 35px;
  font-weight: bold;
}

/* Shut button on hover */
.close:hover,
.close:focus {
color: red;
cursor: pointer;
}

/* Add Zoom Blitheness */
.animate {
-webkit-blitheness: animatezoom 0.6s;
animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
from {-webkit-transform: calibration(0)}
to {-webkit-transform: scale(1)}
}

@keyframes animatezoom {
from {transform: scale(0)}
to {transform: scale(1)}
}

Tip: You can besides use the post-obit javascript to shut the modal past clicking exterior of the modal content (and non but past using the "x" or "cancel" button to shut it):

Example

// When the user clicks anywhere outside of the modal, close it
window.onclick = role(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>

Try information technology Yourself »

Tip: Go to our HTML Form Tutorial to learn more about HTML Forms.

Tip: Go to our CSS Form Tutorial to learn more about how to manner form elements.

Always heard about W3Schools Spaces? Here you can create your website from scratch or use a template, and host it for free.

Get started for free ❯

* no credit menu required