All HTML Attributes (Part-2)
আমরা গত পর্বে আলোচনা করেছি ২০ টি html attributes নিয়ে। আজকের এই পর্বে চলুন আরো ২০ টি html attributes নিয়ে আলোচনা করা যাক।
২১। default – Attribute টি ব্যবহার করা হয় track tag এর জন্য। আমরা যখন কোন audio বা video ওয়েবসাইটে play করি তখন একই audio বা video এর জন্য বিভিন্ন track ব্যবহার করি। যেমন- Englsih track বা Bangla track, তাই না? এখন যে track টি আপনি default ভাবে চালু করতে চান সেখানে এই default এট্রিবিউটটি ব্যবহার করতে পারেন। যেমন-
<video width="320" height="240" controls> <source src="forrest_gump.mp4" type="video/mp4"> <source src="forrest_gump.ogg" type="video/ogg"> <track src="fgsubtitles_en.vtt" kind="subtitles" srclang="en" label="English"> <track src="fgsubtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian"> </video>
এখানে default ভাবে fgsubtitles_en.vtt মানে English subtitle টি দেখাবে।
২২। defer – Attribute টি ব্যবহার করা হয় <script> tag এর জন্য। আমরা জানি <script> tag ব্যবহার করা হয় কোন JavaScript ফাইল src এট্রিবিউটটি এর মাধ্যামে আমাদের ওয়েবসাইটে সংযোগ করার জন্য। এখন আমরা যদি এই defer এট্রিবিউটটি ব্যবহার করি তাহলে ঐ src এট্রিবিউটটি তখনই execute হবে যখন আমাদের ওয়েবসাইট সম্পূর্ন parsing বা লোড সম্পন্ন হবে।
তবে মানে রাখতে হবে যে, এই src এট্রিবিউটটি এর value অবশ্যই external source থেকে হতে হবে।
২৩। dir – Attribute টি ব্যবহার করা হয় কোনে একটি html tag এর text direction এর নির্ধারন করার জন্য। যেমন- সাধারনত আমরা যখন ইংরেজীতে কোন লেখা লিখি তখন তা বাম দিক থেকে শুরু হয়, তাই না? এখন যদি ডান দিক থেকে লিখতে চান তাহলে? হ্যা, তার জন্য এই dir এট্রিবিউটটি ব্যবহার করতে হবে। যেমন-
<p dir="rtl">আমি এই লেখাটি ডান দিক থেকে শুরু করেছি।</p>
এখানে dir ভ্যালুর মান rtl দেওয়ার কারনে ব্রাউজারে লেখাটি Right to left হয়ে দেখাবে মানে বাম দিক হতে ডান দিকে যাবে। আবার আমরা যদি ltr দিতাম তাহলে লেখাটি Left to right হয়ে দেখাত।
২৪। disabled – Attribute টি ব্যবহার করা হয় <button>, <fieldset>, <input>, <optgroup>, <option>, <select>, <textarea> tag এ অর্থাৎ html form fields ট্যাগের জন্য। এই এট্রিবিউটটি ব্যবহার করার ফলে ঐ সব tag গুলো disabled হয়ে যাবে মানে আপনি ঐ সব tag গুলো select করতে পারবেন না।
২৫। draggable – Attribute টি ব্যবহার করা হয় সকল html element/tag এর ক্ষেত্রে। এই এট্রিবিউটটি ব্যবহার করার ফলে সেই element/tag টিকে আপনি মুভ করতে পারবেন মানে এক দিক থেকে অন্য দিকে নিয়ে যেতে পারবেন। কিন্তু তার জন্য আপনাকে কিছু JavaScript এর কাজ করতে হবে।
২৬। enctype – Attribute টি ব্যবহার করা হয় html form ট্যাগের জন্য যাতে করে আপনি বলে দিতে পারেন যে input field এর ডাটাগুলো কিভাবে server এ encoding করে পাঠাবেন। enctype এট্রিবিউটটি এর value সাধারনত ৩ ধরনের হয়ে থাকে।
১। application/x-www-form-urlencoded (the default) ২। multipart/form-data ৩। ext/plain
তবে এ ক্ষেত্রে form method এর value অবশ্যই POST হতে হবে। আমরা যখন html form এর মাধ্যমে কোন file upload করে থাকি তখন এই এট্রিবিউটটি ব্যবহার করে থাকি।
২৭। for – Attribute টি ব্যবহার করা হয় HTML এর <label> এবং <output> tag এর ক্ষেত্রে। যখন <label> সাথে ব্যবহার করা হয় তখন এই for এট্রিবিউটটি দ্বারা বুঝানো হয কোন
form element বা input field এর সাথে এই <label> টি bound আছে। যেমন-
<label for="username">Your Username</label> <input type="text" id="username">
এখানে এই username এর input field টি Your Username নামে <label> এর সাথে bound হয়েছে। তাতে লাভ কি? হ্যা লাভ আছে 🙂 আপনি যদি এখন শুধুমাত্র এই <label> এর উপর ক্লিক করনে তাহলে দেখবেন যে ঐ username এর input field টি focus হয়ে আছে।
ঠিক একই রকম <output> element ক্ষেত্রে হয়ে থাকে।
২৮। form – Attribute টি ব্যবহার করা হয় html এর কোন কোন tag গুলো <form> tag এর সাথে অর্ন্তুভুক্ত। এই form এট্রিবিউটটি ব্যবহার করা যাবে শুধুমাত্র <button>,<fieldset>, <input>, <label>, <meter>, <object>, <output>, <select> এবং <textarea> tag এর জন্য।
যেমন-
<form action="process.php" method="post" id="my_form"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> </form> <button type="submit" form="my_form" value="Submit">Submit</button> <button type="submit" form="my_form_1" value="Submit 1">Submit 1 2</button> <button type="submit" form="my_form_2" value="Submit 2">Submit 2</button>
এখানে খেয়াল করেন যে, <form> tag এর জন্য আমরা একটি id এট্রিবিউটটি my_form নামে ব্যবহার করেছি এবং এই একই নামটি আবার প্রথম <button> tag এর form এট্রিবিউটটি এর সাথে ব্যবহার করেছি। এখন আমরা যদি প্রথম <button> টিতে press করি তাহলে আমাদের উপরের form টি process.php নামের page এ গিয়ে হবে। কিন্তু আমরা যদি বাকি ২ টি <button> tag এ press করি তাহলে কিছুই হবে না কারন আমরা তো বলে দেই নি যে বাকি ২ টি <button> কোন <form> tag এর জন্য।
মনে রাখবেন, এই form নামটি কিন্তু attribute এবং tag উভয়ের ক্ষেত্রেই ব্যবহার করা হয়।
২৯। formaction – Attribute টি ব্যবহার করা হয় html এর <button> এবং <input> tag এর শুধুমাত্র type=”submit” এট্রিবিউটটি এর জন্য। এই ২ টি html tag মূলত ব্যবহার করা হয় html এর form এর ক্ষেত্রে। যেমন-
<form action="/process.php" method="post"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <button type="submit">Submit</button><br> <button type="submit" formaction="/process_2.php">Submit to another page</button> </form>
এখানে আমরা ২টি <button> ট্যাগ যার type=”submit” ব্যবহার করেছি। কিন্তু প্রথম <button> ট্যাগ এর জন্য কিন্তু কোন formaction এট্রিবিউটটি ব্যবহার করেনি। এখন যদি আমরা প্রথম <button> এ press করি তাহলে এই form টি process.php পেজে যাবে কিন্তু যদি দ্বিতীয় <button> এ press করি তাহলে এই form টি যাবে process_2.php পেজে। কেন? কারন, আমরা formaction এট্রিবিউটটি এর value বলে দিয়েছি process_2.php।
৩০। height – Attribute টি ব্যবহার করা html এর tag এর height নির্ধারন করার জন্য। এই এট্রিবিউটটি শুধুমাত্র ব্যবহার করা যাবে <canvas>, <embed>, <iframe>, <img>, <input>, <object> এবং <video> tag এর ক্ষেত্রে। যেমন-
<img src="amarcourse_logo.jpg" alt="Amar Course" height="69" width="36">
এখানে এই img ট্যাগ এর height হবে 69 pixel.
পরবর্তী পর্ব গুলো আসছে …