CSS Forms
Form Design using CSS
visit us at :- https://webtipstop.blogspot.com/
<html>
<head>
<title>Table Designs </title>
<style>
#bg
{
height:450px;
width:50%;
background-color:red;
box-sizing:border-box;
padding-top:20px;
}
input[type=text]
{
height:40px;
width:40%;
margin-top:20px;
background:none;
border:none;
outline:none;
border-bottom:2px solid white;
}
input::placeholder
{
color:white;
}
input[type=number]
{
height:40px;
width:40%;
margin-top:20px;
background:none;
border:none;
outline:none;
border-bottom:2px solid white;
}
input[type=email]
{
height:40px;
width:40%;
margin-top:20px;
background:none;
border:none;
outline:none;
border-bottom:2px solid white;
}
input[type=button]
{
height:40px;
width:20%;
margin-top:40px;
background-color:white;
color:red;
border:none;
outline:none;
font-size:18px;
border-radius:20px;
}
</style>
</head>
<body>
<div id="bg">
<form name="a">
<center><h1 style="color:white">Application Form</h1></center>
<center><input type="text" name="a" placeholder="Enter your name"></center>
<center><input type="number" name="a" placeholder="Enter your Number"></center><center><input type="email" name="a" placeholder="Enter your Email"></center>
<center><input type="button" name="submit" value="Submit"></center>
</form>
</div>
</body>
</html>
Let's Output
visit us at :- https://webtipstop.blogspot.com/
<html>
<head>
<title>Table Designs </title>
<style>
#bg
{
height:450px;
width:50%;
background-color:red;
box-sizing:border-box;
padding-top:20px;
}
input[type=text]
{
height:40px;
width:40%;
margin-top:20px;
background:none;
border:none;
outline:none;
border-bottom:2px solid white;
}
input::placeholder
{
color:white;
}
input[type=number]
{
height:40px;
width:40%;
margin-top:20px;
background:none;
border:none;
outline:none;
border-bottom:2px solid white;
}
input[type=email]
{
height:40px;
width:40%;
margin-top:20px;
background:none;
border:none;
outline:none;
border-bottom:2px solid white;
}
input[type=button]
{
height:40px;
width:20%;
margin-top:40px;
background-color:white;
color:red;
border:none;
outline:none;
font-size:18px;
border-radius:20px;
}
</style>
</head>
<body>
<div id="bg">
<form name="a">
<center><h1 style="color:white">Application Form</h1></center>
<center><input type="text" name="a" placeholder="Enter your name"></center>
<center><input type="number" name="a" placeholder="Enter your Number"></center><center><input type="email" name="a" placeholder="Enter your Email"></center>
<center><input type="button" name="submit" value="Submit"></center>
</form>
</div>
</body>
</html>
Let's Output
Comments
Post a Comment