Web Design And Development Course-HTML Form

Web Design And Development

Web Design And Development Course

বিস্তারিত:

Site ভিজিটরদের তথ্য নেয়ার জন্য Form ব্যবহার করা হয়। এজন্য HTML এ

Element  আছে এবং এর ভিতর বিভিন্ন ধরনের Form সংক্রান্ত Element ব্যবহার করে চমৎকার Form বানানো যায়। তবে Form পুরন করে ইউজার  (User) যখন Submit করবে তখন সার্ভার সাইড Language যেমন.. PHP, Python, AASP  ইত্যাদি ব্যবহার করে প্রসেস করতে হয় এমনকি প্রসেসের পর ডেটাবেস ব্যবহার করে সেভ করেও রাখা যায়। যাইহোক HTML form Element দিয়ে শুধু ফর্মটি তৈরী করা হয় একটা সাধারন Form

Web Design And Development

প্রয়োগ দেখুন:

Web Design And Development

Form এর একটা আবশ্যিক Attributes হচ্ছে Action. এখানে Form টি Submit  করলে কোন File এর Form এর ডেটাগুলি Process করতে নিয়ে যাবে সেই ফাইলটিতে নিয়ে যাবে।

আর Method Attributes দিয়ে কোন পদ্ধতিতে Data যাবে সেটা বলে দেয়া হয় যেমন.. আমি দিয়েছি Post. Post মেথডে Deta ডেটা পাঠালে ডেটা লুকানো থাকে তবে যেখানে ডেটা লুকানোর দরকার নেই সেখানে Get নামে অপর মেথডটি ব্যবহার করা হয়। (method=”get”)। যেমন Google search এ get method ব্যবহার করেছে কারন এখানে ডেটা লুকানোর পরিবর্তে দেখানোই ভাল। Google এ কোন কিছু সার্চ দিলেই Browser এর Address বারে দেখবেন যেটা লিখে সার্চ দিয়েছেন সেগুলি দেখাবে। যাইহোক এগুলি PHP তে বিস্তারিত আলোচনা আছে।

এরপর Input Element  দিয়ে দুটি Text ফিল্ড তৈরী করেছি যেখানে User তার নাম লিখতে পারবে। Input Tag এর Type Attributes দিয়ে ঠিক করা যায় ফিল্ডটি কোন ধরনের ডেটা নিবে।

Type=”text” দিলে Text ফিল্ড হবে এবং Browser এ Text টেক্সট লেখার মত একটি ফিল্ড দেখাবে। আবার Type=”submit” দিয়ে উপরে দেখুন সাবমিট বাটন বানিয়েছি।

Input এর Name Attributes দিয়ে ফিল্ডটির নাম দেয়া যায়। প্রত্যেকটি ফিল্ডের Name Attributes মান ভিন্ন দিতে হয় কেননা এই মান ধরেই PHP ডেটা প্রসেস করে তাই একই নামের দুটি ফিল্ড এর ডেটা দুরকম ভাববে।

সাবমিট বাটনের জন্য Value Attributes দিয়ে যে মানটি দিবেন সেটা বাটনের উপর লেখা হিসেবে দেখাবে।

** Id, Style, Class ইত্যাদি যেকোন Globasl Attributes form Element ব্যবহার করতে পারেন।

চেকবক্স

=================

User কে Checkbox এবং রেডিও বাটন দিয়ে টিকমার্ক সংক্রান্ত ফর্ম ফিল্ড তৈরী করে দিতে পারেন যেমন.. User  কোন কোন বিষয় পড়েছে সেটার  জন্য Form  দিতে চাই তাহলে…

Web Design And Development

প্রদর্শন:

probability fortran order statistics

Form সংক্রান্ত যেকোন Element  সব

এর ভিতরে থাকতে হবে। উপরের উদাহরনের সময় বাচানোর জন্য যেভাবে দিয়েছি এভাবে Form তৈরী করলে Browser  দেখাবে ঠিকই কিন্তু কাজ করবেনা।

ওয়েব সাইট ডিজাইনে দক্ষ হতে চাইলে আমাদের  টিউটোরিয়াল দেখার পাশাপাশি গুগলে অনিক Web Design And Development Course আছে যেগুলো আপনাদের দেখা উচিত।

 

Web Design And Development Course-HTML Text Field

Add Your Heading Text Here

Web Design And Development Course

Web Design And Development Course

বিস্তারিত:

Text Field একটা Element Form তাই এখানে যত গুলো উদাহরন দেব সব

এর ভিতর রাখতে হবে।Text Field আগের টিউোটোরিয়ালটিতে দেখালাম। খুব সহজ।

Web Design And Development Course

প্রদর্শন:

Type এবং Name Attributes নিয়ে আগের টিউটোরিয়ালেই আছে। এখানে আরও ভিন্ন নতুন কিছু গুরত্বপূর্ন Attributes নিয়ে আলোচনা করি।

** Password Field তৈরীতে শুধু Type=”Password” দিলেই হয়ে যায়।

Maxlength Attributes দিয়ে Field এ সর্বোচ্চ কতটি অক্ষর লিখা যায় সেটা নির্দিষ্ট করে দেয়া যায়। যেমন:

Web Design And Development Course

প্রদর্শন:

HTML 5 এ placeholder নামে একটা নতুন Attributes এসছে যেটা দিয়ে Field  এ কি ধরনের তথ্য দিতে হবে এ সংক্রান্ত কিছু লিখে দিতে পারেন ফলে সেটা ইউজার দেখলে বুঝতে সুবিধা হবে।

Web Design And Development Course

প্রদর্শন:

টাইপ করা শুরু করুন সাথে সাথে “Type Address” লেখাটি অদৃশ্য হয়ে যাবে।

Web Design And Development Course-HTML Upload Form

Web Design And Development Course

Web Design And Development Course

বিস্তারিত:

Form এ যদি ছবি বা যেকোন ফাইল আপলোডের সুবিধা রাখতে চান তাহলে আগে Form কে Upload এর উপযোগী করতে হবে। এরপর Input Element এর Type Attributes এর মান File দিলেই কাজ হয়ে যাবে।

একটা Upload Form

Web Design And Development Course

প্রর্দশন:

Web Design And Development Course

File Upload করতে চাইলে Form এ এই Enctype=”Multipart/Formdata” Attributes দিতেই হবে। আর Input এর Type=”File” দিতে হয়।

Disabled, Readonly Attributes ব্যবহার করতে পারে এগুলি আগের টিউটোরিয়ালে আলোচনা হয়েছে।

Hidden field

====================

Input ফিল্ড লুকিয়ে রাখা যায়। ফলে Browser এর Form এ   কোন Field দেখাবেনা কিন্তু Form এ Hidden ফিল্ড দিয়ে যেকোন ডেটা Value Attributes রাখতে পারেন। যেমন…

Web Design And Development Course

ধরা যাক আপনার সাইটে একটা মুল তালিকা আছে সেখানে User কোন একটা Package   সিলেক্ট করে Submit  করলে তাকে একটা Form পূরনের জন্যForm Page এ পাঠিয়ে দিলেন। যে

Package Select  করল সেটার মুল জাভাস্ক্রিপ্ট বা PHP দিয়ে নিয়ে মুল Form এ একটা Hidden Field তৈরী করে রেখে দিতে পারে। এ রকম  আরো বিভিন্ন সময় হিডেন ফিল্ডের প্রয়োজনীয়তা দেখা দেয়।

4 thoughts on “Web Design And Development Course-HTML Form”

  1. Pingback: Web Design And Development Course-HTML Superscript, Subscript, Strike through. - MT Digital Agency

  2. Pingback: Web Design And Development Course-HTML Div - MT Digital Agency

  3. Pingback: Web Design And Development Course-HTML Bold & Italic - MT Digital Agency

  4. Pingback: Web Design And Development Course-HTML Code & Pre -

Leave a Comment

Your email address will not be published. Required fields are marked *

Recommended
Web Design And Development Courseবিস্তারিত:Drop Down List এর মাধ্যমে আপনি…
Cresta Posts Box by CP