Login pagw with html and css
Learn how to create a login page with html and css.
1. HTML Structure
<!DOCTYPE html> Tells you that everything on this Web page was built using the HTML5 standard.
The <meta> tag is always required for a web page, as it tells this web page is in HTML and determines that English is the primary language for LOGIN web page.
<head> Section: It contains the Metadata it is used to shape Login page.
Title Section: Defined with the help of HTML <title> tag, it is shown in the address line of the browser as ‘Login’.
CSS Links:
Link: href “style.css” This is used to bring a style that is developed in the style.css file to Enhance Web Design.
<link href=’https:This is the code;<link href=’https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css’ rel=’stylesheet’> To get a better UI, it is used to link a third-party stylesheet full of icons.
2. Body Section
Body sections include divisions of the visible content of Login page.
Used to implement a Centralized Layout for the main Container.
Used in order to create a wrapper inside the container to have more control in the positioning and style the contents.
The form is labeled as “Login Form” and it is beautifully written with “title” class; the appearance might be developed in “style.css”.
Login form created with the HTML code <form action=”#”>. This form is intended to transfer data to the same page with the help of the “#” action.
Email/Phone Row: This type of input form is in the form of a row that has an icon and a placeholder for the user to enter the email or phone number:
This snippet of code gives a row for an email or phone in the form. It consist of an icon which is ‘bx bx-user-circle’ and an input box where the user can insert the email ID or phone number.
Also, the input field has been marked as a mandatory field.
Password Row:To create the input field of the password, one has to enter the following code in the HTML and the other in the CSS;<div class=”row”><i class=’bx bx-lock-alt’></i><input type=”password” placeholder=”Password” required></div>
Password row creates an extra row in the form and includes an icon (bx bx-lock-alt) and input field for the password is also needed.
Comments