Create a Registration form By Using CSS


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

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

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

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

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

প্রয়োজনীয় 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 করলে নিচে প্রদর্শিত ছবির মত দেখাবে।

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

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

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

পোস্টটি ইতোপূর্বে: এখানে প্রকাশিত

One thought on “Create a Registration form By Using CSS

  1. Pingback: Create a Registration form By Using CSS | youthpowerblog1

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s