Login Form with input Database Using HTML CSS and JavaScript

Login Form with input Database Using HTML CSS and JavaScript | Push Send Mail

Hey Friends today in this blog I’ll be showing you how to create a login form input Database Using HTML CSS and JavaScript. A login Form is a form that will be filled by the user or recipients, in this blog we have a login form Database, a login form Database has two functions

When User signed in or fill out the valued form it will be stored in a Database query either by text or by SQL main Database but in this video our filled out request will be stored in a sequential database managed by Google Chrome browser
Second Function is the filled out form will be stored on an online Sequel Database

Note: if Google chrome browser is an older version this won’t work

JavaScript Codes Used in this Video

function myFunction()
var CopyText = doucumen.getElementById(“myInput”)

Video Link to Login Form with Input Database

Download Code Files

HTML CODE

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Alert Send Mail Box Using HTML CSS JavaScript</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
      <div class="formBx">
        <form action="">
          <div class="text">Send Message</div>
          <div class="textBx">Send Mail easily to anyone</div>
          <input type="text" placeholder="Recipents" value="" id="myInput" required>
          <input type="text" placeholder="Subjects" required>
          <p>*create textarea code</p>
          <button type="submit" onclick="myFunction()">Send</button>
        </form>
      </div>
    </div>

      <script src="script.js"></script>

</body>
</html>

CSS CODE

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}
::selection{
  background: #bef4d2;
}
body{
  background: #007bff;
}
.container{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  flex-direction: column;
}
.formBx{
  max-width: 320px;
  width: 100%;
  background: #fff;
  padding: 30px;
  text-align: center;
  box-shadow: 0 0 8px rgba(0,0,0,.7);
  border-radius: 5px;
}
.formBx .text{
  font-size: 23px;
  font-weight: 500;
  margin-bottom: 8px;
}
.formBx .textBx{
  font-size: 18px;
}
.formBx input{
  max-width: 300px;
  width: 100%;
  height: 34px;
  margin: 5px;
  padding: 0 10px;
  margin-top: 10px;
  border-radius: 5px;
  outline: none;
  border: 1px solid #ddd;
  transition: all 0.2s ease;
}
.formBx textarea{
  max-width: 300px;
  width: 100%;
  height: 90px;
  padding: 5px 10px;
  outline: none;
  border: 1px solid #ddd;
  border-radius: 5px;
  resize: none;
  transition: all 0.2s ease;
}
.formBx button{
  max-width: 300px;
  width: 100%;
  height: 34px;
  border-radius: 5px;
  border: none;
  outline: none;
  background: #007bff;
  font-size: 18px;
  color: #fff;
  cursor: pointer;
  margin-top: 10px;
  transition: all 0.3s ease;
}
.formBx button:hover{
  background: #389dbf;
}
.formBx input:focus,textarea:focus{
  border-color: #389dbf;
}

JAVASCRIPT CODE

function myFunction() {
  var copyText = document.getElementById("myInput");
  alert("Messaged sent to: " + copyText.value + " Sucessfully");
}

Login Form with input Database Using HTML CSS and JavaScript | Push Send Mail

Creative Tutorials

1 Comments

Post a Comment

Contact Form