Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to add a Login Form to an Image using HTML and CSS?
The login form on an image can be found on many websites. An organization that organizes a special event might have a website with a picture of the event and a login form, or a restaurant might have a website with pictures of the restaurant.
In such case we use image to make a login or signup. Compared to a standard login or registration form, this layout makes the website more appealing. In order to create a login form on a picture, we only need HTML and CSS. Before we dive into the article let’s have a quick view on the HTML <img> tag and login form.
HTML <img> tag
In an HTML page, an image can be included using the <img> tag. Technically, images are linked to web pages rather than being inserted. For the specified picture, the <img> tag generates a holding area. The two required attributes for the <img> tag are −
src − It indicates the path to the image
alt − It indicates an alternate text for the image, that occurs when image fails to loads
HTML Login Form
One of the most crucial pages on a website or app is the login page, which enables authorized users to access the full website or a specific section of the website. The login/signup page is always the initial page that users see on login-protected websites. Whether it's a login or signup page, it needs to be attractive, easy to use, and user-friendly.
Example
Let’s look at the following example, where we are going to create the login form on an image. Let’s do this step by step.
HTML
Following is the HTML code that is used to design the structure of the login form.
<!DOCTYPE html>
<html>
<body>
<div class="tutorial">
<h1>TUTORIALSPOINT</h1>
<form class="container">
<b>Employee ID:</b>
<input type="text" placeholder="Enter Employee ID" name="username" required>
<b>Password:</b>
<input type="password" placeholder="Enter Password" name="password" required>
<button type="submit" class="button">Login</button>
</form>
</div>
</body>
</html>
CSS
Now we are going to create the template for the above code where we created the structure of the login form.
<style>
* {
box-sizing: border-box;
}
body {
font-family: VERDANA;
height: 100%;
}
h1 {
text-align: center;
color: #229954;
}
.tutorial {
min-height: 500px;
background-size: cover;
background-image: url("https://www.tutorialspoint.com/static/images/simply-easy-learning.png");
}
.container {
max-width: 250px;
padding: 10px;
position: absolute;
left: 300px;
top: 90px;
}
b {
color: #DE3163;
font-size: 30px;
}
input[type=text],
input[type=password] {
margin: 15px 1px;
border: 2px solid #58D68D;
width: 100%;
padding: 15px;
}
.button:hover {
transform: scale(0.5);
transition: transform 0.1s;
}
.button {
border: none;
cursor: pointer;
width: 100%;
background-color: #ABEBC6;
color: #DE3163;
padding: 15px 15px;
font-size: 15px;
}
</style>
Combing both HTML and CSS
Here is the final code where we can observe that the login form on an image looks more attractive than the standard form.
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
body {
font-family: VERDANA;
height: 100%;
}
h1 {
text-align: center;
color: #229954;
}
.tutorial {
min-height: 500px;
background-size: cover;
background-image: url("https://www.tutorialspoint.com/static/images/simply-easy-learning.png");
}
.container {
max-width: 250px;
padding: 10px;
position: absolute;
left: 300px;
top: 90px;
}
b {
color: #DE3163;
font-size: 30px;
}
input[type=text],
input[type=password] {
margin: 15px 1px;
border: 2px solid #58D68D;
width: 100%;
padding: 15px;
}
.button:hover {
transform: scale(0.5);
transition: transform 0.1s;
}
.button {
border: none;
cursor: pointer;
width: 100%;
background-color: #ABEBC6;
color: #DE3163;
padding: 15px 15px;
font-size: 15px;
}
</style>
</head>
<body>
<div class="tutorial">
<h1>TUTORIALSPOINT</h1>
<form class="container">
<b>Employee ID:</b>
<input type="text" placeholder="Enter Employee ID" name="username" required>
<b>Password:</b>
<input type="password" placeholder="Enter Password" name="password" required>
<button type="submit" class="button">Login</button>
</form>
</div>
</body>
</html>
When we run the above code, it will generate an output consisting of the login form along with an image that acts as the background for the login form displayed on the webpage.
30 Views
