ওয়েব ডিজাইন Part-14(HTML Form) - প্রিয়লেখা

ওয়েব ডিজাইন Part-14(HTML Form)

Md. Sajal
Published: September 8, 2016

HTML Form

সাইটের ভিজিটরদের তথ্য নেয়ার জন্য Form  ব্যবহার হয়। বিশেষ করে ডাইনামিক এবং ডাটাবেজ নির্ভর ওয়েব সাইটের লগ ইন সিস্টেম, ভোটিং সিস্টেম, কন্টাক্ট ফর্ম সহ ইউজার ইনফরমেশন সংগ্রহ করার জন্য HTML Form ব্যবহৃত হয়ে থাকে। একটি HTML Form  বেশ কিছু উপাদানের সমন্বয়ে গঠিত হয়। এগুলো হচ্ছে –

. Textbox
. Textarea
. RadioButton
. SubmitButton
. Checkbox
. Dropdown list

form এর একটা আবশ্যিক এট্রিবিউট হচ্ছে action. এখানে Form টি সাবমিট করলে কোন File  ফর্মের ডেটাগুলি প্রসেস করে নিয়ে যাবে সেই ফাইলটির নাম দিতে হই।

আর method এট্রিবিউট দিয়ে কোন পদ্ধতিতে ডেটা যাবে সেটা বলে দেয়া হয় যেমন আমি দিয়েছি post. post মেথডে ডেটা পাঠালে ডেটা লুকানো থাকে তবে যেখানে ডেটা লুকানোর দরকার নেই সেখানে get নামের অপর মেথডটি ব্যবহার করা হয় (method=”get”)। যেমন Google search এ get method ব্যবহার করেছে কারন এখানে ডেটা লুকানোর পরিবর্তে দেখানোই উপকার। google এ কোন কিছু সার্চ দিলেই ব্রাউজারের address বারে দেখবেন যেটা লিখে সার্চ দিয়েছেন সেগুলি দেখাচ্ছে।

input ট্যাগের type এট্রিবিউটটি দিয়ে ঠিক করা যায় ফিল্ডটি কোন ধরনের ডেটা নিবে।

type=”text” দিলে টেক্সট ফিল্ড হবে এবং ব্রাউজারে টেক্সট লেখার মত একটি ফিল্ড দেখাবে। আবার type=”submit” দিলে  বাটন  দেখাবে।

input এর name এট্রিবিউট দিয়ে ফিল্ডটির নাম দেয়া যায়। প্রত্যেকটি ফিল্ডের name এট্রিবিউটের মান ভিন্ন দিতে হয় কেননা এই মান ধরেই পিএইচপি ডেটা প্রসেস করে তাই একই নামের দুটি ফিল্ড এর ডেটা দুরকম ভাববে।

সাবমিট বাটনের জন্য value এট্রিবিউট দিয়ে যে মানটি দিবেন সেটা বাটনের উপর লেখা হিসেবে দেখাবে।

id, style, class ইত্যাদি যেকোন গ্লোবাল এট্রিবিউট form এলিমেন্টে ব্যবহার করতে পারেন।

ইউজারকে চেকবক্স এবং রেডিও বাটন দিয়ে টিকমার্ক সংক্রান্ত ফর্ম ফিল্ড তৈরী করে দিতে পারেন ।
<form action=”” method=””>
<input type=”text” name=”uname” placeholder=”name”>
<input type=”email” name=”email” placeholder=”your Email”>
<input type=”password” name=”pass” placeholder=”password”>
<input type=”number” name=”number” placeholder=”number”>
<textarea rows=”5″ cols=”10″></textarea>
<select name=”” id=””>
<option value=”1″>1</option>
<option value=”2″>2</option>
<option value=”3″>3</option>
<option value=”4″>4</option>
</select>
<input type=”radio” name=”gen”>male
<input type=”radio” name=”gen”>female
<input type=”check”>ইউজারকে চেকবক্স .
<input type=”submit” value=”submit”>

</form>