ফর্ম সম্পর্কিত ট্যাগ

এই প্রবন্ধে ফর্ম সম্পর্কিত ট্যাগ সম্পর্কে ব্যাখ্যা করা হয়েছে।

এটি টেক্সট ইনপুট এবং ড্রপডাউন মেনুর মতো বিভিন্ন ফর্ম ফিল্ড ব্যাখ্যা করে।

YouTube Video

ফর্ম সম্পর্কিত ট্যাগ

<form> ট্যাগ

1<form action="/submit" method="post">...</form>

• <form> ট্যাগটি পুরো ফর্মটি সংজ্ঞায়িত করতে ব্যবহৃত হয়।
• action অ্যাট্রিবিউটটি গন্তব্য নির্দিষ্ট করে এবং method অ্যাট্রিবিউটটি পদ্ধতি (GET বা POST) নির্দিষ্ট করে।
• আপনি <a> ট্যাগের মতো target অ্যাট্রিবিউটও নির্ধারণ করতে পারেন।

<input> ট্যাগ (টেক্সট ইনপুট ফিল্ড)

1<input type="text" name="username" placeholder="Enter your username">

• <input type="text"> একটি একক-লাইন পাঠ্য ইনপুট ক্ষেত্র তৈরি করে। ব্যবহারকারীরা যেকোনো পাঠ্য প্রবেশ করতে পারেন।

• placeholder অ্যাট্রিবিউটটি এমন বর্ণনামূলক টেক্সট নির্ধারণ করে যা ইনপুট ক্ষেত্র ফাঁকা থাকলে প্রদর্শিত হয়। এটি ব্যবহারকারীদের প্রত্যাশিত ইনপুট সহজে বুঝতে সহায়তা করে। ইনপুট শুরু হলেই এই টেক্সট স্বয়ংক্রিয়ভাবে অদৃশ্য হয়ে যায়।

  • placeholder পরিপূরক তথ্য প্রদানের জন্য উপযুক্ত এবং প্রয়োজনীয় ইনপুটের মতো গুরুত্বপূর্ণ নির্দেশনার জন্য উপযুক্ত নয়। এই ধরনের ক্ষেত্রে, আপনাকে একটি লেবেল ব্যবহার করা উচিত।

<input> ট্যাগ (পাসওয়ার্ড ইনপুট ফিল্ড)

1<input type="password" name="password" placeholder="Type your password here">

• <input type="password"> পাসওয়ার্ড ইনপুটের জন্য একটি ক্ষেত্র তৈরি করে। প্রবেশকৃত অক্ষরগুলি লুকানো এবং মুখোশপরা রাখা হয় নিরাপত্তা নিশ্চিত করতে।

<input> ট্যাগ (ইমেইল ঠিকানা ইনপুট ফিল্ড)

1<input type="email" name="email" placeholder="Enter your email">

• <input type="email"> একটি ইমেইল ঠিকানা প্রবেশের জন্য একটি ক্ষেত্র তৈরি করে এবং যথাযথ ইমেইল ফর্ম্যাট নিশ্চিত করতে ভ্যালিডেশন অন্তর্ভুক্ত করে।

<input> ট্যাগ (চেকবক্স)

1<input type="checkbox" name="subscribe"> Subscribe to newsletter

• <input type="checkbox"> একটি চেকবক্স তৈরি করে। যখন একাধিক বিকল্প উপলব্ধ থাকে, ব্যবহারকারীরা একাধিক আইটেম নির্বাচন করতে পারেন।

<input> ট্যাগ (রেডিও বোতাম)

1<input type="radio" name="gender" value="male"> Male<br>
2<input type="radio" name="gender" value="female"> Female

• <input type="radio"> একটি রেডিও বোতাম তৈরি করে যা ব্যবহারকারীদের একটি সেট থেকে শুধুমাত্র একটি বিকল্প নির্বাচন করতে দেয়।

<input> ট্যাগ (সাবমিট বোতাম)

1<input type="submit" value="Submit">

• <input type="submit"> ফর্মের তথ্য জমা দেওয়ার জন্য একটি বোতাম তৈরি করে।
• value অ্যাট্রিবিউটটির মান ফর্ম ডেটাতে অন্তর্ভুক্ত হয় যখন জমা দেওয়া হয়।

<input> ট্যাগ (রিসেট বোতাম)

1<input type="reset" value="Reset">

• <input type="reset"> একটি বোতাম তৈরি করে যা ফর্মের সমস্ত ইনপুট মান রিসেট করে।

<input> ট্যাগ (গোপন ফিল্ড)

1<input type="hidden" name="userid" value="12345">

• <input type="hidden"> একটি লুকানো ক্ষেত্র তৈরি করে যা পর্দায় প্রদর্শিত হয় না এবং ফর্ম জমা দেওয়ার সময় ব্যাকএন্ডে তথ্য পাঠাতে ব্যবহৃত হয়।

<input> ট্যাগ (রঙ বাছাইকারক)

1<input type="color" name="favcolor" value="#ff0000">

• <input type="color"> একটি রঙ পিকার প্রদর্শন করে এবং ব্যবহারকারীরা একটি রঙ নির্বাচন করার জন্য একটি ইনপুট ক্ষেত্র তৈরি করে।

<input> ট্যাগ (তারিখ ইনপুট ফিল্ড)

1<input type="date" name="birthday">

• <input type="date"> একটি তারিখ ইনপুট ক্ষেত্র তৈরি করে যা একটি তারিখ নির্বাচন করার জন্য একটি ক্যালেন্ডার প্রদর্শন করে।

<input> ট্যাগ (সময় ইনপুট ফিল্ড)

1<input type="time" name="appointment_time">

• <input type="time"> সময় প্রবেশের জন্য একটি ক্ষেত্র তৈরি করে এবং একটি সময় পিকার প্রদর্শন করা হয়।

<input> ট্যাগ (ফাইল ইনপুট ক্ষেত্র)

1<input type="file" name="resume">

• <input type="file"> ব্যবহারকারীদের ফাইল নির্বাচন এবং আপলোড করার জন্য একটি ইনপুট ক্ষেত্র তৈরি করে।
• form ট্যাগের enctype অ্যাট্রিবিউটটি multipart/form-data হিসাবে সেট করতে হবে।

<input> ট্যাগ (সংখ্যা)

1<input type="number" name="quantity" min="1" max="10">

• <input type="number"> একটি সংখ্যা ইনপুট ক্ষেত্র তৈরি করে যা সর্বনিম্ন মান, সর্বাধিক মান এবং ধাপ (বৃদ্ধি/হ্রাস পরিমাণ) সেট করার অনুমতি দেয়।

<input> ট্যাগ (সংখ্যার জন্য পরিসীমা নির্বাচন ক্ষেত্র)

1<input type="range" name="volume" min="0" max="100" value="50">

• <input type="range"> একটি ইনপুট ক্ষেত্র তৈরি করে যেখানে ব্যবহারকারীরা একটি রেঞ্জের মধ্যে একটি মান স্লাইডার ব্যবহার করে নির্বাচন করতে পারে।

<textarea> ট্যাগ

1<textarea name="message" rows="4" cols="50" placeholder="Enter your message"></textarea>

• <textarea> ট্যাগ একটি বহু-লাইন টেক্সট ইনপুট ক্ষেত্র তৈরি করে। এটি দীর্ঘ টেক্সট বা মন্তব্য প্রবেশের জন্য উপযুক্ত।

<select> ট্যাগ

1<select name="animal">
2    <option value="cat">Cat</option>
3    <option value="dog">Dog</option>
4</select>

• <select> ট্যাগ একটি ড্রপডাউন মেনু তৈরি করে এবং বিকল্পগুলি <option> ট্যাগ দিয়ে সংজ্ঞায়িত হয়। ব্যবহারকারীরা এক বা একাধিক আইটেম নির্বাচন করতে পারেন।

1<select name="animals" multiple>
2    <option value="cat">Cat</option>
3    <option value="dog">Dog</option>
4    <option value="bird">Bird</option>
5</select>

• একাধিক নির্বাচন সক্ষম করতে, multiple অ্যাট্রিবিউট যোগ করুন। এই অ্যাট্রিবিউট নির্দিষ্ট করলে অপশনগুলি একটি তালিকা বাক্স হিসেবে প্রদর্শিত হয়।

<optgroup> ট্যাগ

 1<select name="fruits">
 2    <optgroup label="Citrus">
 3        <option value="orange">Orange</option>
 4        <option value="lemon">Lemon</option>
 5    </optgroup>
 6    <optgroup label="Berries">
 7        <option value="strawberry">Strawberry</option>
 8        <option value="blueberry">Blueberry</option>
 9    </optgroup>
10</select>

• <optgroup> ট্যাগ সম্পর্কিত আইটেমগুলিকে একত্রে গ্রুপ করতে ব্যবহৃত হয়। label অ্যাট্রিবিউট আপনাকে একটি গ্রুপ নাম সেট করতে দেয়, যা দীর্ঘ তালিকাতেও ব্যবহারকারীদের জন্য স্পষ্ট অপশন প্রদান করে।

<label> ট্যাগ

1<label for="username">Username:</label>
2<input type="text" id="username" placeholder="Enter your username">

• <label> ট্যাগ ইনপুট ক্ষেত্র, চেকবক্স এবং রেডিও বোতামের জন্য লেবেল সংজ্ঞায়িত করে, যা ব্যবহারযোগ্যতা এবং অ্যাক্সেসিবিলিটি বৃদ্ধি করে।
• উদাহরণস্বরূপ, একটি লেবেলে ক্লিক করলে একটি ইনপুট ক্ষেত্র ফোকাস হতে পারে অথবা একটি চেকবক্স চালু বা বন্ধ হতে পারে।

<fieldset> ট্যাগ

1<fieldset>
2    <legend>Personal Information</legend>
3    <label for="name">Name:</label>
4    <input type="text" id="name" placeholder="Enter your name">
5</fieldset>

• <fieldset> ট্যাগ সম্পর্কিত ফর্ম নিয়ন্ত্রণগুলি গ্রুপ করে এবং <legend> ট্যাগ গ্রুপের জন্য একটি শিরোনাম প্রদান করে।

<button> ট্যাগ

1<button type="button">Button</button>
2<button type="submit" name="action" value="send">Submit</button>
3<button type="reset">Reset</button>

• <button> ট্যাগ একটি ক্লিকযোগ্য বোতাম সংজ্ঞায়িত করে যা ফর্ম জমা দেওয়া বা অন্যান্য ক্রিয়া ট্রিগার করে।

  যখন type="button" নির্দিষ্ট করা হয়, এটি একটি সাধারণ বোতাম হিসাবে কার্যকর হয়। এটি ক্লিক করলে ফর্ম জমা দেওয়া বা অন্য কোন ডিফল্ট ক্রিয়া ট্রিগার হয় না। এটি তখন ব্যবহৃত হয় যখন আপনি জাভাস্ক্রিপ্ট দিয়ে কাস্টম ক্রিয়া সেট করতে চান।

  যখন type="submit" নির্দিষ্ট করা হয়, এটি ফর্মের একটি জমা দেওয়া বোতাম হিসাবে কাজ করে। যখন এই বোতামটি ক্লিক করা হয়, এটি সংবলিত ফর্ম জমা দেওয়া হবে।

  যখন type="reset" নির্দিষ্ট করা হয়, এটি ফর্মের একটি রিসেট বোতাম হিসাবে কাজ করে। এটি ক্লিক করলে ফর্মের সমস্ত ইনপুট ক্ষেত্র পুনরায় সেট হবে এবং তাদের প্রাথমিক অবস্থায় ফিরে যাবে।

  যদি type অ্যাট্রিবিউট নির্দিষ্ট না করা হয়, কিছু ব্রাউজার এটিকে type="submit" হিসেবে বিবেচনা করতে পারে, তাই প্রত্যাশিত আচরণ নিশ্চিত করতে প্রকারটি স্পষ্টভাবে নির্দিষ্ট করার পরামর্শ দেওয়া হয়।

• ট্যাগের মধ্যে খোলার এবং বন্ধ করার ট্যাগগুলোর মাঝে অন্যান্য HTML বিষয়বস্তু অন্তর্ভুক্ত করা যেতে পারে, যার মাধ্যমে আইকন বা জটিল পাঠ সহ বোতাম তৈরি করা সম্ভব হয়।

• <input> ট্যাগ ব্যবহার করে সাবমিট বোতাম থাকলে, value অ্যাট্রিবিউটের মানটি ফর্ম ডেটার মধ্যে অন্তর্ভুক্ত হয়, কিন্তু <button> ট্যাগে এটি ডিফল্ট হিসেবে পাঠানো হয় না।

  <button> ট্যাগের জন্য name এবং value অ্যাট্রিবিউট নির্দিষ্ট করে, আপনারা এর মান ফর্ম ডেটা হিসেবে পাঠাতে পারেন।

<datalist> ট্যাগ

1<input list="browsers" name="browser">
2<datalist id="browsers">
3    <option value="Chrome">
4    <option value="Firefox">
5    <option value="Safari">
6</datalist>

• <datalist> ট্যাগটি <input> উপাদানের জন্য নির্বাচনযোগ্য বিকল্পগুলির একটি তালিকা প্রদান করে। ব্যবহারকারীরা তালিকা থেকে নির্বাচন করতে পারে বা তাদের নিজস্ব মান প্রবেশ করতে পারে।

<output> ট্যাগ

1<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
2    <input type="range" id="a" value="50"> +
3    <input type="range" id="b" value="50"> =
4    <output name="result" for="a b">100</output>
5</form>

• <output> ট্যাগটি গণনা বা ব্যবহারকারী ইন্টারঅ্যাকশনের ফলাফল প্রদর্শন করে। এটি ফর্ম বা স্ক্রিপ্টের মধ্যে গণনার ফলাফল গতিশীলভাবে প্রদর্শনের জন্য ব্যবহার করা হয়।
• for অ্যাট্রিবিউটের জন্য, যেসব ফর্ম এলিমেন্টগুলোকে আপনি সংযুক্ত করতে চান সেগুলোর আইডি স্পেস দ্বারা পৃথক করে নির্দিষ্ট করুন।

<progress> ট্যাগ

1<progress value="70" max="100">70%</progress>

• <progress> ট্যাগটি ব্যবহারকারীদের একটি কাজের প্রগতি দেখায়। উদাহরণস্বরূপ, এটি একটি ফাইল ডাউনলোড বা ইনস্টলেশন প্রগতি ভিজ্যুয়ালভাবে নির্দেশ করতে পারে।

<meter> ট্যাগ

1<meter value="0.6">60%</meter>

• <meter> ট্যাগটি একটি নির্ধারিত সীমার মধ্যে একটি সংখ্যাসূচক পরিমাপ উপস্থাপন করে। এটি নির্দিষ্ট সীমার মধ্যে ডিস্ক ব্যবহার বা একটি জ্বালালী নির্দেশকের মতো পরিমাপগুলি প্রদর্শনের জন্য ব্যবহার করা হয়।

আপনি আমাদের ইউটিউব চ্যানেলে ভিজ্যুয়াল স্টুডিও কোড ব্যবহার করে উপরের নিবন্ধটি অনুসরণ করতে পারেন। দয়া করে ইউটিউব চ্যানেলটিও দেখুন।

YouTube Video