HTML টিউটরিয়াল : ফরম ডিজাইন

জাভাস্ক্রিপ্ট টিউটরিয়াল লিখতে গিয়ে একটু হোচট খেলাম এই দেখে যে, HTML এর ফরম ডিজাইনের উপর এখনো টিউটরিয়াল লেখা হয় নি। আমরা অনেক সময় টেক্সটবক্স, বাটন,চেক বক্স, অপশন ইত্যাদি নিয়ে কাজ করি। এগুলোর ডিজাইন বানানো হয় HTML আর সিএসএস দিয়ে। আজ আমরা সহজ সরল ভাষায় ফরম ডিজানের পদ্ধতি নিয়ে কথা বলবো।
১. টেক্সট বক্স
২. টেক্সট এরিয়া
৩. রেডিও বাটন
৪. চেক বক্স

১. টেক্সট বক্স (এক লাইন)

টেক্সট বক্সই প্রধানতম ইলিমেন্ট। এর মাধ্যমে সাধারনত ইউজারের কাছ থেকে ডাটা নেয়া হয়। নিচের কোডের মাধ্যমে একটি টেক্সট বক্স তৈরী করা হয়।

<input type="text" name="mail" size="25">

input

এই ট্যাগের মাধ্যমে বিভিন্ন ফর্ম অবজেক্ট কল করা হয়।

type=”text”

বিভিন্ন ধরনের অবজেক্টের মধ্যে টেক্স অবজেক্টটির জন্য type=”text” লেখা হয়।

size=”25″

২৫ টি অক্ষরের ধারন ক্ষমতা সম্পন্ন টেক্সট বক্স এটি। অবজেক্টের ধারন ক্ষমতা অনুসারে এর সাইজ দিতে হবে। নামের একটি অংশের জন্য সাইজ ১৫ এবং ঠিকানার জন্য আরও বড় সাইজের টেক্সট বক্সের প্রয়োজন হতে পারে।

name

টেক্সট বক্সের নামটির মাধ্যমে টেক্সট বক্সটিকে কল করা হতে পারে। কোন একটি ডাটা ইনপুট দিলে তা name এ সংগ্রিহিত হয়। যদি name=fname হয়, ইউজার যদি Karim ইনপুট দেয় তাহলে
fname=Karim হবে।

২. টেক্সট এরিয়া

একাধিক লাইনের টেক্সট লেখতে টেক্সটএরিয়া ব্যবহার করা হয়। টেক্সএরিয়ার জন্য input type=”…” ব্যবহারের দরকার হয় না। নিচের টেক্সএরিয়ার জন্য নিচের কোড লিখতে হয়।

<textarea cols="50" rows="4" name="comment"></textarea>
কলাম ও রো এর মান পরিবর্তনের মাধ্যমে এর সাইজ পরিবর্তন করা হয়। সিএসএস ব্যবহার করে অবশ্য আরও ভাল ডিজাইনের টেক্সটএরিয়া বানানো যায়। পরবর্তিতে একটি টিউটরিয়ালের মাধ্যমে ফর্ম ডিজাইনে সিএসএস এর ব্যবহার দেখাবো।

৩. রেডিও বাটন

বিভিন্ন জরিপ বা একাধিক অপশন থেকে একটি সিলেক্ট করতে রেডিও বাটন ব্যবহার করা হয়।
১.

১.<input type="radio" name="choices" value="choice1">
একই গ্রুপের সবগুলো বাটনের একই নাম থাকতে হয়। ভিন্ন নাম ব্যবহার করলে তারা ভিন্ন গ্রুপ হিসেবে আচরণ করবে। যেমন-

<form name=myform>
<input type="radio" name=myradio1 value="1">one
<input type="radio" name=myradio2 value="2">two
<input type="radio" name=myradio3 value="3">three
</form>

one

two

three

কোন একটি বাটনকে আগে থেকে সিলেক্ট করে রাখতে তার শেষে checked কথাটি লিখে দিতে হবে।আর কোন বাটনকে নিস্ক্রিয় রাখতে disabled লিখে দিতে হবে।

<form name=myform>
<input type="radio" name=myradio value="1" disabled>one
<input type="radio" name=myradio value="2" checked disabled>two
<input type="radio" name=myradio value="3" disabled>three
</form>

one

two

three

৪. চেক বক্স

চেক বক্সের জন্য অনেকটা রেডিও বাটনের মতোই কোড লিখতে হয়।

<form name=myform>
<input type="checkbox" name=mybox value="1" >one
<input type="checkbox" name=mybox value="2" >two
<input type="checkbox" name=mybox value="3" >three
</form>

one

two

three

একই ভাবে কোর বাটনকে চেক করা, নিস্ক্রিয় করাও যায়।

HTML টিউটরিয়াল সূচি-পত্র

HTMLপর্ব- এক: আমার প্রথম ওয়েব সাইট (প্রাথমিক ধারণা)

HTMLপর্ব- দুই: রঙের ব্যবহার

HTMLপর্ব- তিন: ব্যাকগ্রাউন্ড এ রঙের ব্যবহার

HTMLপর্ব- চার: প্যারাগ্রাফ এর ব্যবহার ও সুবিধা-১

HTMLপর্ব-পাঁচ: প্যারাগ্রাফ এর ব্যবহার ও সুবিধা-২

HTML পর্ব-৬ HTML এ Font ট্যাগের ব্যবহার

HTML টিউটরিয়াল : ফরম ডিজাইন

7 thoughts on “HTML টিউটরিয়াল : ফরম ডিজাইন”

  1. রাজীব বিশ্বাস

    ভাইয়া, HTML দিয়ে Multiple Upload Button কিভাবে করতে হয়? CSS দিয়ে কি এটা করা যায়?

    1. @নিঝুমদ্বীপ, জুমলাতে আসলেই অনেক সুন্দর সুন্দর ওয়েব সাইট বানানো যায়। ওয়ার্ডপ্রেস শুধু ব্লগের জন্য ভাল এবং সহজ। কিন্তু নিউজ সাইটের জন্য এবং বিজনেজ ওয়েবসাইটের অনেক কিছুই ওয়ার্ডপ্রেসে করতে গেলে এত বেশি প্লাগইন লাগে যে সাইট অনেক শ্লথ হয়ে যায়। আমি অবশ্য জুমলা দিয়ে কিছু একটা করতে চেস্টা করছি।

  2. tanvir akanda

    অসাধারণ পোস্ট ।এইটা একেবারে নতুন শিখলাম।অসংখ্য ধন্যবাদ

    1. @tanvir akanda, আমিও এক সময় নতুন শিখেছিলাম। না জানা থাকলে তখন এইচটিএমএলের ফরম ডিজাইনটাকে অনেক কঠিন মনে হয়। কিছু ক্ষন পরে ফরম দিয়ে কাজ করার উপর একটি ভাল পোস্ট আসবে। সেখানে ফরম দিয়ে জাভাস্ক্রিপ্টের ব্যবহার করাও শিখানো হবে। ভাল থাকুন।

      1. tanvir akanda

        @টিউটো, ধন্যবাদ।জাভা স্ক্রিপ্টের কিছুই আমি জানি না এই সাইটে পিএইচপি মাইএসকিউএল,জুমলা সম্পর্কেও কোন পোস্ট নাই ।ক্রমান্বয়ে ওই গুলো পাব আশা করি।

      2. @টিউটো, আমি জুমলা নিয়ে লেখা শুরু করবো ভাবছি। আমাদের আসলে আরও কিছু লেখক দরকার, সবাই মিলে লেখালেখি করলে আরও ভাল কিছু করা যেতো। পারমর্শের জন্য ধন্যবাদ।

Comments are closed.