এইচটিএমএল ডিজাইন ফর্ম

আপনি যখন সাইট ভিজিটর থেকে কিছু ডেটা সংগ্রহ করতে চান তখন HTML ফর্মের প্রয়োজন হয়। উদাহরণস্বরূপ, ব্যবহারকারী নিবন্ধনের সময় আপনি নাম, ইমেল ঠিকানা, ক্রেডিট কার্ড ইত্যাদির মতো তথ্য সংগ্রহ করতে চান৷

একটি ফর্ম সাইট ভিজিটরের কাছ থেকে ইনপুট নেবে এবং তারপরে এটি একটি ব্যাক-এন্ড অ্যাপ্লিকেশন যেমন CGI, ASP স্ক্রিপ্ট বা PHP স্ক্রিপ্ট ইত্যাদিতে পোস্ট করবে। ব্যাক-এন্ড অ্যাপ্লিকেশনটি ভিতরে সংজ্ঞায়িত ব্যবসায়িক যুক্তির উপর ভিত্তি করে পাস করা ডেটাতে প্রয়োজনীয় প্রক্রিয়াকরণ করবে। অ্যাপ্লিকেশন।

ট্যাগটি একটি ফর্ম তৈরি করতে HTML-এ ব্যবহার করা হয় এবং বিভিন্ন ফর্ম উপাদান যেমন ইনপুট, টেক্সটেরিয়া ইত্যাদি অন্তর্ভুক্ত করা হয় -

<form action = "Script URL" method = "GET|POST">
form elements like input, textarea etc.
</form>

একটি ফর্ম তৈরি করতে, আপনাকে টেক্সট, পাসওয়ার্ড, জন্ম তারিখের জন্য ক্ষেত্র, টেলিফোন, ইমেল, বোতাম, ইত্যাদির মত ক্ষেত্র যোগ করতে হবে। এই সব আমরা <ইনপুট> উপাদানগুলির সাথে যোগ করতে পারি −

Sr.No	প্রকার ও বর্ণনা
1	পাঠ্য একটি মুক্ত-ফর্ম পাঠ্য ক্ষেত্র, নামমাত্র লাইন বিরতি মুক্ত।
2	পাসওয়ার্ড সংবেদনশীল তথ্যের জন্য একটি মুক্ত-ফর্ম পাঠ্য ক্ষেত্র, নামমাত্র লাইন বিরতি মুক্ত।
3	চেকবক্স পূর্বনির্ধারিত তালিকা থেকে শূন্য বা তার বেশি মানের একটি সেট।
4	রেডিও একটি গণনাকৃত মান।
5	জমা দিন বোতামের একটি বিনামূল্যের ফর্ম ফর্ম জমা শুরু করে।
6	ফাইল একটি MIME প্রকার এবং ঐচ্ছিকভাবে একটি ফাইলের নাম সহ একটি নির্বিচারে ফাইল৷
7	ছবি একটি স্থানাঙ্ক, একটি নির্দিষ্ট চিত্রের আকারের সাথে আপেক্ষিক, অতিরিক্ত শব্দার্থ সহ যে এটি অবশ্যই শেষ মান নির্বাচিত হতে হবে এবং ফর্ম জমা দিতে শুরু করে৷
8	লুকানো৷ একটি নির্বিচারে স্ট্রিং যা সাধারণত ব্যবহারকারীর কাছে প্রদর্শিত হয় না।
9	নির্বাচন করুন৷ একটি গণনাকৃত মান, অনেকটা রেডিও টাইপের মত।
10	টেক্সটেরিয়া একটি ফ্রি-ফর্ম পাঠ্য ক্ষেত্র, নামমাত্র কোনো লাইন বিরতি সীমাবদ্ধতা ছাড়াই..
11	বোতাম বোতামের একটি বিনামূল্যের ফর্ম যা বোতাম সম্পর্কিত যেকোনো ইভেন্ট শুরু করতে পারে।

যাইহোক, HTML5 উপাদান −

এর জন্য আরও বিকল্প চালু করেছে

Sr.No	প্রকার ও বর্ণনা
1	তারিখ সময় একটি তারিখ এবং সময় (বছর, মাস, দিন, ঘন্টা, মিনিট, সেকেন্ড, একটি সেকেন্ডের ভগ্নাংশ) ISO 8601 অনুসারে এনকোড করা সময় অঞ্চলটি UTC-তে সেট করা হয়েছে৷
2	তারিখ সময়-স্থানীয় একটি তারিখ এবং সময় (বছর, মাস, দিন, ঘন্টা, মিনিট, সেকেন্ড, একটি সেকেন্ডের ভগ্নাংশ) ISO 8601 অনুযায়ী এনকোড করা হয়েছে, কোন সময় অঞ্চলের তথ্য নেই৷
3	তারিখ ISO 8601 অনুযায়ী এনকোড করা একটি তারিখ (বছর, মাস, দিন)।
4	মাস ISO 8601 অনুযায়ী এনকোড করা একটি বছর এবং একটি মাস নিয়ে গঠিত একটি তারিখ।
5	সপ্তাহ ISO 8601 অনুযায়ী এনকোড করা একটি বছর এবং একটি সপ্তাহের সংখ্যা নিয়ে গঠিত একটি তারিখ।
6	সময় ISO 8601 অনুযায়ী এনকোড করা একটি সময় (ঘন্টা, মিনিট, সেকেন্ড, ভগ্নাংশের সেকেন্ড)।
7	নম্বর এটি শুধুমাত্র সংখ্যাসূচক মান গ্রহণ করে। ধাপের বৈশিষ্ট্য 1-এ ডিফল্ট করে নির্ভুলতা নির্দিষ্ট করে।
8	পরিসীমা পরিসরের ধরনটি ইনপুট ক্ষেত্রগুলির জন্য ব্যবহৃত হয় যাতে সংখ্যার পরিসর থেকে একটি মান থাকা উচিত।
9	ইমেল এটি শুধুমাত্র ইমেল মান গ্রহণ করে। এই ধরনের ইনপুট ক্ষেত্রের জন্য ব্যবহৃত হয় যাতে একটি ই-মেইল ঠিকানা থাকা উচিত। আপনি যদি একটি সাধারণ পাঠ্য জমা দেওয়ার চেষ্টা করেন তবে এটি email@example.com ফর্ম্যাটে শুধুমাত্র ইমেল ঠিকানা লিখতে বাধ্য করে।
10	url এটি শুধুমাত্র URL মান গ্রহণ করে। এই ধরনের ইনপুট ক্ষেত্রের জন্য ব্যবহার করা হয় যাতে একটি URL ঠিকানা থাকা উচিত। আপনি যদি একটি সাধারণ টেক্সট জমা দেওয়ার চেষ্টা করেন, তাহলে এটি শুধুমাত্র https://www.example.com ফর্ম্যাটে বা https://example.com ফর্ম্যাটে URL ঠিকানা লিখতে বাধ্য করে৷

উদাহরণ

একটি ফর্ম −

তৈরি করার জন্য এখন একটি উদাহরণ দেখা যাক

<!DOCTYPE html>
<html>
<body>
<h2>Register</h2>
<form action="" method="get">
Id: <input type="text" name="id" placeholder="Enter UserId here..."><br>
Password: <input type="password" name="pwd" placeholder="Enter password here..."><br>
DOB: <input type="date" name="dob"><br>
Telephone: <input type="tel" name="tel" placeholder="Enter mobile number here..."><br>
Email: <input type="email" name="email" placeholder="Enter email here..."><br><br>
<button type="submit" value="Submit">Submit</button>
</form>
/body>
</html>

আউটপুট

এটি নিম্নলিখিত আউটপুট −

তৈরি করবে

এইচটিএমএল ডিজাইন ফর্ম

উদাহরণ

এখন, আমরা আরেকটি উদাহরণ দেখব যেখানে আমরা একটি ফর্ম তৈরি করছি, একটি ক্ষেত্র একটি চেকবক্স হিসাবে −

<!DOCTYPE html>
<html>
<body>
<h2>Register</h2>
<form action="" method="get">
Id: <input type="text" name="id" placeholder="Enter UserId here..." size = "25"><br>
Password: <input type="password" name="pwd" placeholder="Enter password here..."><br>
DOB: <input type="date" name="dob" placeholder="Enter date of birth here..."><br>
Telephone: <input type="tel" name="tel" placeholder="Enter mobile number here..."><br>
Email: <input type="email" name="email" placeholder="Enter email here..." size = "35"><br><br>
<input type="checkbox" name="vehicle" value="Bike" checked>Newsletter Subscription: <br>
<button type="submit" value="Submit">Submit</button>
</form>
</body>
</html>

এটি নিম্নলিখিত আউটপুট −

তৈরি করবে

এইচটিএমএল ডিজাইন ফর্ম