HTML ফর্মের অভিযান 
১. <form> ট্যাগ 
<form> ট্যাগটি হলো একটি কন্টেইনার যেখানে আপনি ইউজারের কাছ থেকে তথ্য নিতে পারেন। এর দুটি মূল বৈশিষ্ট্য আছে:
action
এখানে আপনি বলে দেন ফর্মের তথ্যগুলো কোথায় পাঠাতে চান (যেমন: কোন সার্ভার URL)
method
কীভাবে তথ্য পাঠাবেন তা নির্ধারণ করে:
GET: তথ্য URL-এ দৃশ্যমান থাকে (যেমন: সার্চ ফর্মে)POST: তথ্য গোপনে পাঠায় (যেমন: লগইন ফর্মে)
২. <input> এলিমেন্ট 
<input> হলো একটি HTML এলিমেন্ট যা বিভিন্নভাবে ব্যবহারকারীর তথ্য নিতে পারে। <input> ব্যবহারকারীর কাছ থেকে ডেটা সংগ্রহ করে ফর্মের মাধ্যমে প্রক্রিয়া করার জন্য।
২.১ টেক্সট ভিত্তিক ইনপুট 
<!-- সাধারণ টেক্সট -->
<input type="text" placeholder="আপনার নাম লিখুন">
- সাধারণ টেক্সট লেখার জন্য ব্যবহৃত হয়
placeholderদিয়ে ব্যবহারকারীকে নির্দেশনা দেওয়া যায়
<!-- পাসওয়ার্ড -->
<input type="password" placeholder="পাসওয়ার্ড">
- পাসওয়ার্ড লেখলে বুলেট পয়েন্ট (•••) দেখায়
- নিরাপত্তার জন্য টেক্সট লুকিয়ে রাখে
<!-- ইমেইল -->
<input type="email" required>
- ইমেইল ফরম্যাট ([email protected]) চেক করে
requiredদিলে খালি রাখা যায় না
<!-- নাম্বার -->
<input type="number" min="0" max="100">
- শুধু সংখ্যা লেখা যায়
minএবংmaxদিয়ে সীমা নির্ধারণ করা যায়
২.২ চেক করার ইনপুট 
<!-- চেকবক্স -->
<input type="checkbox" checked> মনে রাখুন
- একাধিক অপশন নির্বাচন করা যায়
checkedদিয়ে ডিফল্ট টিক দেওয়া যায়
<!-- রেডিও বাটন -->
<input type="radio" name="gender" value="male"> পুরুষ
<input type="radio" name="gender" value="female"> মহিলা
- একই
nameএর মধ্যে একটি মাত্র অপশন বাছাই করা যায় valueদিয়ে প্রতিটি অপশনের মান নির্ধারণ করা হয়
২.৩ ফাইল এবং মিডিয়া 
<!-- ফাইল আপলোড -->
<input type="file" accept=".pdf,.doc">
- ফাইল আপলোড করার জন্য
acceptদিয়ে কোন ধরনের ফাইল নেওয়া হবে তা নির্ধারণ করা যায়
২.৪ বাটন 
<!-- সাবমিট বাটন -->
<input type="submit" value="জমা দিন">
- ফর্মের তথ্য সার্ভারে পাঠানোর জন্য
valueদিয়ে বাটনের টেক্সট সেট করা যায়
<!-- রিসেট বাটন -->
<input type="reset" value="ফর্ম খালি করুন">
- সব ইনপুট ফিল্ড খালি করে দেয়
২.৫ তারিখ ও সময় 
<!-- তারিখ -->
<input type="date" min="2024-01-01">
- ক্যালেন্ডার থেকে তারিখ বাছাই করা যায়
minএবংmaxদিয়ে তারিখের সীমা নির্ধারণ করা যায়
<!-- সময় -->
<input type="time">
- ঘড়ি থেকে সময় নির্বাচন করা যায়
২.৬ অন্যান্য বিশেষ ইনপুট 
<!-- রং বাছাই -->
<input type="color">
- কালার পিকার থেকে রং বাছাই করা যায়
<!-- রেঞ্জ সিলেক্টর -->
<input type="range" min="0" max="100" step="10">
- স্লাইডার দিয়ে মান নির্বাচন করা যায়
stepদিয়ে কত করে বাড়বে তা নির্ধারণ করা যায়
<!-- হিডেন ফিল্ড -->
<input type="hidden" value="123">
- UI তে দেখা যায় না
- ফর্মের সাথে অতিরিক্ত তথ্য পাঠানোর জন্য
৩. <label> এলিমেন্ট সম্পর্কে বিস্তারিত
<label> হলো একটি HTML এলিমেন্ট যা ইনপুট ফিল্ডের সাথে টেক্সট লেবেল যুক্ত করে। এটি দুইভাবে ব্যবহার করা যায়:
৩. ১ ইনপুটের সাথে for অ্যাট্রিবিউট দিয়ে সংযুক্তকরণ 
<label for="name">আপনার নাম:</label>
<input type="text" id="name">
- লেবেলে ক্লিক করলে ইনপুট ফোকাস হয়
forএর মান ইনপুটেরidএর সাথে মিলতে হবে
৩. ২. ইনপুটকে লেবেলের ভিতরে রাখা 
<label>
ইমেইল ঠিকানা:
<input type="email">
</label>
- এক্ষেত্রে
forঅ্যাট্রিবিউট লাগে না
লেবেল ব্যবহারের সুবিধা 
- ব্যবহারকারী বান্ধব: ফর্মের ইনপুট ফিল্ডের সাথে স্পষ্ট টেক্সট সংযুক্ত করে।
- মোবাইলে সুবিধা: টাচস্ক্রিন ডিভাইসে বড় এরিয়া পাওয়া যায়।
- অ্যাক্সেসিবিলিটি: স্ক্রিন রিডার ব্যবহারকারীদের জন্য সহায়ক।
- সাজানো সহজ: ফর্মের ফিল্ডগুলো সুন্দরভাবে সাজানো যায়।
- ইনপুট ফোকাস: লেবেলে ক্লিক করলে ইনপুট ফোকাস হয়।
উদাহরণ 
<form>
<label for="username">ইউজারনেম:</label>
<input type="text" id="username" required>
<label>
পাসওয়ার্ড:
<input type="password">
</label>
<label for="agree">
<input type="checkbox" id="agree">
শর্তাবলী মেনে নিচ্ছি
</label>
</form>
৪.<select> এবং <option> এলিমেন্ট সম্পর্কে
<select> এলিমেন্ট একটি ড্রপডাউন মেনু তৈরি করে, যেখানে <option> এলিমেন্টগুলো বিভিন্ন নির্বাচনযোগ্য অপশন হিসেবে কাজ করে।
মৌলিক ব্যবহার:
<select name="city">
<option value="dhaka">ঢাকা</option>
<option value="chittagong">চট্টগ্রাম</option>
<option value="sylhet">সিলেট</option>
</select>
বিভিন্ন বৈশিষ্ট্য:
৪.১. ডিফল্ট নির্বাচন:
<select name="division">
<option value="">বিভাগ নির্বাচন করুন</option>
<option value="dhaka" selected>ঢাকা</option>
<option value="khulna">খুলনা</option>
</select>
selectedঅ্যাট্রিবিউট দিয়ে ডিফল্ট অপশন সেট করা যায়
৪.২. অপশন গ্রুপ করা:
<select>
<optgroup label="বিভাগীয় শহর">
<option>ঢাকা</option>
<option>চট্টগ্রাম</option>
</optgroup>
<optgroup label="জেলা শহর">
<option>কুমিল্লা</option>
<option>নোয়াখালী</option>
</optgroup>
</select>
৪.৩. Multiple option selection:
<select multiple>
<option>বাংলা</option>
<option>ইংরেজি</option>
<option>হিন্দি</option>
</select>
multipleঅ্যাট্রিবিউট দিয়ে একাধিক অপশন নির্বাচন করা যায়- Ctrl/Cmd চেপে একাধিক নির্বাচন করতে হয়
৪.৪. নির্দিষ্ট সংখ্যক অপশন দেখানো:
<select size="3">
<option>প্রথম</option>
<option>দ্বিতীয়</option>
<option>তৃতীয়</option>
<option>চতুর্থ</option>
</select>
sizeঅ্যাট্রিবিউট দিয়ে কতটি অপশন একসাথে দেখাবে তা নির্ধারণ করা যায়
৪.৫. Disable অপশন:
<select>
<option disabled>নির্বাচন করুন</option>
<option>বাংলাদেশ</option>
<option disabled>ভারত</option>
</select>
disabledঅ্যাট্রিবিউট দিয়ে নির্দিষ্ট অপশন নির্বাচন করা যাবে না
Example:
<label for="transport">যানবাহন নির্বাচন করুন:</label>
<select id="transport" name="transport" required>
<optgroup label="জমিন">
<option value="car">গাড়ি</option>
<option value="bus">বাস</option>
<option value="train">ট্রেন</option>
</optgroup>
<optgroup label="আকাশ">
<option value="plane">বিমান</option>
<option value="helicopter">হেলিকপ্টার</option>
</optgroup>
</select>
এই এলিমেন্টগুলোর সুবিধা:
- স্থান সাশ্রয়ী (Dropdown Menu তে ব্যাবহার হয়)
- User Friendly
- নির্দিষ্ট অপশন থেকে select করা যায়
- মোবাইল ডিভাইসে সহজে ব্যবহার করা যায়
৫. <textarea> এলিমেন্ট সম্পর্কে বিস্তারিত
<textarea> হলো একটি HTML এলিমেন্ট যা বড় আকারের টেক্সট লেখার জন্য ব্যবহৃত হয়। এটি একাধিক লাইন টেক্সট লেখার সুবিধা দেয়।
<textarea name="description">
এখানে আপনার বর্ণনা লিখুন...
</textarea>
৫.১. সাইজ নির্ধারণ:
<textarea rows="4" cols="50">
<!-- rows = লাইন সংখ্যা -->
<!-- cols = প্রতি লাইনে ক্যারেক্টার সংখ্যা -->
</textarea>
৫.২. প্লেসহোল্ডার টেক্সট:
<textarea placeholder="আপনার মতামত এখানে লিখুন..."></textarea>
৫.৩. নির্দিষ্ট সীমা:
<textarea maxlength="200" minlength="50">
<!-- সর্বোচ্চ 200 এবং সর্বনিম্ন 50 ক্যারেক্টার -->
</textarea>
৫.৪. রিসাইজ নিয়ন্ত্রণ:
<textarea style="resize: none">
<!-- রিসাইজ করা যাবে না -->
</textarea>
<textarea style="resize: vertical">
<!-- শুধু উপর-নিচে রিসাইজ -->
</textarea>
<textarea style="resize: horizontal">
<!-- শুধু ডান-বাম রিসাইজ -->
</textarea>
Example
<label for="feedback">আপনার মূল্যবান মতামত:</label>
<textarea
id="feedback"
name="feedback"
rows="5"
cols="50"
placeholder="আপনার মতামত এখানে লিখুন..."
required
maxlength="500"
></textarea>
বিশেষ বৈশিষ্ট্য:
readonly: শুধু পড়ার জন্যdisabled: অক্ষম করার জন্যwrap="hard": লাইন ব্রেক নিয়ন্ত্রণের জন্যspellcheck: বানান চেক করার জন্য
ব্যবহারের ক্ষেত্রসমূহ:
- ব্লগ পোস্ট লেখা
- কমেন্ট বক্স
- বায়োডাটা লেখা
- ফিডব্যাক ফর্ম
- মেসেজ বক্স
- বর্ণনামূলক তথ্য
<textarea> এর সুবিধা:
- বড় টেক্সট লেখার জন্য উপযুক্ত
- সহজে রিসাইজ করা যায়
- স্ক্রল করে পড়া যায়
- মাল্টিপল লাইন সাপোর্ট করে
- ফরম্যাটিং বজায় রাখে
৬. Button` এলিমেন্ট সম্পর্কে বিস্তারিত
<button> হলো একটি HTML এলিমেন্ট যা ইন্টারেক্টিভ বাটন তৈরি করে। এটি ব্যবহারকারীর ক্লিক ইভেন্ট হ্যান্ডল করতে ব্যবহৃত হয়।
৬.১. Normal Button Type:
<!-- সাবমিট বাটন -->
<button type="submit">ফর্ম জমা দিন</button>
<!-- রিসেট বাটন -->
<button type="reset">ফর্ম রিসেট</button>
<!-- সাধারণ বাটন -->
<button type="button">ক্লিক করুন</button>
৬.২. বাটনে ছবি ও আইকন যোগ:
<button>
<img src="icon.png" alt="আইকন">
ছবি সহ বাটন
</button>
<button>
<i class="fas fa-save"></i>
সেভ করুন
</button>
৬.৩. বাটনের বিভিন্ন অবস্থা:
<!-- disable বাটন -->
<button disabled>এখন ক্লিক করা যাবে না</button>
<!-- অটোফোকাস বাটন -->
<button autofocus>স্বয়ংক্রিয় ফোকাস</button>
৬.৪. বিভিন্ন ধরনের বাটন:
<!-- প্রাথমিক বাটন -->
<button class="primary">সাইন আপ</button>
<!-- সেকেন্ডারি বাটন -->
<button class="secondary">বাতিল</button>
<!-- ডেঞ্জার বাটন -->
<button class="danger">মুছে ফেলুন</button>
ব্যবহারের ক্ষেত্রসমূহ:
- ফর্ম সাবমিশন
- পপ-আপ খোলা
- ডায়নামিক কনটেন্ট লোড
- AJAX রিকোয়েস্ট
- ন্যাভিগেশন
- টগল ফাংশন
একটি পূর্ণাঙ্গ উদাহরণ:
<form>
<input type="text" placeholder="ইমেইল">
<input type="password" placeholder="পাসওয়ার্ড">
<div class="button-group">
<button type="submit" class="primary">
<i class="fas fa-sign-in"></i>
লগইন
</button>
<button type="reset" class="secondary">
ফর্ম রিসেট
</button>
</div>
</form>
এভাবে <button> এলিমেন্ট ব্যবহার করে আপনি আকর্ষণীয় ও ইন্টারেক্টিভ ইউজার ইন্টারফেস তৈরি করতে পারেন।
৭. fieldset & legend এর বিস্তারিত🌟
৭.১. <fieldset>: ফর্মের অংশ গ্রুপ করার জন্য 
<fieldset>ব্যবহার করে ফর্মের বিভিন্ন ইনপুট ফিল্ডগুলোকে একটি নির্দিষ্ট গ্রুপে সাজানো যায়। এটি ফর্মের বিভিন্ন অংশকে যুক্ত করে একটি বক্সের মধ্যে রাখে।
Code Example:
<fieldset>
<legend>ব্যক্তিগত তথ্য</legend>
<label for="name">নাম:</label>
<input type="text" id="name">
<label for="email">ইমেইল:</label>
<input type="email" id="email">
</fieldset>
- এখানে
<fieldset>ব্যবহার করে নাম ও ইমেইল ইনপুট ফিল্ডগুলোকে একটি গ্রুপে রাখা হয়েছে। <legend>দিয়ে গ্রুপের Title দেওয়া হয়েছে: “ব্যক্তিগত তথ্য”।
৭.২. <legend>: গ্রুপের Title✍️
<legend>ট্যাগটি<fieldset>এর ভিতরে ব্যবহার করা হয় এবং এটি গ্রুপের শিরোনাম বা টাইটেল প্রদান করে।
Code Example:
<fieldset>
<legend>যোগাযোগ তথ্য</legend>
<label for="phone">ফোন নম্বর:</label>
<input type="tel" id="phone">
</fieldset>
- এখানে
<legend>ট্যাগটি ব্যবহার করা হয়েছে “যোগাযোগ তথ্য” Title দেওয়ার জন্য।
৮. <output> এলিমেন্ট**
<output>: ফর্মের গণনার বা ইনপুটের ফলাফল প্রদর্শনের জন্য ব্যবহৃত হয়। এটি ব্যবহারকারীর দেওয়া ইনপুট বা গণনার ফলাফল দেখানোর জন্য ।
৯. Attributes for Form Elements
৯.১. name: ইনপুট ফিল্ডের নাম
- ব্যবহার: ফর্মের ইনপুট ফিল্ডের জন্য একটি নাম প্রদান করা হয়, যা সার্ভারে পাঠানো ডেটার অংশ হিসেবে ব্যবহৃত হয়।
- উদাহরণ:
<input type="text" name="username">
- বিস্তারিত: ফর্মের
nameঅ্যাট্রিবিউট গুরুত্বপূর্ণ, কারণ এটি তথ্য সংগ্রহ করার জন্য ব্যবহার হয়। ফর্মের সব ইনপুটেরnameঅ্যাট্রিবিউট সার্ভারের কাছে সঠিকভাবে পাঠানো হয়।
৯.২. id: অনন্য শনাক্তকারী
- ব্যবহার: প্রতিটি ইনপুট ফিল্ডের একটি অনন্য শনাক্তকারী হিসাবে কাজ করে, যা লেবেল বা স্ক্রিপ্টের মাধ্যমে বিশেষভাবে চিহ্নিত করা যায়।
- উদাহরণ:
<input type="text" id="username">
<label for="username">ইউজারনেম</label>
- বিস্তারিত:
idএকমাত্র থাকতে পারে, এটি ফর্মের অন্যান্য এলিমেন্ট থেকে আলাদা করে ইনপুট ফিল্ডটিকে শনাক্ত করে। এটি স্ক্রিপ্ট বা CSS এর মাধ্যমে ফিল্ডে স্টাইল বা আচরণ নির্ধারণ করতে সাহায্য করে।
৯.৩. value: ডিফল্ট মান
- ব্যবহার: ইনপুট ফিল্ডে ডিফল্ট মান প্রদান করার জন্য ব্যবহৃত হয়।
- উদাহরণ:
<input type="text" value="আমার নাম">
- বিস্তারিত:
valueঅ্যাট্রিবিউটটি একটি ডিফল্ট মান প্রদান করে, যা ফর্মটি প্রথমে লোড হওয়ার সময় প্রদর্শিত হয়। ব্যবহারকারী যদি এই ফিল্ডে কিছু লেখে, তাহলে এটি পরিবর্তিত হয়।
৯.৪. placeholder: ইনপুট ফিল্ডের নির্দেশনা
- ব্যবহার: ইনপুট ফিল্ডে এমন একটি পাঠ্য প্রদর্শন করতে ব্যবহৃত হয় যা ইনপুট ফিল্ড খালি থাকলে ব্যবহারকারীকে নির্দেশনা দেয়।
- উদাহরণ:
<input type="text" placeholder="আপনার নাম লিখুন">
- বিস্তারিত: এটি বিশেষভাবে ব্যবহারকারীকে নির্দেশ দেয় কী ধরনের ডেটা ইনপুট করতে হবে।
placeholderএর মান ইনপুট করা না হলে ফিল্ডের মধ্যে প্রদর্শিত থাকে এবং ফিল্ডে কিছু লেখা শুরু হলে অদৃশ্য হয়ে যায়।
৯.৫. required: বাধ্যতামূলক ইনপুট
- ব্যবহার: এটি ইনপুট ফিল্ডটি বাধ্যতামূলক করে তোলে, মানে ব্যবহারকারী যদি এই ফিল্ডটি পূর্ণ না করে, তবে ফর্ম সাবমিট হবে না।
- উদাহরণ:
<input type="email" required>
- বিস্তারিত: এটি ইউজারের কাছে নিশ্চিত করে যে ফর্মটি পূর্ণতা পাবে, অন্যথায় সাবমিট হবে না। এটি নিরাপত্তা এবং সঠিক তথ্য সংগ্রহের জন্য গুরুত্বপূর্ণ।
৯.৬. disabled: নিষ্ক্রিয় ইনপুট
- ব্যবহার: ইনপুট ফিল্ডটিকে নিষ্ক্রিয় বা অপ্রাপ্য করে তোলে, ফলে ব্যবহারকারী এই ফিল্ডে কিছু লিখতে পারবে না।
- উদাহরণ:
<input type="text" disabled>
- বিস্তারিত: এটি ব্যবহৃত হয় যখন ফর্মের কিছু অংশ অস্থায়ীভাবে নিষ্ক্রিয় করতে হয়, যেমন যখন কিছু তথ্য কেবলমাত্র পড়তে হবে, কিন্তু সম্পাদনা করা যাবে না।
৯.৭. readonly: শুধুমাত্র পঠনযোগ্য ইনপুট
- ব্যবহার: ইনপুট ফিল্ডটিকে শুধুমাত্র পঠনযোগ্য করে তোলে, ব্যবহারকারী এর মান পরিবর্তন করতে পারবে না, কিন্তু এটি দেখতে পারবে।
- উদাহরণ:
<input type="text" value="এই তথ্য পরিবর্তন করা যাবে না" readonly>
- বিস্তারিত: এটি বিশেষভাবে ব্যবহৃত হয় যখন কিছু তথ্য কেবল প্রদর্শন করতে হয়, কিন্তু ব্যবহারকারী সেই তথ্য পরিবর্তন করতে পারবে না।
৯.৮. maxlength: সর্বোচ্চ অক্ষরের সংখ্যা
- ব্যবহার: ইনপুট ফিল্ডে সর্বোচ্চ কতটি অক্ষর প্রবেশ করা যাবে তা সীমাবদ্ধ করে।
- উদাহরণ:
<input type="text" maxlength="10">
- বিস্তারিত: এটি ফিল্ডে সর্বোচ্চ অক্ষরের সংখ্যা নির্ধারণ করে, যেমন ইউজারের নাম বা ফোন নম্বরের জন্য একটি নির্দিষ্ট সীমা দেওয়া যেতে পারে।
৯.৯. pattern: নির্ধারিত প্যাটার্ন
- ব্যবহার: ইনপুট ফিল্ডে নির্দিষ্ট প্যাটার্ন অনুযায়ী ডেটা প্রবেশ করার জন্য ব্যবহার করা হয়। এটি regular expressions (regex) ব্যবহার করে ইনপুট ভ্যালিডেশন করে।
- উদাহরণ:
<input type="text" pattern="[A-Za-z]{3,}">
- বিস্তারিত:
patternঅ্যাট্রিবিউট ইনপুটের জন্য একটি নির্দিষ্ট নিয়ম বা প্যাটার্ন নির্ধারণ করে, যেমন এটি শুধুমাত্র অক্ষর (লেটার) গ্রহণ করতে পারে অথবা ফোন নম্বরের জন্য একটি নির্দিষ্ট প্যাটার্ন অনুসরণ করতে পারে।
এই attributes ফর্মের প্রতিটি ইনপুট ফিল্ডের আচরণ এবং কার্যকারিতা নিয়ন্ত্রণ করে, যেমন তথ্য যাচাই, ফিল্ডের শর্তাবলী, এবং ব্যবহারকারীর জন্য কিভাবে প্রদর্শিত হবে তা। এগুলি ফর্মের পারফরম্যান্স এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে সহায়ক।
এখানে একটি সম্পূর্ণ HTML ফর্মের উদাহরণ দেওয়া হল যেখানে বিভিন্ন ফর্ম এলিমেন্ট এবং অ্যাট্রিবিউটস ব্যবহার করা হয়েছে:
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ফর্ম উদাহরণ</title>
</head>
<body>
<h2>নিবন্ধন ফর্ম</h2>
<form action="/submit" method="POST">
<!-- নাম ইনপুট -->
<label for="name">আপনার নাম:</label>
<input type="text" id="name" name="name" placeholder="আপনার নাম লিখুন" required>
<br><br>
<!-- ইমেইল ইনপুট -->
<label for="email">ইমেইল ঠিকানা:</label>
<input type="email" id="email" name="email" placeholder="আপনার ইমেইল লিখুন" required>
<br><br>
<!-- পাসওয়ার্ড ইনপুট -->
<label for="password">পাসওয়ার্ড:</label>
<input type="password" id="password" name="password" placeholder="পাসওয়ার্ড লিখুন" required>
<br><br>
<!-- ফোন নম্বর ইনপুট -->
<label for="phone">ফোন নম্বর:</label>
<input type="tel" id="phone" name="phone" placeholder="আপনার ফোন নম্বর লিখুন" required>
<br><br>
<!-- লিঙ্গ নির্বাচন -->
<label>লিঙ্গ:</label><br>
<input type="radio" id="male" name="gender" value="male">
<label for="male">পুরুষ</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">মহিলা</label><br>
<br>
<!-- চেকবক্স -->
<label>
<input type="checkbox" id="agree" name="agree" required>
আমি শর্তাবলী মেনে নিচ্ছি
</label>
<br><br>
<!-- ফাইল আপলোড -->
<label for="file">ফাইল আপলোড করুন:</label>
<input type="file" id="file" name="file" accept=".pdf,.doc,.docx">
<br><br>
<!-- বার্তা ইনপুট -->
<label for="message">আপনার বার্তা:</label><br>
<textarea id="message" name="message" rows="4" cols="50" placeholder="আপনার বার্তা লিখুন"></textarea>
<br><br>
<!-- সাবমিট বাটন -->
<input type="submit" value="ফর্ম জমা দিন">
<br><br>
<!-- রিসেট বাটন -->
<input type="reset" value="ফর্ম রিসেট করুন">
</form>
</body>
</html>
কোডের ব্যাখ্যা:
<form>: ফর্মের মূল কন্টেইনার।actionঅ্যাট্রিবিউটটি ডেটা কোথায় পাঠানো হবে তা নির্ধারণ করে এবংmethodঅ্যাট্রিবিউটটি GET বা POST পদ্ধতি ব্যবহার করে।<input>: বিভিন্ন ইনপুট ফিল্ড যেমন নাম, ইমেইল, পাসওয়ার্ড, ফোন নম্বর এবং ফাইল আপলোডের জন্য।<label>: ইনপুট ফিল্ডগুলোর সাথে সম্পর্কিত টেক্সট লেবেল, যা ব্যবহারকারীকে জানাতে সাহায্য করে কী ধরনের তথ্য ইনপুট করা উচিত।<textarea>: বড় টেক্সট ইনপুট, যা ব্যবহারকারীকে বড় আকারের বার্তা টাইপ করার সুযোগ দেয়।<input type="radio">: লিঙ্গ নির্বাচন করার জন্য রেডিও বাটন ব্যবহার করা হয়েছে।<input type="checkbox">: শর্তাবলী মেনে নেওয়ার জন্য চেকবক্স ব্যবহৃত হয়েছে।<input type="file">: ফাইল আপলোডের জন্য ইনপুট।<input type="submit">: ফর্ম সাবমিট করার জন্য।<input type="reset">: ফর্ম রিসেট করার জন্য।
এই ফর্মটি বিভিন্ন ইনপুট ফিল্ড এবং কার্যকারিতা দিয়ে তৈরি, যা একটি সাধারণ নিবন্ধন ফর্মের জন্য উপযুক্ত।
খুব ভালো লাগল শুনে
আপনাদের জন্য কিছু করতে পেরে খুশি!