HTML, CSS, JS ও PHP ট্রেনিং সেন্টার [পর্ব-০৬] :: ওয়েব সাইট এ ফর্ম তৈরি
- HTML, CSS, JS ও PHP ট্রেনিং সেন্টার [পর্ব-০১] :: সূচনা পর্ব
- HTML, CSS, JS ও PHP ট্রেনিং সেন্টার [পর্ব-০২] :: ট্যাগ এর লিস্ট ও ব্যাখ্যা
- HTML, CSS, JS ও PHP ট্রেনিং সেন্টার [পর্ব-০৩] :: লাইন ব্রেক এবং টেক্সট ফরমেটিং
- HTML, CSS, JS ও PHP ট্রেনিং সেন্টার [পর্ব-০৪] :: লিস্ট, লিঙ্ক ও ইমেজের ব্যবহার
- HTML, CSS, JS ও PHP ট্রেনিং সেন্টার [পর্ব-০৫] :: ওয়েব সাইট এ টেবিল তৈরি
- HTML, CSS, JS ও PHP ট্রেনিং সেন্টার [পর্ব-০৬] :: ওয়েব সাইট এ ফর্ম তৈরি
- HTML, CSS, JS ও PHP ট্রেনিং সেন্টার [পর্ব-০৭] :: ওয়েব সাইটে আই ফ্রেম এর ব্যাবহার
- HTML, CSS, JS ও PHP ট্রেনিং সেন্টার [পর্ব-০৮] :: কালার কোড এর লিস্ট ও ব্যবহার
- HTML, CSS, JS ও PHP ট্রেনিং সেন্টার [পর্ব-০৯] :: ডিভ (div) এর ব্যাবহার।।
একটি এইচটিএমএল ফর্ম বেশ কিছু উপাদানের সমন্বয়ে গঠিত হয়। এগুলো হচ্ছে ,
১. টেক্সট বক্স
২. টেক্সট এরিয়া
৩. রেডিও বাটন
৪. সাবমিট বাটন
৫. চেক বক্স
৬. ড্রপডাউন লিস্ট
একটা উধাহরন দেখে নি তাহলে কি বলেন
<html> <head> <title> http://www.techtunes.com.bd </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: </font> <input type="text" value="Please write your name" name="name"><br /><br /> <font face="arial" color="#fe0321" size="4"> Father`s name: </font> <input type="text" value="Please write your farher name" name="name"> <br /><br /> <font face ="arial" color="#fe0321" size="4"> Address: </font> <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:youremail@email.com"> 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:youremail@email.com"> 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" />ফর্ম নিয়ে আর কোন সমস্যা আছে কি? যদি থেকে থাকে তবে জানাবেন।। আরও ভাল ভাবে বুঝিয়ে দেব।। আজ আর কষ্ট দিবো না।। আগামি পর্বে আবার কথা হবে।। সবাই ভাল থাকবেন ।। সে পর্যন্ত আল্লাহ্ হাফেজ।।
সাবমিট বাটন চাপলে তথ্য সেইভ হবে কোথায়? মনে করেন যে, আমি সাবমিট বাটন চাপলে তথ্যটা হার্ট ডিস্কে বা নির্দিষ্ট কোন সাইডে তখ্যটা সেন্ড হবে এরকম যদি করতে চাই তাহলে কি করবো?
ReplyDelete