বিভিন্ন প্রয়োজনে আমাদের ওয়েব সাইটে রেজিস্ট্রেশন ফরম ব্যবহার করতে হয়।ডাইনামিক ওয়েব সাইটের একটা গুরুত্বপূর্ণ উপাদান।এর মাধ্যমে সাধারণত ইউজাররা তাদের প্রয়োজনীয় তথ্য সাইটে প্রদান করে সাইট থেকে কোন বিশেষ সেবা গ্রহণ করে থাকেন।এক্ষেত্রে বিভিন্ন লেভেলের ইউজার থাকতে পারে। তাই রেজিস্ট্রেশন ফরমটি ব্যবহার বান্ধব হওয়া উচিৎ, যাতে করে একজন ইউজার সহজেই তার প্রয়োজনীয় ফিল্ড সমূহ বুঝতে পারে এবং সহজে তথ্য প্রদান করতে পারে।আজ সি এস এস-৩ ব্যবহার করে তৈরি করা একটা ইউজার রেজিস্ট্রোশন ফরম তৈরির কৌশল আপনাদের সাথে শেয়ার করব।
একবার দেখে নেয়া যাক আমাদের তৈরি রেজিস্ট্রেশন ফরমটি।
প্রয়োজনীয় HTML কোড:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>Registration form </title>
</head>
<body>
<form method="post" action="register.php">
<fieldset>
<legend>Give your personal information</legend>
<label>Name :</label>
<input maxlength="100" type="text">
<label>Roll No :</label>
<input maxlength="100" type="text">
<label>Date of birth :</label>
<select>
<option selected="selected" value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select>
<option selected="selected" value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">Septembar</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select>
<option selected="selected" value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
</select>
</fieldset>
<fieldset>
<legend>Give your log in information</legend>
<label>E-Mail :</label>
<input maxlength="120" type="text">
<label>Password :</label>
<input maxlength="20" type="password">
</fieldset>
<fieldset>
<button type="submit">Register</button>
</fieldset>
</form>
</body>
</html>
প্রয়োজনীয় CSS কোড:
ফরমের বাহ্যিক ডিজাইনের জন্য ব্যবহৃত CSS কোড:
form.reg{
width:600px;
float:left;
background: #fdedd6;
border: 2px solid #ff9601;
padding:10px;
font-family:arial;
font-size: 14px;
}
প্রতিটা <fieldset> ট্যাগের স্ট্যাইল নির্ধারণের জন্য ব্যবহৃত CSS কোড:
form.reg fieldset{
border-top:1px solid #ff9601;
border-left:0;
border-bottom:0;
border-right:0;
padding:6px;
margin:0px 30px 0px 0px;
}
প্রতিটা <legend>ট্যাগের স্ট্যাইল নির্ধারণের জন্য ব্যবহৃত CSS কোড:
form.reg legend{
text-align:left;
color:#ff9601;
font-size:18px;
padding:0px 4px 0px 4px;
margin-left:20px;
}
প্রতিটা <label> ট্যাগের স্ট্যাইল নির্ধারণের জন্য ব্যবহৃত CSS কোড:
form.reg label{
font-size: 32px;
width:200px;
float: left;
text-align: right;
color:#999;
clear:left;
margin:4px 4px 0px 0px;
padding:0px;
}
প্রতিটা <input > ট্যাগের স্ট্যাইল নির্ধারণের জন্য ব্যবহৃত CSS কোড:
form.reg input{
font-family: Georgia;
font-size: 24px;
float:left;
width:300px;
border:1px solid #ff9601;
margin:2px 0px 2px 2px;
color:#00abdf;
height:32px;
padding:3px;
}
প্রতিটা <select> ট্যাগের স্ট্যাইল নির্ধারণের জন্য ব্যবহৃত CSS কোড:
form.reg select{
font-family: Georgia;
font-size: 24px;
float:left;
border:1px solid #ff9601;
margin:2px 0px 2px 2px;
color:#00abdf;
height:40px;
}
প্রতিটা <input > এবং <select> ট্যাগ যখন ফোকাসিংয়ে থাকবে তার স্ট্যাইল নির্ধারণের জন্য ব্যবহৃত CSS কোড:
form.reg input:focus, form.reg select:focus{
background-color:#f8e8f0;
}
বাটনের সাধারণ ও বাটনের ভিজিটেড অবস্থায় button ক্লাসের স্ট্যাইল নির্ধারণের জন্য ব্যবহৃত CSS কোড:
.button, .button:visited{
float:right;
border-bottom: 1px solid rgba(0,0,0,0.25);
cursor: pointer;
padding: 5px 10px 5px 5px;
color: #fff;
text-decoration: none;
font-size: 32px; padding: 10px 15px;
background-color: #00abdf;
display: inline-block;
}
বাটনের মাউস হোবার অবস্থায় button ক্লাসের স্ট্যাইল নির্ধারণের জন্য ব্যবহৃত CSS কোড:
.button:hover{
background-color: #127483;
}
প্রজেক্টটির সম্পূর্ণ কোড:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>Registration form </title>
<style type="text/css">
form.reg{
width:600px;
float:left;
background: #fdedd6;
border: 2px solid #ff9601;
padding:10px;
font-family:arial;
font-size: 14px;
}
form.reg fieldset{
border-top:1px solid #ff9601;
border-left:0;
border-bottom:0;
border-right:0;
padding:6px;
margin:0px 30px 0px 0px;
}
form.reg legend{
text-align:left;
color:#ff9601;
font-size:18px;
padding:0px 4px 0px 4px;
margin-left:20px;
}
form.reg label{
font-size: 32px;
width:200px;
float: left;
text-align: right;
color:#999;
clear:left;
margin:4px 4px 0px 0px;
padding:0px;
}
form.reg input{
font-family: Georgia;
font-size: 24px;
float:left;
width:300px;
border:1px solid #ff9601;
margin:2px 0px 2px 2px;
color:#00abdf;
height:32px;
padding:3px;
}
form.reg select{
font-family: Georgia;
font-size: 24px;
float:left;
border:1px solid #ff9601;
margin:2px 0px 2px 2px;
color:#00abdf;
height:40px;
}
form.reg input:focus, form.reg select:focus{
background-color:#f8e8f0;
}
.button, .button:visited{
float:right;
border-bottom: 1px solid rgba(0,0,0,0.25);
cursor: pointer;
padding: 5px 10px 5px 5px;
color: #fff;
text-decoration: none;
font-size: 32px; padding: 10px 15px;
background-color: #00abdf;
display: inline-block;
}
.button:hover{
background-color: #127483;
}
</style>
</head>
<body>
<form method="post" action="register.php">
<fieldset>
<legend>Give your personal information</legend>
<label>Name :</label>
<input maxlength="100" type="text">
<label>Roll No :</label>
<input maxlength="100" type="text">
<label>Date of birth :</label>
<select>
<option selected="selected" value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select>
<option selected="selected" value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">Septembar</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select>
<option selected="selected" value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
</select>
</fieldset>
<fieldset>
<legend>Give your log in information</legend>
<label>E-Mail :</label>
<input maxlength="120" type="text">
<label>Password :</label>
<input maxlength="20" type="password">
</fieldset>
<fieldset>
<button type="submit">Register</button>
</fieldset>
</form>
</body>
</html>
একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।
…………………………………………………………………………………..
আজ তাহলে এ পর্যন্তই। বিজ্ঞান এবং প্রযুক্তিকে সঙ্গী করে শিক্ষা গ্রহণ, বিতরণ আর প্রচারের মাধ্যমে একসাথে কাজকরে, আসুন দক্ষতা প্রমানের মাধ্যেমে গড়ে তুলি একটা সুখী, সমৃদ্ধ, সুন্দর পৃথিবী। সকলের জন্য শুভকামনা রইল
পোস্টটির মূল লেখক: টিউটোহোস্ট টিম সদস্য "অসিম কুমার"
পোস্টটি ইতোপূর্বে: এখানে প্রকাশিত
আমি টিউটোহোস্ট। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 11 বছর 11 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 162 টি টিউন ও 69 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 1 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।
টিউটোহোস্ট বাংলাদেশের একটি জনপ্রিয় ওয়েব হোস্টিং সেবাদানকারী প্রতিষ্ঠান। যুক্তরাস্ট্র এবং যুক্তরাজ্য ভিত্তিক দ্রুতগতির বেশ কিছু ওয়েব সারভারে গুরুত্বপূর্ণ তথ্যগুলো নিরাপদে সংরক্ষণ করা হয়। আমরা এদেশে ২৪ ঘন্টা এবং বছরে ৩৬৫ দিন অনলাইন এবং ফোন সাপোর্টের ব্যবস্থা রেখেছি। বাংলেদশসহ অনেক দেশের জনপ্রিয় ওয়েবসাইট আমাদের সারভার ব্যবহার করছে।
@Md Arif Hossain: @Md Arif Hossain: ওয়েব পেজে ফরমটি যুক্ত করার জন্য HTML কোডের form ট্যাগের অংশটি আপনার পেজের যে অংশে যুক্ত করতে চান সেখানে যুক্ত করতে হবে। এবং css এর কোড সমূহ আপনার ওয়েবপেজের css এর সাথে যুক্ত করতে হবে। আর যদি শুধুমাত্র ইমেইল এবং নাম যুক্ত করতে চান তাহলে বাকী ট্যাগগুলো HTML অংশ থেকে মুছে দিন। ধন্যবাদ।
প্রথমেই ধন্যবাদ জানাই । Action=”register.php” এখন আমার প্রশ্ন হল এই Register.php ? কিভাবে পাব সাহায্য করবেন
সাধারণত রেজিস্ট্রেশন ফরম PHP এর মাধ্যমে প্রসেস করা হয়। তাই register.php একটা php পেজ। আমরা এখানে ফরম ডিজাইন নিয়ে আলোচনা করেছি। ফরম প্রসেসিং নিয়ে নয়, এজন্য আপনাকে PHP জানতে হবে।
ভাই আপনি নিচে ডেমো এবং ডাউনলোড এর যে দুইটা লোগো দিছেন ঐ গুলা কি ইমেজ নাকি কোডিং করে তৈরি…???
আপনার দেয়া কোড পেস্ট করলে শুধু ফর্মটিই আসে কালার আসেনা।
আমার মনে হয় কিছু Selector বাদ পড়েছে। আপনি Form.reg দিয়েছেন , এখানে Dot দ্বারা Class selector বুঝায়
আর body এর মধ্যে কোথাও class পেলাম না।
আশা করি সমাধান দিবেন।
![jQuery for Web Design [পর্ব-০৪] :: jQuery এর FadeIn FadeOut মেথড জানবো ও ব্যবহার করে দেখব](https://dnc.techtunes.io/tDrive/tuner/2018/04/techtunes_fee81aa370998cccf57ea2d7dc08eaa8-368x207.jpg "jQuery for Web Design [পর্ব-০৪] :: jQuery এর FadeIn FadeOut মেথড জানবো ও ব্যবহার করে দেখব")
ধন্যবাদ টিউটোহোস্ট কে । অনেক দরকারি একটি পোস্ট আমাদের সাথে শেয়ার করার জন্য । আমার একটি প্রশ্ন ছিল ?
প্রশ্ন হল আমি একটি পেজ এ এই ফর্ম টি এড করতে চাই । কিন্তু সমস্যা হল সেই পেজ এ এডিট করতে হয় বি বি কোড এ । এখন আমি কি করে বি বি কোড এর মধ্যে এই ফর্ম টি এড করব এবং বি বি কোড এর মাঝে কি এই কোড বসান যাবে ?
আর একটি প্রশ্ন শুধু মাত্র ইমেইল এবং নাম এর ফর্ম কি করে আমি এড করতে পারব ? যদি জানা থাকে তবে আমাকে এমন কিছু উৎস বা লিঙ্ক দিয়েন যার সাহায্যে আমি ঘেঁটে বের করতে পারি ।