এক নজরে পরিচ্ছেদ

kt_satt_skill_example_id=1591

এইচটিএমএল < form > এলিমেন্ট

ব্যবহারকারীর তথ্য সংগ্রহ করার জন্য এইচটিএমএল ফর্ম ব্যবহৃত হয়।

একটি এইচটিএমএল ফর্মকে < form > এলিমেন্ট দিয়ে ডিফাইন করা হয়।

kt_satt_skill_example_id=1592

ফর্ম এলিমেন্ট বিভিন্ন ধরনের হয়ে থাকে। যেমনঃ ইনপুট এলিমেন্ট, চেকবক্স, রেডিও বাটন, সাবমিট বাটন ইত্যাদি।

ফর্ম এলিমেন্ট

ফর্ম এলিমেন্টের মধ্যে সবচেয়ে গুরুত্বপূর্ণ এবং বহুল ব্যবহৃত হচ্ছে < input > এলিমেন্ট। আমরা < input > এলিমেন্টে type এট্রিবিউট ব্যবহারের মাধ্যমে < input > এলিমেন্টকে বিভিন্ন প্রয়োজনে ব্যবহার করতে পারি।

এই টিউটোরিয়ালে আমরা type এট্রিবিউটে নিম্নের তিনটি ভ্যালুর ব্যবহার দেখবোঃ

ফর্ম text টাইপ ইনপুট

এক লাইনের একটি বক্সের মাধ্যমে তথ্য সংগ্রহের জন্য < input type="text" > ডিফাইন করতে হয়ঃ

kt_satt_skill_example_id=1596

পরামর্শঃ টেক্সট ইনপু্টের ডিফল্ট দৈর্ঘ্য ২০ ক্যারেক্টারের বেশি হয় না।

ফর্ম radio টাইপ ইনপুট

ইনপুট এলিমেন্ট দ্বারা রেডিও টাইপ বাটন তৈরি করার জন্য < input type="radio" > ডিফাইন করতে হয়।

kt_satt_skill_example_id=1599

ফর্ম submit টাইপ ইনপুট

সার্ভারে তথ্য প্রেরনের জন্য সাবমিট বাটন তৈরি করতে  < input type="submit" > ডিফাইন করতে হয়।

kt_satt_skill_example_id=1600

ফর্ম action এট্রিবিউট

সাবমিট বাটনে ক্লিক করার পর action এট্রিবিউটটি তার কার্য সম্পাদন করে। সাবমিট বাটনে ক্লিকের মাধ্যমে ওয়েব পেজ থেকে ফর্মের তথ্য সার্ভারে সাবমিট করা হয়।

নিম্নে একটি ব্যবহার দেখানো হলোঃ

kt_satt_skill_example_id=1603

ফর্ম method এট্রিবিউট

ফর্ম সাবমিটের জন্য এইচটিটিপি(HTTP) মেথড GET অথবা POST ব্যবহার হয়। নিম্নে ফর্মে মেথড এট্রিবিউট ডিফাইন করা হলঃ

kt_satt_skill_example_id=1604

অথবাঃ

kt_satt_skill_example_id=1605

কখন get ব্যবহার করবো?

ডিফল্টভাবে আপনি get মেথড ব্যবহার করতে পারেন। তবে ফর্মের তথ্য যদি সেন্সিটিভ(ইউজারের নাম অথবা পাসওয়ার্ড) হয় সেক্ষেত্রে get মেথড ব্যবহার করা উচিত না। কারণ আপনি যখন get মেথোড ব্যবহার করে ফর্মের তথ্য সার্ভারে পাঠান সেক্ষেত্রে আপনার প্রেরিত তথ্যটি নিম্নের মত পেজের এড্রেসের সাথে দেখা যাবেঃ

kt_satt_skill_example_id=1607

কখন post ব্যবহার করবো?

আপনার ফর্মের তথ্য যদি সেন্সিটিভ হয় সেক্ষেত্রে অবশ্যই আপনার post মেথড ব্যবহার করা উচিত। কারণ আপনি যখন get মেথোড ব্যবহার করে ফর্মের তথ্য সার্ভারে পাঠান সেক্ষেত্রে আপনার প্রেরিত তথ্যটি নিম্নের মত পেজের এড্রেসের সাথে দেখা যাবে নাঃ

kt_satt_skill_example_id=1609

ফর্ম name এট্রিবিউট

প্রতিটি ইনপুট ফিল্ডের ভ্যালু সার্ভারে সঠিক ভাবে সাবমিট করার জন্য অবশ্যই name এট্রিবিউটটি সঠিক ভাবে ব্যবহার করতে হবে। কারণ name এট্রিবিউট ব্যাতিত সার্ভার আপনার প্রেরিত তথ্য গ্রহন করতে পারবে না।

নিম্নের উদাহরণে ফর্ম সাবমিট করার পর "প্রথম নাম" ইনপুট ফিল্ডের তথ্য সার্ভার গ্রহন করবেঃ

kt_satt_skill_example_id=1621

ফর্ম

এর মাধ্যমে ফর্মের তথ্য বিন্যাস

ফর্মের তথ্যকে বিভিন্ন ভাগে বিভক্ত করার জন্য

এইচটিএমএল ফর্ম এলিমেন্ট

এইচটিএমএল ফর্মে নিম্নের ট্যাগ গুলো রয়েছেঃ

আমাদের টিউটোরিয়ালের এই অংশে সকল এইচটিএমএল ফর্ম এলিমেন্ট সমূহের বর্ণনা দেওয়া হয়েছে।

ফর্ম এলিমেন্ট

ফর্ম এলিমেন্টের মধ্যে সবচেয়ে গুরুত্বপূর্ণ এলিমেন্ট হচ্ছে < input > এলিমেন্ট।

type এট্রিবিউটের উপর নির্ভর করে < input > এলিমেন্ট পরিবর্তিত হতে পারে।

kt_satt_skill_example_id=1636

ফর্ম < select > এলিমেন্ট

আপনি < select > এলিমেন্ট ব্যবহার করে ড্রপ-ডাউন লিস্ট ডিফাইন করতে পারবেনঃ

kt_satt_skill_example_id=1638

< option > এলিমেন্টের যেকোন একটি এলিমেন্টকে প্রথমত সিলেক্ট করে রাখার জন্য আপনাকে selected এট্রিবিউট ব্যবহার করতে হবে।

kt_satt_skill_example_id=1642

ফর্ম < textarea > এলিমেন্ট

আপনি < textarea > এলিমেন্টের মাধ্যমে একাধিক লাইনের ইনপুট ফিল্ড ডিফাইন করতে পারেনঃ

kt_satt_skill_example_id=1643

ফর্ম < button > এলিমেন্ট

আপনি < button > এলিমেন্টের মাধ্যমে একটি ক্লিকযোগ্য বাটন ডিফাইন করতে পারবেনঃ

kt_satt_skill_example_id=1644

এইচটিএমএল(৫) ফর্ম এলিমেন্ট

নিম্নলিখিত ফর্ম এলিমেন্টগুলো এইচটিএমএল(৫) নতুন করে যুক্ত হয়েছেঃ

এইচটিএমএল(৫) < datalist > এলিমেন্ট

< datalist > এলিমেন্ট < input > এলিমেন্টের জন্য পূর্বনির্ধারিত অপশনের একটি তালিকা নির্দেশ করে। ব্যবহারকারী ইনপুট ফিল্ডে তথ্য ইনপুট করা শুরু করলে পূর্বনির্ধারিত অপশনের ড্রপ-ডাউন লিস্ট দেখতে পাবে।

< input > এলিমেন্টের list এট্রিবিউট অবশ্যই < datalist> এলিমেন্টের id এট্রিবিউটকে বুঝাবে।

kt_satt_skill_example_id=1645

এইচটিএমএল(৫) < keygen > এলিমেন্ট

ইউজারকে যাচাই করার জন্য < keygen > এলিমেন্ট ব্যবহার করা হয়। < keygen > এলিমেন্ট ফর্মের মধ্যে এক-জোড়া কী(key) উৎপাদন করে এর মধ্যে একটি হলো প্রাইভেট এবং অন্যটি পাবলিক।

কোনো ফর্ম সাবমিট করার সঙ্গে সঙ্গেই এই দুইটি কী(key) উৎপন্ন হয়। এর মধ্যে প্রাইভেট কী(key) ব্রাউজারে সংরক্ষিত হয় এবং পাবলিক কী(key) সার্ভারে পাঠানো হয়।ভবিষ্যতে কোনো ইউজারকে যাচাই করার জন্য পাবলিক কী(key) ব্যবহৃত হয়।

kt_satt_skill_example_id=1646

এইচটিএমএল(৫) < output > এলিমেন্ট

 < input > এলিমেন্ট সমূহের মান < output > এলিমেন্টে স্ক্রিপ্টের মাধ্যমে প্রদর্শন করা যায়।

kt_satt_skill_example_id=1647

এক নজরে এইচটিএমএল ইনপুট টাইপের ভ্যালু সমুহ

আমাদের টিউটোরিয়ালের এই অংশে আমরা < input > এলিমেন্টের type এট্রিবিউটের ভ্যালু সম্পর্কে জানবো।

ইনপুট type:text

এক লাইনের একটি টেক্সট বক্সের জন্য < input type="text" > ডিফাইন করা হয়ঃ

kt_satt_skill_example_id=1655

ইনপুট type:password

ইনপুট ফিল্ডকে পাসওয়ার্ডের জন্য ব্যবহার করতে < input type="password" > ডিফাইন করা হয়ঃ

kt_satt_skill_example_id=1656

ইনপুট type:submit

ফর্মের তথ্য সমূহ সার্ভার পেজে পাঠানোর জন্য একটি সাবমিট বাটনের প্রয়োজন হয়। আর সাবমিট বাটন তৈরি করতে < input type="submit" > ডিফাইন করা হয়।

সার্ভার পেজটি ইনপুট এলিমেন্টের তথ্য সমূহকে প্রসেসিং অথবা সংরক্ষন করে। ফর্মের action এট্রিবিউট সার্ভার পেজটিকে ডিফাইন করে।

kt_satt_skill_example_id=1657

সাবমিট বাটনে যদি কোনো value দেওয়া না থাকে তবে এটি ডিফল্ট ভাবে Submit নিয়ে নিবেঃ

kt_satt_skill_example_id=1658

ইনপুট type:radio

ইনপুট ফিল্ডকে রেডিও বাটনে রুপান্তর করতে < input type="radio" > ডিফাইন করা হয়। রেডিও বাটনের মাধ্যমে ব্যবহারকারী একাধিক অপশন থেকে একটি বাছাই করতে পারে।

kt_satt_skill_example_id=1659

ইনপুট type:checkbox

ইনপুট ফিল্ডকে চেকবক্সে রুপান্তর করতে < input type="checkbox" > ডিফাইন করা হয়। চেকবক্সের মাধ্যমে ব্যবহারকারী তা ইচ্ছে অনুযায়ী যেকোন অপশন বাছাই করতে পারেঃ

kt_satt_skill_example_id=1660

ইনপুট type:button

একটি ইনপুট ফিল্ডকে ক্লিক যোগ্য বাটনে রুপান্তর করতে < input type="button" > ডিফাইন করা হয়ঃ

kt_satt_skill_example_id=1661

আমরা এইচটিএমএল(৫)-এ যুক্ত নতুন ইনপুট টাইপ ভ্যালু সম্পর্কে পরবর্তী অধ্যায়ে আলোচনা করবো।

এক নজরে এইচটিএমএল(৫) ইনপুট টাইপের ভ্যালু সমূহ

আমাদের টিউটোরিয়ালের এই অংশে আমরা < input > এলিমেন্টের type এট্রিবিউটের এইচটিএমএল(৫) ভ্যালু গুলো সম্পর্কে জানবো।

বিঃদ্রঃ যে সকল ব্রাউজারে এই টাইপসমূহ সাপোর্ট করে না, সে সকল ব্রাউজারে উক্ত টাইপসমূহ টেক্সট বিবেচনা করবে।

ইনপুট type:email

ইনপুট ফিল্ডে ভ্যালু হিসেবে ই-মেইল পাওয়ার জন্য < input type="email" > ডিফাইন করতে হয়ঃ

kt_satt_skill_example_id=1668

ইনপুট ফিল্ডের সীমাবদ্ধতা

আমরা নিম্নের এট্রিবিউট সমূহ ব্যবহার করে ইনপুট ফিল্ডের ভ্যালুর জন্য সীমাবদ্ধতা নির্ধারণ করতে পারিঃ

ইনপুট type:number

ইনপুট ফিল্ডে শুধুমাত্র সংখ্যা ইনপুট নিতে < input type="number" > ডিফাইন করতে হয়ঃ

kt_satt_skill_example_id=1669

kt_satt_skill_example_id=1670

ইনপুট type:range

ইনপুট ফিল্ডের ভ্যালুর পরিসীমা দিতে < input type="range" > ডিফাইন করতে হয়ঃ

kt_satt_skill_example_id=1671

min, max, step, value এট্রিবিউটগুলো ব্যবহার করে আপনি ইনপুট ফিল্ডের মধ্যে সহজেই সীমাবদ্ধতা সেট করতে পারেন।

ইনপুট type:tel

ইনপুট ফিল্ডে ব্যবহারকারীর কাছ থেকে টেলিফোন নম্বর নিতে < input type="tel" > ডিফাইন করতে হয়ঃ

kt_satt_skill_example_id=1672

ইনপুট type:month

বছর এবং মাস ইনপুট নিতে < input type="month" > ডিফাইন করতে হয়ঃ

kt_satt_skill_example_id=1673

ইনপুট type:week

বছর এবং সপ্তাহ ইনপুট নিতে < input type="week" > ডিফাইন করতে হয়ঃ

kt_satt_skill_example_id=1674

ইনপুট type:date

তারিখ ইনপুট নিতে < input type="date" > ডিফাইন করতে হয়ঃ

kt_satt_skill_example_id=1675

আপনি চাইলে তারিখের মধ্যে পরিসীমা যুক্ত করতে পারেনঃ

kt_satt_skill_example_id=1676

ইনপুট type:time

সময় ইনপুট নিতে < input type="time" > ডিফাইন করতে হয়ঃ

kt_satt_skill_example_id=1677

ইনপুট type:datetime

ইনপুট ফিল্ডে ব্যবহারকারীকে টাইমজোনের তারিখ ও সময় সিলেক্ট করার অপশন দিতে < input type="datetime" > ডিফাইন করতে হয়ঃ

kt_satt_skill_example_id=1678

ইনপুট type:datetime-local

লোকাল তারিখ এবং টাইম-জোনের তথ্য ব্যতিত সময় ইনপুট নিতে < input type="datetime-local" > ডিফাইন করতে হয়ঃ

kt_satt_skill_example_id=1679

ইনপুট type:color

রং এর হ্যাক্সা-ডেসিম্যাল ভ্যালু ইনপুট নিতে < input type="color" > ডিফাইন করতে হয়ঃ

kt_satt_skill_example_id=1680

ইনপুট type:search

সার্চবক্স হিসেবে ইনপুট নিতে < input type="search" > ডিফাইন করতে হয়ঃ

kt_satt_skill_example_id=1681

ইনপুট type:url

ইনপুট ফিল্ডে ব্যবহারকারীর কাছ থেকে URL পেতে < input type="url" > ডিফাইন করতে হয়ঃ

kt_satt_skill_example_id=1682

আমাদের টিউটোরিয়ালের এই অংশে আমরা এইচটিএমএল ফর্মে ব্যবহৃত ইনপুট এলিমেন্টে এর সকল এট্রিবিউট সম্পর্কে জানবো।

এক নজরে এট্রিবিউট সমূহ

নিম্নে আমরা এই এট্রিবিউট সম্পর্কে বিস্তারিত আলোচনা করবো।

value এট্রিবিউট

আমরা value এট্রিবিউট ব্যবহার করে ইনপুট ফিল্ডের প্রাথমিক ভ্যালুকে নির্ধারণ করতে পারিঃ

kt_satt_skill_example_id=1699

readonly এট্রিবিউট

আমরা readonly এট্রিবিউট ব্যবহার করে ইনপুট ফিল্ডের ভ্যালুকে শুধুমাত্র পড়ার অনুমতি দিতে পারি। অর্থাৎ ইনপুট ফিল্ডের ভ্যালুর কোনো ধরনের পরিবর্তন করা সম্ভব হবে নাঃ

kt_satt_skill_example_id=1701

disabled এট্রিবিউট

আমরা disabled এট্রিবিউট ব্যবহার করে যে কোনো ইনপুট ফিল্ডের ভ্যালুকে নিষ্ক্রিয় করতে পারি এবং এই ফিল্ডের ভ্যালু সাবমিট হবে নাঃ

kt_satt_skill_example_id=1702

size এট্রিবিউট

আমরা size এট্রিবিউট ব্যবহার করে ইনপুট ফিল্ডের দৈর্ঘ্য নির্ধারণ করতে পারিঃ

kt_satt_skill_example_id=1708

maxlength এট্রিবিউট

আমরা maxlength এট্রিবিউট ব্যবহার করে ইনপুট ফিল্ডে সর্বাধিক কতটি ক্যারেক্টার ইনপুট দেওয়া যাবে তা নির্ধারণ করতে পারিঃ

kt_satt_skill_example_id=1709

এখন আমরা এইচটিএমএল(৫)-এ সংযুক্ত নতুন ইনপুট এট্রিবিউট সমুহ দেখবোঃ

এক নজরে এইচটিএমএল(৫) ইনপুট এট্রিবিউট

autocomplete এট্রিবিউট

autocomplete এট্রিবিউট ইনপুট ফিল্ডে পূর্বে ব্যবহৃত ভ্যালু থেকে নতুন ভ্যালু ইনপুট করতে সাহায্য করে। আমরা text, search, url, tel, email, password, range এবং color ইনপুট টাইপের সাথে autocomplete এট্রিবিউটটি ব্যবহার করতে পারবোঃ

kt_satt_skill_example_id=1710

বিঃদ্রঃ autocomplete এর সাজেশন দেখার জন্য প্রথমে কিছু তথ্য ইনপুট করে নিন। কিছু ব্রাউজারের ক্ষেত্রে autocomplete ফাংশনটি চালু করে নিতে হবে। autocomplete এর সাজেশনকৃত তথ্য সমুহ ব্রাউজারে জমা থাকে।

আমরা