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

Awesome! টিউনস

সকল Awesome! টিউনস

এ মাসের টেকটিউনস সংবাদঃ ডিসেম্বর-২০০৯

রনি পারভেজ

এক সাথে যত খুশি ততো ই-মেইল চেক করুন ডেস্কটপ থেকে! প্রয়োজনীয় না হলে মূল্য ফেরত

হাসান যোবায়ের

হয়ে উঠুন পেনড্রাইভ ভাইরাস/ম্যালওয়্যার কিলার

এস বি মেহদি

ওয়েবসাইট তৈরী এবং হোস্টিং এর কয়েকটি ফ্রি অনলাইন টুল

দুঃসাহসী টিনটিন

8,192 দেখা 15 টিউমেন্টস জোসস

টিউন বিভাগ এইচটিএমএল

প্রকাশিত

Level 0

kazi Kowshik

22 টিউনস 281 টিউমেন্টস 1 ফলোয়ার

টিউমেন্ট ফলো জোসস

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

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