লগইন ফর্ম কিভাবে করবেন?
ফেসবুক, টুইটার সহ ই-কমার্স ওয়েবসাইটে যে ফর্ম পূরণ করে আমরা লগিন করে থাকি সেটাকে মূলত লগিন ফরম বলে থাকে। ওয়েব ডিজাইনের কাজ যারা করেন, তাদেরকে প্রায় সাইন আপ ফর্ম বা লগিন ফর্মের কাজ করতে হয়। আমি এখানে খুবই সাধারণ ভাবে একটি লগইন ফর্ম করে দেখালাম। এটাকে ভাল করে বুঝে নিলে যে কোন ডিজাইনে সাইনআপ ফর্ম বা লগইন ফর্ম করা সম্ভব। আরো বিস্তারিত জানতে ভিডিও টিউটোরিয়াল'টি দেখতে পারেন।
বিস্তারিত ভিডিও সহ দেখুন
কোড উদাহরণ
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>
*{margin:0;padding:0;}
.form-container{
height:490px;
width:300px;
margin:0 auto;
background:url("images/mobile.jpg")no-repeat;
background-size:300px 490px;
position: relative;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
h1{
padding-top:50px;
text-align:center;
color:#264991;
}
form{
height:286px;
width:265px;
margin-top:55px;
margin-left:18px;
background-color:#264991;
}
.user-image{
width:250px;
position:absolute;
text-align:center;
top:100px;
height:80px;
}
.user-image img{
height:80px;
width:80px;
border-radius:50px;
background:#fff;
border:3px solid #fff;
}
label{
margin:7px;
color:#fff;
}
input[type="text"],input[type="password"]{
padding:7px;
width:237px;
border-radius:4px;
margin: 0 5px;
}
p{margin:15px 0;}
input[type="submit"]{
border:none;
background-color:#fff;
padding:3px 0;
text-align:center;
width:255px;
color:#264991;
margin-left:5px;
font-size:20px;
border:2px solid #fff;
border-radius:4px;
margin-top:10px;
transition:0.4s linear;
}
input[type="submit"]:hover{
background-color:#264991;
color:#fff;
cursor:pointer;
}
.remember{font-size:13px;padding:5px;}
.remember a{color:#fff;text-decoration:none;float:right;}
.remember a:hover{text-decoration:underline;}
</style>
</head>
<body>
<div class="form-container">
<h1>Login Form</h1>
<form action="#">
<div class="user-image"><img src="images/user.png"></div>
<br>
<p>
<label for="user-name">Username</label><br>
<input id="user-name" type="text" placeholder="Enter Your Name" required><br>
</p>
<p>
<label for="password">Password</label><br>
<input id="password" type="password" placeholder="Enter Password" required>
</p>
<p>
<input type="submit" value="Login">
</p>
<div class="remember">
<label for="remember">
<input style="float:left;" id="remember" type="checkbox" checked> Remember me</label>
<a href="#" class="pull-right">Forgot Password?</a>
</div>
</form>
</div>
</body>
</html>
ফলাফল
Keep Your Ads Here...
ঐতিহাসিক কালার থিওরি
বিস্তারিত দেখুন এইচটিএমএল আইকন
বিস্তারিত দেখুন ওয়েবের যত ফন্টস
বিস্তারিত দেখুন সিএসএস এনিমেশন
বিস্তারিত দেখুন হরেক রকম মেনু
বিস্তারিত দেখুন রকমারি বাটন
বিস্তারিত দেখুন