HTML টিউটোরিয়াল: Part-8 (Form & Input ট্যাগ) episode_B

HTML form User দের তথ্য ইনপুটের জন্য ব্যবহৃত হয়। ফরম হচ্ছে এমন একটি এলাকা যেখানে বিভিন্ন ধরনের উপাদান ধারণ করে। ফরম উপাদান যেমনঃ ইউজারের প্রদানকৃত তথ্য (লেখা,ছবি,ড্রপডাউন মেনু, বিভিন্ন বাটন) একটি ফরম দিয়ে প্রকাশ করা হয়।

HTML ফরম এর অনেক form tag রয়েছে । তার মধ্যে input tag টি বহুল ব্যবহৃত। বিভিন্ন রকম Input সমূহ Attribute দ্বারা নির্দিষ্ট করা থাকে। গত পর্বে আলোচনা করেছিলাম text এবং password টাইপ input ট্যাগ নিয়ে। এই পর্বে বাকি ট্যাগ এবং ইনপুট টাইপ গুলো নিয়ে আলোচনা করবো।

Radio Button: এটি অনেক কিছুর মধ্যে ১টি বিষয় নির্বাচন করার ক্ষেত্রে ব্যবহৃত হয়। লক্ষ করুন, ফর্ম এর অনেকগুলো ইনপুট টাইপ আছে। গত পর্বে ২টি ইনপুট টাইপ ছিল “text” এবং “password”। এবার যে ইনপুট টাইপ নিয়ে কাজ করব সেটি হচ্ছে “radio”. চলুন কোড লিখি:

    <form>

    <input type=”radio” name=”sex” value=”male”/>Male

    </br>

    <input type=”radio” name=”Sex” value=”female”/>Female

    </form>

Check box: যখন কোন ইউজার কিছু নির্দিষ্ট বিষয় থেকে একাধিক বিষয়বস্তু নির্বাচন করতে পারবে সেক্ষেত্রে ব্যবহৃত হয়। এবার যে ইনপুট টাইপ নিয়ে কাজ করব সেটি হচ্ছে “cheakbox”. চলুন কোড লিখি:

    <form>

    I have a bike:

    <input type=”cheakbox” name=”vehicle” Value=”Bike”/>

    </br>

    I have a car:

    <input type=”cheakbox” name=”vehicle” Value=”car”/>

    </br>

    I have an airplane:

    <input type=”cheakbox” name=”vehicle” Value=”car”/>

    <form/>

Drop down list: শুরুতেই মনে রাখবেন ড্রপ ডাউন লিস্ট আপনি ইচ্ছা করে ফর্মের ভিতরেও তৈরি করবে পারবেন অথবা প্রয়োজন ভেদে ফর্মের বাহিরেও তৈরি করতে পারবেন। এককোথাও যখন যেখানে দরকার। ড্রপ ডাউন লিস্ট বা মেন্যু তৈরি করতে আপনাকে <select> এবং <option> ২টি ট্যাগের সমন্বয় করে কাজ করতে হবে। <select> ট্যাগ নিয়ে কাজ করার সময় আপনি Select অ্যাট্রিবিউট type=”select” নির্ধারণ করে নিতে পারেন। নিচের কোড গুলো খেয়াল করুন আমি কিভাবে লিখেছিঃ

    <h2> Select Your Country </h2>

    <select type=”select”>

    <option> Bangladesh </option>

    <option> India </option>

    <option> Nepal</option>

    <option>Pakistan </option>

    </select>

Option Group Tag: অপশন গ্রুপ ট্যাগ হচ্ছে কাজ হচ্ছে একই শ্রেণীর কোন নির্দিষ্ট বস্তুকে ক্যাটাগরি অনুযায়ী আলাদা আলাদা করে তাঁর ক্যাটাগরি নাম সহ ড্রপ ডাউন লিস্ট হিসেবে দেখানো। বেপারটি নিচের কোডটি নোট প্যাডে নিয়ে Save করে ব্রাউজার এ দেখুন তারপরে কোড এর প্রতিটি লাইন খেয়াল করুন…

    <h2> Select the option </h2>

    <select>

    <optgroup label=”Country”>

    <option> Bangladesh </option>

    <option> Japan </option>

    <option> Nepal </option>

    <option> Srilanka </option>

    <option> Maldip </option>

    </optgroup>

    

    <optgroup label=”Games”>

    <option> Football </option>

    <option> Cricket </option>

    <option> Hadudu </option>

    <option> Hockey </option>

    <option> Rugby </option>

    </optgroup>

    </select>

Fieldset: Fieldset এর কাজ হল আপনার ফর্ম ডাটায় যদি একজন ইউজার এর জন্য কয়েক ধরনের ইনফরমেশন থাকে সেগুলোকে আলাদাভাবে ক্যাটাগরি হিসেবে সাজিয়ে দেখানো। মনে করুন: একজন ইউজার এর ফর্মে Basic info, Log In Info, family Info, Education Info ইত্যাদি প্রদান করবে। তাহলে সব গুলোকে একটি ফর্মের মধ্যেই আলাদা ভাবে ক্যাপশন নিয়ে চিহ্নিত করে দেয়া যাবে। <fieldset> ট্যাগ নিয়ে কাজ করার সময় আপনাকে অবশ্যই<legend> ট্যাগের সাথে সমন্বয় করে কাজ করতে হবে।

    <form action=” “>

                <fieldset>

               <legend align=”center”>

                       Basic Info:

                            </legend>

                                        First Name:

               <input type =”text” name=”first_name”>

                                                    <br>

                                                    Last name:

                       <input type =”text” name=”last_name”>

                </fieldset>

                <fieldset>

                            <legend align=”center”>

                                        Log In Info:

                            </legend>

                                        User name:

                     <input  type=”text” name=”user” />

                                                    <br>

                                                    Password:

                    <input type=”password” name=”password” />

                </fieldset>

                <fieldset>

                            <legend align=”center”>

                                        Sex:

                            </legend>

                                <input type=”radio” name=”sex” value=”male” />Male

                                       </br>

                        <input type=”radio” name=”sex” value=”female”/>Female

                </fieldset>

    <br />

                <input type=”submit” name=”submit” value=”Submit Me!” />

    </form>

Note: উপরের <legend> ট্যাগগুলোতে align=”center” অ্যাট্রিবিউট ব্যবহার করে আমি লিজেন্ড এর মধ্যে থাকা লিখা / ভাল্যু গুলোকে মধ্য বিন্যাস ব center align করেছি। আপনি চাইলে align = left or right ও করে নিয়ে পারেন প্রয়োজন অনুযায়ী। এবার, উপরের কোড টুকুর আউটপুট ব্রাউজার এ প্রদর্শনের জন্য উইন্ডোজের Notepad অথবা Notepad++ সফটওয়্যারটি ওপেন করে কোডটুকু কপি-পেস্ট করুন। ফাইলের নাম দিন formfinal.html বা আপনার পছন্দ মতো এবং Save as type নির্বাচন করুন .html। এবার Save করুন।