HTML stands for Hypertext Markup Language and is used for creating web pages. In this tutorial, we will create a login and signup page using HTML.
To create a login and signup page, we will use HTML form elements such as input fields, labels, and buttons. The form element allows users to input data and submit it to the server.
To create a login page, we need to add an input field for the username and password, and a submit button to submit the form. Similarly, to create a signup page, we need to add input fields for the user's name, email address, password, and confirm password, and a submit button to submit the form.
We will also use CSS (Cascading Style Sheets) to style our login and signup page. CSS is used to add style and layout to our HTML elements.
Creating a login and signup page using HTML is a basic but essential skill for web developers. It allows users to securely access and use various online services, and it is important to create login and signup pages that are user-friendly and easy to use.
Overall, learning HTML and CSS is essential for web development, and creating login and signup pages is a great way to get started with these technologies.
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sign in</title>
<link rel="stylesheet" href="signin.css">
</head>
<body>
<div class="container">
<div class="title">Sign in</div>
<form action="">
<div class="userinput">
<div class="inputs">
<!-- <span class="details">College Name</span> -->
<input type="text" name="username" placeholder="Username">
</div>
<div class="inputs">
<!-- <span class="details">College Name</span> -->
<input type="password" name="password" placeholder="Password">
</div>
</div>
<div class="button">
<input type="submit" value="Sign in">
</div>
</form>
<p class="sign-up">Already have an account? <a href="./signup.html">Sign up here</a></p>
</div>
</body>
</html>CSS Code:
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
padding: 20px;
}
.container{
max-width: 400px;
width: 100%;
padding: 30px;
background: rgb(239, 239, 241);
border-radius: 10px;
}
.container .title{
font-size: 25px;
font-weight: 500;
}
form .userinput .inputs{
margin: 10px 0px 10px 0px;
/* width: calc(100% /2 -20px); */
width: 100%;
}
.userinput .inputs input{
height: 40px;
width: 100%;
outline: none;
border-radius: 5px;
border: 1px solid rgb(130, 130, 130);
padding-left: 15px;
/* font-size: 12px; */
}
form .button{
height: 40px;
margin: 30px 0px;
}
form .button input{
height: 100%;
width: 100%;
outline: none;
color: white;
background: black;
border-radius: 5px;
font-size: 15px;
font-weight: 500;
}
form .button input:hover{
background: rgb(43, 43, 43);
cursor: pointer;
}
.sign-up{
text-align: center;
font-size: 15px;
}Output:-
Now, going to create a signup page using basic HTML.
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sign Up | Zeromonk</title>
<link rel="stylesheet" href="signup.css">
</head>
<body>
<div class="container">
<div class="title">Sign up</div>
<form action="">
<div class="userinput">
<div class="inputs">
<!-- <span class="details">College Name</span> -->
<input type="text" name="college-name" placeholder="College Name">
</div>
<div class="inputs">
<!-- <span class="details">College Name</span> -->
<input type="text" name="username" placeholder="Username">
</div>
<div class="inputs">
<!-- <span class="details">College Name</span> -->
<input type="text" name="full-name" placeholder="Full Name">
</div>
<!-- <div class="inputs">
<span class="details">College Name</span>
<input type="text" name="last-name" placeholder="Last Name">
</div> -->
<div class="inputs">
<!-- <span class="details">College Name</span> -->
<input type="email" name="email" placeholder="Email">
</div>
<div class="inputs">
<!-- <span class="details">College Name</span> -->
<input type="text" name="phone-number" placeholder="Phone Number">
</div>
<div class="inputs">
<!-- <span class="details">College Name</span> -->
<input type="password" name="password" placeholder="Password">
</div>
<div class="inputs">
<!-- <span class="details">College Name</span> -->
<input type="password" name="password" placeholder="Confirm Password">
</div>
</div>
<div class="selection">
<!-- <span class="details">College Name</span> -->
<!-- <input type="text" name="" placeholder=" Name">
-->
<select name="position" id="">
<option value="position">Select Position</option>
<option value="chairman">Chairman</option>
<option value="vicechanceller">Vice Chanceller</option>
<option value="director">Director</option>
<option value="registrar">Registrar</option>
<option value="dean">Dean</option>
<option value="professor">Professor</option>
<option value="teacher">Teacher</option>
</select>
</div>
<div class="selection">
<!-- <span class="details">College Name</span> -->
<!-- <input type="text" name="" placeholder="Co"> -->
<select name="position" id="">
<option value="position">Select State</option>
<option value="chairman">Chairman</option>
<option value="vicechanceller">Vice Chanceller</option>
<option value="director">Director</option>
<option value="registrar">Registrar</option>
<option value="dean">Dean</option>
<option value="professor">Professor</option>
<option value="teacher">Teacher</option>
</select>
</div>
<div class="button">
<input type="submit" value="Sign up">
</div>
</form>
<p class="sign-in">Already have an account? <a href="./signin.html">Sign in here</a></p>
</div>
</body>
</html>CSS Code:
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
padding: 20px;
}
.container{
max-width: 700px;
width: 100%;
padding: 30px;
background: rgb(239, 239, 241);
border-radius: 10px;
}
.container .title{
font-size: 25px;
font-weight: 500;
}
.container form .userinput{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
form .userinput .inputs{
margin: 10px 0px 10px 0px;
width: calc(100% /2 -20px);
}
.userinput .inputs input{
height: 40px;
width: 100%;
outline: none;
border-radius: 5px;
border: 1px solid rgb(130, 130, 130);
padding-left: 15px;
/* font-size: 12px; */
}
form .selection{
margin: 10px 0px 20px 0px;
}
form .selection select{
height: 40px;
width: 100%;
outline: none;
border-radius: 5px;
border: 1px solid rgb(130, 130, 130);
padding-left: 15px;
/* font-size: 15px; */
}
form .button{
height: 40px;
margin: 30px 0px;
}
form .button input{
height: 100%;
width: 100%;
outline: none;
color: white;
background: black;
border-radius: 5px;
font-size: 15px;
font-weight: 500;
}
form .button input:hover{
background: rgb(43, 43, 43);
cursor: pointer;
}
.sign-in{
text-align: center;
font-size: 15px;
}
@media (max-width: 600px) {
.container{
max-width: 100%;
margin: 20px 0px 20px 0px;
}
form .userinput .inputs{
margin: 10px 0px 10px 0px;
width: 100%;
}
.container form .userinput{
max-height: 250px;
overflow-y: scroll;
}
.userinput ::-webkit-scrollbar{
width: 0;
}
}
Output:-
Supported Browsers:
- Chrome
- Safari
- Firefox
- Microsoft Edge
- Opera
0 Comments