একজন দক্ষ ফ্রিল্যান্সার গড়ার লক্ষে দেশে এই প্রথম জাগোরিক নিয়ে এসেছে বাংলা এইচটিএমএল টিউটোরিয়াল আর্টিকেল যার এই পর্বে থাকছে এইচটিএমএল টেক্সক্ট ফিল্ড আপলোড ও ড্রপডাউন সম্পর্কে বিস্তারিত।
এটি হচ্ছে বাংলা এইচটিএমএল টিউটোরিয়াল Part-13 এরই ধারাবাহিকতায় আমরা HTML এর সম্পূর্ণ সিরিজ শেষ করার চেষ্টা করব। সকল পর্বের টিউটোরিয়াল এখানে ক্লিক করলে পেয়ে যাবেনঃ এইচটিএমএল টিউটোরিয়াল
এইচটিএমএল টেক্সক্ট ফিল্ড ও আপলোড (Part-13)
এইচটিএমএল টেক্সক্ট ফিল্ড:
টেক্সট ফিল্ড একটা ফর্ম এলিমেন্টে তাই এখানে যত উদাহরন দেব সব <form></form> এর ভিতর রাখতে হবে। টেক্সক্ট ফিল্ড আগের টিউোটোরিয়ালটিতে দেখালাম খুব সহজ,
1.<input type="text" name="address"/>প্রদর্শন:
type এবং name এট্রিবিউট নিয়ে আগের টিউটোরিয়ালেই আছে। এখানে আরও নতুন কিছু গুরত্বপূর্ন এট্রিবিউট নিয়ে আলোচনা করি।
পাসওয়ার্ড ফিল্ড তৈরীতে শুধু type=”password” দিলেই হয়ে গেল।
maxlength এট্রিবিউট দিয়ে ফিল্ডে সর্বোচ্চ কতটি অক্ষর লিখতে পারবে সেটা নির্দিষ্ট করে দেয়া যায়। যেমন:
1.<input type="text" name="address" maxlength="50"/>প্রদর্শন
৫০টির বেশি character টাইপ করে দেখুন পারবেন না।
value এবং size
value এর মান যেটা দিবেন সেটা ফিল্ডের ভিতর দেখাবে। এডিট ফর্ম তৈরীর জন্য এটা লাগে। আর size দিয়ে দৈর্ঘ্য কত হবে সেটা ঠিক করা যায়। যেমন
1.<input type="text" name="address" maxlength="50" value="Mirpur, Dhaka" size="30"/>প্রদর্শন
এইচটিএমএল ৫ এ placeholder নামে একটা নতুন এট্রিবিউট এসছে যেটা দিয়ে ফিল্ডে কি ধরনের তথ্য দিতে হবে এ সংক্রান্ত কিছু লিখে দিতে পারেন ফলে সেটা ইউজার দেখলে বুঝতে সুবিধা হবে।
1.<input type="text" name="address" maxlength="50" placeholder="Type Address" size="30"/>প্রদর্শন
টাইপ করা শুরু করুন সাথে সাথে “Type Address” লেখাটি অদৃশ্য হয়ে যাবে।
- আরও পড়ুনঃ বাংলা এইচটিএমএল টিউটোরিয়াল (Introduction: Part-1)
- আরও পড়ুনঃ এইচটিএমএল ট্যাগ ও এট্রিবিউট (Tag & Attribute: Part-2)
- আরও পড়ুনঃ এইচটিএমএল প্যারাগ্রাফ ও হেডিং (P tag & Heading: Part-3)
- আরও পড়ুনঃ এইচটিএমএল লিস্ট ও ফন্ট (HTML List & Font: Part-4)
- আরও পড়ুনঃ এইচটিএমএল লিংক ও এনটাইটিজ (Link & Entities: Part-5)
এইচটিএমএল আপলোড ( HTML Upload):
ফর্মে যদি ছবি বা যেকোন ফাইল আপলোডের সুবিধা রাখতে চান তাহলে আগে ফর্মকে আপলোডের উপযোগী করতে হবে। এরপর input এলিমেন্টের type এট্রিবিউটের মান file দিলেই কাজ হয়ে গেল।
একটা আপলোড ফর্ম
1.<form action="create.php" method="post" enctype="multipart/formdata">2.<input type="file" name="user_file" />3.</form>ফাইল আপলোড করতে চাইলে form এ এই enctype=”multipart/formdata” এট্রিবিউটটি দিতেই হবে। আর input এর type=”file” দিতে হয়।
disabled, readonly এট্রিবিউট ব্যবহার করতে পারে এগুলি আগের টিউটোরিয়ালে আলোচনা হয়েছে।
hidden field
input ফিল্ড লুকিয়ে রাখা যায়। ফলে ব্রাউজারের ফর্মে কোন ফিল্ড দেখাবেনা কিন্তু ফর্মে hidden ফিল্ড দিয়ে যেকোন ডেটা value এট্রিবিউটে রাখতে পারেন। যেমন
1.<input type="hidden" name="currency" value="dollar"/>ধরুন আপনার সাইটে একটা মুল্য তালিকা আছে সেখানে ইউজার যেকোন একটা প্যাকেজ সিলেক্ট করে সাবমিট করলে তাকে একটা ফর্ম পূরনের জন্য ফর্ম পেজে পাঠিয়ে দিলেন।
যে প্যাকেজটা সিলেক্ট করল সেটার মুল্য জাভাস্ক্রিপ্ট বা পিএইচপি দিয়ে নিয়ে মুল ফর্মে একটা হিডেন ফিল্ড তৈরী করে রেখে দিতে পারে। এরুপ আরো বিভিন্ন সময় হিডেন ফিল্ডের প্রয়োজনীয়তা দেখা দেয়।
এইচটিএমএল টেক্সক্ট ফিল্ড আপলোড ও ড্রপডাউন –
- আরও পড়ুনঃ বাংলা এইচটিএমএল টিউটোরিয়াল (Introduction: Part-1)
- আরও পড়ুনঃ এইচটিএমএল ট্যাগ ও এট্রিবিউট (Tag & Attribute: Part-2)
- আরও পড়ুনঃ এইচটিএমএল প্যারাগ্রাফ ও হেডিং (P tag & Heading: Part-3)
- আরও পড়ুনঃ এইচটিএমএল লিস্ট ও ফন্ট (HTML List & Font: Part-4)
- আরও পড়ুনঃ এইচটিএমএল লিংক ও এনটাইটিজ (Link & Entities: Part-5)
এইচটিএমএল ড্রপডাউন লিস্ট (HTML Drop down list):
ড্রপডাউন লিস্ট এর মাধ্যমে আপনি ইউজারের জন্য এমন একটা তালিকা তৈরী করতে পারবেন যেখান থেকে ইউজার যেকোন একটা সিলেক্ট করে দিতে পারবে।
ধরুন আপনাকে একটা ফর্ম তৈরী করতে বলা হল এবং এখানে একজনের প্রিয় রং কি সেটা যাতে সিলেক্ট করে দিতে পারে (অনেকগুলি রং এর মধ্যে) এমন একটি অপশন রাখতে হবে,তখন ড্রপডাউন লিস্টের মাধ্যমে সেটা সহজেই করতে পারেন।
ড্রপডাউন লিস্ট তৈরী করতে প্রথমে <select> ট্যাগ দিয়ে কোড শুরু করতে হবে এরপর যে আইটেমগুলি থেকে ইউজার বাছাই করবে সেগুলির প্রতিটি <option> ট্যাগের মধ্যে রাখতে হবে।যেমন
1.<select name="color">2.<option value="bl">Black</option>3.<option value="wh">White</option>4.<option selected="selected" value="mr">Maroon</option>5.</select>প্রদর্শন: ড্রপডাউন লিস্ট
উপরের উদাহরনে দেখুন selected এট্রিবিউটের কারনে প্রথম অপশন Maroon দেখাচ্ছে আপনি যদি চান White প্রথমে দেখাক তাহলে ৩ নম্বর লাইনে selected এট্রিবিউট ব্যবহার করবেন।
প্রতিটি <option> ট্যাগে value এট্রিবিউট আছে এটা খুব গুরত্বপূর্ন যখন ফর্মের ডেটা সার্ভারে পাঠাবেন।
value এট্রিবিউটের নাম ধরে (যেমন bl,mr..) কল করতে হয়।
<select> ট্যাগের size এট্রিবিউট
<select> ট্যাগে size এট্রিবিউট দিয়ে আপনি ঠিক করে দিতে পারেন যে লিস্টে কয়টি আইটেম দেখাবে যেমন উপরের উদাহরনেই যদি size=2 দেন তাহলে দুটি অপশন দেখাবে বাকিটা স্ক্রল করে দেখতে হবে।
01.<select name="color" size=2>02. 03.<option value="bl">Black</option>04. 05.<option value="wh">White</option>06. 07.<option selected="selected" value="mr">Maroon</option>08. 09.</select>প্রদর্শন: <select> ট্যাগের size এট্রিবিউট
<select> ট্যাগের multiple এট্রিবিউট
multiple এর মাধ্যমে আপনি একের অধিক বিষয় সিলেক্ট করার সুযোগ দিতে পারেন।
01.<select multiple="yes">02. 03.<option value="bl">Black</option>04. 05.<option value="wh">White</option>06. 07.<option selected="selected" value="mr">Maroon</option>08. 09.</select>প্রদর্শন: <select> ট্যাগের multiple এট্রিবিউট
*৭ নম্বর লাইনে যদি selected এট্রিবিউট উঠিয়ে দেন তাহলে কোন অপশন আর সিলেক্টেড দেখাবেনা।
আপনার অপশন লিস্ট যদি অনেক বড় হয় তাহলে গ্রুপ করতে পারেন।<optgroup> এলিমেন্ট দিয়ে এটা করা যায়। যেমন
01.<select name="selInformation" >02.<optgroup label="Tutorials" >03.<option value="html"> HTML Tutorial </option>04.<option value="css"> CSS Tutorials </option>05.<option value="javascript"> JavaScript </option>06.</optgroup>07.<optgroup label="PHP Tutorials" >08.<option value="basicphp"> Basic PHP </option>09.<option value="advancedphp"> Advanced PHP </option>10.</optgroup >11.<optgroup label="Database Tutorials">12.<option value="sql"> SQL Tutorial </option>13.<option value="phpdatabase"> PHP Database </option>14.</optgroup>15.</select>প্রদর্শন:
উক্ত বিষয় সম্পর্কে কিছু জানার থাকলে কমেন্ট করতে পারেন।
আমাদের সাথে ইউটিউব চ্যানেলে যুক্ত হতে এখানে ক্লিক করুন এবং আমাদের সাথে ফেইজবুক পেইজে যুক্ত হতে এখানে ক্লিক করুন। গুরুত্বপূর্ণ আপডেট ও তথ্য পেতে আমাদের ওয়েবসাইটে ভিজিট করুন।
