HTML ইনপুট প্রকার
এই অধ্যায়ে এইচটিএমএল <ইনপুট> উপাদানের বিভিন্ন প্রকার বর্ণনা করা হয়েছে।
পরামর্শ:
টাইপ অ্যাট্রিবিউটের ডিফল্ট মান হল "টেক্সট"।
বিভিন্ন ধরনের ইনপুট যা HTML এ ব্যবহার করা যেতে পারে:
ইনপুট টাইপ: টেক্সট
<input type="text"> একটি একক-লাইন পাঠ্য ইনপুট ক্ষেত্র সংজ্ঞায়িত করে:
উদাহরণ
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>
ইনপুট প্রকার: পাসওয়ার্ড
<input type="password"> একটি পাসওয়ার্ড ক্ষেত্র সংজ্ঞায়িত করে:
উদাহরণ
<form>
<label for="username">Username:</label><br>
<input type="text" id="username" name="username"><br>
<label for="pwd">Password:</label><br>
<input type="password" id="pwd" name="pwd">
</form>
পাসওয়ার্ড ক্ষেত্রের অক্ষরগুলি লুকানো আছে (তারা বা বৃত্ত হিসাবে দেখানো হয়েছে)।
ইনপুট প্রকার: জমা দিন
<input type="submit"> ফর্ম-হ্যান্ডলারে ফর্ম ডেটা জমা দেওয়ার জন্য একটি বোতাম সংজ্ঞায়িত করে৷
একটি ফর্ম-হ্যান্ডলার সাধারণত একটি সার্ভার পৃষ্ঠা যাতে ইনপুট ডেটা প্রক্রিয়াকরণের জন্য একটি স্ক্রিপ্ট থাকে।
ফর্ম-হ্যান্ডলার ফর্মের অ্যাকশন অ্যাট্রিবিউটে নির্দিষ্ট করা হয়েছে:
উদাহরণ
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
আপনি যদি সাবমিট বোতামের মান বৈশিষ্ট্যটি বাদ দেন তবে বোতামটিতে একটি ডিফল্ট পাঠ্য থাকবে:
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit">
</form>
ইনপুট টাইপ: রিসেট করুন
<input type="reset"> একটি রিসেট বোতাম সংজ্ঞায়িত করে যা সমস্ত ফর্ম মানকে তাদের ডিফল্ট মানগুলিতে পুনরায় সেট করে:
উদাহরণ
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
দ্রষ্টব্য:
যদি আপনি ইনপুট মান পরিবর্তন করেন এবং "রিসেট" বোতামে ক্লিক করেন, ফর্ম-ডেটা ডিফল্ট মানগুলিতে পুনরায় সেট করা হবে।
ইনপুট প্রকার: রেডিও
<input type="radio"> একটি রেডিও বোতাম সংজ্ঞায়িত করে।
রেডিও বোতাম একজন ব্যবহারকারীকে সীমিত সংখ্যক পছন্দের মধ্যে শুধুমাত্র একটি নির্বাচন করতে দেয়:
উদাহরণ
<p>Choose your favorite Web language:</p>
<form>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>
</form>
Choose your favorite Web language:
ইনপুট প্রকার: চেকবক্স
<input type="checkbox"> একটি চেকবক্স সংজ্ঞায়িত করে।
চেক বক্সগুলি ব্যবহারকারীকে সীমিত সংখ্যক পছন্দ থেকে শূন্য বা তার বেশি বিকল্প নির্বাচন করতে দেয়।
উদাহরণ
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>
ইনপুট প্রকার: বোতাম
<input type="button"> একটি বোতাম সংজ্ঞায়িত করে:
উদাহরণ
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
অন্যান্য ইনপুট প্রকার
type="color"
একটি রঙ নির্বাচন করতে ব্যবহৃত হয়
<input type="color" id="favcolor" name="favcolor">
type="date"
একটি তারিখ নির্বাচন করতে ব্যবহৃত
<input type="date" id="birthday" name="birthday">
type="email"
ইমেল ঠিকানার জন্য ব্যবহৃত
<input type="email" id="email" name="email">
type="file"
ফাইল আপলোডের জন্য ব্যবহৃত হয়
<input type="file" id="myfile" name="myfile">
type="number"
সাংখ্যিক মানের জন্য ব্যবহৃত হয়
<input type="number" id="quantity" name="quantity" min="1" max="5">
type="range"
স্লাইডার নিয়ন্ত্রণের জন্য ব্যবহৃত হয়
<input type="range" id="vol" name="vol" min="0" max="50">
type="search"
অনুসন্ধান ক্ষেত্র জন্য ব্যবহৃত
<input type="search" id="gsearch" name="gsearch">
type="tel"
ফোন নম্বরের জন্য ব্যবহৃত
<input type="tel" id="phone" name="phone">
ইনপুট নিয়ন্ত্রণ
এখানে কিছু সাধারণ ইনপুট নিয়ন্ত্রণের একটি তালিকা রয়েছে:
| বৈশিষ্ট্য | ব্যাখ্যা |
|---|---|
| checked | নির্দিষ্ট করে যে পৃষ্ঠাটি লোড হওয়ার সময় একটি ইনপুট ক্ষেত্র পূর্ব-নির্বাচিত হওয়া উচিত (type="checkbox" বা type="radio" এর জন্য)। |
| disabled | নির্দিষ্ট করে যে একটি ইনপুট ক্ষেত্র নিষ্ক্রিয় করা উচিত |
| max | একটি ইনপুট ক্ষেত্রের জন্য সর্বোচ্চ মান নির্দিষ্ট করে |
| maxlength | একটি ইনপুট ক্ষেত্রের জন্য অক্ষরের সর্বাধিক সংখ্যা নির্দিষ্ট করে |
| min | একটি ইনপুট ক্ষেত্রের জন্য সর্বনিম্ন মান নির্দিষ্ট করে |
| pattern | একটি ইনপুট মান যাচাই করার জন্য একটি নিয়মিত অভিব্যক্তি নির্দিষ্ট করে |
| readonly | নির্দিষ্ট করে যে একটি ইনপুট ক্ষেত্র শুধুমাত্র পঠনযোগ্য (পরিবর্তন করা যাবে না)। |
| required | নির্দেশ করে যে একটি ইনপুট ক্ষেত্র প্রয়োজন (পূরণ করতে হবে)। |
| size | একটি ইনপুট ক্ষেত্রের প্রস্থ (অক্ষরে) নির্দিষ্ট করে |
| step | একটি ইনপুট ক্ষেত্রের জন্য আইনি সাংখ্যিক ব্যবধান নির্দিষ্ট করে |
| value | একটি ইনপুট ক্ষেত্রের জন্য ডিফল্ট মান নির্দিষ্ট করে |
অতিরিক্ত শিক্ষা:
আপনি পরবর্তী অধ্যায়ে ইনপুট নিয়ন্ত্রণ সম্পর্কে আরও শিখবেন।
উদাহরণ
নিম্নলিখিত উদাহরণটি আপনাকে 0 থেকে 100 পর্যন্ত একটি মান লিখতে দেয়, 10 এর ধাপে। ডিফল্ট মান হল 30:
<form>
<label for="quantity">Quantity:</label>
<input type="number" id="quantity" name="quantity" min="0" max="100" step="10" value="30">
</form>
অনুশীলন করুন
INPUT উপাদানের টাইপ অ্যাট্রিবিউটের ডিফল্ট মান কী?
HTML ইনপুট টাইপ অ্যাট্রিবিউট
| ট্যাগ | ব্যাখ্যা |
|---|---|
| <input type=""> | প্রদর্শনের জন্য ইনপুটের ধরন নির্দিষ্ট করে |
মূল পয়েন্ট:
- টাইপ অ্যাট্রিবিউট ইনপুট নিয়ন্ত্রণের ধরন নির্ধারণ করে
- ডিফল্ট মান হল "টেক্সট"।
- বিভিন্ন ধরণের মান বিভিন্ন ইনপুট সীমাবদ্ধতা তৈরি করে
- প্রতিটি ধরনের মান নির্দিষ্ট ব্যবহারের ক্ষেত্রে উপযুক্ত