Skill

এইচটিএমএল ফর্ম (HTML Form)

1.2k

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


ফর্ম তৈরি করার জন্য মৌলিক ট্যাগ

HTML ফর্ম তৈরির জন্য মূলত <form> ট্যাগ ব্যবহার করা হয়। ফর্মের বিভিন্ন ইনপুট এলিমেন্টগুলো <form> ট্যাগের মধ্যে রাখা হয়।

ফর্মের মৌলিক গঠন

<form action="url" method="method">
    <!-- ইনপুট ফিল্ড -->
</form>

action: এই অ্যাট্রিবিউটটি নির্দেশ করে ডেটা কোথায় (URL) পাঠানো হবে।
method: ডেটা পাঠানোর পদ্ধতি নির্ধারণ করে। সাধারণত GET বা POST পদ্ধতি ব্যবহৃত হয়।


ইনপুট উপাদান (Input Elements)

টেক্সট ইনপুট

<form action="/submit" method="post">
    <label for="name">নাম:</label>
    <input type="text" id="name" name="name" placeholder="আপনার নাম লিখুন">
    <button type="submit">সাবমিট</button>
</form>

type="text": এটি সাধারণ টেক্সট ইনপুটের জন্য ব্যবহৃত হয়।
placeholder: ইনপুট ফিল্ডে নির্দেশনা প্রদর্শনের জন্য।

পাসওয়ার্ড ইনপুট

<label for="password">পাসওয়ার্ড:</label>
<input type="password" id="password" name="password">

type="password": এটি ইনপুটের ক্ষেত্রে অক্ষরগুলো লুকিয়ে রাখে।

ইমেল ইনপুট

<label for="email">ইমেইল:</label>
<input type="email" id="email" name="email" placeholder="example@example.com">

type="email": ইমেল এড্রেস ইনপুটের জন্য। এটি ডেটার বৈধতা যাচাই করে।


চেকবক্স এবং রেডিও বাটন

চেকবক্স

<label>
    <input type="checkbox" name="agree" value="yes">
    শর্তাবলী মেনে নিন
</label>

type="checkbox": এক বা একাধিক অপশন সিলেক্ট করার জন্য।

রেডিও বাটন

<label>
    <input type="radio" name="gender" value="male"> পুরুষ
</label>
<label>
    <input type="radio" name="gender" value="female"> মহিলা
</label>

type="radio": একাধিক অপশনের মধ্যে শুধুমাত্র একটি নির্বাচন করতে।


সাবমিট এবং রিসেট বাটন

সাবমিট বাটন

<button type="submit">সাবমিট</button>

রিসেট বাটন

<button type="reset">রিসেট</button>

type="reset": এটি ইনপুট ফিল্ডগুলো রিসেট করে ডিফল্ট মানে ফিরিয়ে নেয়।


ড্রপডাউন (Dropdown)

<label for="country">দেশ:</label>
<select id="country" name="country">
    <option value="bd">বাংলাদেশ</option>
    <option value="in">ভারত</option>
    <option value="pk">পাকিস্তান</option>
</select>

<select>: ড্রপডাউন তৈরি করতে ব্যবহৃত হয়।
<option>: প্রতিটি অপশন উপস্থাপন করে।


টেক্সট এরিয়া (Text Area)

<label for="message">মেসেজ:</label>
<textarea id="message" name="message" rows="4" cols="50"></textarea>

<textarea>: বড় পরিমাণ টেক্সট ইনপুটের জন্য ব্যবহৃত হয়।


উদাহরণ ফর্ম

<form action="/submit-form" method="post">
    <label for="username">ইউজারনেম:</label>
    <input type="text" id="username" name="username">

    <label for="email">ইমেইল:</label>
    <input type="email" id="email" name="email">

    <label for="password">পাসওয়ার্ড:</label>
    <input type="password" id="password" name="password">

    <label>
        <input type="checkbox" name="newsletter" value="subscribe">
        নিউজলেটার সাবস্ক্রাইব করুন
    </label>

    <button type="submit">সাবমিট</button>
</form>

সারাংশ

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

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


ফর্ম তৈরি করার জন্য মৌলিক ট্যাগ

HTML ফর্ম তৈরির জন্য মূলত <form> ট্যাগ ব্যবহার করা হয়। ফর্মের বিভিন্ন ইনপুট এলিমেন্টগুলো <form> ট্যাগের মধ্যে রাখা হয়।

ফর্মের মৌলিক গঠন

<form action="url" method="method">
    <!-- ইনপুট ফিল্ড -->
</form>

action: এই অ্যাট্রিবিউটটি নির্দেশ করে ডেটা কোথায় (URL) পাঠানো হবে।
method: ডেটা পাঠানোর পদ্ধতি নির্ধারণ করে। সাধারণত GET বা POST পদ্ধতি ব্যবহৃত হয়।


ইনপুট উপাদান (Input Elements)

টেক্সট ইনপুট

<form action="/submit" method="post">
    <label for="name">নাম:</label>
    <input type="text" id="name" name="name" placeholder="আপনার নাম লিখুন">
    <button type="submit">সাবমিট</button>
</form>

type="text": এটি সাধারণ টেক্সট ইনপুটের জন্য ব্যবহৃত হয়।
placeholder: ইনপুট ফিল্ডে নির্দেশনা প্রদর্শনের জন্য।

পাসওয়ার্ড ইনপুট

<label for="password">পাসওয়ার্ড:</label>
<input type="password" id="password" name="password">

type="password": এটি ইনপুটের ক্ষেত্রে অক্ষরগুলো লুকিয়ে রাখে।

ইমেল ইনপুট

<label for="email">ইমেইল:</label>
<input type="email" id="email" name="email" placeholder="example@example.com">

type="email": ইমেল এড্রেস ইনপুটের জন্য। এটি ডেটার বৈধতা যাচাই করে।


চেকবক্স এবং রেডিও বাটন

চেকবক্স

<label>
    <input type="checkbox" name="agree" value="yes">
    শর্তাবলী মেনে নিন
</label>

type="checkbox": এক বা একাধিক অপশন সিলেক্ট করার জন্য।

রেডিও বাটন

<label>
    <input type="radio" name="gender" value="male"> পুরুষ
</label>
<label>
    <input type="radio" name="gender" value="female"> মহিলা
</label>

type="radio": একাধিক অপশনের মধ্যে শুধুমাত্র একটি নির্বাচন করতে।


সাবমিট এবং রিসেট বাটন

সাবমিট বাটন

<button type="submit">সাবমিট</button>

রিসেট বাটন

<button type="reset">রিসেট</button>

type="reset": এটি ইনপুট ফিল্ডগুলো রিসেট করে ডিফল্ট মানে ফিরিয়ে নেয়।


ড্রপডাউন (Dropdown)

<label for="country">দেশ:</label>
<select id="country" name="country">
    <option value="bd">বাংলাদেশ</option>
    <option value="in">ভারত</option>
    <option value="pk">পাকিস্তান</option>
</select>

<select>: ড্রপডাউন তৈরি করতে ব্যবহৃত হয়।
<option>: প্রতিটি অপশন উপস্থাপন করে।


টেক্সট এরিয়া (Text Area)

<label for="message">মেসেজ:</label>
<textarea id="message" name="message" rows="4" cols="50"></textarea>

<textarea>: বড় পরিমাণ টেক্সট ইনপুটের জন্য ব্যবহৃত হয়।


উদাহরণ ফর্ম

<form action="/submit-form" method="post">
    <label for="username">ইউজারনেম:</label>
    <input type="text" id="username" name="username">

    <label for="email">ইমেইল:</label>
    <input type="email" id="email" name="email">

    <label for="password">পাসওয়ার্ড:</label>
    <input type="password" id="password" name="password">

    <label>
        <input type="checkbox" name="newsletter" value="subscribe">
        নিউজলেটার সাবস্ক্রাইব করুন
    </label>

    <button type="submit">সাবমিট</button>
</form>

সারাংশ

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

Promotion

Are you sure to start over?

Loading...