Home-theater-designers
ওয়েবসাইট ব্যবহারকারীর কাছ থেকে ডেটা সংগ্রহ করা বিভিন্ন উপায়ে করা যেতে পারে। ওয়েবসাইটের ফর্মগুলির একটি সাধারণ কাজ থাকতে পারে যেমন ব্যবহারকারীকে নিউজলেটার সাবস্ক্রাইব করা, অথবা চাকরির আবেদন ফর্ম হিসাবে কাজ করার মতো আরও জটিল উদ্দেশ্য।
যাইহোক, একটি বিষয় যা এই সব সহজ থেকে জটিল আকারের মধ্যে সাধারণ তা হল এইচটিএমএল এবং আরো বিশেষভাবে এইচটিএমএল ট্যাগ
ফর্ম ট্যাগ ব্যবহার করে
দ্য ট্যাগ হল একটি এইচটিএমএল উপাদান যা অন্য উপাদানগুলিকে আবদ্ধ করার জন্য একটি ধারক হিসাবে ব্যবহৃত হয় যা ফর্মের জন্য বিল্ডিং ব্লক হিসাবে বিবেচিত হতে পারে। এই মৌলিক উপাদানের কিছু অন্তর্ভুক্ত ট্যাগ, ট্যাগ, এবং ট্যাগ
দ্য ট্যাগের একটি গুরুত্বপূর্ণ বৈশিষ্ট্য রয়েছে যা এর কার্যকারিতায় অবদান রাখে। এই বৈশিষ্ট্যটিকে অ্যাকশন বলা হয় এবং ফর্মটিতে প্রবেশ করা ডেটা যে ফাইলটিতে পাঠানো হবে তা সনাক্ত করতে ব্যবহৃত হয়।
ট্যাগ উদাহরণ ব্যবহার করে
উপরের উদাহরণ দেখায় কিভাবে আপনার প্রকল্পে ফর্ম ট্যাগ ব্যবহার করবেন। প্রধান টেকওয়েগুলির মধ্যে একটি হল যে আপনি যদি একটি ফর্ম ট্যাগ খুলেন তবে আপনাকে এটি বন্ধ করার কথা মনে রাখতে হবে। এটি একটি ফর্ম কাঠামো তৈরি করবে এবং এটি নিশ্চিত করবে যে ফর্মে প্রবেশ করা ডেটা সঠিকভাবে প্রক্রিয়া করা হয়েছে।
ট্যাগ ব্যবহার করে
দ্য ট্যাগটি প্রতিটি ইনপুট ক্ষেত্রের ডেটাকে একটি আকারে বর্ণনা করতে ব্যবহৃত হয়। এই ট্যাগে আছে a জন্য বৈশিষ্ট্য, যা একটি ফর্মের কার্যকারিতা উন্নত করতে ব্যবহৃত হয়।
সম্পর্কিত: আপনার কোড পরীক্ষা করার জন্য সেরা বিনামূল্যে অনলাইন এইচটিএমএল সম্পাদক
যদি সংশ্লিষ্ট ইনপুট ক্ষেত্রের জন্য নির্ধারিত আইডি মেলে জন্য মধ্যে মান ট্যাগ, তারপর সেই ইনপুট ক্ষেত্রটি স্বয়ংক্রিয়ভাবে হাইলাইট করা হবে যখন আপনি লেবেলে ক্লিক করবেন।
ট্যাগ উদাহরণ ব্যবহার করে
First Name:
উপরের উদাহরণে আপনি দেখতে পারেন যে জন্য অ্যাট্রিবিউট মান নির্ধারণ করা হয় নাম । অতএব, যদি আপনি এর সাথে একটি ইনপুট ক্ষেত্র তৈরি করেন নাম আইডি, এই ক্ষেত্রটি প্রতিবার আপনি ক্লিক করলে হাইলাইট করা হবে প্রথম নাম লেবেল
ট্যাগ ব্যবহার করে
তার সবচেয়ে মৌলিক আকারে, ট্যাগটি একটি টেক্সট বক্স হিসেবে দেখা যায়। দ্য ট্যাগ ব্যবহারকারীর কাছ থেকে তথ্য সংগ্রহ করে এবং এর অন্যতম গুরুত্বপূর্ণ বৈশিষ্ট্য হল টাইপ বৈশিষ্ট্য দ্য টাইপ অ্যাট্রিবিউট এই টেক্সট বক্স যে ধরনের ডাটা সংগ্রহ করতে পারে তা নির্দেশ করে।
সম্পর্কিত: কিভাবে CSS এ স্ট্যাক করা ফর্ম তৈরি করবেন
বেশ কয়েকটি ভিন্ন মান রয়েছে যা আপনি এ বরাদ্দ করতে পারেন টাইপ বৈশিষ্ট্য, কিন্তু আরো জনপ্রিয় কিছু নিম্নরূপ।
- টেক্সট
- সংখ্যা
- ইমেইল
- ছবি
- তারিখ
- চেকবক্স
- রেডিও
- পাসওয়ার্ড
ট্যাগ উদাহরণ ব্যবহার করে
First Name:
দ্য উপরের কোডে ট্যাগের তিনটি ভিন্ন বৈশিষ্ট্য রয়েছে যা প্রত্যেকটির একটি অনন্য ফাংশন রয়েছে। দ্য টাইপ অ্যাট্রিবিউটকে একটি টেক্সট ভ্যালু বরাদ্দ করা হয়েছে যার মানে হল যে টেক্সট বক্স শুধুমাত্র অক্ষর গ্রহণ করবে।
দ্য আইডি অ্যাট্রিবিউট টেক্সট বক্সের জন্য একটি অনন্য শনাক্তকারী, এবং এটি গুরুত্বপূর্ণ কারণ এটি একটি CSS ফাইল থেকে এই উপাদানটির অ্যাক্সেস প্রদান করে। দ্য নাম বৈশিষ্ট্যটিও একটি অনন্য শনাক্তকারী; যাইহোক, নামের বৈশিষ্ট্যটি ডেভেলপমেন্টের সার্ভার-সাইড থেকে একটি উপাদানের সাথে ইন্টারঅ্যাক্ট করতে ব্যবহৃত হয়।
দ্য আইডি এবং নাম গুণাবলী সাধারণত একই মান নির্ধারিত হয় যেমন একটি ক্লায়েন্ট-সাইড থেকে এবং অন্যটি সার্ভার-সাইড থেকে একটি উপাদান অ্যাক্সেস করে।
চেকবক্স এলিমেন্ট ব্যবহার করে
চেকবক্স উপাদানটি অন্যান্য উপাদানগুলির তুলনায় খুব অনন্য যা আপনি ব্যবহার করতে পারেন ট্যাগ এটি একটি ব্যবহারকারীকে সংশ্লিষ্ট পছন্দের তালিকা থেকে এক বা একাধিক বিকল্প নির্বাচন করতে দেয়। চেকবক্সগুলি সহজেই সনাক্ত করা যায় কারণ সেগুলি ছোট বর্গক্ষেত্রের বাক্স দ্বারা প্রতিনিধিত্ব করা হয় যা নির্বাচন করার সময় একটি চেক ধারণ করে।
চেকবক্স এলিমেন্ট উদাহরণ ব্যবহার করে
Programming Languages:
Java
JavaScript
Python
উপরের উদাহরণে, প্রতিটি চেকবক্স উপাদানগুলির একটি মান বৈশিষ্ট্য রয়েছে এবং এটি গুরুত্বপূর্ণ কারণ এটি সংগ্রহ থেকে প্রতিটি চেকবক্স বিকল্পকে আলাদা করতে সহায়তা করে। অতএব, যদি কোনও ব্যবহারকারী উপরের বিকল্পগুলি থেকে 'জাভা' নির্বাচন করে, তবে ডেটা এটি প্রতিফলিত করবে।
ট্যাগ এবং রেডিও উপাদান ব্যবহার করে
দ্য ট্যাগ এবং রেডিও উপাদানগুলি এই অর্থে অনুরূপ যে তারা শুধুমাত্র একটি ব্যবহারকারীকে এক সময়ে একটি একক মান নির্বাচন করার অনুমতি দেয়; অতএব, কেউ বলতে পারে যে তাদের একই ফাংশন আছে। যাইহোক, তারা চেহারা খুব ভিন্ন।
রেডিও এলিমেন্ট চেহারাতে চেকবক্স এলিমেন্টের কাছাকাছি, তবে রেডিও এলিমেন্টের সাথে আপনার স্কোয়ারের পরিবর্তে বৃত্ত আছে।
দ্য ট্যাগটি মূলত একটি ড্রপ-ডাউন বক্স তৈরি করে যা ব্যবহারকারীকে একটি একক মান নির্বাচন করতে দেয়।
ট্যাগ এবং রেডিও এলিমেন্ট উদাহরণ ব্যবহার করে
Sex:
Male
Female
Other
Positions Available:
value='Junior Developer'> Junior Developer
value='Mid-level Developer'> Mid-level Developer
value='Senior Developer'> Senior Developer
তারিখ উপাদান ব্যবহার করে
তারিখ উপাদান একটি ছোট পাঠ্য বাক্স তৈরি করে যা ক্লিক করার সময় একটি ক্যালেন্ডার তৈরি করে। ব্যবহার তারিখ আপনার ফর্মগুলিতে একটি ইনপুট টাইপ হিসাবে ব্যবহারকারীর সম্ভাব্য ভুল তারিখ প্রবেশের বিরুদ্ধে সুরক্ষা দেয়, যা সম্ভাব্য ভুল ডেটা সংগ্রহের দিকে নিয়ে যেতে পারে।
তারিখ উপাদান উদাহরণ ব্যবহার করে
ইমেইল এবং পাসওয়ার্ড এলিমেন্ট ব্যবহার করে
যখন একজন ডেভেলপার একটি টাইপ অ্যাট্রিবিউটকে ইমেইল বা পাসওয়ার্ড মান দেয় ট্যাগ, তারা প্রত্যেকে একটি অভিন্ন টেক্সট বক্স তৈরি করে। যাইহোক, যখন আপনি এই বাক্সগুলি ব্যবহার শুরু করেন তখন পার্থক্যগুলি স্পষ্ট হয়ে ওঠে।
ইমেল উপাদানটি পাঠ্য বাক্সে প্রবেশ করা ডেটা পর্যবেক্ষণ করে এবং নিশ্চিত করে যে প্রতিটি জমা একটি ইমেল ঠিকানার মানদণ্ড পূরণ করে; যার অর্থ একটি স্থানীয় অংশ থাকা, এর পরে @ চিহ্ন, এবং একটি ডোমেইন দিয়ে শেষ হওয়া।
ইমেইল এলিমেন্ট উদাহরণ ব্যবহার করে
উপরের উদাহরণে আপনি একটি নতুন বৈশিষ্ট্যের সাথে পরিচিত স্থানধারক , এবং এই বৈশিষ্ট্যটি একটি টেক্সট মান নেয় যা বিবর্ণ ধূসর রঙের টেক্সট বক্সে প্রদর্শিত হয়। এই টেক্সটটি টেক্সট বক্সে যে ডেটা স্থাপন করতে হবে তা নির্দেশ করতে ব্যবহৃত হয় যেমন উপরের উদাহরণে দেখা যায়।
পাসওয়ার্ড উপাদানটি অক্ষরগুলিকে পাঠ্যবাক্সে প্রবেশ করানোর সময় তারকাচিহ্নে পরিণত করে। অতএব, যদি আপনার কম্পিউটারের স্ক্রিন অন্যদের কাছে দৃশ্যমান হয় তবে তারা আপনার প্রবেশ করা পাসওয়ার্ডটি দেখতে পাবে না।
পাসওয়ার্ড এলিমেন্ট উদাহরণ ব্যবহার করে
বাটন ট্যাগ ব্যবহার করে
একটি আকারে, সাধারণত দুটি ভিন্ন ধরনের বোতাম থাকে। প্রথমটি হল সাবমিট বোতাম, যা ফর্মটিতে প্রবেশ করা ডেটা অ্যাকশন অ্যাট্রিবিউট (যা এ < ফর্ম> ট্যাগ)।
বোতামের উদাহরণ জমা দিন
Submit
দ্বিতীয় ধরণের বোতাম যা সাধারণত একটি ফর্মে ব্যবহৃত হয় সেটি হল একটি রিসেট বোতাম, যা একটি ফর্মের ডেটা সাফ করে যাতে ব্যবহারকারী নতুন তথ্য প্রবেশ করতে পারে। দ্য ট্যাগ আছে a টাইপ বৈশিষ্ট্য, যা বোতামের কাজ নির্দেশ করতে ব্যবহৃত হয়। উপরের উদাহরণে টাইপ অ্যাট্রিবিউট হল মান নির্ধারণ করা জমা দিন অতএব, একটি বোতাম যার একটি টাইপ মান রিসেট ফর্ম রিসেট করতে ব্যবহৃত হয়।
রিসেট বোতাম উদাহরণ
Reset
একটি ফর্ম তৈরি করা
এইচটিএমএল -এ একটি সাধারণ ফর্ম তৈরি করার জন্য আপনাকে উপরে উল্লিখিত সমস্ত উপাদানগুলিকে একটিতে সংযুক্ত করতে হবে ট্যাগ
একটি ফর্ম উদাহরণ তৈরি করা
Forms
First Name:
Last Name:
Date of birth:
Age:
Gender:
Male
Female
Other
Email Address:
Positions Available:
value='Junior Developer'> Junior Developer
value='Mid-level Developer'> Mid-level Developer
value='Senior Developer'> Senior Developer
Programming Languages:
Java
JavaScript
Python
Password:
Confirm Password:
Submit
Reset
উপরের কোডটি নিম্নলিখিত ফর্মটি তৈরি করবে:
এটাকে স্মারফ অ্যাকাউন্ট বলা হয় কেন?
এখন আপনি HTML এ একটি সহজ ফর্ম তৈরি করতে পারেন
এই নিবন্ধটি আপনাকে একটি কার্যকরী এইচটিএমএল ফর্ম তৈরির সমস্ত সরঞ্জাম সরবরাহ করে। এটি বিভিন্ন HTML ট্যাগগুলিকে চিহ্নিত করে যা ফর্ম তৈরিতে ব্যবহৃত হয় এবং এই ট্যাগগুলির সাথে ব্যবহার করা যেতে পারে এমন বিভিন্ন বৈশিষ্ট্য অনুসন্ধান করে।
যাইহোক, বেশিরভাগ ফর্ম যা আপনি ওয়েবসাইটে দেখেন তার একটি অতিরিক্ত উপাদান থাকে; সিএসএস, যা ফর্মটিকে জীবন্ত করতে এবং এটিকে আরও নান্দনিকভাবে আনন্দদায়ক করতে ব্যবহৃত হয়।
শেয়ার করুন শেয়ার করুন টুইট ইমেইল অত্যাবশ্যকীয় CSS3 প্রপার্টিজ চিট শীটআমাদের CSS3 প্রপার্টিজ চিট শীট সহ প্রয়োজনীয় CSS সিনট্যাক্স মাস্টার করুন।
পরবর্তী পড়ুন সম্পর্কিত বিষয়- প্রোগ্রামিং
- এইচটিএমএল
- ওয়েব ডেভেলপমেন্ট
- কোডিং টিউটোরিয়াল
Kadeisha Kean একজন ফুল স্ট্যাক সফটওয়্যার ডেভেলপার এবং টেকনিক্যাল/টেকনোলজি রাইটার। কিছু জটিল প্রযুক্তিগত ধারণাকে সরলীকরণ করার তার স্বতন্ত্র ক্ষমতা আছে; এমন উপাদান তৈরি করা যা সহজেই যে কোন প্রযুক্তি নবজাতক দ্বারা বোঝা যায়। তিনি লেখালেখি, আকর্ষণীয় সফটওয়্যার বিকাশ এবং বিশ্ব ভ্রমণ (তথ্যচিত্রের মাধ্যমে) সম্পর্কে উত্সাহী।
Kadeisha Kean থেকে আরোআমাদের নিউজলেটার সদস্যতা
প্রযুক্তি টিপস, রিভিউ, ফ্রি ইবুক এবং এক্সক্লুসিভ ডিলের জন্য আমাদের নিউজলেটারে যোগ দিন!
সাবস্ক্রাইব করতে এখানে ক্লিক করুন