ওয়েবসাইটের দর্শক থেকে ডেটা সংগ্রহের সময় HTML ফর্ম আবশ্যক। উদাহরণস্বরূপ, ব্যবহারকারী নিবন্ধনের সময় নাম, ইমেইল ঠিকানা, ক্রেডিট কার্ড ইত্যাদি তথ্য সংগ্রহ করা হয়।
একটি ফর্ম দর্শক থেকে ইনপুট নেয় এবং তা ব্যাক-এন্ড অ্যাপ্লিকেশনে (যেমন CGI, ASP Script, PHP script ইত্যাদি) পোস্ট করে। ব্যাক-এন্ড অ্যাপ্লিকেশন অ্যাপ্লিকেশনের ভিতরে সংজ্ঞায়িত বিজনেস লজিক অনুযায়ী পাস করা ডেটা প্রক্রিয়া করে।
HTML-এ ফর্ম তৈরি করতে <form> ট্যাগ ব্যবহার করা হয় এবং এর ভিতরে ইনপুট, টেক্সটএরিয়া ইত্যাদি ফর্ম এলিমেন্ট থাকে:
<form action = "Script URL" method = "GET|POST"> form elements like input, textarea etc. </form>
ফর্ম তৈরি করতে আপনাকে টেক্সট, পাসওয়ার্ড, জন্ম তারিখ, টেলিফোন, ইমেইল, বাটন ইত্যাদি ফিল্ড যোগ করতে হবে। এগুলো সব <input> এলিমেন্ট দিয়ে যোগ করা যায়:
প্রাথমিক ইনপুট টাইপসমূহ
| ক্রম | প্রকার ও বিবরণ |
|---|---|
| ১ | text লাইন ব্রেক থেকে মুক্ত একটি ফ্রি-ফর্ম টেক্সট ফিল্ড। |
| ২ | password সংবেদনশীল তথ্যের জন্য লাইন ব্রেক থেকে মুক্ত একটি ফ্রি-ফর্ম টেক্সট ফিল্ড। |
| ৩ | checkbox পূর্বনির্ধারিত তালিকা থেকে শূন্য বা অধিক মান। |
| ৪ | radio এনামারেটেড মান। |
| ৫ | submit ফর্ম সাবমিশন শুরু করে একটি ফ্রি ফর্ম বাটন। |
| ৬ | file MIME টাইপ এবং ঐচ্ছিক ফাইল নাম সহ একটি proizvol ফাইল। |
| ৭ | image কোনো নির্দিষ্ট ছবির আকারের সাপেক্ষে একটি কোঅর্ডিনেট, যা অবশ্যই শেষ নির্বাচিত মান হতে হবে এবং ফর্ম সাবমিশন শুরু করে। |
| ৮ | hidden সাধারণত ব্যবহারকারীর কাছে প্রদর্শিত নাও হওয়া একটি proizvol স্ট্রিং। |
| ৯ | select রেডিও টাইপের মতো একটি এনামারেটেড মান। |
| ১০ | textarea লাইন ব্রেক সীমাবদ্ধতা ছাড়া একটি ফ্রি-ফর্ম টেক্সট ফিল্ড। |
| ১১ | button বাটন সংক্রান্ত যেকোনো ইভেন্ট শুরু করতে পারে এমন একটি ফ্রি ফর্ম বাটন। |
HTML5-এ যোগ করা নতুন ইনপুট টাইপসমূহ
| ক্রম | প্রকার ও বিবরণ |
|---|---|
| ১ | datetime ISO 8601 অনুযায়ী এনকোড করা তারিখ ও সময় (বছর, মাস, দিন, ঘণ্টা, মিনিট, সেকেন্ড, সেকেন্ডের ভগ্নাংশ) UTC টাইম জোন সহ। |
| ২ | datetime-local ISO 8601 অনুযায়ী এনকোড করা তারিখ ও সময়, টাইম জোন তথ্য ছাড়া। |
| ৩ | date ISO 8601 অনুযায়ী এনকোড করা তারিখ (বছর, মাস, দিন)। |
| ৪ | month ISO 8601 অনুযায়ী এনকোড করা বছরের মাস। |
| ৫ | week ISO 8601 অনুযায়ী এনকোড করা বছরের সপ্তাহ নম্বর। |
| ৬ | time ISO 8601 অনুযায়ী এনকোড করা সময় (ঘণ্টা, মিনিট, সেকেন্ড, ভগ্নাংশ সেকেন্ড)। |
| ৭ | number শুধুমাত্র সংখ্যাসূচক মান গ্রহণ করে। step অ্যাট্রিবিউট নির্ভুলতা নির্দিষ্ট করে, ডিফল্ট ১। |
| ৮ | range সংখ্যার একটি রেঞ্জ থেকে মান ধারণ করার জন্য ইনপুট ফিল্ডে ব্যবহৃত হয়। |
| ৯ | email শুধুমাত্র ইমেইল মান গ্রহণ করে। ইমেইল ঠিকানা ধারণ করার জন্য ইনপুট ফিল্ডে ব্যবহৃত হয়। সাধারণ টেক্সট সাবমিট করলে email@example.com ফরম্যাটে ইনপুট বাধ্য করে। |
| ১০ | url শুধুমাত্র URL মান গ্রহণ করে। URL ঠিকানা ধারণ করার জন্য ইনপুট ফিল্ডে ব্যবহৃত হয়। সাধারণ টেক্সট সাবমিট করলে https://www.example.com বা https://example.com ফরম্যাটে ইনপুট বাধ্য করে। |
উদাহরণ ১: মৌলিক ফর্ম তৈরি
<!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>
এটি নিচের আউটপুট তৈরি করবে:
