In today’s digital age, where online services and applications are abundant, login pages play a crucial role in ensuring the security and personalized experiences of users. A login page serves as the gateway to a web application, allowing users to access their accounts and interact with the application’s features and content. It serves as an authencalltication mechanism, verifying the identity of users and granting them appropriate access privileges.

Main Components of Login Page

Below is the example for Building a Simple Login Page design from the dribble. Usually it comparises of two inputs one for Username or email, second for password and one submit button.

How login form communicate with server?

Upon filling the valid detail in the input boxes and clicking the submit button initiates the request to the server where submitted details is vaildated with database records.

There are two main methods for for submitting the login detail to server

1. Ajax(Asynchronous JavaScript and XML) – In this method the data is submited asynchronously, in other words the data is sbmitted in the background via javascript without refreshing the page. You can send data in multiple formats like json, xml, binary(image, video, audio or any other file), form-data, url encoded form data, raw text, html. For the response type you can get the data in same formats. In the mordern time most common response format is JSON. This method is used in the SPA(single page application like angular, react, vue) applications, where app only loads once and changes the page with javascript.
2. Form Submission – This is the regular form submission where form directly submits the data to the server without using javascript and on submission page reloads or redirects to different url. This also supports all the formats mentioned in ajax. Clicking on the button with type submit in the form will submit the data to the server url mentioned in form’s action attribute. This approach is used in traditional websites that does not follow the SPA concept.

How to maintain session in between requests after login?

Once the login is successfull you are assigned a unique session identifier (called session id or token), to maintain sessions for future requests, as these token or session will be sent along with the post login requests to server.

Here is the code below for simple traditional login page without any ajax call.

That’s all I hope you will like the brief detailing on Building a simple login page. Thanks for your time. Have a great time 🙂 .