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
