Creating a Login register form - Web development project

Published on 21 May 2021. Written by Ipshita Soni

We often come across the login/register forms while we surf through the internet. It appears each time while we shop, watch Netflix, or play a game. If you have ever thought about opening a new business with a website and if you are planning to manually create your website on your own then you can go through this web development project for an overview of how to create a login/register page for your website.

Read more..

SLNOTE


Knowledge required: Basic concepts of HTML and CSS.

Tools required: A text editor or an IDE.

SLLATEST

1. Create a new folder on your PC. Make an HTML file and a CSS file too. Choose a background image for the page and download it and save it to this folder. Also, download social media icons and save them to this folder.
2. Open your text editor and go to your folder and then to your HTML file. Connect the CSS and HTML files by linking them in your HTML code.
3. First, create the background space that will display the login/register form like a box. Create a div and give a class name for it. Go to your CSS file and style the background space by altering the height and width. Add the background image to it. It is suggested that you should use the linear gradient feature because we will use more images on it (the form box).
4. Specify the background-position and background-size too. Now, open the HTML file and run it on google chrome to see if your code worked.
5. Now add one more div to add the login/register form on the background space. Specify its width and height in CSS. Also, look and alter to the position, margin, and padding. See to it that the background should be completely blank or white. Run the HTML file on chrome to see a blank white color box on the page.
6. Next, add buttons to the login/register form. Add a login as well as a register button in your HTML file. Style the buttons in CSS. Look to their width, margin, and position also. 
7. Add one more div to the HTML file for adding social media icons on the form too. Add the image sources and then style the icons using CSS. Edit the margins, text-alignment and width.
8. Again, add a div for the input field. First, we will create the login form therefore the input fields will be for user ID, password, and a checkbox for remembering password. Add a button at the end for login. Design and style all these fields and the button with CSS.
9. You can try and apply different fonts on the form to style it better. Next, create the registration form also. Add user ID, email ID, password, and a checkbox for ‘I agree to the terms and conditions’ input fields to the registration form and style them with CSS.
10. Add a register button at the end and style it with CSS.

SLDYK
Kit required to develop Creating a Login register form - Web development project:

• PHP
• HTML

Technologies you will learn by working on Creating a Login register form - Web development project:

• Web Development

Any Questions?