এইচটিএমএল ফর্ম টিউটোরিয়াল ( HTML Form Tutorial)

এইচটিএমএল ফর্ম টিউটোরিয়াল ( HTML Form Tutorial)

ওয়েব সার্ভার হতে তথ্য(name, email address, credit card, ইত্যাদি) গ্রহনের ক্ষেত্রে ওয়েবমাস্টার এর জন্য ফর্ম গুরুত্বপুর্ন tool হিসাবে কাজ। আপনার চাহিদা অনুযায়ী ফর্ম দর্শক হতে ইনপুট গ্রহন করে। আপনি এখান থেকে ডেটা সঞ্চয় করতে পারেন , order করতে পারেন, ব্যাবহারকারীর পরিসংখ্যান জমা করতে পারেন,আপনার  forum এ ঐ ব্যক্তিটিকে রেজিস্ট্রেশন করাতে পারেন ইত্যাদি ।http://w3bay.com

টেক্সট ফিল্ড

কিভাবে সম্পুর্ন ফর্ম তৈরী করতে হয় সেটা আপনাদের আগে জানতে হবে। Input fields হচ্ছে form নামক sandwich এর গোশত । <input> tag এর কিছু attributes আছে সেসব সম্বন্ধে জানা উচিত ।http://w3bay.com

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

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

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

maxlength – এই এট্রিবিউট টি character এর  সর্বোচ্চ নম্বর নির্ধারন করেhttp://w3bay.com

<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> http://w3bay.com

এইচটিএমএল- ইনপুট ট্যাগ:

Input fields এর মধ্যে যেসব জিনিস অন্তর্ভুক্ত সেগুলো হলো checkboxes, text fields, radios,  এবং form submission buttons। <input /> ট্যাগ এর কোন closing tag প্রয়োজন নেই।http://w3bay.com

এইচটিএমএল -Type Attribute:

Type attributes এর সাহায্যে এক প্রকারের input tag নির্দেশ করতে পারি।নিচে কতকগুলো input tag দেয়া হলো।http://w3bay.com

১. "text"

২. "password"

৩. "checkbox"

৪. "radio"http://w3bay.com

৫. "submit"

৬. "reset"

এইচটিএমএল – চেকবক্স:

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

<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>http://w3bay.com

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

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

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

<input type="submit" value="Submit" />http://w3bay.com

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

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

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

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

<input type="reset" value="Start Over" />http://w3bay.com