how to create a login form in html | how to create a beautiful login form in html | how to make a login and register form in html
In the previous article we learned how to make people informative. In this article we will see how we can make people very beautiful by using CSS. If you haven't read the previous article, you can go and read it by clicking on this link how to create login form In this article, the CSS that we will apply will be inner CSS.
Before using inner CSS, we need to know about inner CSS: When we use internal or inner CSS, we do all the coding inside the header. inner CSS is useful when we want to design a separate page. All this coding is done inside the style tag at the top of each page. Here we see a little bit of it We will apply the same in these forms.
<!DOCTYPE html><html><head><meta charset='utf-8'><meta http-equiv='X-UA-Compatible' content='IE=edge'><title>Create login form using inner CSS </title><meta name='viewport' content='width=device-width, initial-scale=1'><link rel='stylesheet' type='text/css' media='screen' href='main.css'><script src='main.js'></script></head><style>h1{color: chartreuse;background-color: crimson;text-align: center;}</style><body><h1>I am first heading</h1></body></html>I am first heading
In it we have changed the color of the words, it has come to the centerand it has changed the background color.You can also do this code manually using the online editorif you want to learn more about inner CSS just click on this link . Internal CSSHere is coding for login for using inner CSS or internal CSS
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Html Elements and types of Elements </title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='main.css'>
<script src='main.js'></script>
</head>
<style>
body
{
background-color: darkgray;
}
form
{
background-image: url('.//Images/light-bulb-3104355_960_720.jpg');
display: flex;
text-align: center;
color: white;
height: 300px;
width: 400px;
border-radius: 10px;
}
table
{
display: flex;
text-align: center;
margin-right:80px;
margin-top: 100px;
}
input
{
Padding: 10px 20px;
border-color: turquoise;
border-radius: 10px;
}
button
{
padding: 10px 20px;
color:white ;
background-color: green;
font-weight: bold;
}
h2
{
color: white;
text-align: center;
margin-top: 100px;
}
b
{
color: turquoise;
}
</style>
<body>
<h2>LOGIN FORM</h2>
<center> <form action="">
<b>Enter User Name and Password Here!!!</b>
<table>
<tr><td><label for="">User Name</label></td></tr>
<tr><td><input type="text" name="" id=""></td></tr>
<tr><td><label for="">Password</label></td></tr>
<tr><td><input type="password" name="" id=""></td></tr>
<tr><td><button>Login</button></td></tr>
</table>
</form>
</center>
</body>
</html>
is used to design Form Its output is:
To Design form, table, input box and button heading the CSS code that you can use will be:
body
{
background-color: darkgray;
}
form
{
background-image: url('.//Images/light-bulb-3104355_960_720.jpg');
display: flex;
text-align: center;
color: white;
height: 300px;
width: 400px;
border-radius: 10px;
}
table
{
display: flex;
text-align: center;
margin-right:80px;
margin-top: 100px;
}
input
{
Padding: 10px 20px;
border-color: turquoise;
border-radius: 10px;
}
button
{
padding: 10px 20px;
color:white ;
background-color: green;
font-weight: bold;
}
h2
{
color: white;
text-align: center;
margin-top: 100px;
}
b
{
color: turquoise;
}
</style>
Thanks for reading this article, we will see in the next article how there
are more functions in CSS that we can apply to make our Pages beautiful.
Please follow this blog and if you have any questions you can ask me
in the comment box.
Posts
No comments:
Post a Comment