HTML ফর্ম

HTML ফর্ম ব্যবহৃত হয় যাতে বিভিন্ন ধরণের ব্যবহারকারীর ইনপুট সংগ্রহ করা হোক。

<form> ইলিমেন্ট

HTML ফর্ম ব্যবহৃত হয় যাতে ব্যবহারকারীর ইনপুট সংগ্রহ করা হোক。

<form> ইলিমেন্ট এইভাবে HTML ফর্মকে নির্দিষ্ট করে:

প্রতিদর্শ

<form>
 .
form elements
 .
</form>

HTML ফর্মটি নিহিত রয়েছেফর্ম ইলিমেন্ট。

ফর্ম ইলিমেন্ট বলতে বিভিন্ন টাইপের input ইলিমেন্ট, চেকবক্স, রেডিও বাটন, সাবমিট বাটন ইত্যাদির কথা বোঝায়。

<input> ইলিমেন্ট

<input> ইলিমেন্ট সবচেয়ে মূল্যবানফর্ম ইলিমেন্ট。

<input> ইলিমেন্ট বেশ কিছু রূপে রয়েছে, যা ভিন্ন type অ্যাট্রিবিউট

এই চ্যাপটারে ব্যবহৃত টাইপগুলি হল:

টাইপ বর্ণনা
text সাধারণ টেক্সট ইনপুট নির্দিষ্ট করা
radio রেডিও ইনপুট (বেশিরভাগ বিকল্প চিহ্নিত করা) নির্দিষ্ট করা
submit সাবমিট বাটন (ফর্ম জমা দেওয়া) নির্দিষ্ট করা

মন্তব্য:আপনি এই ট্যুটোরিয়ালের পরে ইনপুট টাইপের বিষয়ে আরও জানতে পারবেন。

টেক্সট ইনপুট

<input type="text"> নির্দিষ্ট করাটেক্সট ইনপুটএর একল লাইন ইনপুট ফিল্ড:

প্রতিদর্শ

<form>
 নাম:<br>
<input type="text" name="firstname">
<br>
 পরিবারের নাম:<br>
<input type="text" name="lastname">
</form>

আপনার নিজেই চেষ্টা করুন

ব্রাউজারে এর মতো দেখা যাবে:

প্রথম নাম:


পরিবারের নাম:

মন্তব্য:ফর্ম স্বয়ং দেখা যায় না। এছাড়াও, টেক্সট ফিল্ডের ডিফল্ট প্রস্থা ২০ বর্ণ হয়。

রেডিও বাটন ইনপুট

<input type="radio"> নির্দিষ্ট করারেডিও বাটন。

রেডিও বাটনটি ব্যবহার করে ব্যবহারকারী সীমিত সংখ্যক বিকল্প থেকে একটি বেছে নিতে পারে:

প্রতিদর্শ

<form>
<input type="radio" name="sex" value="male" checked>পুরুষ
<br>
<input type="radio" name="sex" value="female">মহিলা
</form>

আপনার নিজেই চেষ্টা করুন

রেডিও বাটনটি ব্রাউজারে এর মতো দেখা যাবে:

পুরুষ

মহিলা

সাবমিট বাটন

<input type="submit"> জমা দেওয়ার জন্যফর্ম হ্যান্ডলার（form-handler）সাবমিটফর্মের বাটন

ফর্ম হ্যান্ডলার সাধারণত ইনপুট ডাটা প্রক্রিয়াকরণের জন্য ব্যবহৃত সার্ভার পেজকে বোঝায়。

ফর্ম হ্যান্ডলার ফর্মের action অ্যাট্রিবিউটে নির্দিষ্ট করা হয়:

প্রতিদর্শ

<form action="action_page.php">
নাম:<br>
<input type="text" name="firstname" value="Mickey">
<br>
পরিবারের নাম:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

আপনার নিজেই চেষ্টা করুন

ব্রাউজারে এর মতো দেখা যাবে:

প্রথম নাম:


পরিবারের নাম:


Action অ্যাট্রিবিউট

action অ্যাট্রিবিউটফর্ম জমা দেওয়ার সময় কর্মকাণ্ড নির্দিষ্ট করা。

ফর্ম সার্ভারে জমা দেওয়ার সাধারণ পদ্ধতি হল সাবমিট বাটন ব্যবহার করা。

সাধারণত, ফর্ম ওয়েব সার্ভারের ওয়েবপেজে জমা দেওয়া হয়。

উপরোক্ত উদাহরণে, একটি সার্ভার স্ক্রিপ্টকে ফর্ম জমা দেওয়ার জন্য নির্দিষ্ট করা হয়েছে:

<form action="action_page.php">

যদি action অ্যাট্রিবিউট ছাড়া থাকে, action বর্তমান পৃষ্ঠাকে নির্ধারণ করা হবে।

Method অ্যাট্রিবিউট

method অ্যাট্রিবিউটফর্ম জমা দেওয়ার সময় ব্যবহৃত HTTP পদ্ধতিকে নির্ধারণ করেGET বা POST）：

<form action="action_page.php" method="GET">

বা:

<form action="action_page.php" method="POST">

কবে GET ব্যবহার করা উচিত?

আপনি GET (ডিফল্ট পদ্ধতি) ব্যবহার করতে পারেন:

যদি ফর্ম জমা দেওয়া অপসারণযোগ্য (যেমন সার্চ ইঞ্জিন কোরিয়া) এবং কোনও সংযোগকারী তথ্য নেই。

যখন আপনি GET ব্যবহার করেন, ফর্ম তথ্য পৃষ্ঠার এড্রেসবারে দেখা যায়:

action_page.php?firstname=Mickey&lastname=Mouse

মন্তব্য:GET কম তথ্য জমা দেওয়ার জন্য সর্বোত্তম, ব্রাউজার ক্ষমতা নির্ধারণ করে।

কবে POST ব্যবহার করা উচিত?

তাদের জন্য আপনাকে POST ব্যবহার করা উচিত:

যদি ফর্মটি তথ্য অপদান করছে বা সংযোগকারী তথ্য (যেমন পাসওয়ার্ড) ধারণ করছে。

পোস্ট সুরক্ষিততর, কারণ পৃষ্ঠার এড্রেসবারে পোস্ট করা তথ্য অদৃশ্য হয়。

নাম অ্যাট্রিবিউট

যদি ফর্মটি সঠিকভাবে জমা দেওয়া হতে হয়, তবে প্রত্যেক ইনপুট ফিল্ডকে একটি name অ্যাট্রিবিউট নির্ধারণ করতে হবে。

এই উদাহরণেই "Last name" ইনপুট ফিল্ডকে জমা দেওয়া হবে:

প্রতিদর্শ

<form action="action_page.php">
নাম:<br>
<input type="text" value="Mickey">
<br>
পরিবারের নাম:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

আপনার নিজেই চেষ্টা করুন

ফিল্ডসেট ফর্ম তথ্যকে গোষ্ঠীবদ্ধ করুন

<fieldset> ফর্মতে সংশ্লিষ্ট তথ্যকে এলিমেন্ট গোষ্ঠীবদ্ধ করে

<legend> এলিমেন্ট হল ফিল্ডসেট এলিমেন্টকে শিরোনাম নির্ধারণ করে।

প্রতিদর্শ

<form action="action_page.php">
<fieldset>
<legend>ব্যক্তিগত তথ্য:</legend>
নাম:<br>
<input type="text" name="firstname" value="Mickey">
<br>
পরিবারের নাম:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit"></fieldset>
</form>

আপনার নিজেই চেষ্টা করুন

এই এইচটিএমএল কোড ব্রাউজারে এইরকম দেখায়:

ব্যক্তিগত তথ্য:
প্রথম নাম:


পরিবারের নাম:


HTML Form অ্যাট্রিবিউট

এইমুক্তা HTML <form> ইলেকট্রন, সমস্ত সম্ভাব্য অ্যাট্রিবিউট সম্পূর্ণ করা হয়েছে, এটি এমনভাবে হয়েছে:

প্রতিদর্শ

<form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8">
ectype="application/x-www-form-urlencoded" autocomplete="off" novalidate>
.
form elements
 .
</form>

নিচে <form> অ্যাট্রিবিউটের তালিকা এসেছে:

অ্যাট্রিবিউট বর্ণনা
accept-charset সমর্পণকৃত ফর্মের চারিত্রিক সংকেতপট (ডিফল্ট: পৃষ্ঠার চারিত্রিক সংকেতপট)
action ফর্ম সমর্পণের ঠিকানা (সমর্পণ পৃষ্ঠা)
autocomplete এইচটিএমএল ফর্ম স্বয়ংক্রিয়ভাবে কোডওমপ্লিট করা (ডিফল্ট: চালু)
enctype সমর্পণকৃত ডাটার এনকোডিং (ডিফল্ট: url-encoded)
method ফর্ম সমর্পণের সময় ব্যবহৃত এইচটিপিই পদ্ধতি (ডিফল্ট: GET)
name ফর্ম এর নাম পরিচিত করে (ডকুমেন্ট.ফর্মস.নাম জন্য ডম)
novalidate এইচটিএমএল ফর্ম পরীক্ষা না করা
target প্রক্রিয়াটি এইচটিএমএল অ্যাট্রিবিউটের অভিযোগের জন্য অভিযোগকৃত ঠিকানা (ডিফল্ট: _self) নির্দিষ্ট করে

মন্তব্য:আপনি নিচের চাপটির মাধ্যমে অ্যাট্রিবিউটের বিষয়ে আরও বেশি জানতে পারবেন。