This article will discuss the functionality and languages used to set up a Simple log-in page. Most social media platforms, bank accounts and other individual sites use this log-in page. The log-in page creates room for a user’s little details for identification and verification to a particular site that one might have claimed to be already registered. Many times, the log-in page consists of the User’s registered name and password of the registration to that site. The truth is that anyone can create a Log-in page with HTML and CSS. Firstly, we will write the basic HTML structure. https://gist.github.com/Peterimie/6df7e91a6d53897b321fa1934f323d7f Having done this, we create a form with a background colour, light grey, indicating a user should fill. Let us create a session for the username and password https://gist.github.com/Peterimie/6ea3571501cef23f458d2724f45e8c3d https://gist.github.com/Peterimie/9f0d78f804fd62aadf1fe7eb46b3f8a0 Note that the input type assigned to each placeholder is essential as it will tell the browser what kind of data inserted. Having done this, the expected output; We style as follows; https://gist.github.com/Peterimie/4bc55b02a0303a1321aaa9b8f01791b4 Our output; Whenever a user inputs his name and password, we are required to see the log-in button and a part where the Remember me button will be to avoid the user logging in multiple times. Creating and styling the button and the remember me is as follows; https://gist.github.com/Peterimie/dac103e117d3f45029da826bd22b66a4 Style your button as follows; https://gist.github.com/Peterimie/9c07b62367fde4e7a56d8a07715eca7a After this, your output is; Lastly, we create the Forgot password? Section. We create it as a link to the PHP server where we can enter other trial log-in details if one has forgotten his original log-in credentials. https://gist.github.com/Peterimie/4e8959a4174aca8d990be0e1d828e873 As we can see above, I decided to float the Forgot password to the right to make it look more professional. Here is the output; Here is our User’s interface for the log-in page. When you input your username and password, you click the log-in button. Our code shows that the log-in detail is functioning correctly.
Create a Log-in Page with HTML and CSS
By Scofield | LearnHub_Africa | 24 Aug 2022
Smart Contract/Solidity || Python || Reactjs || Every other thing is just hobbies
The emergence of tech has created the need for constant updates on new technology and their functions and this is what we are about, from CSS. Cybersecurity, Web3, Data Science etc. We have you covered.
Send a $0.01 microtip in crypto to the author, and earn yourself as you read!
% to author / 80% to me.We pay the tips from our rewards pool.