.jpeg)
একটি লগইন ফর্ম ডিজাইন html এবং css
দিয়ে
এর আগে আমরা css এবং html সম্পারর্কে প্রাথমিক ধারণা নিয়েছি ।
css এ আজকে আমরা জানব আরেকটি নতুন বিষয় দেখব । css এ class এবং id এর মত html tag ও নেওয়া যায় ।
যেমন :
<html>
<head>
</head>
<body>
<form action="https://bong71.blogspot.com">
<input type="text" placeholder="Email" autocomplete="on" name="email"><br><br>
<input type="password" autocomplete="on" placeholder="Password" name="password"><br><br>
<input type="submit" value="Log In"><br><br>
<form>
</body>
</html>
এবার এটি css এর মার্ধ্যমে ডিজাইন করার জন্য । আমরা কোন div নিব না, এজন্য আমরা সরাসরি
<style>
input{
margin-bottom: 10px;
border: solid 1px #999;
box-sizing: border-box;
padding:12px 8px;
width:250px;
}
</style>
এটি লিখব ।
যার ফলে এই ফাইলের সকল input ট্যাগের মার্জিন,বডার,প্যাডিং,বক্স সব একই হয়ে যাবে ।
উপরের দুটি কোর্ড আমরা একত্রে এভাবে লিখতে পারি ----
<html>
<head>
<style>
input{
margin-bottom: 10px;
border: solid 1px #999;
box-sizing: border-box;
padding:12px 8px;
width:250px;
}
</style>
<head>
<body>
<form action="https://bong71.blogspot.com">
<input type="text" placeholder="Email" autocomplete="on" name="email"><br><br>
<input type="password" autocomplete="on" placeholder="Password" name="password"><br><br>
<input type="submit" value="Log In"><br><br>
<form>
</body>
</html>
এবার আমি একটি complete html login form এর কোর্ড দিচ্ছি -----
<!DOCTYPE html>
<html lang="en">
<head>
<meta content='width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1' name='viewport'/>
<meta charset="utf-8">
<title>bong71.blogspot.com</title>
<style>
input{
margin-bottom: 10px;
border: solid 1px #999;
box-sizing: border-box;
padding:12px 8px;
width:250px;
border-radius: 15px;
}
input[type=submit]{
background-color: #1002BA;
border:1px solid #365899;
color: white;
font-size: 14px;
height: 44px;
line-height: 44px;
padding: 0 19px;
}
</style>
</head>
<body>
<html>
<center>
<br>
<br>
<br>
<br>
<form action="https://bong71.blogspot.com">
<input type="text" placeholder="Email" autocomplete="on" name="email"><br><br>
<input type="password" autocomplete="on" placeholder="Password" name="password"><br><br>
<input type="submit" value="Log In"><br><br>
<form>
</center>
</body>
</html>
আজকের প্রশ্ন
Altaf Monir,From Messenger
height, weight, align কি?
উত্তর
height, weight, align এগুলো html tag এর আকার,উচ্চতা,অবস্তান নিদ্দেশ করে ।
এছাড়া আরও অনেক attribute রয়েছে যেমন border,color,bolder,padding,background-color,font-size ইত্যাদি এদের প্রত্যেকের বিভিন্ন কাজ রয়েছে,আমরা প্রয়োজন অনুসারে এদের ব্যাবহার করি ।
যে কেউ আমাকে তিনভাবে প্রশ্ন করতে পারবেন 1.কমেন্ট 2.ওয়েবসাইট 3.ফেসবুকপেজ বা মেসেন্জার গ্রুপের মার্ধ্যমে ।
