কিভাবে HTML ফর্ম তৈরি করবেন:একটি নির্দেশিকা

HTML ফর্মগুলি পাঠ্য ক্ষেত্র, ড্রপডাউন, চেকবক্স এবং আরও অনেক কিছু সহ ব্যবহারকারীদের কাছ থেকে ডেটা সংগ্রহ করে। এইচটিএমএল-এ ফর্মগুলির মধ্যে আবদ্ধ <form> ট্যাগ করুন এবং ব্যবহার করুন <input> উপাদান তৈরি করতে ট্যাগ।

HTML ফর্মগুলি ব্যবহারকারীদের একটি ওয়েবসাইট বা ওয়েব অ্যাপ্লিকেশনের সাথে ইন্টারঅ্যাক্ট করার একটি উপায় প্রদান করে। ওয়েব ফর্মগুলি ব্যবহারকারীদের ডেটা জমা দেওয়ার অনুমতি দেয় যা একটি ওয়েবসাইট বা সার্ভার তারপর প্রক্রিয়া এবং সংরক্ষণ করতে পারে৷

আপনি কিভাবে HTML এ একটি ফর্ম তৈরি করবেন? এই টিউটোরিয়ালে আমরা এই প্রশ্নের উত্তর দেব।

এই টিউটোরিয়ালটি আলোচনা করবে, একটি উদাহরণ ব্যবহার করে, HTML ফর্মের মূল বিষয়গুলি, কীভাবে একটি ফর্মে ইনপুট ক্ষেত্র যুক্ত করতে হয় এবং কীভাবে একটি সার্ভারে ডেটা পাঠাতে ফর্ম ব্যবহার করতে হয়৷ এই টিউটোরিয়ালের শেষ নাগাদ, আপনি HTML-এ ফর্ম তৈরি করতে পারদর্শী হয়ে উঠবেন।

HTML ফর্ম

HTML-এ, ফর্ম এক বা একাধিক উপাদান নিয়ে গঠিত। HTML ফর্মগুলিতে নিম্নলিখিত উপাদানগুলি অন্তর্ভুক্ত থাকতে পারে:

• একক-লাইন পাঠ্য ক্ষেত্র
• টেক্সট বক্স
• ড্রপডাউন বক্স
• চেকবক্স
• বোতামগুলি
• রেডিও বোতাম

এই উপাদানগুলি, বোতাম এবং পাঠ্য বাক্সগুলি ছাড়াও, <input> ব্যবহার করুন HTML কোডে ট্যাগ।

একজন ব্যবহারকারী একটি ফর্ম জমা দেওয়ার পরে, ফর্মের বিষয়বস্তুগুলি করতে পারে:

• আরো প্রক্রিয়াকরণের জন্য সার্ভারে পাঠানো হবে বা
• ওয়েব ব্রাউজার দ্বারা প্রক্রিয়া করা হবে।

আপনি HTML এ একটি ফর্ম তৈরি করার আগে, আপনি কীভাবে আপনার ফর্ম ডিজাইন করবেন তা নিয়ে ভাবতে হবে। আপনি কি তথ্য সংগ্রহ করতে হবে? কিভাবে আপনি আপনার ফর্ম সহজ রাখা হবে? আপনার ফর্ম যত বড়, ব্যবহারকারীরা এটি পূরণ করার সম্ভাবনা তত কম৷

81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷

গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় কাটিয়েছে।

এই টিউটোরিয়ালের জন্য, আমরা একটি কফি হাউসের ওয়েবসাইটের জন্য একটি ফর্ম তৈরি করব। ধরুন যে থ্রি ব্রাদার্স কফি হাউস আমাদেরকে একটি ফর্ম ডিজাইন করতে বলেছে যা তাদের ওয়েবসাইটের মাধ্যমে গ্রাহকের প্রশ্নগুলি গ্রহণ করতে দেয়৷

আমাদের এমন একটি ফর্ম তৈরি করার দায়িত্ব দেওয়া হয়েছে যা চারটি তথ্য গ্রহণ করে। এগুলো হল:

• নাম ব্যবহারকারীর।
• ব্যবহারকারীর ইমেল ঠিকানা .
• ব্যবহারকারী কখনও ভিজিট করেছে কিনা কফি হাউস।
• বার্তা ব্যবহারকারী কফি হাউসে পাঠাতে চায়।

এর মানে হল যে আমাদের ফর্মটি চারটি উপাদান অন্তর্ভুক্ত করতে হবে। আমাদের ফর্মের একটি বোতামেরও প্রয়োজন হবে যাতে ব্যবহারকারী তাদের ফর্ম জমা দিতে পারেন৷

HTML <form> ট্যাগ

HTML-এর ফর্মগুলি <form>-এর মধ্যে আবদ্ধ ট্যাগ এখানে HTML এ একটি ফর্মের উদাহরণ দেওয়া হল:

<form>
	// Elements
</form>

<form> HTML এ একটি ফর্ম সংজ্ঞায়িত করতে ট্যাগ ব্যবহার করা হয়। একবার সংজ্ঞায়িত হলে, <form> ট্যাগ ফর্ম উপাদান অন্তর্ভুক্ত করতে পারে, যেমন চেকবক্স এবং একক-লাইন পাঠ্য ক্ষেত্র।

ফর্ম উপাদান দুটি বৈশিষ্ট্য গ্রহণ করে:action এবং method . আমরা এই টিউটোরিয়ালে পরে এই বৈশিষ্ট্যগুলি নিয়ে আলোচনা করব।

<input> HTML ফর্মের জন্য উপাদান

বেশিরভাগ HTML ফর্ম নিয়ন্ত্রণে ইনপুট উপাদান অন্তর্ভুক্ত থাকে . এগুলি ব্যবহারকারীর কাছ থেকে বিভিন্ন ধরণের ডেটা সংগ্রহ করতে ব্যবহৃত হয়। ইনপুট উপাদান <input> ব্যবহার করে সংজ্ঞায়িত করা হয় ট্যাগ।

যেভাবে <input> উপাদান একটি ওয়েবসাইটে প্রদর্শিত হয় নির্দিষ্ট ধরনের বৈশিষ্ট্য উপর নির্ভর করে. উদাহরণস্বরূপ, যদি একটি ইনপুট ক্ষেত্র একটি পাঠ্য বাক্স হয়, তবে এটি একটি রেডিও বোতামের চেয়ে ভিন্নভাবে প্রদর্শিত হবে৷

<input>-এর সিনট্যাক্স উপাদান নিম্নরূপ:

<input type="type" id="elementId">

এই উদাহরণে, <input> দুটি বৈশিষ্ট্য গ্রহণ করে। প্রথম অ্যাট্রিবিউট, যাকে বলা হয় type , ফর্ম ক্ষেত্রটি যে ধরনের ইনপুট গ্রহণ করবে। type বৈশিষ্ট্যের অনেকগুলি মান থাকতে পারে, তবে সবচেয়ে সাধারণ কিছু হল:

• button
• checkbox
• email
• text
• number
• radio

আমাদের উদাহরণে দ্বিতীয় বৈশিষ্ট্য হল id . এই বৈশিষ্ট্যটি ইনপুট উপাদানটিকে স্বতন্ত্রভাবে সনাক্ত করতে ব্যবহৃত হয় এবং ব্যবহারকারীর ফর্ম ইনপুটগুলি প্রক্রিয়া করার জন্য যে স্ক্রিপ্ট দ্বারা ব্যবহারকারী জমা দিয়েছেন তা অ্যাক্সেস করতে ব্যবহার করা হবে৷

থ্রি ব্রাদার্স কফি হাউসে ফিরে আসা যাক। আমরা যে ফর্মটি তৈরি করছি তাতে আমাদের ব্যবহারকারী সম্পর্কে চারটি তথ্য গ্রহণ করতে হবে। প্রথম দুটি তথ্য যা আমরা সংগ্রহ করতে চাই তা হল ব্যবহারকারীর নাম এবং ইমেল ঠিকানা৷

আমরা দুটি <input> ব্যবহার করে তথ্যের এই অংশগুলি সংগ্রহ করতে পারি ট্যাগ:

<form>
	<label for="name">Name:</label><br/>
	<input type="text" id="name" name="name"><br /><br />
	<label for="email">Email:</label><br/>
	<input type="email" id="email" name="email">
</form>

এ ক্লিক করুন কোডটি চালানোর জন্য উপরের সম্পাদকে বোতাম।

আপনি দেখতে পাচ্ছেন, আমরা একটি ফর্ম তৈরি করেছি যা দুটি মান গ্রহণ করে:ব্যবহারকারীর নাম এবং ব্যবহারকারীর ইমেল ঠিকানা। এই উদাহরণে, আমরা <label> ব্যবহার করেছি উপাদান আমরা শীঘ্রই এই উপাদান নিয়ে আলোচনা করব৷

name HTML ফর্মে বৈশিষ্ট্য

একটি HTML ফর্মের প্রতিটি ফর্ম উপাদানের একটি name থাকতে হবে বৈশিষ্ট্য এই বৈশিষ্ট্যটি একটি ফর্মের বিষয়বস্তু জমা দিতে ব্যবহৃত হয়। যদি আপনি একটি name উল্লেখ না করেন একটি ফর্ম উপাদানের বৈশিষ্ট্য, সেই উপাদানটির বিষয়বস্তু সার্ভারে জমা দেওয়া হবে না৷

উপরের উদাহরণে, আমাদের "নাম" ক্ষেত্রের একটি name আছে name মান সহ বৈশিষ্ট্য , এবং আমাদের "ইমেল" ক্ষেত্রের একটি name আছে email মান সহ বৈশিষ্ট্য .

HTML <label> উপাদান

আমাদের উপরের উদাহরণে, আমরা <label> ব্যবহার করেছি উপাদান আমাদের ফর্ম প্রতিটি আইটেম একটি HTML লেবেল যোগ করার জন্য. <label> ট্যাগ আমাদের একটি ফর্ম উপাদানের উদ্দেশ্য এবং এটি কোন ডেটা গ্রহণ করে তা স্পষ্টভাবে বর্ণনা করতে দেয়৷

একটি <label> ট্যাগ আমাদের পাঠ্য সংজ্ঞায়িত করার অনুমতি দেয় যা কম্পিউটার স্ক্রিন-রিডার ব্যবহারকারী ব্যবহারকারীদের কাছে পড়বে। এর কারণ হল স্ক্রিন রিডার যখন ওয়েব পেজে ইনপুট ফিল্ডের মুখোমুখি হয় তখন লেবেলটি পড়বে৷

এখানে একটি HTML লেবেলের জন্য সিনট্যাক্স রয়েছে:

<form>
	<label for="name">Name:</label><br/>
	<input type="text" id="name" name="name">
</form>

উপরের উদাহরণে, আমরা একটি ফর্ম তৈরি করেছি যা ব্যবহারকারীর নাম সংগ্রহ করে। আমরা একটি <label> ব্যবহার করেছি লেবেল যোগ করতে ট্যাগ করুন Name: ফর্মে লক্ষ্য করুন যে আমরা for নামে একটি বৈশিষ্ট্যও নির্দিষ্ট করেছি আমাদের <label>-এ উপাদান এই বৈশিষ্ট্যটি id এর সমান হওয়া উচিত input দ্বারা ব্যবহৃত বৈশিষ্ট্য উপাদান যার সাথে লেবেল লিঙ্ক করা হয়েছে, কারণ এটি তার সংশ্লিষ্ট লেবেলের সাথে একটি ফর্ম আবদ্ধ করে।

HTML ফর্ম উপাদান

থ্রি ব্রাদার্স কফি হাউসে ফিরে আসা যাক। এই টিউটোরিয়ালের শুরুতে, আমরা বলেছিলাম যে আমরা চারটি তথ্য সংগ্রহ করতে চেয়েছিলাম:ব্যবহারকারীর নাম, তাদের ইমেল ঠিকানা, তারা একজন গ্রাহক কিনা, এবং তারা কফি হাউসে যে বার্তা পাঠাতে চান।

এখন পর্যন্ত, আমরা দুটি ফর্ম ক্ষেত্র তৈরি করেছি:নাম ক্ষেত্র এবং ইমেল ক্ষেত্র। আসুন আলোচনা করি কিভাবে আমরা আমাদের বাকি ফর্ম তৈরি করতে পারি।

রেডিও বোতাম

রেডিও বোতাম হল একটি সাধারণ ধরনের ইনপুট যা HTML আকারে ব্যবহৃত হয়। একটি রেডিও বোতাম ব্যবহারকারীকে সীমিত সংখ্যক পছন্দ থেকে একটি মান নির্বাচন করতে দেয়। প্রায়শই, রেডিও বোতামগুলি এমন ফর্মগুলির জন্য ব্যবহৃত হয় যা লিঙ্গ তথ্য, বয়সের সীমা বা হ্যাঁ/না প্রতিক্রিয়া সংগ্রহ করে৷

একটি রেডিও বোতামের জন্য নিম্নোক্ত সিনট্যাক্স:

<input type="radio" name="radio_button">

আমাদের ফর্মে, আমরা ব্যবহারকারীকে জিজ্ঞাসা করতে চাই যে তারা থ্রি ব্রাদার্স কফি হাউসের গ্রাহক কিনা। এই কাজটি সম্পন্ন করতে আমরা একটি রেডিও বোতাম ব্যবহার করতে পারি। এখানে কোডটি আমরা এটি করতে ব্যবহার করব:

<form>
  <p>Are you a customer of the Three Brothers Coffee House?</p>
  <input type="radio" id="yes" name="customer" value="yes">
  <label for="yes">Yes</label><br />
  <input type="radio" id="no" name="customer" value="no">
  <label for="no">No</label><br />
</form>

এ ক্লিক করুন কোডটি চালানোর জন্য উপরের সম্পাদকে বোতাম।

আমাদের ব্যবহারকারী দুটি মানগুলির মধ্যে একটি জমা দিতে পারেন:yes অথবা no .

আসুন আমাদের কোড ভাঙ্গা যাক। প্রথমে, আমরা একটি <form> সংজ্ঞায়িত করি . তারপর আমরা <p> ব্যবহার করি ব্যবহারকারীর জন্য কিছু ব্যাখ্যামূলক পাঠ্য যোগ করতে ট্যাগ করুন।

পরের লাইনে, আমরা একটি রেডিও বোতাম তৈরি করি যার মান আছে yes . তারপরে আমরা এই বোতামটির জন্য একটি লেবেল তৈরি করি, যা "হ্যাঁ" পাঠ্য প্রদর্শন করে। এরপর, আমরা no মান সহ একটি রেডিও বোতাম তৈরি করি এবং সেই বোতামটির জন্য একটি লেবেল তৈরি করুন, যা "না" পাঠ্য প্রদর্শন করে৷

লক্ষ্য করুন যে আমাদের কোডে আমাদের রেডিও বোতামের একটি value আছে বৈশিষ্ট্য নির্দিষ্ট করা হয়েছে। এই মান হল ডেটা যা সার্ভারে পাঠানো হবে যখন ব্যবহারকারী ফর্ম জমা দেয়। সুতরাং, যদি ব্যবহারকারী "হ্যাঁ" রেডিও বোতামে ক্লিক করেন, মান yes সার্ভারে পাঠানো হবে।

HTML <textarea> উপাদান

আমাদের আরও একটি ইনপুট উপাদান আছে যা আমরা আমাদের ফর্মে যোগ করতে চাই:একটি পাঠ্য এলাকা। এখন পর্যন্ত, আমরা একজন ব্যবহারকারীর নাম, তাদের ইমেল ঠিকানা এবং তারা একজন গ্রাহক কিনা তা সংগ্রহ করেছি। এখন আমরা একটি ফর্ম উপাদান যোগ করতে চাই যা তাদের কফি হাউসে একটি বার্তা পাঠাতে দেয়৷

আমরা <textarea> ব্যবহার করে তা করতে পারি উপাদান, এই মত:

<form>
	<label for="message">Message:</label><br />
	<textarea id="message" name="message">
	What message do you want to send to the Three Brothers Coffee 	House?
	</textarea>
</form>

আমাদের কোডে, আমরা একটি label সংজ্ঞায়িত করে শুরু করি এটি "বার্তা:" মান প্রদর্শন করে।

আমরা তারপর <textarea> ব্যবহার করে একটি পাঠ্য এলাকা সংজ্ঞায়িত করি ট্যাগ আমরা এই পাঠ্য এলাকার জন্য দুটি বৈশিষ্ট্য নির্দিষ্ট করি:

1. id . ব্যবহারকারী তাদের প্রতিক্রিয়া জমা দেওয়ার পরে এটি আমাদের ফর্মের বিষয়বস্তু উল্লেখ করতে ব্যবহৃত হয়।
2. name . আমাদের ফর্মের বিষয়বস্তু জমা দেওয়ার জন্য এটি প্রয়োজনীয়৷
৷

অবশেষে, আমরা বার্তা যোগ করি What message do you want to send to the Three Brothers Coffee House? আমাদের খোলা এবং বন্ধ করার মধ্যে <textarea> ট্যাগ. এটি ডিফল্ট বার্তা যা ব্যবহারকারী দেখতে পাবে৷

আমাদের কোডের ফলাফল নিম্নরূপ:

এ ক্লিক করুন কোডটি চালানোর জন্য উপরের সম্পাদকে বোতাম।

এখন আমরা একটি টেক্সট এলাকা ক্ষেত্র আছে. ব্যবহারকারীরা কফি হাউসে একটি বার্তা জমা দিতে এই ক্ষেত্রটি ব্যবহার করতে পারেন৷

HTML submit বোতাম

এখন যেহেতু আমরা আমাদের ফর্মের বিষয়বস্তু সংজ্ঞায়িত করেছি, আমরা একটি submit যোগ করতে প্রস্তুত বোতাম এখানে submit এর সিনট্যাক্স বোতাম:

<input type="submit" value="Submit">

submit ফর্ম হ্যান্ডলারের কাছে ফর্মের বিষয়বস্তু জমা দিতে বোতামগুলি ব্যবহার করা হয়। (একটি ফর্ম হ্যান্ডলার সাধারণত ওয়েব সার্ভারের একটি পৃষ্ঠা যা ফর্মের বিষয়বস্তু প্রক্রিয়া করতে পারে।) submit ফর্ম হ্যান্ডলারে বোতাম লিঙ্ক। আপনাকে <form> ব্যবহার করে ফর্ম হ্যান্ডলার নির্দিষ্ট করতে হবে ট্যাগের action বৈশিষ্ট্য

ধরুন আমরা একটি submit যোগ করতে চাই কফি হাউসের জন্য আমাদের ওয়েব ফর্মের বোতাম। আমরা এই কোড ব্যবহার করে তা করতে পারি:

<form action="/post.php">
    <label for="name">Name:</label>
    <br/>
    <input type="text" id="name" name="name">
    <br />
    <br />
    <label for="email">Email:</label>
    <br />
    <input type="email" id="email" name="email">
    <br />

    <p>Are you a customer of the Three Brothers Coffee House?</p>
    <input type="radio" id="yes" name="customer" value="yes">
    <label for="yes">Yes</label>
    <br />
    <input type="radio" id="no" name="customer" value="no">
    <label for="no">No</label>
    <br /><br />

    <label for="message">Message:</label><br />
    <textarea id="message" name="message">
    What message do you want to send to the Three Brothers Coffee House?
    </textarea>

    <input type="submit" value="Submit">
</form>

আপনি দেখতে পাচ্ছেন, আমরা আমাদের ফর্মে একটি জমা বোতাম যুক্ত করেছি। আমরা একটি actionও উল্লেখ করেছি <form>-এ প্যারামিটার ট্যাগ এই প্যারামিটারটি ফর্মটিকে ফাইলের সাথে লিঙ্ক করে যা এর বিষয়বস্তু পরিচালনা করবে৷

একটি ওয়েব ফর্ম জমা দেওয়া

আপনি একটি HTML ফর্ম তৈরি করার পরে, আপনাকে একটি হ্যান্ডলার তৈরি করতে হবে যা ব্যবহারকারীরা আপনার ফর্মের মাধ্যমে জমা দেওয়া ডেটা প্রক্রিয়া করবে। <form> উপাদান দুটি বৈশিষ্ট্য প্রদান করে যা একটি সার্ভারে ফর্ম ডেটা পাঠাতে ব্যবহৃত হয়:action এবং method .

ফর্ম action বৈশিষ্ট্য

action বৈশিষ্ট্য ফর্ম হ্যান্ডলার কোডের অবস্থান সংজ্ঞায়িত করে। যখন আপনার ফর্ম জমা দেওয়া হয়—যখন ব্যবহারকারী submit ক্লিক করেন বোতাম—এটি সংগ্রহ করা ডেটা ফর্ম হ্যান্ডলারের কাছে পাঠানো হবে।

আমাদের উপরের উদাহরণে, যখন ফর্মটি জমা দেওয়া হয়, ফর্ম থেকে ডেটা পাঠানো হয় post.php পৃষ্ঠায় , যা আমাদের ফর্ম হ্যান্ডলার কোড অন্তর্ভুক্ত করে। এখানে action সহ একটি ফর্মের উদাহরণ বৈশিষ্ট্য সংজ্ঞায়িত:

<form action="/post.php">
</form>

যদি কোন action না থাকে বৈশিষ্ট্য উল্লেখ করা হয়েছে, ফর্মটি বর্তমান পৃষ্ঠায় জমা দেওয়া হয়েছে।

ফর্ম method বৈশিষ্ট্য

method attribute বলে যে HTTP পদ্ধতিটি একটি ফর্ম জমা দেওয়ার সময় ব্যবহার করা উচিত। ডিফল্টরূপে, ফর্মগুলি GET ব্যবহার করে পদ্ধতি, কিন্তু আপনি অন্য কোনো HTTP পদ্ধতিও ব্যবহার করতে পারেন, যেমন POST .

এখানে method ফর্মের একটি উদাহরণ অ্যাট্রিবিউট ইন অ্যাকশন:

<form action="/post.php" method="POST">
</form>

যখন এই ফর্মটি জমা দেওয়া হয়, এটি সংগ্রহ করা ডেটা একটি HTTP POST ব্যবহার করে সার্ভারে পাঠানো হবে পদ্ধতি (বিকল্পভাবে, আমরা যদি একটি GET পাঠাতে চাইতাম অনুরোধ, আমরা "GET" নির্দিষ্ট করতে পারতাম , অথবা শুধুমাত্র এটিকে ফাঁকা রেখেছি কারণ GET ডিফল্ট পদ্ধতি।)

বেশিরভাগ ক্ষেত্রে, আপনার HTTP POST ব্যবহার করা উচিত তথ্য জমা দেওয়ার পদ্ধতি। এর কারণ হল GET পদ্ধতিটি পৃষ্ঠার ঠিকানা ক্ষেত্রে ফর্ম ডেটা দৃশ্যমান করে তোলে। সুতরাং, যদি আমরা post.php-এ “নাম” নামক একটি ক্ষেত্র সহ একটি ফর্ম জমা দিতাম যাতে “পলিন” মান রয়েছে, তাহলে নিম্নলিখিতগুলি ওয়েবসাইটে জমা দেওয়া হত:

/post.php?name=Pauline

এটি ডেটা পাঠানোর একটি অনিরাপদ পদ্ধতি। GET আপনি যদি সংবেদনশীল তথ্য পরিচালনা করেন তবে পদ্ধতিটি কখনই ব্যবহার করা উচিত নয়৷

উপসংহার

ফর্মগুলি HTML এর একটি গুরুত্বপূর্ণ বৈশিষ্ট্য যা আপনাকে ব্যবহারকারীর ডেটা সংগ্রহ এবং প্রক্রিয়া করতে দেয়৷

এই টিউটোরিয়ালে, আমরা আলোচনা করেছি—একটি উদাহরণ ব্যবহার করে—এইচটিএমএল-এ ফর্মগুলির মূল বিষয়গুলি এবং কীভাবে আপনি আপনার প্রথম ওয়েব ফর্ম তৈরি করতে পারেন৷ এখন আপনি একজন বিশেষজ্ঞের মতো আপনার নিজস্ব HTML ফর্ম ডিজাইন এবং বিকাশ শুরু করতে প্রস্তুত!