রেজিস্ট্রেশন ফরম তৈরি করুন সি এস এস ব্যবহার করে

1 Comment / সিএসএস (CSS) / By

বিভিন্ন প্রয়োজনে আমাদের ওয়েব সাইটে রেজিস্ট্রেশন ফরম ব্যবহার করতে হয়।ডাইনামিক ওয়েব সাইটের একটা গুরুত্বপূর্ণ উপাদান।এর মাধ্যমে সাধারণত ইউজাররা তাদের প্রয়োজনীয় তথ্য সাইটে প্রদান করে সাইট থেকে কোন বিশেষ সেবা গ্রহণ করে থাকেন।এক্ষেত্রে বিভিন্ন লেভেলের ইউজার থাকতে পারে। তাই রেজিস্ট্রেশন ফরমটি ব্যবহার বান্ধব হওয়া উচিৎ, যাতে করে একজন ইউজার সহজেই তার প্রয়োজনীয় ফিল্ড সমূহ বুঝতে পারে এবং সহজে তথ্য প্রদান করতে পারে।আজ সি এস এস-৩ ব্যবহার করে তৈরি করা একটা ইউজার রেজিস্ট্রোশন ফরম তৈরির কৌশল আপনাদের সাথে শেয়ার করব।

একবার দেখে নেয়া যাক আমাদের তৈরি রেজিস্ট্রেশন ফরমটি।


প্রয়োজনীয় HTML কোড:

[sourcecode language=”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 class="reg" 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" class="button">Register</button>
</fieldset>
</form>
</body>
</html>
[/sourcecode]

প্রয়োজনীয় CSS কোড:

ফরমের বাহ্যিক ডিজাইনের জন্য ব্যবহৃত CSS কোড:

[sourcecode language=”css”]
form.reg{
width:600px;
float:left;
background: #fdedd6;
border: 2px solid #ff9601;
padding:10px;
font-family:arial;
font-size: 14px;
}
[/sourcecode]

প্রতিটা <fieldset> ট্যাগের স্ট্যাইল নির্ধারণের জন্য ব্যবহৃত CSS কোড:

[sourcecode language=”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;
}
[/sourcecode]

প্রতিটা <legend>ট্যাগের স্ট্যাইল নির্ধারণের জন্য ব্যবহৃত CSS কোড:

[sourcecode language=”css”]
form.reg legend{
text-align:left;
color:#ff9601;
font-size:18px;
padding:0px 4px 0px 4px;
margin-left:20px;
}
[/sourcecode]

প্রতিটা <label> ট্যাগের স্ট্যাইল নির্ধারণের জন্য ব্যবহৃত CSS কোড:

[sourcecode language=”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;
}
[/sourcecode]

প্রতিটা <input > ট্যাগের স্ট্যাইল নির্ধারণের জন্য ব্যবহৃত CSS কোড:

[sourcecode language=”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;
}

[/sourcecode]

প্রতিটা <select> ট্যাগের স্ট্যাইল নির্ধারণের জন্য ব্যবহৃত CSS কোড:

[sourcecode language=”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;
}
[/sourcecode]

প্রতিটা <input > এবং <select> ট্যাগ যখন ফোকাসিংয়ে থাকবে তার স্ট্যাইল নির্ধারণের জন্য ব্যবহৃত CSS কোড:

[sourcecode language=”css”]
form.reg input:focus, form.reg select:focus{
background-color:#f8e8f0;
}

[/sourcecode]

বাটনের সাধারণ ও বাটনের ভিজিটেড অবস্থায় button ক্লাসের স্ট্যাইল নির্ধারণের জন্য ব্যবহৃত CSS কোড:

[sourcecode language=”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;
}
[/sourcecode]

বাটনের মাউস হোবার অবস্থায় button ক্লাসের স্ট্যাইল নির্ধারণের জন্য ব্যবহৃত CSS কোড:

[sourcecode language=”css”]
.button:hover{
background-color: #127483;
}
[/sourcecode]

প্রজেক্টটির সম্পূর্ণ কোড:

[sourcecode language=”css”]
<!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 class="reg" 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" class="button">Register</button>
</fieldset>
</form>
</body>
</html>

[/sourcecode]

একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।

…………………………………………………………………………………..

আজ তাহলে এ পর্যন্তই। বিজ্ঞান এবং প্রযুক্তিকে সঙ্গী করে শিক্ষা গ্রহণ, বিতরণ আর প্রচারের মাধ্যমে একসাথে কাজকরে, আসুন দক্ষতা প্রমানের মাধ্যেমে গড়ে তুলি একটা সুখী, সমৃদ্ধ, সুন্দর পৃথিবী। সকলের জন্য শুভকামনা রইল

1 thought on “রেজিস্ট্রেশন ফরম তৈরি করুন সি এস এস ব্যবহার করে”

Leave a Comment