HTML, CSS, JS ও PHP ট্রেনিং সেন্টার [পর্ব-০৬] :: ওয়েব সাইট এ ফর্ম তৈরি

সবাই ভাল আছেন ত? আশা করছি ভাল আছেন সবাই।। আজ সুরু করছি আমাদের ওয়েব ডিজাইন সেখার জন্য চেইন টিউনের ষষ্ট পর্ব।। গত পড়বে আমরা সিখেছি কিভাবে ওয়েব সাইট এ টেবিল বানাতে হয় আর আজ সিখব কিভাবে ওয়েব সাইট এ ফর্ম বানাতে হয়।। প্রায় প্রতিটা ওয়েব সাইট এই ফর্ম এর ব্যাবহার হয়ে থাকে।। সাধারনত ওয়েব পেজ এর contact পেজ এ ফর্ম এর ব্যাবহার হয়।। তবে চলুন দেখি কিভাবে এই ফর্ম বানানো যায়।।

একটি এইচটিএমএল ফর্ম বেশ কিছু উপাদানের সমন্বয়ে গঠিত হয়। এগুলো হচ্ছে ,

১. টেক্সট বক্স
২. টেক্সট এরিয়া
৩. রেডিও বাটন
৪. সাবমিট বাটন
৫. চেক বক্স
৬. ড্রপডাউন লিস্ট

একটা উধাহরন দেখে নি তাহলে কি বলেন

<html>
<head>
<title> www.techtunes.io </title>
</head>
<center>
<font face="Arial" color="#fe0321" size="6">
Please fill in the box
</font>

<form name="information" method="post" action="information.php">
<font face="Arial" color="#fe0321" size="4">
Name:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
</font>
<input type="text" value="Please write your name" name="name"><br /><br />
<font face="arial" color="#fe0321" size="4">
Father`s name:
</font> &nbsp; &nbsp;
<input type="text" value="Please write your farher name" name="name">
<br /><br />
<font face ="arial" color="#fe0321" size="4">
Address:
</font> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
<textarea rows="3" cols="20"></textarea>
<br />
<font face="arial" color="#fe0321" size="4">
Male:
</font>
<input type="radio" value="male" name="gender">
<br />
<font face="arial" color="#fe0321" size="4">
Female:
</font>
<input type="radio" value="female" name="gender">
<br />
<font face="arial" color="#fe0321" size="4">
Your current location:
</font>
<select name="district">
<option> Kushtia </option>
<option> Dhaka</option>
<option>Khulna</option>
<option>Mirpur</option>
<option>Jessore</option>
<option>Pabna</option>
</select>
<br />
<br />
<font face="arial" color="#fe0321" size="4">
Education background:
</font>
<br />
<input type="checkbox" value="checkbox1" name="checkbox">
<font face="arial" color="#fe0321" size="4">
SSC
</font>
<br />
<input type="checkbox" value="checkbox" name="checkbox">
<font face="arial" color="#fe0321" size="4">
HSC
</font>
<br />
<br />
<input type="submit" name="submit" value="Submit">
<br />
<br />
<input type="reset" value="Reset" name="clear">
</form>
</center>
</body>
</html>

উপরের যে কোড গুলো দেখছেন তা নোটপ্যাড এ লিখে index.html নামে সেভ করে যে কোন ব্রাউজার দিয়ে ওপেন করলে নিচের ছবির মত পেজ দেখতে পাবেন ।।

এবার আমরা সরাসরি দেখব কিভাবে এটা কাজ করে, ছবি দেখলে নিশ্চয়ই বুঝতে পারবেন,

Input fields হচ্ছে form নামক sandwich এর গোশত ।  input tag এর কিছু attributes আছে সেসব সম্বন্ধে জানা উচিত ।

type - এই এট্রিবিউট ইনপুট ফিল্ড এর প্রকারভেদ নির্ধারন করে। যেমন text, submit, এবং password ।

name - এই এট্রিবিউট টি দিয়ে ফিল্ড এর নামকরন করা যায় যাতে পরবর্তিতে আপনি reference আনতে পারেন।

size - এই এট্রিবিউট টি ফিল্ড এর horizontal width সেট করে ।

maxlength এই এট্রিবিউট টি character এর  সর্বোচ্চ নম্বর নির্ধারন করে

<form method="post" action="mailto:[email protected]"> Name: <input type="text" size="10" maxlength="40" name="name"> <br /> Password: <input type="password" size="10" maxlength="10" name="password"> </form>

চেকবক্স অনেকগুলি আইটেম থেকে একটা বাছাই করার সুবিধা দেয়। চেকবক্স এর  name এবং  value এট্রিবিউট যা রেডিও বাটন এর name এবং  value এট্রিবিউট মত আচরন করে।

<form method="post" action="mailto:[email protected]"> Select your favorite cartoon characters. <input type="checkbox" name="toon" value="Goofy">Goofy <input type="checkbox" name="toon" value="Donald">Donald <input type="checkbox" name="toon" value="Bugs">Bugs Bunny <input type="checkbox" name="toon" value="Scoob">Scooby Doo <input type="submit" value="Email Myself"> </form>

এইচটিএমএল - সাবমিট বাটন:

Input type এর মধ্যে "submit"  অপশনটি সাবমিট বাটন তৈরীর ক্ষেত্রে উল্লেখযোগ্য ।specifies a very unique button. যখন আমরা submit button এ চাপ দেবো তখন ফর্ম এর বার্তাটি activate  হবে।

যেহেতু আমরা সাবমিট বাটন তৈরী করেছি তাই নতুন এট্রিবিউট প্রয়োজন তা হচ্ছে value এট্রিবিউট। আমরা যে শব্দকে value এট্রিবিউট এর মান হিসাবে নির্বাচন করবো তা বাটন উপর প্রদর্শিত হবে। "Submit" or "Continue" শব্দগুলো value এট্রিবিউট এর  মান হিসাবে ব্যবহার হয়।  .

<input type="submit" value="Submit" />
<input type="submit" value="Continue Please!" />

সর্বশেষ input type হল রিসেট বাটন।  রিসেট বাটন ক্লিক করার মাধ্যমে আপনি ফর্ম এর সবকিছু আবার পুর্বের স্বাভাবিক অবস্থায় নিয়ে যেতে পারবেন।"start over" বাটন কে আপনি রিসেট বাটন এর মত ব্যাবহার করতে পারবেন।

<input type="reset" value="Reset Fields" />
<input type="reset" value="Start Over" />

ফর্ম নিয়ে আর কোন সমস্যা আছে কি? যদি থেকে থাকে তবে জানাবেন।। আরও ভাল ভাবে বুঝিয়ে দেব।। আজ আর কষ্ট দিবো না।। আগামি পর্বে আবার কথা হবে।। সবাই ভাল থাকবেন ।। সে পর্যন্ত আল্লাহ্‌ হাফেজ।।

>>>ভাল লাগলে কমেন্ট করতে ভুলবেন না<<<

   ফেসবুক এ আমাকে পেতে নিচে ক্লিক করুন---


Level 0

আমি kazi Kowshik। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 12 বছর 5 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 22 টি টিউন ও 281 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 1 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।


টিউনস


আরও টিউনস


টিউনারের আরও টিউনস


টিউমেন্টস

অনেক ভাল লাগলো ।যেহেতু পিএচপি শিখিনা ,কিন্তু এই টিউনটি পড়ে শিখার ইচ্ছা জাগলো ।আশা করি সাহায্য করবেন ।

ভাল লাগলো ।

Level 3

আমি ফরম লিংক তৈরি করব কিভাবে ? আমার JS ও PHP শেখার আগ্রহ আছে আশা করি আমাকে সাহায্য করবেন । ধন্যবাদ নিয়মিত টিউন উপহার দেওয়ার জন্য !!

Level 0

Thanks, Dreamweaver 4 using access ar Bangla tutorail asha, If posible mail me [email protected]

Level 0

sobai kemon selfish ……. mone hoy……………..

এক সাথে এত বড় ইমেজ না দিয়ে ভাগ ভাগ করে দিলে বুঝতে সুবিধা হত।
ইমেজটার রেজুলেসনও কম, বুঝতে অসুবিধা হচ্ছে

Level 0

আপনে যদি মোবাইল সাইট Wapka তে কিভাবে http://www.jar4mobi.wapka.mobi এই Link এর মত ডিজাইন করা যাবে সেটার উপর একটা টিউন করেন তাহলে খুব উপকৃত হবো ।

খুব ভাল একটি তথ্য সমৃদ্ধ পূনাঙ্গ‍‌ টিউন । ভাই আপনার কাছ থেকে আরো টিউন আশা করি । আপনার আরো লিখা থাকলে পড়বো দয়াকরে লিংকটা দিয়ে দিবেন । ধন্যবাদ

Level 0

সুন্দর পোস্ট কিন্তু অনেক হিজিবিজি। আশা করি আরেক টু যত্ন নিলে আরো চমত্কার হবে।