কেমন
আছেন সবাই, আশা করছি সকলে ভালো। আছেন। গত পর্বে দেখিয়েছিলাম কিভাবে টেবিল
তৈরি করতে হয়। আশা করছি সেটি আপনারা খুব ভালোভাবে প্রাকটিস করেছেন। একটা
কথা মনে করিয়ে দিতে চাই তা হল শুধু টিউন পড়ে বা কোড দেখে কখনই কিছু
ভালোভাবে শিখতে পারবেন না। আপনাকে অবশ্যই প্রতিটি বিষয় প্রাকটিস করতে হবে,
নইলে কিছুই ভালোভাবে শিখতে পারবেন না।
এবার তাহলে চলুন আজকের বিষয় নিয়ে আলোচনা শুরু করা যাক। আপনারা নেটে বিভিন্ন সাইটে একাউন্ট খুলতে গেলে অবশ্যই বিভিন্ন ধরণের ফর্ম পুরণ করে থাকেন। যেমন- ফেসবুক, জিমেইল। আজ আমরা এসমস্ত ফর্ম এর বিভিন্ন অংশ কিভাবে তৈরি করা হয় তা শিখব।
ফর্ম এ সাধারনত যে সমস্ত বিষয়গুলো থাকে তা হল-
সবার শুরুতে আমি যেটি দেখব সেটি হল কিভাবে টেক্সট ফিল্ড তৈরি করতে হয়। একটি নোটপ্যাড নিয়ে নিচের কোডটি টাইপ করে ফেলুন।
এবার
কোডটিকে .html এক্সটেনশন দিয়ে সেভ করে ফলাফল দেখুন। এখানে কোডটিতে
<form> ট্যাগ ব্যবহার করা হয়েছে, যেটি ফর্মকে নির্ধারণ করে। এবং
ইনপুট ফিল্ড নির্ধারনের জন্য ইনপুট ট্যাগ ব্যবহার করা হয়েছে। এছাড়া ইনপুট
ট্যাগ এর ভিতরে ইনপুট টাইপটি কি ধরণের হবে তাও বলে দেওয়া হয়েছে। আশা করি
এপর্যন্ত বুঝতে কারও কোন সমস্যা হয়নি। এবার আসুন কোডটিতে সামান্য একটু
পরিবর্তন এনে আরও একটি ব্যবহার শিখি। পূর্বের কোডে আমরা দুটি টেক্সট ফিল্ডে
ইনপুট তো নিলাম কিন্তু এটাকে নিয়ে তো কিছু একটা করতে হবে। অন্তত ইনপুট
নিয়ে সেটাকে তো কোথাও পাঠাতে হবে তাই না? আর তার জন্য অবশ্যই আমাদের একটা
সাবমিট বাটন থাকতে হবে। এবার আমরা দেখব কিভাবে সাবমিট বাটন যুক্ত করা যায়।
এটি করার জন্য খুব বেশি কিছু করা লাগবে না। আপনার পূর্বের কোডটিতে
শুধুমাত্র এই লাইনটি যুক্ত করলে হবে- <input type="submit"
value="Submit"/>। নিম্নে সম্পূর্ন কোডটি দিয়ে দেওয়া হল।
এবার
যে জিনিসটি শিখব তা হল কিভাবে রেডিও বাটন তৈরি করা যায়। রেডিও বাটন
সাধারণত ব্যবহার করা হয় যখন ইউজার একাধিক অপশন থেকে যেকোন একটিকে নির্বাচন
করবে সেক্ষেত্রে। এবার তাহলে একটি নোটপ্যাড নিয়ে নিচের কোডটি টাইপ করে
ফেলুন।
এবার
এটিকে .html এক্সটেনশন দিয়ে সেভ করে ওপেন করুন দেখবেন রেডিও বাটন তৈরি হয়ে
গেছে। এখানে কোড সম্পর্কে তেমন কিছু বলার আছে বলে আমি মনে করছি না কেননা
আমি ধরে নিচ্ছি আপনারা এমনিতেই বুঝতে পারছেন কোনটা কেন এবং কিভাবে ব্যবহৃত
হচ্ছে। নতুন করে কিছু বলতে গেলে ঘুরেফিরে সেই একই কথা বলতে হয়।
এবার তাহলে চলুন আমরা দেখে নিই কিভাবে চেকবক্স তৈরি করতে হয়। চেকবক্স সাধারণত ব্যবহার করা হয় যখন ইউজার একাধিক অপশন থেকে এক বা একাধিক অপশন নির্বাচন করবে সেক্ষেত্রে। এবার তাহলে একটি নোটপ্যাড নিয়ে নিচের কোডটি টাইপ করে ফেলুন।
আজ তাহলে এপর্যন্তই সবাইকে পরবর্তি পর্বের আমন্ত্রন জানিয়ে আজ এখানেই শেষ করছি। সবাই ভালো থাকবেন।
এবার তাহলে চলুন আজকের বিষয় নিয়ে আলোচনা শুরু করা যাক। আপনারা নেটে বিভিন্ন সাইটে একাউন্ট খুলতে গেলে অবশ্যই বিভিন্ন ধরণের ফর্ম পুরণ করে থাকেন। যেমন- ফেসবুক, জিমেইল। আজ আমরা এসমস্ত ফর্ম এর বিভিন্ন অংশ কিভাবে তৈরি করা হয় তা শিখব।
ফর্ম এ সাধারনত যে সমস্ত বিষয়গুলো থাকে তা হল-
- টেক্সট ফিল্ড
- বাটন
- পাসওয়ার্ড ফিল্ড
- চেক বক্স
- ড্রপ-ডাউন বক্স
সবার শুরুতে আমি যেটি দেখব সেটি হল কিভাবে টেক্সট ফিল্ড তৈরি করতে হয়। একটি নোটপ্যাড নিয়ে নিচের কোডটি টাইপ করে ফেলুন।
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
| </pre><html><head><title>Text Field</title></head><body><form>Your Name:<input type="text" name="yourname"/></br>Father Name:<input type="text" name="fathername"/></form></body></html><pre> |
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
| </pre><html><head><title>Submit</title></head><body><form>Your Name:<input type="text" name="yourname"/></br>Father Name:<input type="text" name="fathername"/></br><input type="submit" value="Submit"/></form></body></html><pre> |
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
| </pre><html><head><title>Radio</title></head><body><form action="">Male<input type="radio" name="Sex" value="male"><br/>Female<input type="radio" name="Sex" value="female"></form></body></html><pre> |
এবার তাহলে চলুন আমরা দেখে নিই কিভাবে চেকবক্স তৈরি করতে হয়। চেকবক্স সাধারণত ব্যবহার করা হয় যখন ইউজার একাধিক অপশন থেকে এক বা একাধিক অপশন নির্বাচন করবে সেক্ষেত্রে। এবার তাহলে একটি নোটপ্যাড নিয়ে নিচের কোডটি টাইপ করে ফেলুন।
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
| </pre><html><head><title>Text Box</title></head><body><p> Game you like to play </p><form action="">Football:<input type="checkbox" name="game" value="football"><br/>Cricket:<input type="checkbox" name="game" value="cricket"><br/>Baseball:<input type="checkbox" name="game" value="baseball"><br/>Volleyball<input type="checkbox" name="game" value="volleyball"><br/></body></html><pre> |
No comments:
Post a Comment