এইচটিএমএল ফর্ম
ব্যবহারকারীর ইনপুট সংগ্রহ করতে একটি HTML ফর্ম ব্যবহার করা হয়। ব্যবহারকারীর ইনপুট প্রায়শই প্রক্রিয়াকরণের জন্য সার্ভারে পাঠানো হয়।
উদাহরণ
<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><form> উপাদান
HTML <form> উপাদানটি ব্যবহারকারীর ইনপুটের জন্য একটি HTML ফর্ম তৈরি করতে ব্যবহৃত হয়:
<form>
.
form elements
.
</form><form> উপাদানটি বিভিন্ন ধরণের ইনপুট উপাদানগুলির জন্য একটি ধারক, যেমন: পাঠ্য ক্ষেত্র, চেকবক্স, রেডিও বোতাম, সাবমিট বোতাম ইত্যাদি।
পরামর্শ:
সমস্ত বিভিন্ন ফর্ম উপাদান এই অধ্যায়ে আচ্ছাদিত করা হয়েছে:HTML Form Elements.
<input> উপাদান
HTML <input> উপাদানটি সবচেয়ে বেশি ব্যবহৃত ফর্ম উপাদান।
টাইপ অ্যাট্রিবিউটের উপর নির্ভর করে একটি <ইনপুট> উপাদান বিভিন্ন উপায়ে প্রদর্শিত হতে পারে।
| টাইপ | ব্যাখ্যা |
|---|---|
| <input type="text"> | একটি একক লাইন পাঠ্য ইনপুট ক্ষেত্র প্রদর্শন করে |
| <input type="radio"> | একটি রেডিও বোতাম দেখায় (অনেক পছন্দের একটি নির্বাচন করতে) |
| <input type="checkbox"> | একটি চেকবক্স দেখায় (একাধিক পছন্দের শূন্য বা তার বেশি নির্বাচন করতে) |
| <input type="submit"> | সাবমিট বাটন দেখায় (ফর্ম জমা দিতে) |
| <input type="button"> | একটি ক্লিকযোগ্য বোতাম প্রদর্শন করে |
গুরুত্বপূর্ণ:
সমস্ত বিভিন্ন ধরনের ইনপুট এই অধ্যায়ে কভার করা হয়েছে:HTML Input Types.
পাঠ্য ক্ষেত্র
<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>দ্রষ্টব্য:
ফর্ম নিজেই অজানা। এছাড়াও, নোট করুন যে ইনপুট ক্ষেত্রের ডিফল্ট প্রস্থ হল 20 অক্ষর।
<label> উপাদান
উপরের উদাহরণে <label> উপাদানটির ব্যবহার লক্ষ্য করুন।
<label> ট্যাগ একাধিক ফর্ম উপাদানের জন্য একটি লেবেল সংজ্ঞায়িত করে।
<label> উপাদানটি স্ক্রিন রিডার ব্যবহারকারীদের জন্য উপযোগী কারণ ব্যবহারকারী যখন ইনপুট উপাদানের উপর ফোকাস করে তখন স্ক্রীন রিডার উচ্চস্বরে লেবেলটি পড়ে।
সুবিধা:
<label> উপাদানটি এমন ব্যবহারকারীদেরও সাহায্য করে যাদের খুব ছোট এলাকায় ক্লিক করতে সমস্যা হয় (যেমন রেডিও বোতাম বা চেকবক্স) - কারণ যখন ব্যবহারকারী <label> উপাদানের ভিতরের পাঠ্যে ক্লিক করেন, তখন এটি রেডিও বোতাম/চেকবক্স প্রতিস্থাপন করে।
<label> ট্যাগের জন্য বৈশিষ্ট্যটি অবশ্যই <input> উপাদানের আইডি বৈশিষ্ট্যের সমান হতে হবে যাতে তাদের একসাথে লিঙ্ক করা যায়।
রেডিও বোতাম
<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>চেক বক্স
<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="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><input> এর জন্য নাম বৈশিষ্ট্য
মনে রাখবেন যে জমা দেওয়ার জন্য প্রতিটি ইনপুট ক্ষেত্রের একটি নাম বৈশিষ্ট্য থাকতে হবে।
যদি নামের বৈশিষ্ট্যটি বাদ দেওয়া হয়, ইনপুট ক্ষেত্রের মান কখনই পাস হয় না।
উদাহরণ
এই উদাহরণটি "প্রথম নাম" ইনপুট ক্ষেত্রের মান জমা দেয় না:
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" value="John"><br><br>
<input type="submit" value="Submit">
</form>মূল নির্দেশ:
সফলভাবে ফর্ম ডেটা জমা দিতে সমস্ত ইনপুট উপাদানগুলিতে নাম বৈশিষ্ট্য যোগ করতে ভুলবেন না।