 |
| HTML FORM ATTRIBUTE |
এইচটিএমএল ফর্ম গুলো ওয়েব ডেভেলপমেন্ট এর একটি মৌলিক অংশ, যা ব্যবহারকারীদের প্রক্রিয়াকরণের জন্য সার্ভারে ডাটা জমা দিয়ে একটি ওয়েবসাইটের সাথে যোগাযোগ করতে দেয়।
একটি HTML ফর্ম হল একটি ধারক যাতে বিভিন্ন ইনপুট উপাদান যেমন পাঠ্য ক্ষেত্র, রেডিও বোতাম, চেকবক্স, বোতাম, ড্রপডাউন মেনু ইত্যাদি অন্তর্ভুক্ত থাকে, যা ব্যবহারকারীদের তথ্য প্রবেশ করতে এবং জমা দিতে দেয়।
একটি HTML ফর্মের মৌলিক কাঠামো <form> উপাদান ব্যবহার করে সংজ্ঞায়িত করা হয় এবং এতে এক বা একাধিক ইনপুট উপাদান থাকে। অ্যাকশন অ্যাট্রিবিউট এই URLটি নির্দিষ্ট করে যেটাতে ফর্ম ডেটা পাঠানো হবে, এবং পদ্ধতি অ্যাট্রিবিউট ফর্ম জমা দেওয়ার জন্য ব্যবহার করা HTTP পদ্ধতিকে সংজ্ঞায়িত করে, সাধারণত হয় "GET" বা "POST"৷
এখানে একটি সাধারণ HTML ফর্মের একটি উদাহরণঃ-
<html> <head> <title>Sample Form</title> </head> <body> <form action="/submit_form" method="post"> <label for="name">Name:</label> <input type="text" id="name" name="name" required> <label for="email">Email:</label> <input type="email" id="email" name="email" required> <label for="message">Message:</label> <textarea id="message" name="message" rows="4" cols="30" required></textarea> <input type="submit" value="Submit"> </form> </body> </html>
এই উদাহরণে, আমাদের কাছে তিনটি ইনপুট ক্ষেত্র সহ একটি ফর্ম রয়েছে: "নাম," "ইমেল," এবং "বার্তা।" ব্যবহারকারীকে ফর্ম জমা দেওয়ার আগে তিনটি ক্ষেত্রেই পূরণ করতে হবে। যখন ব্যবহারকারী "জমা দিন" বোতামে ক্লিক করেন, তখন HTTP POST পদ্ধতি ব্যবহার করে ফর্ম ডেটা "/submit_form" URL-এ পাঠানো হবে।
সার্ভার-সাইডে, PHP, Python, Java, ইত্যাদির মতো বিভিন্ন প্রোগ্রামিং ভাষা ব্যবহার করে ফর্ম ডেটা প্রক্রিয়া করা যেতে পারে, যেমন একটি ডেটাবেজে ডেটা সংরক্ষণ করা, একটি ইমেল পাঠানো, বা অন্য কোনো পছন্দের কার্যকারিতা সম্পাদন করার জন্য।
HTML ফর্ম এর বৈশিষ্ট্য?
এইচটিএমএল বৈশিষ্ট্য হল বিশেষ উপাদান যা এইচটিএমএল উপাদান সম্পর্কে অতিরিক্ত তথ্য প্রদান করে। এগুলি HTML উপাদানগুলির আচরণ, চেহারা বা কার্যকারিতা পরিবর্তন বা কাস্টমাইজ করতে ব্যবহৃত হয়। বৈশিষ্ট্যগুলি একটি HTML উপাদানের খোলার ট্যাগের মধ্যে যোগ করা হয় এবং কী-মান জোড়া ব্যবহার করে সংজ্ঞায়িত করা হয়। একটি এইচটিএমএল এলিমেন্ট অ্যাট্রিবিউট যোগ করার জন্য সাধারণ সিনট্যাক্স নিম্নরূপঃ-
<element attribute_name="attribute_value">
এখানে কিছু সাধারণভাবে ব্যবহৃত HTML বৈশিষ্ট্য রয়েছেঃ-
id:
একটি উপাদানের জন্য একটি অনন্য শনাক্তকারী প্রদান করে, যা CSS বা JavaScript-এর মাধ্যমে উপাদানটিকে ম্যানিপুলেট করতে ব্যবহার করা যেতে পারে।
class:
একটি উপাদানের এক বা একাধিক শ্রেণীর নাম বরাদ্দ করে, এটিকে CSS নিয়মের সাথে স্টাইল বা লক্ষ্যবস্তু করার অনুমতি দেয়।
style:
আপনাকে উপাদানটিতে ইনলাইন CSS শৈলী প্রয়োগ করতে দেয়।
src:
ছবি, অডিও, ভিডিও, স্ক্রিপ্ট ইত্যাদি উপাদানের জন্য উৎস URL নির্দিষ্ট করে।
href:
লিঙ্ক (<a> উপাদান) এবং অ্যাঙ্কর (<a> একটি নাম বৈশিষ্ট্য সহ উপাদান) এর জন্য গন্তব্য URL সংজ্ঞায়িত করে।
alt:
চিত্রগুলির জন্য বিকল্প পাঠ্য সরবরাহ করে, যা চিত্র লোড করা না গেলে প্রদর্শিত হয়।
title:
একটি উপাদানে একটি টুলটিপ বা ইঙ্গিত পাঠ্য যোগ করে, যা ব্যবহারকারী এখন এটির উপর ঘুরায় তখন প্রদর্শিত হয়।
disable:
তাদের কার্যকারিতা নিষ্ক্রিয় করতে ফর্ম উপাদানগুলির সাথে ব্যবহার করা হয় (<input>, <button>, ইত্যাদি)।
target:
লিঙ্ক করা বিষয়বস্তু কোথায় খুলতে হবে তা নির্দিষ্ট করতে লিঙ্কের সাথে (<a> উপাদান) ব্যবহার করা হয় (যেমন, একটি নতুন উইন্ডো বা ট্যাবে)।
Width and height:
একটি ইমেজ বা টেবিল ঘরের মতো একটি উপাদানের প্রস্থ এবং উচ্চতা সেট করে।
type:
<input> এবং <button> এর মত ফরম উপাদানগুলির জন্য ইনপুটের ধরন নির্দিষ্ট করে।
value:
<input> এবং <textarea> এর মতো ফর্ম উপাদানগুলির জন্য ডিফল্ট মান সেট করে।
reqiure:
নির্দিষ্ট করে যে ফর্ম জমা দেওয়ার আগে একটি ফর্ম ক্ষেত্র অবশ্যই পূরণ করতে হবে৷
checked:
চেকবক্স এবং রেডিও বোতামগুলোর সাথে তাদের ডিফল্ট চেক করা অবস্থা নির্দেশ করতে ব্যবহৃত হয়।
এগুলি হল এইচটিএমএল অ্যাট্রিবিউটের কয়েকটি উদাহরণ। বিভিন্ন HTML উপাদানের জন্য আরও অনেক গুণাবলী উপলব্ধ রয়েছে, প্রতিটি একটি নির্দিষ্ট উদ্দেশ্যে পরিবেশন করে। এইচটিএমএল বৈশিষ্ট্য এবং তাদের ব্যবহার সম্পর্কে সবচেয়ে আপ-টু-ডেট তথ্যের জন্য সর্বদা অফিসিয়াল ডকুমেন্টেশন বা সম্মানজনক HTML সংস্থানগুলি দেখুন।
<fieldset> এবং <legend>:
এই উপাদানগুলি গোষ্ঠী সম্পর্কিত ফর্ম উপাদানগুলির জন্য একসাথে ব্যবহৃত হয় এবং গোষ্ঠীর জন্য একটি কিংবদন্তি বা শিরোনাম প্রদান করে।
<optgroup>:
একটি <select> উপাদানের মধ্যে গোষ্ঠী সম্পর্কিত <option> উপাদান ব্যবহার করা হয়।
<input type="file">:
একটি ফাইল ইনপুট নিয়ন্ত্রণ তৈরি করে যা ব্যবহারকারীদের তাদের স্থানীয় ডিভাইস থেকে ফাইল আপলোড করতে দেয়।
<input type="date">, <input type="time">, <input type="datetime-local">:
এগুলি তারিখ, সময় বা তারিখ ও সময় নির্বাচনের জন্য বিশেষভাবে ইনপুট ক্ষেত্র তৈরি করে।
<input type="number">, <input type="range">:
এগুলো যথাক্রমে সংখ্যাসূচক ইনপুট বা রেঞ্জ স্লাইডারের জন্য ইনপুট ক্ষেত্র তৈরি করে।
<input type="color">:
ব্যবহারকারীদের একটি রঙ চয়ন কারী থেকে একটি রং নির্বাচন করার অনুমতি দেয়
<input type="submit">, <input type="reset">, <input type="image">:
এগুলি ফর্ম জমা, ফর্ম রিসেট, বা বোতাম হিসাবে একটি ছবি ব্যবহার করে জমা দেওয়ার জন্য ব্যবহৃত বিভিন্ন ধরনের বোতাম।
<input type="checkbox">, <input type="radio">:
এগুলি একাধিক পছন্দের বিকল্পগুলির জন্য চেকবক্স এবং রেডিও বোতাম তৈরি করে
<datalist> এবং <option>:
একটি ইনপুট ক্ষেত্রের জন্য পূর্বনির্ধারিত বিকল্প গুলির একটি তালিকা তৈরি করতে এই উপাদান গুলো একসাথে ব্যবহার করা যেতে পারে।
এগুলি সাধারণভাবে ব্যবহৃত কিছু HTML ফর্ম নিয়ন্ত্রণ। প্রতিটি নিয়ন্ত্রণের বিভিন্ন বৈশিষ্ট্য এবং কার্যকারিতা রয়েছে যা বিকাশকারীদের নির্দিষ্ট প্রয়োজনীয়তা পূরণের জন্য তাদের আচরণ এবং চেহারা কাস্টমাইজ করতে দেয়।
<input type="text">
name:
size:
<input type="text" size="20">
autofocus:
যখন পৃষ্ঠা লোড হয় তখন এই বৈশিষ্ট্যটি স্বয়ংক্রিয়ভাবে ইনপুট নিয়ন্ত্রণে ফোকাস সেট করে।
<input type="text" autofocus>
readonly:
শুধুমাত্র পঠন যোগ্য বৈশিষ্ট্যটি ব্যবহারকারীদের ইনপুট ক্ষেত্রের বিষয়বস্তু সম্পাদনা করতে বাধা দেয়।
<input type="text" readonly value="Read-only text">
required:
প্রয়োজনীয় বৈশিষ্ট্যটি ইনপুট ক্ষেত্রে বাধ্যতামূলক করে, এবং একটি মান প্রদান না করা পর্যন্ত ফর্মটি জমা দেওয়া যাবে না।
<input type="text" required>
ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে এবং ইনপুট ডেটা যাচাই করতে আপনি একক-লাইন পাঠ্য ইনপুট নিয়ন্ত্রণের সাথে ব্যবহার করতে পারেন এমন কিছু সাধারণ বৈশিষ্ট্য। মনে রাখবেন যে কিছু বৈশিষ্ট্য বিভিন্ন ব্রাউজার এবং এইচটিএমএল সংস্করণ জুড়ে বিভিন্ন সমর্থন থাকতে পারে।
HTML পাসওয়ার্ড ইনপুট নিয়ন্ত্রণ?
এইচটিএমএল পাসওয়ার্ড ইনপুট নিয়ন্ত্রণ ব্যবহারকারীদের সংবেদনশীল তথ্য, যেমন পাসওয়ার্ড, একটি নিরাপদ পদ্ধতিতে প্রবেশ করার অনুমতি দেওয়ার জন্য ব্যবহার করা হয়। যখন ব্যবহারকারীরা একটি পাসওয়ার্ড ইনপুট ক্ষেত্রে টাইপ করে, তখন অক্ষরগুলিকে সাধারণত মুখোশ করা হয় (তারকা বা বিন্দু হিসাবে প্রদর্শিত) যাতে অন্যদের প্রকৃত অক্ষরগুলি দেখতে না দেওয়া হয় এখানে আপনি কিভাবে HTML এ একটি পাসওয়ার্ড ইনপুট নিয়ন্ত্রণ তৈরি করতে পারেন:
<label for="password">Password:</label> <input type="password" id="password" name="password">
উপরের কোড Snippet:
<label> উপাদানটি তার উদ্দেশ্য বর্ণনা করতে পাসওয়ার্ড ইনপুট নিয়ন্ত্রণের জন্য একটি লেবেল প্রদান করে।
<input> উপাদানটি পাসওয়ার্ড ইনপুট নিয়ন্ত্রণ তৈরি করতে ব্যবহৃত হয়।
type="password" বৈশিষ্ট্যটি নির্দিষ্ট করে যে এই ইনপুট ক্ষেত্রে একটি পাসওয়ার্ড প্রবেশ জন্য।
আইডি অ্যাট্রিবিউট অন্যভাবে ইনপুট কন্ট্রোলস শনাক্ত করে এবং <লেভেল> এলিমেন্ট এর জন্য অ্যাট্রিবিউট আইডির নামের সাথে মিল রেখে ইনপুটের সাথে লিঙ্ক করে।
নাম বৈশিষ্ট্যটি ইনপুট নিয়ন্ত্রণকে একটি নাম দিতে ব্যবহৃত হয়, যা সার্ভারে ফর্ম ডেটা জমা দেওয়ার সময় ব্যবহৃত হয়।
ব্যবহারকারী যখন ইনপুট ক্ষেত্রে একটি পাসওয়ার্ড টাইপ করে, তখন নিরাপত্তার কারণে অক্ষরগুলিকে মুখোশ করা হবে, যাতে পাসওয়ার্ডটি ব্যবহারকারীর স্ক্রিনের দিকে তাকিয়ে থাকা অন্যদের কাছে দৃশ্যমান না হয় তা নিশ্চিত করে
ব্যবহারকারীর গোপনীয়তা এবং নিরাপত্তা রক্ষা করতে পাসওয়ার্ড এর মতো সংবেদনশীল তথ্যের জন্য type="password" ব্যবহার করা গুরুত্বপূর্ণ। উপরন্তু, সংবেদনশীল ব্যবহারকারীর ডেটা পরিচালনা এবং সংরক্ষণ করার সময় আপনার ওয়েবসাইট যথাযথ নিরাপত্তা ব্যবস্থা ব্যবহার করে তা নিশ্চিত করুন।
HTML Line টেক্সট ইনপুট নিয়ন্ত্রণ?
HTML-এ, একাধিক লাইনের টেক্সট ইনপুট নিয়ন্ত্রণ ব্যবহার করা হয় যাতে ব্যবহারকারীদের লেখার দীর্ঘ ব্লক, যেমন মন্তব্য, বার্তা বা অন্য ধরনের পাঠ্য বিষয়বস্তু যাতে একাধিক লাইনের প্রয়োজন হয় প্রবেশ করতে দেয়।
উপরের কোড Snippet:
<label> উপাদানটি তার উদ্দেশ্য বর্ণনা করার জন্য টেক্সট এরিয়া জন্য একটি লেবেল প্রদান করে।
<textarea> উপাদানটি একাধিক লাইনের পাঠ্য ইনপুট নিয়ন্ত্রণ তৈরি করতে ব্যবহৃত হয়।
আইডি অ্যাট্রিবিউট অন্যভাবে টেক্সটারিয়া নিয়ন্ত্রণকে শনাক্ত করে, এবং <লেবেল> উপাদানের জন্য বৈশিষ্ট্যটি আইডি মানের সাথে মেলে এটিকে টেক্সট রিয়ার সাথে লিঙ্ক করে।
নামের বৈশিষ্ট্যটি টেক্সটারিয়া নামকে সংজ্ঞায়িত করে, যা সার্ভারে ফর্ম ডেটা জমা দেওয়ার সময় ব্যবহৃত হয়।
সারি বৈশিষ্ট্য টেক্সটেরিয়ার জন্য দৃশ্যমান লাইনের সংখ্যা নির্দিষ্ট করে।
cols অ্যাট্রিবিউট টেক্সট এরিয়ার জন্য দৃশ্যমান কলামের সংখ্যা (প্রতি লাইনে অক্ষর) নির্দিষ্ট করে।
ব্যবহারকারীরা টেক্সটারিয়া টেক্সট টাইপ বা পেস্ট করতে পারেন এবং সারি বৈশিষ্ট্য দ্বারা নির্দিষ্ট সারির সংখ্যা মিটমাট করতে নিয়ন্ত্রণ স্বয়ংক্রিয়ভাবে উল্লম্বভাবে প্রসারিত হবে। পাঠ্যটি দৃশ্যমান এলাকা অতিক্রম করলে, টেক্সটারিয়া স্বয়ংক্রিয়ভাবে নেভিগেশনের জন্য একটি উল্লম্ব স্ক্রলবার প্রদর্শন করবে।
একক-লাইন পাঠ্য ইনপুট নিয়ন্ত্রণের বিপরীতে, টেক্সটারিয়া উপাদানগুলি পাঠ্যের একাধিক লাইন প্রদর্শন করতে পারে এবং দীর্ঘতর ব্যবহারকারীর ইনপুট বা পাঠ্য বিষয়বস্তু ক্যাপচার করার জন্য উপযুক্ত।
মনে রাখবেন যে আপনার ওয়েব অ্যাপ্লিকেশন ডিজাইন এবং কার্যকারিতার প্রয়োজনীয়তার সাথে মেলে CSS এবং JavaScript ব্যবহার করে টেক্সটারিয়া উপাদানগুলির প্রকৃত চেহারা এবং আচরণ আরও কাস্টমাইজ করা যেতে পারে।
HTML চেকবক্স নিয়ন্ত্রণ?
এইচটিএমএল চেকবক্স নিয়ন্ত্রণগুলি হল ইনপুট উপাদান যা ব্যবহারকারীদের পছন্দের একটি পূর্বনির্ধারিত সেট থেকে এক বা একাধিক বিকল্প নির্বাচন করতে দেয়। চেকবক্স গুলি সাধারণত ব্যবহৃত হয় যখন একাধিক আইটেম বা বিকল্প থাকে এবং ব্যবহারকারী তাদের মধ্যে একটি বা একাধিক নির্বাচন করতে পারেন। প্রতিটি চেকবক্সে একটি সংশ্লিষ্ট লেবেল রয়েছে যা এটি যে বিকল্পটি উপস্থাপন করে তার একটি বিবরণ প্রদান করে।
এখানে আপনি কিভাবে HTML এ একটি চেকবক্স নিয়ন্ত্রণ তৈরি করতে পারেনঃ-
<input type="checkbox" id="option1" name="option" value="option1"> <label for="option1">Option 1</label> <input type="checkbox" id="option2" name="option" value="option2"> <label for="option2">Option 2</label> <!-- Add more checkboxes as needed -->
উপরের কোড Snippet:
type="checkbox" সহ <input> উপাদানটি একটি একক চেকবক্স নিয়ন্ত্রণ তৈরি করে।
আইডি অ্যাট্রিবিউট অন্যভাবে চেকবক্স নিয়ন্ত্রণকে চিহ্নিত করে। এটি <label> উপাদানের জন্য
বৈশিষ্ট্য ব্যবহার করে চেকবক্স কে তার সংশ্লিষ্ট লেভেল এর সাথে সংযুক্ত করতে ব্যবহৃত হয়।
একই গ্রুপের অন্তর্গত সমস্ত চেক বক্সের জন্য একই নাম ব্যবহার করে নামের বৈশিষ্ট্যগুলি এক সাথে সম্পর্কিত চেকবক্স গুলি। এটি তাদের একটি অ্যারে হিসাবে জমা দেওয়ার অনুমতি দেয় যখন ফর্মটি সার্ভারে জমা দেওয়া হয়।
মান বৈশিষ্ট্য চেকবক্স এর মান নির্দিষ্ট করে যখন এটি চেক করা হয় এবং জমা দেওয়া হয়। চেকবক্স চেক করা থাকলে, এর মান ফর্ম জমা দেওয়ার ডেটাতে অন্তর্ভুক্ত করা হবে।
<label> উপাদানটি চেকবক্স বিকল্পের বিবরণ প্রদান করে। <label> উপাদানের জন্য বৈশিষ্ট্যটি আইডির নামের সাথে মেলে লেবেলটি সংশ্লিষ্ট চেক বক্সের সাথে লিঙ্ক করে।
যখন ব্যবহারকারী একটি চেক বক্সে ক্লিক করে, এটি চেক হয়ে যায় এবং যদি তারা এটি আবার ক্লিক করে, এটি আনলক হয়ে যায়। যদি একই নামের একাধিক চেকবক্সে নামের বৈশিষ্ট্যটি ব্যবহার করা হয়, ব্যবহারকারী একাধিক বিকল্প নির্বাচন করতে পারেন।
আপনি আপনার ওয়েব অ্যাপ্লিকেশন ডিজাইন সাথে মেলে চেকবক্স এবং লেবেল স্টাইল করতে CSS ব্যবহার করতে পারেন। উপরন্তু, জাভাস্ক্রিপ্ট চেকবক্স আচরণ বাড়ানোর জন্য ব্যবহার করা যেতে পারে, যেমন ক্লিক ইভেন্টগুলি পরিচালনা করা বা প্রোগ্রামগতভাবে টগল করা।
HTML রেডিও বোতাম নিয়ন্ত্রণ?
এইচটিএমএল রেডিও বোতাম নিয়ন্ত্রণ হল ইনপুট উপাদান যা ব্যবহারকারীদের পছন্দের একটি পূর্বনির্ধারিত সেটিং থেকে একটি একক বিকল্প নির্বাচন করতে দেয়। রেডিও বোতাম ব্যবহার করা হয় যখন আপনি ব্যবহারকারীকে বিকল্পগুলির একটি গ্রুপ থেকে একটি একক নির্বাচন করতে চান।
HTML বোতাম নিয়ন্ত্রণ?
HTML-এ, আপনি <button> উপাদান বা type="button" বৈশিষ্ট্য সহ <input> উপাদান ব্যবহার করে বোতাম নিয়ন্ত্রণ তৈরি করতে পারেন। ব্যবহারকারী দ্বারা ক্লিক করার সময় ক্রিয়াকলাপ বা ক্রিয়াকলাপ সম্পাদন করতে বোতামগুলি ব্যবহার করা হয়। এখানে উভয় পন্থা ব্যবহার করে বোতাম নিয়ন্ত্রণ তৈরির উদাহরণ রয়েছে:
Using <button> element:
<button type="button" id="btnSubmit">Submit</button>
উপরের কোড স্নিপেট, <button> উপাদানটি "জমা দিন" লেভেল সহ একটি বোতাম তৈরি করে। type="button" বৈশিষ্ট্যটি স্পষ্টভাবে উল্লেখ করে যে এই বোতামটি একটি স্বতন্ত্র বোতাম এবং এটি একটি ফর্ম জমা দেওয়ার অংশ নয়৷
Using <input> element:
<input type="button" id="btnCancel" value="Cancel">
এই উদাহরণে, type="button" সহ <input> উপাদানটি "বাতিল" লেবেল সহ একটি বোতাম তৈরি করে। মান বৈশিষ্ট্য বোতামে প্রদর্শিত পাঠ্য সেট করে।
উভয় পন্থা একই ফলাফল অর্জন করে, তবে আপনি আপনার পছন্দ বা নির্দিষ্ট প্রয়োজনীয়তার উপর ভিত্তি করে অন্যটির উপর একটি বেছে নিতে পারেন।
বোতামগুলো স্টাইল করা যেতে পারে এবং জাভাস্ক্রিপ্ট ইভেন্ট হ্যান্ডলার এর সাথে যুক্ত করা যেতে পারে যাতে ক্লিক করা হলে অ্যাকশন গুলো সম্পাদন করা যায়। উদাহরণস্বরূপ, যখন বোতামটি ক্লিক করা হয় তখন আপনি জাভাস্ক্রিপ্ট কোড চালানোর জন্য একটি অন ক্লিক অ্যাট্রিবিউট যোগ করতে পারেন:
<button type="button" id="btnSubmit" onclick="submitForm()">Submit</button>
এই ক্ষেত্রে, সাবমিট ফরম() ফাংশনটি কল করা হবে যখন "জমা দিন" বোতামে ক্লিক করা হবে।
ফর্ম জমা দেওয়া শুরু করতে বা ফর্ম ক্ষেত্রগুলি পুনরায় সেট করতে HTML ফর্মগুলির মধ্যে বোতামগুলো ব্যবহার করা যেতে পারে। এখানে একটি ফর্মের ভিতরে একটি জমা বোতামের একটি উদাহরণ রয়েছে:
<form action="/submit" method="post"> <!-- form fields go here --> <button type="submit">Submit</button> </form>
যখন ব্যবহারকারী ফর্মের ভিতরে "জমা দিন" বোতামে ক্লিক করেন, ফর্ম ডেটা নির্দিষ্ট HTTP পদ্ধতি (যেমন, POST বা GET) ব্যবহার করে নির্দিষ্ট কর্ম URL-এ জমা দেওয়া হবে।
সামগ্রিকভাবে, HTML-এর বোতামগুলো ওয়েব পৃষ্ঠাগুলি সাথে ইন্টারঅ্যাক্ট করতে এবং ব্যবহারকারীর ইন্টারঅ্যাকশন উপর ভিত্তি করে ক্রিয়াকলাপ বা ফর্ম জমা দেওয়ার একটি অপরিহার্য উপায় প্রদান করে।
HTML Hidden ফর্ম নিয়ন্ত্রণ?
HTML লুকানো ফর্ম নিয়ন্ত্রণগুলি হল ইনপুট উপাদান যা ওয়েব পৃষ্ঠায় দৃশ্যমান নয় কিন্তু একটি ফর্ম জমা দেওয়ার সময় ডেটা সংরক্ষণ এবং পাস করতে ব্যবহার করা যেতে পারে। এগুলো সাধারণত ব্যবহারকারীর কাছে প্রদর্শন না করে সার্ভারে অতিরিক্ত তথ্য পাঠাতে বা ডেটা সংরক্ষণ করতে ব্যবহৃত হয় যা ব্যবহারকারীর দ্বারা সরাসরি সম্পাদনযোগ্য হওয়া উচিত নয়।
একটি লুকানো ফর্ম নিয়ন্ত্রণ তৈরি করতে, আপনি type="hidden" বৈশিষ্ট্য সহ <input> উপাদান ব্যবহার করতে পারেন। লুকানো ফর্ম নিয়ন্ত্রণগুলি কীভাবে ব্যবহার করবেন তার একটি উদাহরণ এখানে রয়েছে:
<form action="/submit" method="post"> <input type="hidden" name="user_id" value="12345"> <input type="hidden" name="source_page" value="/home"> <!-- other visible form controls go here --> <button type="submit">Submit</button> </form>
উপরের কোড Snippet:
<form> উপাদানটি একটি ফর্ম তৈরি করে যা নির্দিষ্ট কর্ম URL-এ জমা দেওয়া হবে যখন "জমা দিন" বোতামটি ক্লিক করা হয়।
type="hidden" সহ প্রথম <input> উপাদানটি "12345" মান সহ "user_id" নামে একটি লুকানো ফর্ম নিয়ন্ত্রণ তৈরি করে। ফর্ম জমা দেওয়ার সময় এই মানটি সার্ভারে পাঠানো হবে, কিন্তু ব্যবহারকারী এটি দেখতে পাবে না বা সরাসরি পৃষ্ঠায় এটি সংশোধন করতে সক্ষম হবে।
দ্বিতীয় <input> উপাদানটি "/home" মান সহ "source page" নামে আরেকটি লুকানো ফর্ম নিয়ন্ত্রণ তৈরি করে। এই লুকানো নিয়ন্ত্রণ উৎস পৃষ্ঠাটি ট্র্যাক করতে ব্যবহার করা যেতে পারে যেখান থেকে ফর্মটি জমা দেওয়া হয়েছিল।
অন্যান্য দৃশ্যমান ফর্ম নিয়ন্ত্রণগুলি ফর্মের ভিতরে প্রয়োজন অনুসারে যোগ করা যেতে পারে।
যখন ফর্মটি জমা দেওয়া হয়, সমস্ত দৃশ্যমান এবং লুকানো ফরম নিয়ন্ত্রণের নাম এবং মান সার্ভারে পাঠানো হবে, আপনাকে সার্ভার-সাইডে ডেটা অ্যাক্সেস করার অনুমতি দেবে
লুকানো ফর্ম কন্ট্রোলগুলো পৃষ্ঠাগুলির মধ্যে ডেটা পাস করার জন্য বা ডেটা বহন করার জন্য দরকারী যাকে ফর্ম প্রক্রিয়াকরণের জন্য অপরিহার্য কিন্তু ব্যবহারকারীর কাছে প্রদর্শন করার প্রয়োজন নেই৷ যাইহোক, সংবেদনশীল ডেটার জন্য লুকানো ফর্ম কন্ট্রোল গুলি
একটি HTML ফর্মের মৌলিক কাঠামো <form> উপাদান ব্যবহার করে সংজ্ঞায়িত করা হয় এবং এতে এক বা একাধিক ইনপুট উপাদান থাকে। অ্যাকশন অ্যাট্রিবিউট এই URLটি নির্দিষ্ট করে যেটাতে ফর্ম ডেটা পাঠানো হবে, এবং পদ্ধতি অ্যাট্রিবিউট ফর্ম জমা দেওয়ার জন্য ব্যবহার করা HTTP পদ্ধতিকে সংজ্ঞায়িত করে, সাধারণত হয় "GET" বা "POST"৷
এখানে একটি সাধারণ HTML ফর্মের একটি উদাহরণঃ-
<html> <head> <title>Sample Form</title> </head> <body> <form action="/submit_form" method="post"> <label for="name">Name:</label> <input type="text" id="name" name="name" required> <label for="email">Email:</label> <input type="email" id="email" name="email" required> <label for="message">Message:</label> <textarea id="message" name="message" rows="4" cols="30" required></textarea> <input type="submit" value="Submit"> </form> </body> </html>
এই উদাহরণে, আমাদের কাছে তিনটি ইনপুট ক্ষেত্র সহ একটি ফর্ম রয়েছে: "নাম," "ইমেল," এবং "বার্তা।" ব্যবহারকারীকে ফর্ম জমা দেওয়ার আগে তিনটি ক্ষেত্রেই পূরণ করতে হবে। যখন ব্যবহারকারী "জমা দিন" বোতামে ক্লিক করেন, তখন HTTP POST পদ্ধতি ব্যবহার করে ফর্ম ডেটা "/submit_form" URL-এ পাঠানো হবে।
সার্ভার-সাইডে, PHP, Python, Java, ইত্যাদির মতো বিভিন্ন প্রোগ্রামিং ভাষা ব্যবহার করে ফর্ম ডেটা প্রক্রিয়া করা যেতে পারে, যেমন একটি ডেটাবেজে ডেটা সংরক্ষণ করা, একটি ইমেল পাঠানো, বা অন্য কোনো পছন্দের কার্যকারিতা সম্পাদন করার জন্য।
HTML ফর্ম এর বৈশিষ্ট্য?
এইচটিএমএল বৈশিষ্ট্য হল বিশেষ উপাদান যা এইচটিএমএল উপাদান সম্পর্কে অতিরিক্ত তথ্য প্রদান করে। এগুলি HTML উপাদানগুলির আচরণ, চেহারা বা কার্যকারিতা পরিবর্তন বা কাস্টমাইজ করতে ব্যবহৃত হয়। বৈশিষ্ট্যগুলি একটি HTML উপাদানের খোলার ট্যাগের মধ্যে যোগ করা হয় এবং কী-মান জোড়া ব্যবহার করে সংজ্ঞায়িত করা হয়। একটি এইচটিএমএল এলিমেন্ট অ্যাট্রিবিউট যোগ করার জন্য সাধারণ সিনট্যাক্স নিম্নরূপঃ-
<element attribute_name="attribute_value">
এখানে কিছু সাধারণভাবে ব্যবহৃত HTML বৈশিষ্ট্য রয়েছেঃ-
id:
একটি উপাদানের জন্য একটি অনন্য শনাক্তকারী প্রদান করে, যা CSS বা JavaScript-এর মাধ্যমে উপাদানটিকে ম্যানিপুলেট করতে ব্যবহার করা যেতে পারে।
class:
একটি উপাদানের এক বা একাধিক শ্রেণীর নাম বরাদ্দ করে, এটিকে CSS নিয়মের সাথে স্টাইল বা লক্ষ্যবস্তু করার অনুমতি দেয়।
style:
আপনাকে উপাদানটিতে ইনলাইন CSS শৈলী প্রয়োগ করতে দেয়।
src:
ছবি, অডিও, ভিডিও, স্ক্রিপ্ট ইত্যাদি উপাদানের জন্য উৎস URL নির্দিষ্ট করে।
href:
লিঙ্ক (<a> উপাদান) এবং অ্যাঙ্কর (<a> একটি নাম বৈশিষ্ট্য সহ উপাদান) এর জন্য গন্তব্য URL সংজ্ঞায়িত করে।
alt:
চিত্রগুলির জন্য বিকল্প পাঠ্য সরবরাহ করে, যা চিত্র লোড করা না গেলে প্রদর্শিত হয়।
title:
একটি উপাদানে একটি টুলটিপ বা ইঙ্গিত পাঠ্য যোগ করে, যা ব্যবহারকারী এখন এটির উপর ঘুরায় তখন প্রদর্শিত হয়।
disable:
তাদের কার্যকারিতা নিষ্ক্রিয় করতে ফর্ম উপাদানগুলির সাথে ব্যবহার করা হয় (<input>, <button>, ইত্যাদি)।
target:
লিঙ্ক করা বিষয়বস্তু কোথায় খুলতে হবে তা নির্দিষ্ট করতে লিঙ্কের সাথে (<a> উপাদান) ব্যবহার করা হয় (যেমন, একটি নতুন উইন্ডো বা ট্যাবে)।
Width and height:
একটি ইমেজ বা টেবিল ঘরের মতো একটি উপাদানের প্রস্থ এবং উচ্চতা সেট করে।
type:
<input> এবং <button> এর মত ফরম উপাদানগুলির জন্য ইনপুটের ধরন নির্দিষ্ট করে।
value:
<input> এবং <textarea> এর মতো ফর্ম উপাদানগুলির জন্য ডিফল্ট মান সেট করে।
reqiure:
নির্দিষ্ট করে যে ফর্ম জমা দেওয়ার আগে একটি ফর্ম ক্ষেত্র অবশ্যই পূরণ করতে হবে৷
checked:
চেকবক্স এবং রেডিও বোতামগুলোর সাথে তাদের ডিফল্ট চেক করা অবস্থা নির্দেশ করতে ব্যবহৃত হয়।
এগুলি হল এইচটিএমএল অ্যাট্রিবিউটের কয়েকটি উদাহরণ। বিভিন্ন HTML উপাদানের জন্য আরও অনেক গুণাবলী উপলব্ধ রয়েছে, প্রতিটি একটি নির্দিষ্ট উদ্দেশ্যে পরিবেশন করে। এইচটিএমএল বৈশিষ্ট্য এবং তাদের ব্যবহার সম্পর্কে সবচেয়ে আপ-টু-ডেট তথ্যের জন্য সর্বদা অফিসিয়াল ডকুমেন্টেশন বা সম্মানজনক HTML সংস্থানগুলি দেখুন।
HTML ফর্ম নিয়ন্ত্রণ?
এইচটিএমএল ফর্ম কন্ট্রোল হল এমন উপাদান যা ব্যবহারকারীদের ডাটা ইনপুট করতে, নির্বাচন করতে বা ওয়েব পেজের সাথে ইন্টারঅ্যাক্ট করতে দেয়। এগুলো ইন্টারেক্টিভ এবং ব্যবহারকারী-বান্ধব ওয়েব ফর্ম তৈরি করার জন্য অপরিহার্য। এখানে কিছু সাধারণভাবে ব্যবহৃত HTML ফর্ম নিয়ন্ত্রণ রয়েছে:
<input>:
এটি একটি বহুমুখী ফর্ম কন্ট্রোল যা বিভিন্ন ইনপুট ক্ষেত্র তৈরি করতে ব্যবহার করা যেতে পারে, যেমন টেক্সট ইনপুট, পাসওয়ার্ড ইনপুট, ইমেইল ইনপুট, চেকবক্স, রেডিও বোতাম ইত্যাদি। নির্দিষ্ট আচরণ টাইপ অ্যাট্রিবিউট দ্বারা নির্ধারিত হয়।
<textarea>:
ব্যবহারকারীদের বহু লাইন টেক্সট প্রবেশ করার অনুমতি দেয়, দীর্ঘ বার্তা বা মন্তব্যের জন্য দরকারী।
<select>:
একটি ড্রপ ডাউন তালিকা তৈরি করে সেখান থেকে ব্যবহারকারীরা <option> উপাদান ব্যবহার করে এক বা একাধিক বিকল্প নির্বাচন করতে পারে।
<button>:
একটা ক্লিকযোগ্য বোতামের প্রতিনিধিত্ব করে যা ক্লিক করার সময় অ্যাকশন ট্রিগার করতে পারে, যেমন একটি ফর্ম জমা দেওয়া বা JavaScript ফাংশন চালানো।
<label>:
একটি ইনপুট উপাদানের জন্য একটি লেবেল প্রতিনিধিত্ব করে, ইনপুট ক্ষেত্রে কীসের জন্য একটি পাঠ্য বিবরণ প্রদান করে।
এইচটিএমএল ফর্ম কন্ট্রোল হল এমন উপাদান যা ব্যবহারকারীদের ডাটা ইনপুট করতে, নির্বাচন করতে বা ওয়েব পেজের সাথে ইন্টারঅ্যাক্ট করতে দেয়। এগুলো ইন্টারেক্টিভ এবং ব্যবহারকারী-বান্ধব ওয়েব ফর্ম তৈরি করার জন্য অপরিহার্য। এখানে কিছু সাধারণভাবে ব্যবহৃত HTML ফর্ম নিয়ন্ত্রণ রয়েছে:
<input>:
এটি একটি বহুমুখী ফর্ম কন্ট্রোল যা বিভিন্ন ইনপুট ক্ষেত্র তৈরি করতে ব্যবহার করা যেতে পারে, যেমন টেক্সট ইনপুট, পাসওয়ার্ড ইনপুট, ইমেইল ইনপুট, চেকবক্স, রেডিও বোতাম ইত্যাদি। নির্দিষ্ট আচরণ টাইপ অ্যাট্রিবিউট দ্বারা নির্ধারিত হয়।
<textarea>:
ব্যবহারকারীদের বহু লাইন টেক্সট প্রবেশ করার অনুমতি দেয়, দীর্ঘ বার্তা বা মন্তব্যের জন্য দরকারী।
<select>:
একটি ড্রপ ডাউন তালিকা তৈরি করে সেখান থেকে ব্যবহারকারীরা <option> উপাদান ব্যবহার করে এক বা একাধিক বিকল্প নির্বাচন করতে পারে।
<button>:
একটা ক্লিকযোগ্য বোতামের প্রতিনিধিত্ব করে যা ক্লিক করার সময় অ্যাকশন ট্রিগার করতে পারে, যেমন একটি ফর্ম জমা দেওয়া বা JavaScript ফাংশন চালানো।
<label>:
একটি ইনপুট উপাদানের জন্য একটি লেবেল প্রতিনিধিত্ব করে, ইনপুট ক্ষেত্রে কীসের জন্য একটি পাঠ্য বিবরণ প্রদান করে।
<fieldset> এবং <legend>:
এই উপাদানগুলি গোষ্ঠী সম্পর্কিত ফর্ম উপাদানগুলির জন্য একসাথে ব্যবহৃত হয় এবং গোষ্ঠীর জন্য একটি কিংবদন্তি বা শিরোনাম প্রদান করে।
<optgroup>:
একটি <select> উপাদানের মধ্যে গোষ্ঠী সম্পর্কিত <option> উপাদান ব্যবহার করা হয়।
<input type="file">:
একটি ফাইল ইনপুট নিয়ন্ত্রণ তৈরি করে যা ব্যবহারকারীদের তাদের স্থানীয় ডিভাইস থেকে ফাইল আপলোড করতে দেয়।
<input type="date">, <input type="time">, <input type="datetime-local">:
এগুলি তারিখ, সময় বা তারিখ ও সময় নির্বাচনের জন্য বিশেষভাবে ইনপুট ক্ষেত্র তৈরি করে।
<input type="number">, <input type="range">:
এগুলো যথাক্রমে সংখ্যাসূচক ইনপুট বা রেঞ্জ স্লাইডারের জন্য ইনপুট ক্ষেত্র তৈরি করে।
<input type="color">:
ব্যবহারকারীদের একটি রঙ চয়ন কারী থেকে একটি রং নির্বাচন করার অনুমতি দেয়
<input type="submit">, <input type="reset">, <input type="image">:
এগুলি ফর্ম জমা, ফর্ম রিসেট, বা বোতাম হিসাবে একটি ছবি ব্যবহার করে জমা দেওয়ার জন্য ব্যবহৃত বিভিন্ন ধরনের বোতাম।
<input type="checkbox">, <input type="radio">:
এগুলি একাধিক পছন্দের বিকল্পগুলির জন্য চেকবক্স এবং রেডিও বোতাম তৈরি করে
<datalist> এবং <option>:
একটি ইনপুট ক্ষেত্রের জন্য পূর্বনির্ধারিত বিকল্প গুলির একটি তালিকা তৈরি করতে এই উপাদান গুলো একসাথে ব্যবহার করা যেতে পারে।
এগুলি সাধারণভাবে ব্যবহৃত কিছু HTML ফর্ম নিয়ন্ত্রণ। প্রতিটি নিয়ন্ত্রণের বিভিন্ন বৈশিষ্ট্য এবং কার্যকারিতা রয়েছে যা বিকাশকারীদের নির্দিষ্ট প্রয়োজনীয়তা পূরণের জন্য তাদের আচরণ এবং চেহারা কাস্টমাইজ করতে দেয়।
এই ফর্ম কন্ট্রোলগুলো কার্যকরভাবে ব্যবহার করার জন্য, তাদের বৈশিষ্ট্যগুলি এবং ফর্মের বৈধতা এবং ডেটা পরিচালনার জন্য তারা কিভাবে HTML ফর্ম এবং জাভাস্ক্রিপ্ট এর সাথে ইন্টারঅ্যাক্ট করে তা বোঝা অপরিহার্য
HTML টেক্সট ইনপুট নিয়ন্ত্রণ?
এইচটিএমএল বেশ কিছু পাঠ্য ইনপুট নিয়ন্ত্রণ প্রদান করে যা ব্যবহারকারীদের পাঠ্য-ভিত্তিক ডেটা প্রবেশ করতে দেয়। এই নিয়ন্ত্রণগুলি <form> উপাদানগুলির মধ্যে ব্যবহার করা হয় এবং বিভিন্ন মানগুলিতে সেট করা টাইপ অ্যাট্রিবিউট সহ <input> উপাদান ব্যবহার করে তৈরি করা হয়।
এখানে কিছু সাধারণ পাঠ্য ইনপুট নিয়ন্ত্রণ রয়েছেঃ-
Single-line Text Input:
এইচটিএমএল বেশ কিছু পাঠ্য ইনপুট নিয়ন্ত্রণ প্রদান করে যা ব্যবহারকারীদের পাঠ্য-ভিত্তিক ডেটা প্রবেশ করতে দেয়। এই নিয়ন্ত্রণগুলি <form> উপাদানগুলির মধ্যে ব্যবহার করা হয় এবং বিভিন্ন মানগুলিতে সেট করা টাইপ অ্যাট্রিবিউট সহ <input> উপাদান ব্যবহার করে তৈরি করা হয়।
এখানে কিছু সাধারণ পাঠ্য ইনপুট নিয়ন্ত্রণ রয়েছেঃ-
Single-line Text Input:
<input type="text" name="username" placeholder="Enter your username">
Password Input:
<input type="password" name="password" placeholder="Enter your password">
Email Input:
<input type="email" name="email" placeholder="Enter your email address">
URL Input:
<input type="url" name="website" placeholder="Enter website URL">
Telephone Input:
<input type="tel" name="phone" placeholder="Enter your phone number">
Number Input:
<input type="number" name="age" placeholder="Enter your age">
Range Input:
<input type="range" name="volume" min="0" max="100" step="1">
Date Input:
<input type="date" name="dob">
Time Input:
<input type="time" name="meeting-time">
Date and Time Input (Local):
<input type="datetime-local" name="event-datetime">
Search Input:
<input type="search" name="search-query" placeholder="Search...">
Color Input:
<input type="color" name="favorite-color">
প্রতিটি পাঠ্য ইনপুট নিয়ন্ত্রণে তাদের আচরণ কাস্টমাইজ করার জন্য অতিরিক্ত বৈশিষ্ট্য যেমন মান, প্রয়োজনীয়, কেবল পাঠযোগ্য এবং আরও অনেক কিছু থাকতে পারে। উদাহরণস্বরূপ, মান বৈশিষ্ট্যটি ইনপুট ক্ষেত্রের জন্য একটি ডিফল্ট মান সেট করতে ব্যবহার করা যেতে পারে,
প্রতিটি পাঠ্য ইনপুট নিয়ন্ত্রণে তাদের আচরণ কাস্টমাইজ করার জন্য অতিরিক্ত বৈশিষ্ট্য যেমন মান, প্রয়োজনীয়, কেবল পাঠযোগ্য এবং আরও অনেক কিছু থাকতে পারে। উদাহরণস্বরূপ, মান বৈশিষ্ট্যটি ইনপুট ক্ষেত্রের জন্য একটি ডিফল্ট মান সেট করতে ব্যবহার করা যেতে পারে,
প্রয়োজনীয় বৈশিষ্ট্য একটি ইনপুট ক্ষেত্রে বাধ্যতামূলক করতে ব্যবহার করা যেতে পারে এবং ব্যবহারকারীদের ইনপুট সম্পাদনা করা থেকে বিরত রাখতে কেবল পাঠযোগ্য বৈশিষ্ট্যটি ব্যবহার করা যেতে পারে।
আপনি যে ধরনের ডেটা সংগ্রহ করতে চান তার উপর ভিত্তি করে উপযুক্ত ইনপুট প্রকারগুলি ব্যবহার করতে ভুলবেন না, কারণ এটি বৈধতা এবং ব্যবহারকারীর অভিজ্ঞতা সাথে সাহায্য করে ডেটা অখণ্ডতা এবং নিরাপত্তা নিশ্চিত করতে সর্বদা সমালোচনামূলক ডেটার জন্য সার্ভার-সাইড বৈধতা ব্যবহার করার কথা বিবেচনা করুন।
HTML Single line নিয়ন্ত্রণ?
মনে হচ্ছে আপনি একক-লাইন পাঠ্য ইনপুট নিয়ন্ত্রণ এবং তাদের বৈশিষ্ট্য সম্পর্কে জিজ্ঞাসা করছেন৷ একক-লাইন টেক্সট ইনপুট নিয়ন্ত্রণগুলি সাধারণত ওয়েব ফর্মগুলি ব্যবহার করা হয় যাতে ব্যবহারকারীরা সংক্ষিপ্ত পাঠ্য বা সংখ্যাসূচক মান প্রবেশ করতে পারে।
আপনি যে ধরনের ডেটা সংগ্রহ করতে চান তার উপর ভিত্তি করে উপযুক্ত ইনপুট প্রকারগুলি ব্যবহার করতে ভুলবেন না, কারণ এটি বৈধতা এবং ব্যবহারকারীর অভিজ্ঞতা সাথে সাহায্য করে ডেটা অখণ্ডতা এবং নিরাপত্তা নিশ্চিত করতে সর্বদা সমালোচনামূলক ডেটার জন্য সার্ভার-সাইড বৈধতা ব্যবহার করার কথা বিবেচনা করুন।
HTML Single line নিয়ন্ত্রণ?
মনে হচ্ছে আপনি একক-লাইন পাঠ্য ইনপুট নিয়ন্ত্রণ এবং তাদের বৈশিষ্ট্য সম্পর্কে জিজ্ঞাসা করছেন৷ একক-লাইন টেক্সট ইনপুট নিয়ন্ত্রণগুলি সাধারণত ওয়েব ফর্মগুলি ব্যবহার করা হয় যাতে ব্যবহারকারীরা সংক্ষিপ্ত পাঠ্য বা সংখ্যাসূচক মান প্রবেশ করতে পারে।
এই ইনপুট নিয়ন্ত্রণগুলি বিভিন্ন বৈশিষ্ট্য থাকতে পারে যা তাদের আচরণ এবং চেহারা সংজ্ঞায়িত করে। এখানে একক-লাইন পাঠ্য ইনপুট নিয়ন্ত্রণের সাথে যুক্ত কিছু সাধারণ বৈশিষ্ট্য রয়েছে:
type:
type:
এই বৈশিষ্ট্যটি ইনপুট নিয়ন্ত্রণের ধরন নির্দিষ্ট করে এবং একক-লাইন পাঠ্য ইনপুট গুলোর জন্য "টেক্সট" এ সেট করা হয়।
<input type="text">
name:
নাম বৈশিষ্ট্য ইনপুট নিয়ন্ত্রণের নামে সংজ্ঞায়িত করে, যা সার্ভারে ফর্ম ডেটা জমা দেওয়ার সময় ব্যবহৃত হয়।
<input type="text" name="username">
value:
<input type="text" name="username">
value:
মান বৈশিষ্ট্য ইনপুট নিয়ন্ত্রণের প্রাথমিক মান সেট করে।
<input type="text" value="John Doe">
placeholder:
<input type="text" value="John Doe">
placeholder:
এই বৈশিষ্ট্যটি একটি সংক্ষিপ্ত ইঙ্গিত প্রদান করে যা ইনপুটের প্রত্যাশিত মান বর্ণনা করে।
<input type="text" placeholder="Enter your email">
maxlength:
maxlength অ্যাট্রিবিউট ইনপুট ক্ষেত্রে প্রবেশ করা যেতে পারে যে অক্ষর সর্বোচ্চ সংখ্যা নির্দিষ্ট করে.
<input type="text" maxlength="10">
<input type="text" placeholder="Enter your email">
maxlength:
maxlength অ্যাট্রিবিউট ইনপুট ক্ষেত্রে প্রবেশ করা যেতে পারে যে অক্ষর সর্বোচ্চ সংখ্যা নির্দিষ্ট করে.
<input type="text" maxlength="10">
size:
আকার বৈশিষ্ট্য ইনপুট নিয়ন্ত্রণের দৃশ্যমান প্রস্থ সেট করে, অক্ষরে পরিমাপ করা হয়।
<input type="text" size="20">
autofocus:
যখন পৃষ্ঠা লোড হয় তখন এই বৈশিষ্ট্যটি স্বয়ংক্রিয়ভাবে ইনপুট নিয়ন্ত্রণে ফোকাস সেট করে।
<input type="text" autofocus>
readonly:
শুধুমাত্র পঠন যোগ্য বৈশিষ্ট্যটি ব্যবহারকারীদের ইনপুট ক্ষেত্রের বিষয়বস্তু সম্পাদনা করতে বাধা দেয়।
<input type="text" readonly value="Read-only text">
required:
প্রয়োজনীয় বৈশিষ্ট্যটি ইনপুট ক্ষেত্রে বাধ্যতামূলক করে, এবং একটি মান প্রদান না করা পর্যন্ত ফর্মটি জমা দেওয়া যাবে না।
<input type="text" required>
ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে এবং ইনপুট ডেটা যাচাই করতে আপনি একক-লাইন পাঠ্য ইনপুট নিয়ন্ত্রণের সাথে ব্যবহার করতে পারেন এমন কিছু সাধারণ বৈশিষ্ট্য। মনে রাখবেন যে কিছু বৈশিষ্ট্য বিভিন্ন ব্রাউজার এবং এইচটিএমএল সংস্করণ জুড়ে বিভিন্ন সমর্থন থাকতে পারে।
HTML পাসওয়ার্ড ইনপুট নিয়ন্ত্রণ?
এইচটিএমএল পাসওয়ার্ড ইনপুট নিয়ন্ত্রণ ব্যবহারকারীদের সংবেদনশীল তথ্য, যেমন পাসওয়ার্ড, একটি নিরাপদ পদ্ধতিতে প্রবেশ করার অনুমতি দেওয়ার জন্য ব্যবহার করা হয়। যখন ব্যবহারকারীরা একটি পাসওয়ার্ড ইনপুট ক্ষেত্রে টাইপ করে, তখন অক্ষরগুলিকে সাধারণত মুখোশ করা হয় (তারকা বা বিন্দু হিসাবে প্রদর্শিত) যাতে অন্যদের প্রকৃত অক্ষরগুলি দেখতে না দেওয়া হয় এখানে আপনি কিভাবে HTML এ একটি পাসওয়ার্ড ইনপুট নিয়ন্ত্রণ তৈরি করতে পারেন:
<label for="password">Password:</label> <input type="password" id="password" name="password">
উপরের কোড Snippet:
<label> উপাদানটি তার উদ্দেশ্য বর্ণনা করতে পাসওয়ার্ড ইনপুট নিয়ন্ত্রণের জন্য একটি লেবেল প্রদান করে।
<input> উপাদানটি পাসওয়ার্ড ইনপুট নিয়ন্ত্রণ তৈরি করতে ব্যবহৃত হয়।
type="password" বৈশিষ্ট্যটি নির্দিষ্ট করে যে এই ইনপুট ক্ষেত্রে একটি পাসওয়ার্ড প্রবেশ জন্য।
আইডি অ্যাট্রিবিউট অন্যভাবে ইনপুট কন্ট্রোলস শনাক্ত করে এবং <লেভেল> এলিমেন্ট এর জন্য অ্যাট্রিবিউট আইডির নামের সাথে মিল রেখে ইনপুটের সাথে লিঙ্ক করে।
নাম বৈশিষ্ট্যটি ইনপুট নিয়ন্ত্রণকে একটি নাম দিতে ব্যবহৃত হয়, যা সার্ভারে ফর্ম ডেটা জমা দেওয়ার সময় ব্যবহৃত হয়।
ব্যবহারকারী যখন ইনপুট ক্ষেত্রে একটি পাসওয়ার্ড টাইপ করে, তখন নিরাপত্তার কারণে অক্ষরগুলিকে মুখোশ করা হবে, যাতে পাসওয়ার্ডটি ব্যবহারকারীর স্ক্রিনের দিকে তাকিয়ে থাকা অন্যদের কাছে দৃশ্যমান না হয় তা নিশ্চিত করে
ব্যবহারকারীর গোপনীয়তা এবং নিরাপত্তা রক্ষা করতে পাসওয়ার্ড এর মতো সংবেদনশীল তথ্যের জন্য type="password" ব্যবহার করা গুরুত্বপূর্ণ। উপরন্তু, সংবেদনশীল ব্যবহারকারীর ডেটা পরিচালনা এবং সংরক্ষণ করার সময় আপনার ওয়েবসাইট যথাযথ নিরাপত্তা ব্যবস্থা ব্যবহার করে তা নিশ্চিত করুন।
HTML Line টেক্সট ইনপুট নিয়ন্ত্রণ?
HTML-এ, একাধিক লাইনের টেক্সট ইনপুট নিয়ন্ত্রণ ব্যবহার করা হয় যাতে ব্যবহারকারীদের লেখার দীর্ঘ ব্লক, যেমন মন্তব্য, বার্তা বা অন্য ধরনের পাঠ্য বিষয়বস্তু যাতে একাধিক লাইনের প্রয়োজন হয় প্রবেশ করতে দেয়।
এই ধরনের ইনপুট সাধারণত "টেক্সটারিয়া" উপাদান হিসাবে উল্লেখ করা হয়। এখানে আপনি কিভাবে HTML এ একাধিক লাইনের পাঠ্য ইনপুট নিয়ন্ত্রণ তৈরি করতে পারেন:
<label for="message">Enter your message:</label> <textarea id="message" name="user_message" rows="4" cols="50"></textarea>
<label for="message">Enter your message:</label> <textarea id="message" name="user_message" rows="4" cols="50"></textarea>
উপরের কোড Snippet:
<label> উপাদানটি তার উদ্দেশ্য বর্ণনা করার জন্য টেক্সট এরিয়া জন্য একটি লেবেল প্রদান করে।
<textarea> উপাদানটি একাধিক লাইনের পাঠ্য ইনপুট নিয়ন্ত্রণ তৈরি করতে ব্যবহৃত হয়।
আইডি অ্যাট্রিবিউট অন্যভাবে টেক্সটারিয়া নিয়ন্ত্রণকে শনাক্ত করে, এবং <লেবেল> উপাদানের জন্য বৈশিষ্ট্যটি আইডি মানের সাথে মেলে এটিকে টেক্সট রিয়ার সাথে লিঙ্ক করে।
নামের বৈশিষ্ট্যটি টেক্সটারিয়া নামকে সংজ্ঞায়িত করে, যা সার্ভারে ফর্ম ডেটা জমা দেওয়ার সময় ব্যবহৃত হয়।
সারি বৈশিষ্ট্য টেক্সটেরিয়ার জন্য দৃশ্যমান লাইনের সংখ্যা নির্দিষ্ট করে।
cols অ্যাট্রিবিউট টেক্সট এরিয়ার জন্য দৃশ্যমান কলামের সংখ্যা (প্রতি লাইনে অক্ষর) নির্দিষ্ট করে।
ব্যবহারকারীরা টেক্সটারিয়া টেক্সট টাইপ বা পেস্ট করতে পারেন এবং সারি বৈশিষ্ট্য দ্বারা নির্দিষ্ট সারির সংখ্যা মিটমাট করতে নিয়ন্ত্রণ স্বয়ংক্রিয়ভাবে উল্লম্বভাবে প্রসারিত হবে। পাঠ্যটি দৃশ্যমান এলাকা অতিক্রম করলে, টেক্সটারিয়া স্বয়ংক্রিয়ভাবে নেভিগেশনের জন্য একটি উল্লম্ব স্ক্রলবার প্রদর্শন করবে।
একক-লাইন পাঠ্য ইনপুট নিয়ন্ত্রণের বিপরীতে, টেক্সটারিয়া উপাদানগুলি পাঠ্যের একাধিক লাইন প্রদর্শন করতে পারে এবং দীর্ঘতর ব্যবহারকারীর ইনপুট বা পাঠ্য বিষয়বস্তু ক্যাপচার করার জন্য উপযুক্ত।
মনে রাখবেন যে আপনার ওয়েব অ্যাপ্লিকেশন ডিজাইন এবং কার্যকারিতার প্রয়োজনীয়তার সাথে মেলে CSS এবং JavaScript ব্যবহার করে টেক্সটারিয়া উপাদানগুলির প্রকৃত চেহারা এবং আচরণ আরও কাস্টমাইজ করা যেতে পারে।
HTML চেকবক্স নিয়ন্ত্রণ?
এইচটিএমএল চেকবক্স নিয়ন্ত্রণগুলি হল ইনপুট উপাদান যা ব্যবহারকারীদের পছন্দের একটি পূর্বনির্ধারিত সেট থেকে এক বা একাধিক বিকল্প নির্বাচন করতে দেয়। চেকবক্স গুলি সাধারণত ব্যবহৃত হয় যখন একাধিক আইটেম বা বিকল্প থাকে এবং ব্যবহারকারী তাদের মধ্যে একটি বা একাধিক নির্বাচন করতে পারেন। প্রতিটি চেকবক্সে একটি সংশ্লিষ্ট লেবেল রয়েছে যা এটি যে বিকল্পটি উপস্থাপন করে তার একটি বিবরণ প্রদান করে।
এখানে আপনি কিভাবে HTML এ একটি চেকবক্স নিয়ন্ত্রণ তৈরি করতে পারেনঃ-
<input type="checkbox" id="option1" name="option" value="option1"> <label for="option1">Option 1</label> <input type="checkbox" id="option2" name="option" value="option2"> <label for="option2">Option 2</label> <!-- Add more checkboxes as needed -->
উপরের কোড Snippet:
type="checkbox" সহ <input> উপাদানটি একটি একক চেকবক্স নিয়ন্ত্রণ তৈরি করে।
আইডি অ্যাট্রিবিউট অন্যভাবে চেকবক্স নিয়ন্ত্রণকে চিহ্নিত করে। এটি <label> উপাদানের জন্য
বৈশিষ্ট্য ব্যবহার করে চেকবক্স কে তার সংশ্লিষ্ট লেভেল এর সাথে সংযুক্ত করতে ব্যবহৃত হয়।
একই গ্রুপের অন্তর্গত সমস্ত চেক বক্সের জন্য একই নাম ব্যবহার করে নামের বৈশিষ্ট্যগুলি এক সাথে সম্পর্কিত চেকবক্স গুলি। এটি তাদের একটি অ্যারে হিসাবে জমা দেওয়ার অনুমতি দেয় যখন ফর্মটি সার্ভারে জমা দেওয়া হয়।
মান বৈশিষ্ট্য চেকবক্স এর মান নির্দিষ্ট করে যখন এটি চেক করা হয় এবং জমা দেওয়া হয়। চেকবক্স চেক করা থাকলে, এর মান ফর্ম জমা দেওয়ার ডেটাতে অন্তর্ভুক্ত করা হবে।
<label> উপাদানটি চেকবক্স বিকল্পের বিবরণ প্রদান করে। <label> উপাদানের জন্য বৈশিষ্ট্যটি আইডির নামের সাথে মেলে লেবেলটি সংশ্লিষ্ট চেক বক্সের সাথে লিঙ্ক করে।
যখন ব্যবহারকারী একটি চেক বক্সে ক্লিক করে, এটি চেক হয়ে যায় এবং যদি তারা এটি আবার ক্লিক করে, এটি আনলক হয়ে যায়। যদি একই নামের একাধিক চেকবক্সে নামের বৈশিষ্ট্যটি ব্যবহার করা হয়, ব্যবহারকারী একাধিক বিকল্প নির্বাচন করতে পারেন।
আপনি আপনার ওয়েব অ্যাপ্লিকেশন ডিজাইন সাথে মেলে চেকবক্স এবং লেবেল স্টাইল করতে CSS ব্যবহার করতে পারেন। উপরন্তু, জাভাস্ক্রিপ্ট চেকবক্স আচরণ বাড়ানোর জন্য ব্যবহার করা যেতে পারে, যেমন ক্লিক ইভেন্টগুলি পরিচালনা করা বা প্রোগ্রামগতভাবে টগল করা।
HTML রেডিও বোতাম নিয়ন্ত্রণ?
এইচটিএমএল রেডিও বোতাম নিয়ন্ত্রণ হল ইনপুট উপাদান যা ব্যবহারকারীদের পছন্দের একটি পূর্বনির্ধারিত সেটিং থেকে একটি একক বিকল্প নির্বাচন করতে দেয়। রেডিও বোতাম ব্যবহার করা হয় যখন আপনি ব্যবহারকারীকে বিকল্পগুলির একটি গ্রুপ থেকে একটি একক নির্বাচন করতে চান।
চেকবক্স বিপরীতে, যেখানে একাধিক বিকল্প একই সাথে নির্বাচন করা যেতে পারে, রেডিও বোতামগুলি একটি নির্দিষ্ট গোষ্ঠীর মধ্যে "শুধুমাত্র একটি নির্বাচনী" নিয়ম প্রয়োগ করে।
HTML-এ রেডিও বোতামগুলোর একটি গ্রুপ তৈরি করতে, আপনাকে একই গ্রুপের সমস্ত রেডিও বোতামগুলোর জন্য একই নামের বৈশিষ্ট্য ব্যবহার করতে হবে। রেডিও বোতামগুলির একটি গ্রুপ কিভাবে তৈরি করবেন তার একটি উদাহরণ এখানে দেওয়া হল:
<label> <input type="radio" name="gender" value="male"> Male </label> <label> <input type="radio" name="gender" value="female"> Female </label> <label> <input type="radio" name="gender" value="other"> Other </label>
উপরের কোড Snippet:
type="radio" সহ প্রতিটি <input> উপাদান একটি একক রেডিও বোতাম নিয়ন্ত্রণ তৈরি করে।
নামের বৈশিষ্ট্যটি রেডিও বোতাম গুলো একত্রিত করে। এই ক্ষেত্রে, "gender" নাম সহ সমস্ত রেডিও বোতাম একই গ্রুপের অন্তর্গত, এবং ব্যবহারকারী এই গ্রুপ থেকে শুধুমাত্র একটি বিকল্প নির্বাচন করতে পারেন।
যখন ফর্মটি জমা দেওয়া হয় তখন মান বৈশিষ্ট্যটি নির্বাচিত রেডিও বোতামের মান নির্দিষ্ট করে ব্যবহারকারী যদি "মহিলা" বিকল্পটি নির্বাচন করে, ফর্মটি জমা দেওয়ার সময় "মহিলা" মানটি সার্ভারে পাঠানো হবে।
<label> উপাদানগুলি প্রতিটি রেডিও বোতাম বিকল্পের জন্য লেভেল প্রদান করে। রেডিও বোতামের জন্য অ্যাট্রিবিউটের প্রয়োজন নেই, কারণ লেবেলে ক্লিক করা স্বয়ংক্রিয়ভাবে সংশ্লিষ্ট রেডিও বোতামটি নির্বাচন করবে যখন এটি নাম বৈশিষ্ট্য ব্যবহার করে ইনপুট এর সাথে যুক্ত হবে।
যখন ব্যবহারকারী একটি রেডিও বোতামে ক্লিক করেন, তখন এটি নির্বাচিত হয়ে যায় এবং একই গোষ্ঠীর মধ্যে পূর্বে নির্বাচিত যেকোনো রেডিও বোতাম অনির্বাচিত হয়ে যায়।
প্রতিটি রেডিও বোতামের জন্য মান বৈশিষ্ট্য সংজ্ঞায়িত করতে মনে রাখবেন, কারণ এটি ফর্ম জমা দেওয়ার সময় সার্ভারে পাঠানো ডেটা প্রতিনিধিত্ব করে। এই মানটি অর্থপূর্ণ হওয়া উচিত এবং সার্ভার-সাইডে নির্বাচিত বিকল্প সনাক্ত করতে ব্যবহার করা উচিত।
HTML Select Box নিয়ন্ত্রণ?
এইচটিএমএল নির্বাচন বাক্স নিয়ন্ত্রণ, যা ড্রপডাউন বা একটি নির্বাচন উপাদান হিসেবে পরিচিত, ব্যবহারকারীদের পূর্ব নির্ধারিত বিকল্পগুলির একটি তালিকা থেকে একটি একক বিকল্প বেছে নিতে দেয়।
HTML-এ রেডিও বোতামগুলোর একটি গ্রুপ তৈরি করতে, আপনাকে একই গ্রুপের সমস্ত রেডিও বোতামগুলোর জন্য একই নামের বৈশিষ্ট্য ব্যবহার করতে হবে। রেডিও বোতামগুলির একটি গ্রুপ কিভাবে তৈরি করবেন তার একটি উদাহরণ এখানে দেওয়া হল:
<label> <input type="radio" name="gender" value="male"> Male </label> <label> <input type="radio" name="gender" value="female"> Female </label> <label> <input type="radio" name="gender" value="other"> Other </label>
উপরের কোড Snippet:
type="radio" সহ প্রতিটি <input> উপাদান একটি একক রেডিও বোতাম নিয়ন্ত্রণ তৈরি করে।
নামের বৈশিষ্ট্যটি রেডিও বোতাম গুলো একত্রিত করে। এই ক্ষেত্রে, "gender" নাম সহ সমস্ত রেডিও বোতাম একই গ্রুপের অন্তর্গত, এবং ব্যবহারকারী এই গ্রুপ থেকে শুধুমাত্র একটি বিকল্প নির্বাচন করতে পারেন।
যখন ফর্মটি জমা দেওয়া হয় তখন মান বৈশিষ্ট্যটি নির্বাচিত রেডিও বোতামের মান নির্দিষ্ট করে ব্যবহারকারী যদি "মহিলা" বিকল্পটি নির্বাচন করে, ফর্মটি জমা দেওয়ার সময় "মহিলা" মানটি সার্ভারে পাঠানো হবে।
<label> উপাদানগুলি প্রতিটি রেডিও বোতাম বিকল্পের জন্য লেভেল প্রদান করে। রেডিও বোতামের জন্য অ্যাট্রিবিউটের প্রয়োজন নেই, কারণ লেবেলে ক্লিক করা স্বয়ংক্রিয়ভাবে সংশ্লিষ্ট রেডিও বোতামটি নির্বাচন করবে যখন এটি নাম বৈশিষ্ট্য ব্যবহার করে ইনপুট এর সাথে যুক্ত হবে।
যখন ব্যবহারকারী একটি রেডিও বোতামে ক্লিক করেন, তখন এটি নির্বাচিত হয়ে যায় এবং একই গোষ্ঠীর মধ্যে পূর্বে নির্বাচিত যেকোনো রেডিও বোতাম অনির্বাচিত হয়ে যায়।
প্রতিটি রেডিও বোতামের জন্য মান বৈশিষ্ট্য সংজ্ঞায়িত করতে মনে রাখবেন, কারণ এটি ফর্ম জমা দেওয়ার সময় সার্ভারে পাঠানো ডেটা প্রতিনিধিত্ব করে। এই মানটি অর্থপূর্ণ হওয়া উচিত এবং সার্ভার-সাইডে নির্বাচিত বিকল্প সনাক্ত করতে ব্যবহার করা উচিত।
HTML Select Box নিয়ন্ত্রণ?
এইচটিএমএল নির্বাচন বাক্স নিয়ন্ত্রণ, যা ড্রপডাউন বা একটি নির্বাচন উপাদান হিসেবে পরিচিত, ব্যবহারকারীদের পূর্ব নির্ধারিত বিকল্পগুলির একটি তালিকা থেকে একটি একক বিকল্প বেছে নিতে দেয়।
এটি সাধারণত ব্যবহৃত হয় যখন আপনার পছন্দের একটি নির্দিষ্ট সেট থাকে এবং ব্যবহারকারীকে সেগুলির মধ্যে একটি নির্বাচন করতে চান এখানে আপনি কিভাবে HTML এ একটি নির্বাচন বাক্স তৈরি করতে পারেন:
<label for="country">Select your country:</label> <select id="country" name="selected_country"> <option value="usa">United States</option> <option value="canada">Canada</option> <option value="uk">United Kingdom</option> <option value="australia">Australia</option> <!-- Add more options as needed --> </select>
উপরের কোড Snippet:
<label> উপাদানটি তার উদ্দেশ্য বর্ণনা করার জন্য নির্বাচন বাক্সের জন্য একটি লেবেল প্রদান করে।
<select> উপাদান নির্বাচন বক্স নিয়ন্ত্রণ তৈরি করে।
আইডি অ্যাট্রিবিউট অনন্য ভাবে সিলেক্ট বক্স কে শনাক্ত করে এবং <লেভেল> এলিমেন্ট এর জন্য অ্যাট্রিবিউট আইডির নামের সাথে মিল রেখে সিলেক্ট বক্স এর সাথে লিঙ্ক করে।
নাম বৈশিষ্ট্য নির্বাচন বাক্সের নাম নির্ধারণ করে, যা সার্ভারে ফর্ম ডেটা জমা দেওয়ার সময় ব্যবহৃত হয়।
<select> উপাদানের ভিতরে, আমাদের কাছে <option> উপাদানের একটি সিরিজ আছে। প্রতিটি <option> উপাদান নির্বাচন বাক্সে একটি একক পছন্দ উপস্থাপন করে।
<option> উপাদানগুলির মান বৈশিষ্ট্যটি সেই মানটি নির্দিষ্ট করে যা ফর্মটি জমা দেওয়ার সময় সার্ভারে পাঠানো হবে। এটি নির্বাচিত বিকল্পের সাথে যুক্ত ডেটা উপস্থাপন করে।
খোলা এবং বন্ধ করার <option> ট্যাগের মধ্যে পাঠ্য বিষয়বস্তু নির্বাচন বাক্সে প্রতিটি বিকল্পের দৃশ্যমান লেভেল উপস্থাপন করে।
ব্যবহারকারী নির্বাচন বাক্সে ক্লিক করলে, একটি বিকল্প গুলির তালিকা প্রদর্শন করে এবং তারা তালিকা থেকে একটি বিকল্প বেছে নিতে পারে। নির্বাচিত বিকল্পটি ডিফল্ট মান হিসাবে প্রদর্শিত হবে যখন নির্বাচন বাক্সটি বন্ধ থাকবে।
পৃষ্ঠাটি লোড হওয়ার সময় আপনি একটি ডিফল্ট বিকল্প প্রাক-নির্বাচন করতে <option> উপাদানগুলির একটি নির্বাচিত বৈশিষ্ট্য ব্যবহার করতে পারেন। উদাহরণ স্বরূপ:
<select id="country" name="selected_country"> <option value="usa">United States</option> <option value="canada">Canada</option> <option value="uk" selected>United Kingdom</option> <option value="australia">Australia</option> </select>
এই ক্ষেত্রে, "ইউনাইটেড কিংডম" পৃষ্ঠাটি লোড করার সময় আগে থেকে নির্বাচন করা হবে।
HTML ফাইল আপলোড বক্স?
HTML এ, আপনি type="file" অ্যাট্রিবিউট সহ <input> উপাদান ব্যবহার করে একটি ফাইল আপলোড বক্স তৈরি করতে পারেন। এটি ব্যবহারকারীদের তাদের স্থানীয় ডিভাইসগুলি থেকে একটি ওয়েব সার্ভারে ফাইলগুলি নির্বাচন এবং আপলোড করতে দেয় এখানে আপনি কিভাবে একটি ফাইল আপলোড বক্স তৈরি করতে পারেন:
<label for="fileUpload">Select a file to upload:</label> <input type="file" id="fileUpload" name="uploadedFile">
উপরের কোড Snippet:
<label> উপাদানটি ফাইল আপলোড বক্সের উদ্দেশ্য বর্ণনা করার জন্য একটি লেবেল প্রদান করে।
<input> উপাদানটি ফাইল আপলোড বক্স তৈরি করে।
type="file" বৈশিষ্ট্যটি নির্দিষ্ট করে যে এই ইনপুট উপাদানটি ফাইল আপলোডের জন্য ব্যবহৃত হয়।
আইডি অ্যাট্রিবিউট অনন্য ভাবে ফাইল আপলোড বক্স কে শনাক্ত করে এবং <লেবেল> উপাদানের জন্য বৈশিষ্ট্যটি আইডি মানের সাথে মেলে ইনপুটের সাথে লিঙ্ক করে।
নাম বৈশিষ্ট্য ফাইল আপলোড নিয়ন্ত্রণের নাম নির্ধারণ করে, যা সার্ভারে ফর্ম ডেটা জমা দেওয়ার সময় ব্যবহৃত হয়।
যখন ব্যবহারকারী ফাইল আপলোড বক্সে ক্লিক করেন, তখন এটি তাদের ডিভাইসে একটি ফাইল ডায়ালগ খোলে, তাদের স্থানীয় ফাইলগুলি ব্রাউজ করতে এবং আপলোড করার জন্য একটি ফাইল নির্বাচন করার অনুমতি দেয়। ফাইল নির্বাচন করার পর, ফাইলের নামটি ফাইল আপলোড বক্স প্রদর্শিত হবে।
নোট করুন যে প্রকৃত ফাইল আপলোড কার্যকারিতার জন্য ব্যবহারকারীর পাঠানো ফাইল ডেটা পরিচালনা করার জন্য একটি সার্ভার-সাইড উপাদান প্রয়োজন। সার্ভারে, আপনাকে আপলোড করা ফাইলটি প্রক্রিয়া করতে হবে এবং আপনার অ্যাপ্লিকেশনের প্রয়োজনীয়তা অনুযায়ী এটি সংরক্ষণ করতে হবে।
<label for="country">Select your country:</label> <select id="country" name="selected_country"> <option value="usa">United States</option> <option value="canada">Canada</option> <option value="uk">United Kingdom</option> <option value="australia">Australia</option> <!-- Add more options as needed --> </select>
উপরের কোড Snippet:
<label> উপাদানটি তার উদ্দেশ্য বর্ণনা করার জন্য নির্বাচন বাক্সের জন্য একটি লেবেল প্রদান করে।
<select> উপাদান নির্বাচন বক্স নিয়ন্ত্রণ তৈরি করে।
আইডি অ্যাট্রিবিউট অনন্য ভাবে সিলেক্ট বক্স কে শনাক্ত করে এবং <লেভেল> এলিমেন্ট এর জন্য অ্যাট্রিবিউট আইডির নামের সাথে মিল রেখে সিলেক্ট বক্স এর সাথে লিঙ্ক করে।
নাম বৈশিষ্ট্য নির্বাচন বাক্সের নাম নির্ধারণ করে, যা সার্ভারে ফর্ম ডেটা জমা দেওয়ার সময় ব্যবহৃত হয়।
<select> উপাদানের ভিতরে, আমাদের কাছে <option> উপাদানের একটি সিরিজ আছে। প্রতিটি <option> উপাদান নির্বাচন বাক্সে একটি একক পছন্দ উপস্থাপন করে।
<option> উপাদানগুলির মান বৈশিষ্ট্যটি সেই মানটি নির্দিষ্ট করে যা ফর্মটি জমা দেওয়ার সময় সার্ভারে পাঠানো হবে। এটি নির্বাচিত বিকল্পের সাথে যুক্ত ডেটা উপস্থাপন করে।
খোলা এবং বন্ধ করার <option> ট্যাগের মধ্যে পাঠ্য বিষয়বস্তু নির্বাচন বাক্সে প্রতিটি বিকল্পের দৃশ্যমান লেভেল উপস্থাপন করে।
ব্যবহারকারী নির্বাচন বাক্সে ক্লিক করলে, একটি বিকল্প গুলির তালিকা প্রদর্শন করে এবং তারা তালিকা থেকে একটি বিকল্প বেছে নিতে পারে। নির্বাচিত বিকল্পটি ডিফল্ট মান হিসাবে প্রদর্শিত হবে যখন নির্বাচন বাক্সটি বন্ধ থাকবে।
পৃষ্ঠাটি লোড হওয়ার সময় আপনি একটি ডিফল্ট বিকল্প প্রাক-নির্বাচন করতে <option> উপাদানগুলির একটি নির্বাচিত বৈশিষ্ট্য ব্যবহার করতে পারেন। উদাহরণ স্বরূপ:
<select id="country" name="selected_country"> <option value="usa">United States</option> <option value="canada">Canada</option> <option value="uk" selected>United Kingdom</option> <option value="australia">Australia</option> </select>
এই ক্ষেত্রে, "ইউনাইটেড কিংডম" পৃষ্ঠাটি লোড করার সময় আগে থেকে নির্বাচন করা হবে।
HTML ফাইল আপলোড বক্স?
HTML এ, আপনি type="file" অ্যাট্রিবিউট সহ <input> উপাদান ব্যবহার করে একটি ফাইল আপলোড বক্স তৈরি করতে পারেন। এটি ব্যবহারকারীদের তাদের স্থানীয় ডিভাইসগুলি থেকে একটি ওয়েব সার্ভারে ফাইলগুলি নির্বাচন এবং আপলোড করতে দেয় এখানে আপনি কিভাবে একটি ফাইল আপলোড বক্স তৈরি করতে পারেন:
<label for="fileUpload">Select a file to upload:</label> <input type="file" id="fileUpload" name="uploadedFile">
উপরের কোড Snippet:
<label> উপাদানটি ফাইল আপলোড বক্সের উদ্দেশ্য বর্ণনা করার জন্য একটি লেবেল প্রদান করে।
<input> উপাদানটি ফাইল আপলোড বক্স তৈরি করে।
type="file" বৈশিষ্ট্যটি নির্দিষ্ট করে যে এই ইনপুট উপাদানটি ফাইল আপলোডের জন্য ব্যবহৃত হয়।
আইডি অ্যাট্রিবিউট অনন্য ভাবে ফাইল আপলোড বক্স কে শনাক্ত করে এবং <লেবেল> উপাদানের জন্য বৈশিষ্ট্যটি আইডি মানের সাথে মেলে ইনপুটের সাথে লিঙ্ক করে।
নাম বৈশিষ্ট্য ফাইল আপলোড নিয়ন্ত্রণের নাম নির্ধারণ করে, যা সার্ভারে ফর্ম ডেটা জমা দেওয়ার সময় ব্যবহৃত হয়।
যখন ব্যবহারকারী ফাইল আপলোড বক্সে ক্লিক করেন, তখন এটি তাদের ডিভাইসে একটি ফাইল ডায়ালগ খোলে, তাদের স্থানীয় ফাইলগুলি ব্রাউজ করতে এবং আপলোড করার জন্য একটি ফাইল নির্বাচন করার অনুমতি দেয়। ফাইল নির্বাচন করার পর, ফাইলের নামটি ফাইল আপলোড বক্স প্রদর্শিত হবে।
নোট করুন যে প্রকৃত ফাইল আপলোড কার্যকারিতার জন্য ব্যবহারকারীর পাঠানো ফাইল ডেটা পরিচালনা করার জন্য একটি সার্ভার-সাইড উপাদান প্রয়োজন। সার্ভারে, আপনাকে আপলোড করা ফাইলটি প্রক্রিয়া করতে হবে এবং আপনার অ্যাপ্লিকেশনের প্রয়োজনীয়তা অনুযায়ী এটি সংরক্ষণ করতে হবে।
সার্ভার-সাইড প্রক্রিয়াকরণ বিভিন্ন প্রোগ্রামিং ভাষা এবং ফ্রেমওয়ার্ক ব্যবহার করে অর্জন করা যেতে পারে, যেমন PHP, Node.js, Python, ইত্যাদি।
অতিরিক্তভাবে, আপনি একটি নির্দিষ্ট ফাইলের ধরন বা MIME টাইপ নির্দিষ্ট করতে <input> এলিমেন্ট অ্যাট্রিবিউট ব্যবহার করতে পারেন যা ফাইল আপলোড বক্সের গ্রহণ করা উচিত। উদাহরণ স্বরূপ:
<input type="file" id="fileUpload" name="uploadedFile" accept=".jpg, .png, .pdf">
এই ক্ষেত্রে, ফাইল আপলোড বক্স শুধুমাত্র ".jpg", ".png", এবং ".pdf" এক্সটেনশন সহ ফাইল গ্রহণ করবে যাইহোক, মনে রাখবেন যে গ্রহণযোগ্য বৈশিষ্ট্যটি ব্রাউজারে একটা ইঙ্গিত এবং ফাইলের প্রকার বৈধতা প্রয়োগ করে না। আপলোড করা ফাইলগুলি কাঙ্খিত বিন্যাসের এবং প্রক্রিয়াকরণের জন্য নিরাপদ তা নিশ্চিত করার জন্য যথাযথ সার্ভার-সাইড বৈধতা এখনও প্রয়োজনীয়।
অতিরিক্তভাবে, আপনি একটি নির্দিষ্ট ফাইলের ধরন বা MIME টাইপ নির্দিষ্ট করতে <input> এলিমেন্ট অ্যাট্রিবিউট ব্যবহার করতে পারেন যা ফাইল আপলোড বক্সের গ্রহণ করা উচিত। উদাহরণ স্বরূপ:
<input type="file" id="fileUpload" name="uploadedFile" accept=".jpg, .png, .pdf">
এই ক্ষেত্রে, ফাইল আপলোড বক্স শুধুমাত্র ".jpg", ".png", এবং ".pdf" এক্সটেনশন সহ ফাইল গ্রহণ করবে যাইহোক, মনে রাখবেন যে গ্রহণযোগ্য বৈশিষ্ট্যটি ব্রাউজারে একটা ইঙ্গিত এবং ফাইলের প্রকার বৈধতা প্রয়োগ করে না। আপলোড করা ফাইলগুলি কাঙ্খিত বিন্যাসের এবং প্রক্রিয়াকরণের জন্য নিরাপদ তা নিশ্চিত করার জন্য যথাযথ সার্ভার-সাইড বৈধতা এখনও প্রয়োজনীয়।
HTML বোতাম নিয়ন্ত্রণ?
HTML-এ, আপনি <button> উপাদান বা type="button" বৈশিষ্ট্য সহ <input> উপাদান ব্যবহার করে বোতাম নিয়ন্ত্রণ তৈরি করতে পারেন। ব্যবহারকারী দ্বারা ক্লিক করার সময় ক্রিয়াকলাপ বা ক্রিয়াকলাপ সম্পাদন করতে বোতামগুলি ব্যবহার করা হয়। এখানে উভয় পন্থা ব্যবহার করে বোতাম নিয়ন্ত্রণ তৈরির উদাহরণ রয়েছে:
Using <button> element:
<button type="button" id="btnSubmit">Submit</button>
উপরের কোড স্নিপেট, <button> উপাদানটি "জমা দিন" লেভেল সহ একটি বোতাম তৈরি করে। type="button" বৈশিষ্ট্যটি স্পষ্টভাবে উল্লেখ করে যে এই বোতামটি একটি স্বতন্ত্র বোতাম এবং এটি একটি ফর্ম জমা দেওয়ার অংশ নয়৷
Using <input> element:
<input type="button" id="btnCancel" value="Cancel">
এই উদাহরণে, type="button" সহ <input> উপাদানটি "বাতিল" লেবেল সহ একটি বোতাম তৈরি করে। মান বৈশিষ্ট্য বোতামে প্রদর্শিত পাঠ্য সেট করে।
উভয় পন্থা একই ফলাফল অর্জন করে, তবে আপনি আপনার পছন্দ বা নির্দিষ্ট প্রয়োজনীয়তার উপর ভিত্তি করে অন্যটির উপর একটি বেছে নিতে পারেন।
বোতামগুলো স্টাইল করা যেতে পারে এবং জাভাস্ক্রিপ্ট ইভেন্ট হ্যান্ডলার এর সাথে যুক্ত করা যেতে পারে যাতে ক্লিক করা হলে অ্যাকশন গুলো সম্পাদন করা যায়। উদাহরণস্বরূপ, যখন বোতামটি ক্লিক করা হয় তখন আপনি জাভাস্ক্রিপ্ট কোড চালানোর জন্য একটি অন ক্লিক অ্যাট্রিবিউট যোগ করতে পারেন:
<button type="button" id="btnSubmit" onclick="submitForm()">Submit</button>
এই ক্ষেত্রে, সাবমিট ফরম() ফাংশনটি কল করা হবে যখন "জমা দিন" বোতামে ক্লিক করা হবে।
ফর্ম জমা দেওয়া শুরু করতে বা ফর্ম ক্ষেত্রগুলি পুনরায় সেট করতে HTML ফর্মগুলির মধ্যে বোতামগুলো ব্যবহার করা যেতে পারে। এখানে একটি ফর্মের ভিতরে একটি জমা বোতামের একটি উদাহরণ রয়েছে:
<form action="/submit" method="post"> <!-- form fields go here --> <button type="submit">Submit</button> </form>
যখন ব্যবহারকারী ফর্মের ভিতরে "জমা দিন" বোতামে ক্লিক করেন, ফর্ম ডেটা নির্দিষ্ট HTTP পদ্ধতি (যেমন, POST বা GET) ব্যবহার করে নির্দিষ্ট কর্ম URL-এ জমা দেওয়া হবে।
সামগ্রিকভাবে, HTML-এর বোতামগুলো ওয়েব পৃষ্ঠাগুলি সাথে ইন্টারঅ্যাক্ট করতে এবং ব্যবহারকারীর ইন্টারঅ্যাকশন উপর ভিত্তি করে ক্রিয়াকলাপ বা ফর্ম জমা দেওয়ার একটি অপরিহার্য উপায় প্রদান করে।
HTML Hidden ফর্ম নিয়ন্ত্রণ?
HTML লুকানো ফর্ম নিয়ন্ত্রণগুলি হল ইনপুট উপাদান যা ওয়েব পৃষ্ঠায় দৃশ্যমান নয় কিন্তু একটি ফর্ম জমা দেওয়ার সময় ডেটা সংরক্ষণ এবং পাস করতে ব্যবহার করা যেতে পারে। এগুলো সাধারণত ব্যবহারকারীর কাছে প্রদর্শন না করে সার্ভারে অতিরিক্ত তথ্য পাঠাতে বা ডেটা সংরক্ষণ করতে ব্যবহৃত হয় যা ব্যবহারকারীর দ্বারা সরাসরি সম্পাদনযোগ্য হওয়া উচিত নয়।
একটি লুকানো ফর্ম নিয়ন্ত্রণ তৈরি করতে, আপনি type="hidden" বৈশিষ্ট্য সহ <input> উপাদান ব্যবহার করতে পারেন। লুকানো ফর্ম নিয়ন্ত্রণগুলি কীভাবে ব্যবহার করবেন তার একটি উদাহরণ এখানে রয়েছে:
<form action="/submit" method="post"> <input type="hidden" name="user_id" value="12345"> <input type="hidden" name="source_page" value="/home"> <!-- other visible form controls go here --> <button type="submit">Submit</button> </form>
উপরের কোড Snippet:
<form> উপাদানটি একটি ফর্ম তৈরি করে যা নির্দিষ্ট কর্ম URL-এ জমা দেওয়া হবে যখন "জমা দিন" বোতামটি ক্লিক করা হয়।
type="hidden" সহ প্রথম <input> উপাদানটি "12345" মান সহ "user_id" নামে একটি লুকানো ফর্ম নিয়ন্ত্রণ তৈরি করে। ফর্ম জমা দেওয়ার সময় এই মানটি সার্ভারে পাঠানো হবে, কিন্তু ব্যবহারকারী এটি দেখতে পাবে না বা সরাসরি পৃষ্ঠায় এটি সংশোধন করতে সক্ষম হবে।
দ্বিতীয় <input> উপাদানটি "/home" মান সহ "source page" নামে আরেকটি লুকানো ফর্ম নিয়ন্ত্রণ তৈরি করে। এই লুকানো নিয়ন্ত্রণ উৎস পৃষ্ঠাটি ট্র্যাক করতে ব্যবহার করা যেতে পারে যেখান থেকে ফর্মটি জমা দেওয়া হয়েছিল।
অন্যান্য দৃশ্যমান ফর্ম নিয়ন্ত্রণগুলি ফর্মের ভিতরে প্রয়োজন অনুসারে যোগ করা যেতে পারে।
যখন ফর্মটি জমা দেওয়া হয়, সমস্ত দৃশ্যমান এবং লুকানো ফরম নিয়ন্ত্রণের নাম এবং মান সার্ভারে পাঠানো হবে, আপনাকে সার্ভার-সাইডে ডেটা অ্যাক্সেস করার অনুমতি দেবে
লুকানো ফর্ম কন্ট্রোলগুলো পৃষ্ঠাগুলির মধ্যে ডেটা পাস করার জন্য বা ডেটা বহন করার জন্য দরকারী যাকে ফর্ম প্রক্রিয়াকরণের জন্য অপরিহার্য কিন্তু ব্যবহারকারীর কাছে প্রদর্শন করার প্রয়োজন নেই৷ যাইহোক, সংবেদনশীল ডেটার জন্য লুকানো ফর্ম কন্ট্রোল গুলি
ব্যবহার করার সময় সতর্ক থাকুন, কারণ সেগুলো দূষিত ব্যবহারকারীদের দ্বারা ম্যানিপুলেট করা যেতে পারে৷ আপনার অ্যাপ্লিকেশনের নিরাপত্তা এবং অখণ্ডতা নিশ্চিত করতে সার্ভার-সাইডে থাকা ডেটা সর্বদা যাচাই ও স্যানিটাইজার করুন।
If you have any doubts, please let me know