আমাদের কথা খুঁজে নিন

   

এইচটিএমএল টিউটরিয়াল প্রাথমিক লেভেল [পর্ব - ০6]।



আমরা যখন ওয়েব পেইজগুলো দেখি তখন প্রায়ই আমরা বিভিন্ন রকম ফর্ম (form) দেখতে পাই। এই ফর্মগুলো এইচটিএমএল দিয়ে করা হয়। খুব সহজে আমরা এইচটিএমএল দিয়ে ওয়েবে ফর্ম তৈরি করতে পারি। আজ আমরা শিখব কি ভাবে ওয়েব পেইজে ফর্ম তৈরি করতে হয়।  
ফর্ম ( Forms):
ওয়েবে বিভিন্ন রকম ফর্ম ব্যাবহার করা হয়।

এগুলোর মধ্যে সবছেয়ে বেশি ব্যাবহার হয় কন্টাক ফর্ম, রেজিষ্টেশন ফর্ম, লগইন ফর্ম ইত্যাদি। এই ফর্মগুলোতে ব্যাবহারকারি তার ইচ্ছা মত তথ্য দিতে পারে না। কেবল মাত্র ফর্মে যা উল্লেখ করতে বলা হবে তার বেশি কিছু লিখতে পারবে না। এই ফর্মের মাধ্যমে ব্যাবহারকারি তার তথ্য ঐ ওয়েব পেইজের ম্যানেজিং বডির কাছে পাটাতে পারে। কি ভাবে একটি ফর্মকে এক্টিভ করতে হয় তা আমরা পরে জানব।

আগে আমরা ফর্ম তৈরি করা শিখি।
একটি ফর্ম তৈরি করতে সাধারণত form, input, textarea, select and option ট্যাগগুলো লাগে। তাছাড়া আরও অনেক কিছু আমরা ব্যাবহার করতে পারি। আপাতত এগুলো সম্পর্কে আমরা একটু বিস্তারিত জানব। আমরা যে ফর্মটি তৈরি করব তাকে একটি ফর্ম ট্যাগের ভীতরে লিখতে হবে।

ফর্ম ট্যাগের কাজ এতটুকুই। নিচের উদাহরণটি দেখেন বুঝতে কোন সমস্যা হবে না।
ফর্ম ট্যাগের ভীতরে যা লিখা আছে তা মুছে আপনি আপনার ফর্ম তৈরি করবেন। আশা করি বুজতে পেরেছেন।  
ইনপুট (Input) ট্যাগ:                  
অনেকেই বলে থাকে যে ইনপুট ট্যাগই হল ফর্মের মেইন বিষয়।

ইনপুট ট্যাগের প্রায় দশ রকম ব্যাবহার আছে। নিছে আমরা সেগুলো দেখবঃ-
নাম্বার একঃ-
এর দ্বারা সাধারণ টেক্সটকে বুঝানো হয়েছে। তবে এর কিছু value attribute থাকে যা ব্যাবহার করলে নির্দিষ্ট পরিমান টেক্সটের বেশি লিখা যায় না।
নাম্বার দুইঃ-
এটাও অনেকটা টেক্সট বক্সের মত। তবে এতে যা লিখা হয় তা ব্যাবহারকারি দেখতে পারে না।


নাম্বার তিনঃ-
এটা হল চেকবক্স। এতে ব্যাবহারকারি ক্লিক করে on এবং off করতে পারবে।   তবে এতে checked attribute ব্যাবহার করলে আপনা আপনি on হয়ে থাকবে। অনেক সময় এটা দরকার লাগে।
যেমনঃ
এই রকম করে লিখতে হয়।


নাম্বার চারঃ-
এটা অনেকটা চেকবক্সের মত। তবে এই ক্ষেত্রে ব্যাবহারকারি একটি বিষয় একবারই সিলেক্ট করতে পারবে। এতেও checked attribute ব্যাবহার করা যায়। এর ব্যাবহার সম্পুর্ন চেকবক্সের মত।  
নাম্বার পাঁচঃ-
এটা আপনার কম্পিউটারের ফাইল দেখাবে, আমরা কোন কিছু save অথবা open করতে গেলে যেমন দেখায়।

এটা মূলত ব্যাবহার করা হয় কোন ফাইল upload দিতে।
নাম্বার ছয়ঃ-
এটা অনেকটা button এর মত। এটা ব্যাবহার করা হয় ফর্মটি সাবমিট করার জন্য। তবে আপনি চাইলে এর ভীতরের টেক্সট value attribute দিয়ে পরিবর্তন করে নিতে পারেন। যেমনঃ
নাম্বার সাতঃ-
এটা একটি ইমেজ যাতে ব্যাবহারকারি ক্লিক করতে পারবে।

তবে এটা ব্যাবহার করতে ইমেজ ট্যাগের মত src attribute লাগবে। যেমনঃ
আশাকরি বুঝতে পেরেছেন।
নাম্বার আটঃ- 
এটা একটা button , এর তেমন কাজ নাই। তবে যদি আরও কোড use করা হয় তবে এর কাজ কিছুটা বারবে।
নাম্বার নয়ঃ- 
এক প্রকার button যা ব্যাবহার করা হয় ফর্মে যে ডিফল্ট মানগুলো দেওয়া থাকে তা পুনরায় আগের মত করে দেবার জন্য।


নাম্বার দশঃ-
এই ফিল্ডে যা থাকে তা ব্যাবহারকারি দেখতে পারবে না অনেকটা ভিতরের তথ্য যা কেবল ওয়েবসাইট যে নিয়ন্ত্রণ করে সেই জানতে পারে। যেমনঃ একটি ফর্ম যখন আমরা পুরন করে পাঠাই তখন এটি কার কাছে যায় তা জানি না।
নোটঃ মনে রাখতে হবে যে input ট্যাগের শেষ হয় “/> ” দ্বারা।
টেক্সটএরিয়া (textarea):-
এটি হচ্ছে একটি বড় টেক্সটবক্স। এটে আপনি অনেক কিছু লিখতে পারবেন।

আপনি চাইলে এই বক্সটি মাউজের মাধ্যমে ছোট বড় করতে পারবেন। তবে এতে rows এবং cols এট্রিবিউট ব্যাবহার করা লাগে। যেমনঃ
সিলেক্ট (Select) ট্যাগঃ
সিলেক্ট ট্যাগের ভিতরে আরেকটা ট্যাগ থাকে তা হল option ট্যাগ। এর সাহায্যে আমরা drop-down select বক্স তৈরি করতে পারি। নিচের উদাহরণটি দেখলে আরও স্পষ্ট হবেঃ
যখন ফর্মটি পাঠানো হয় তখন select করা option টি send হয়।

এটা অনেকটা চেকবক্স ও রেডিও buttons এর checked এট্রিবিউটের মত। মাঝে মাঝে option ট্যাগে selected এট্রিবিউট ব্যাবহার করা হয়। বিষয়টি আরও ভাল বুঝবেন নিচের উদাহরণটি দেখলে
উপরে যে ট্যাগগুলোর কথা বলা হয়েছে সবগুলো একটি ফর্মকে অনেক সুন্দর করে তুলবে তাতে কোন সন্দেহ নাই। তবে কথা হচ্ছে আপনার ফর্মে ত আপনি শুধু ফর্ম তৈরি করে রাখবেন না প্রতিটি ফিল্ডেই একটা করে নাম দিবেন। আর এর জন্য আপনাকে প্রতিটির সাথে name এট্রিবিউট যোগ করতে হবে নিচের মত করে
নিচের কোডটি আপনার এডিটরে লিখে save করে আপনার browser এ দেখেন মজা পাবেন।


এটি একটি সাধারন ফর্ম কি করে তৈরি করতে হয় তার কোড । আশা করি বুঝতে পেরেছেন। মনে রাখবেন এই ফর্মটি কিন্তু এক্টিভ না। একে এক্টিভ করতে হলে আরও কিছু কোড এর প্রয়োজন। সেগুলো আমরা পরে শিখব।

এটা ভাল করে অনুশীলন করেন।
আজ এই পর্যন্তই । আগামী দিন অন্য কিছু নিয়ে আবার হাজির হব আপনাদের সামনে । ততদিন পর্যন্ত ভালো থাকবেন । অবশ্যই কমেন্টে জানাবেন কেমন লাগছে ।


মনোযোগ দিয়ে পড়ার জন্য ধন্যবাদ ।

সোর্স: http://www.techtunes.com.bd/     দেখা হয়েছে বার

এর পর.....

অনলাইনে ছড়িয়ে ছিটিয়ে থাকা কথা গুলোকেই সহজে জানবার সুবিধার জন্য একত্রিত করে আমাদের কথা । এখানে সংগৃহিত কথা গুলোর সত্ব (copyright) সম্পূর্ণভাবে সোর্স সাইটের লেখকের এবং আমাদের কথাতে প্রতিটা কথাতেই সোর্স সাইটের রেফারেন্স লিংক উধৃত আছে ।

প্রাসঙ্গিক আরো কথা
Related contents feature is in beta version.