Tips Tricks And Tutorials

Sunday, February 17, 2013

HTML, CSS, JS ও PHP ট্রেনিং ওয়েব সাইট এ ফর্ম তৈরি .....

Posted by Monyzaman on 8:28 PM

HTML, CSS, JS ও PHP ট্রেনিং সেন্টার
সবাই ভাল আছেন ত? আশা করছি ভাল আছেন সবাই।। আজ সুরু করছি আমাদের ওয়েব ডিজাইন সেখার জন্য চেইন টিউনের ষষ্ট পর্ব।। গত পড়বে আমরা সিখেছি কিভাবে ওয়েব সাইট এ টেবিল বানাতে হয় আর আজ সিখব কিভাবে ওয়েব সাইট এ ফর্ম বানাতে হয়।। প্রায় প্রতিটা ওয়েব সাইট এই ফর্ম এর ব্যাবহার হয়ে থাকে।। সাধারনত ওয়েব পেজ এর contact পেজ এ ফর্ম এর ব্যাবহার হয়।। তবে চলুন দেখি কিভাবে এই ফর্ম বানানো যায়।।
একটি এইচটিএমএল ফর্ম বেশ কিছু উপাদানের সমন্বয়ে গঠিত হয়। এগুলো হচ্ছে ,
১. টেক্সট বক্স
২. টেক্সট এরিয়া
৩. রেডিও বাটন
৪. সাবমিট বাটন
৫. চেক বক্স
৬. ড্রপডাউন লিস্ট
একটা উধাহরন দেখে নি তাহলে কি বলেন
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<html>
<head>
<title> <a href="http://www.techtunes.com.bd" rel="nofollow">http://www.techtunes.com.bd</a> </title>
</head>
<center>
<font face="Arial" color="#fe0321" size="6">
Please fill in the box
</font>
 
<form name="information" method="post" action="information.php">
<font face="Arial" color="#fe0321" size="4">
Name:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
</font>
<input type="text" value="Please write your name" name="name"><br /><br />
<font face="arial" color="#fe0321" size="4">
Father`s name:
</font> &nbsp; &nbsp;
<input type="text" value="Please write your farher name" name="name">
<br /><br />
<font face ="arial" color="#fe0321" size="4">
Address:
</font> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
<textarea rows="3" cols="20"></textarea>
<br />
<font face="arial" color="#fe0321" size="4">
Male:
</font>
<input type="radio" value="male" name="gender">
<br />
<font face="arial" color="#fe0321" size="4">
Female:
</font>
<input type="radio" value="female" name="gender">
<br />
<font face="arial" color="#fe0321" size="4">
Your current location:
</font>
<select name="district">
<option> Kushtia </option>
<option> Dhaka</option>
<option>Khulna</option>
<option>Mirpur</option>
<option>Jessore</option>
<option>Pabna</option>
</select>
<br />
<br />
<font face="arial" color="#fe0321" size="4">
Education background:
</font>
<br />
<input type="checkbox" value="checkbox1" name="checkbox">
<font face="arial" color="#fe0321" size="4">
SSC
</font>
<br />
<input type="checkbox" value="checkbox" name="checkbox">
<font face="arial" color="#fe0321" size="4">
HSC
</font>
<br />
<br />
<input type="submit" name="submit" value="Submit">
<br />
<br />
<input type="reset" value="Reset" name="clear">
</form>
</center>
</body>
</html>
উপরের যে কোড গুলো দেখছেন তা নোটপ্যাড এ লিখে index.html নামে সেভ করে যে কোন ব্রাউজার দিয়ে ওপেন করলে নিচের ছবির মত পেজ দেখতে পাবেন ।।

এবার আমরা সরাসরি দেখব কিভাবে এটা কাজ করে, ছবি দেখলে নিশ্চয়ই বুঝতে পারবেন,

Input fields হচ্ছে form নামক sandwich এর গোশত ।  input tag এর কিছু attributes আছে সেসব সম্বন্ধে জানা উচিত ।
type - এই এট্রিবিউট ইনপুট ফিল্ড এর প্রকারভেদ নির্ধারন করে। যেমন text, submit, এবং password ।
name - এই এট্রিবিউট টি দিয়ে ফিল্ড এর নামকরন করা যায় যাতে পরবর্তিতে আপনি reference আনতে পারেন।
size - এই এট্রিবিউট টি ফিল্ড এর horizontal width সেট করে ।
maxlength – এই এট্রিবিউট টি character এর  সর্বোচ্চ নম্বর নির্ধারন করে
1
<form method="post" action="mailto:youremail@email.com"> Name: <input type="text" size="10" maxlength="40" name="name"> <br /> Password: <input type="password" size="10" maxlength="10" name="password"> </form>
চেকবক্স অনেকগুলি আইটেম থেকে একটা বাছাই করার সুবিধা দেয়। চেকবক্স এর  name এবং  value এট্রিবিউট যা রেডিও বাটন এর name এবং  value এট্রিবিউট মত আচরন করে।
1
<form method="post" action="mailto:youremail@email.com"> Select your favorite cartoon characters. <input type="checkbox" name="toon" value="Goofy">Goofy <input type="checkbox" name="toon" value="Donald">Donald <input type="checkbox" name="toon" value="Bugs">Bugs Bunny <input type="checkbox" name="toon" value="Scoob">Scooby Doo <input type="submit" value="Email Myself"> </form>

এইচটিএমএল - সাবমিট বাটন:

Input type এর মধ্যে "submit"  অপশনটি সাবমিট বাটন তৈরীর ক্ষেত্রে উল্লেখযোগ্য ।specifies a very unique button. যখন আমরা submit button এ চাপ দেবো তখন ফর্ম এর বার্তাটি activate  হবে।
যেহেতু আমরা সাবমিট বাটন তৈরী করেছি তাই নতুন এট্রিবিউট প্রয়োজন তা হচ্ছে value এট্রিবিউট। আমরা যে শব্দকে value এট্রিবিউট এর মান হিসাবে নির্বাচন করবো তা বাটন উপর প্রদর্শিত হবে। "Submit" or "Continue" শব্দগুলো value এট্রিবিউট এর  মান হিসাবে ব্যবহার হয়।  .
1
2
<input type="submit" value="Submit" />
<input type="submit" value="Continue Please!" />
সর্বশেষ input type হল রিসেট বাটন।  রিসেট বাটন ক্লিক করার মাধ্যমে আপনি ফর্ম এর সবকিছু আবার পুর্বের স্বাভাবিক অবস্থায় নিয়ে যেতে পারবেন।"start over" বাটন কে আপনি রিসেট বাটন এর মত ব্যাবহার করতে পারবেন।
1
2
<input type="reset" value="Reset Fields" />
<input type="reset" value="Start Over" />
ফর্ম নিয়ে আর কোন সমস্যা আছে কি? যদি থেকে থাকে তবে জানাবেন।। আরও ভাল ভাবে বুঝিয়ে দেব।। আজ আর কষ্ট দিবো না।। আগামি পর্বে আবার কথা হবে।। সবাই ভাল থাকবেন ।। সে পর্যন্ত আল্লাহ্‌ হাফেজ।।

1 comments:

Unknown said...

খুব সুন্দর একটি পোস্ট। আরো সহজ ভাষায় চাই।Awesome Post. এই আরো পোস্ট চাই।

Exclusive Dwonload Site BDMela24.Com

December 30, 2014 at 9:15 PM

Post a Comment

 
Design by Scooby Doo jogos