Steps for creating a login form that redirects to a website

Question

Steps for creating a login form that redirects to a website

Looking to improve the HTML code

(reviewing changes)

Still learning how to create a website, so there might be errors in the code. I'm using neocities.org as the platform. I tried customizing the HTML source but struggling with removing the white space around the boxes. Will work on fixing it later.

I'd like to learn how to create a form that redirects to a new page upon entering the correct answer.

Website URL:

UPDATES:

<!DOCTYPE html>

<html>

<head>


<style>
div {
    height: 200px;
    width: 400px;

    position: fixed;
    top: 50%;
    left: 55%;
    margin-top: -100px;
    margin-left: -200px;
}
body {
 background-image: url("https://proxy.duckduckgo.com/iu/?u=http%3A%2F%2Fgetwallpapers.com%2Fwallpaper%2Ffull%2F4%2Fc%2Fc%2F36974.jpg&f=1&nofb=1");
 background-color: #cccccc;
}
function {
  color: red;
}

</style>

<body>


  <script>
    var incorrectCount = 0;
    var correctPassword = "randompassword"
    function checkPassword(){
        var enteredPassword  = document.getElementById("txtpassword").value;
        if(enteredPassword != correctPassword)
            incorrectCount++
        else{
            incorrectCount = 0
            document.getElementById("userMessage").innerHTML = "Correct Password !!"
            window.location.href = "http://www.w3schools.com";
        }

        if(incorrectCount == 3){
            document.getElementById("userMessage").innerHTML = "Incorrect password entered 3 or more times"
            document.getElementById("userMessage").style.visibility = "visible";
        }
    }
  </script>



  <div>
   <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <title>Login</title>




<form>
        <p><input style="background-color:red;color:black;border:1px solid #ff0000" type="text" id="randompassword" name="login" value="" placeholder="Username"></p>
        <p><input style="background-color:red;color:black;border:1px solid #ff0000" type="password" id="something" name="password" value="" placeholder="********"></p>
           <a class="submit"><input type="submit" id="loginbutton" onclick="checkPassword()" name="commit" value="Login"><br>
             <label id="userMessage" style="visibility:hidden;"></label>


</a>

  </form>

    </div>

</body>

</html>

html css

Answer 1

Answer №1

When dealing with form data in html/css on the receiving page, there are specific methods to follow. If the method attribute is omitted, the default is method="get", which sends the form data in the url after the question mark (?). In such cases, Javascript can be used on the receiving page to handle the form data.

If the method attribute is set to "post", PHP can be used to process the form data. Below is an example of html code that sends input values to a process.php file:

<form method="post" action="process.php">
  <p><input type="text" name="username" value=""></p>
  <p><input type="password" name="passcode" value=""></p>
  <p class="submit"><input type="submit" name="submit" value="Submit"></p>
</form>

In the process.php file, the form data can be accessed and manipulated as needed:

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
  $username = (!isset($_POST['username']))    ? "" : trim($_POST['username']);
  $password = (!isset($_POST['passcode'])) ? "" : trim($_POST['passcode']);
  // Perform actions with $username and $password here
}
?>

Answer 2

When dealing with form data in html/css on the receiving page, there are specific methods to follow. If the method attribute is omitted, the default is method="get", which sends the form data in the url after the question mark (?). In such cases, Javascript can be used on the receiving page to handle the form data.

If the method attribute is set to "post", PHP can be used to process the form data. Below is an example of html code that sends input values to a process.php file:

<form method="post" action="process.php">
  <p><input type="text" name="username" value=""></p>
  <p><input type="password" name="passcode" value=""></p>
  <p class="submit"><input type="submit" name="submit" value="Submit"></p>
</form>

In the process.php file, the form data can be accessed and manipulated as needed:

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
  $username = (!isset($_POST['username']))    ? "" : trim($_POST['username']);
  $password = (!isset($_POST['passcode'])) ? "" : trim($_POST['passcode']);
  // Perform actions with $username and $password here
}
?>

Answer 3

Answer №2

<form action="http://google.com">
        <p><input style="background-color:red;color:black" type="text" name="login" value="" placeholder="Username"></p>
        <p><input style="background-color:red;color:black" type="password" name="password" value="" placeholder="********"></p>
        <a class="submit"><input type="submit" name="commit" value="Login"></p>
</form>

If you wish to simply redirect to a publicly hosted site such as Google or Stack Overflow, omit the POST method as it indicates data is being sent to the site.
Always use http:// or https:// - failing to do so will lead the code to search for the page/website in your HTML page directory.

EDIT - 2

<!DOCTYPE html>
<html>
<head>
<style>
div {
    height: 200px;
    width: 400px;

    position: fixed;
    top: 50%;
    left: 55%;
    margin-top: -100px;
    margin-left: -200px;
}
body {
 background-image: url("https://proxy.duckduckgo.com/iu/?u=http%3A%2F%2Fgetwallpapers.com%2Fwallpaper%2Ffull%2F4%2Fc%2Fc%2F36974.jpg&f=1&nofb=1");
 background-color: #cccccc;
}
</style>

<body>

  <script>
    var incorrectCount = 0;
    var correctPassword = "randompassword"
    var correctLoginId  = "randomlogin"
    function checkPassword(){
        var enteredLogin  = document.getElementById("txtUserId").value;
        var enteredPassword  = document.getElementById("txtPassword").value;
        if(enteredPassword == correctPassword && enteredLogin == correctLoginId){
            incorrectCount = 0
            document.getElementById("userMessage").innerHTML = "Correct Password !!"
            window.location.href = "http://www.w3schools.com";
        }
        else{
            incorrectCount++
        }

        if(incorrectCount == 3){
            document.getElementById("userMessage").innerHTML = "Incorrect password entered 3 or more times"
            document.getElementById("userMessage").style.visibility = "visible";
        }
    }
  </script>



  <div>
   <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <title>Login</title>




        <p><input style="background-color:red;color:black;border:1px solid #ff0000" type="text" id="txtUserId" name="login" value="" placeholder="Username"></p>
        <p><input style="background-color:red;color:black;border:1px solid #ff0000" type="password" id="txtPassword" name="password" value="" placeholder="********"></p>
        <input type="submit" id="loginbutton" onclick="checkPassword()" name="commit" value="Login"><br>
        <label id="userMessage" style="visibility:hidden;color:red;"></label>
    </div>
</body>
</html>

Answer 4

<form action="http://google.com">
        <p><input style="background-color:red;color:black" type="text" name="login" value="" placeholder="Username"></p>
        <p><input style="background-color:red;color:black" type="password" name="password" value="" placeholder="********"></p>
        <a class="submit"><input type="submit" name="commit" value="Login"></p>
</form>

If you wish to simply redirect to a publicly hosted site such as Google or Stack Overflow, omit the POST method as it indicates data is being sent to the site.
Always use http:// or https:// - failing to do so will lead the code to search for the page/website in your HTML page directory.

EDIT - 2

<!DOCTYPE html>
<html>
<head>
<style>
div {
    height: 200px;
    width: 400px;

    position: fixed;
    top: 50%;
    left: 55%;
    margin-top: -100px;
    margin-left: -200px;
}
body {
 background-image: url("https://proxy.duckduckgo.com/iu/?u=http%3A%2F%2Fgetwallpapers.com%2Fwallpaper%2Ffull%2F4%2Fc%2Fc%2F36974.jpg&f=1&nofb=1");
 background-color: #cccccc;
}
</style>

<body>

  <script>
    var incorrectCount = 0;
    var correctPassword = "randompassword"
    var correctLoginId  = "randomlogin"
    function checkPassword(){
        var enteredLogin  = document.getElementById("txtUserId").value;
        var enteredPassword  = document.getElementById("txtPassword").value;
        if(enteredPassword == correctPassword && enteredLogin == correctLoginId){
            incorrectCount = 0
            document.getElementById("userMessage").innerHTML = "Correct Password !!"
            window.location.href = "http://www.w3schools.com";
        }
        else{
            incorrectCount++
        }

        if(incorrectCount == 3){
            document.getElementById("userMessage").innerHTML = "Incorrect password entered 3 or more times"
            document.getElementById("userMessage").style.visibility = "visible";
        }
    }
  </script>



  <div>
   <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <title>Login</title>




        <p><input style="background-color:red;color:black;border:1px solid #ff0000" type="text" id="txtUserId" name="login" value="" placeholder="Username"></p>
        <p><input style="background-color:red;color:black;border:1px solid #ff0000" type="password" id="txtPassword" name="password" value="" placeholder="********"></p>
        <input type="submit" id="loginbutton" onclick="checkPassword()" name="commit" value="Login"><br>
        <label id="userMessage" style="visibility:hidden;color:red;"></label>
    </div>
</body>
</html>

Answer 5

Answer №3

Perhaps this alternative could better suit your needs

https://raw.githubusercontent.com/Godwyne/E-Bank/master/Project/index.php

Answer 6

Perhaps this alternative could better suit your needs

https://raw.githubusercontent.com/Godwyne/E-Bank/master/Project/index.php

Steps for creating a login form that redirects to a website

Answer №1

Answer №2

Answer №3

Similar questions

What could be causing my table to not display?

Does Google's caching process differ when using <span> tags instead of <h> tags for headings?

Refresh the data in the DataTables table using a fragment

The peculiar characteristics of the dragLeave event in various web browsers

Is it possible for images underneath to receive focus when hovering over them?

How can I set a default radio button selection when the page is loaded?

Showcasing Portfolio Work in a User-Friendly Mobile Design

Guide on loading a div with a flash object without showing it on the screen (element is loaded but remains hidden)

Reformat an input number by substituting commas with periods

Learning to use Material-UI: Wrapping a list into columns

Ways to display an image within a div when hovering over a specific element?

Displaying Text and Images on a Sliding Carousel with a Static Background Image

Is there a way for me to merge the specifications of two itemscopes in order to depict a

What is the best way to anchor an image to the bottom right corner while also adjusting its position as

Position a div at the center of the page while aligning it inline with another div

The function TagBuilder.MergeAttributes is malfunctioning

Utilizing keyboard shortcuts for webpage navigation (within a content script)

Align the content of the list items to the center and position the list in the center of

Adjust the standard size of the IMG tag using CSS

CSS animation is supported on most browsers with the exception of Safari