Web Design And Development Course
বিস্তারিত:
Drop Down List এর মাধ্যমে আপনি User এর জন্য এমন একটা তালিকা তৈরী করতে পারবেন যেখান থেকে User যেকোন একটা Select করে দিতে পারবে। ধরা যাক আপনাকে একটা ফর্ম তৈরী করতে বলা হল এবং এখানে একজনের প্রিয় রং (Color) কি সেটা যাতে Select সিলেক্ট করে দিতে পারে (অনেকগুলি রং Color) এর মধ্যে) এমন একটি অপশন রাখতে হবে,তখন Drop Down List এর মাধ্যমে সেটা সহজেই করতে পারেন।
Drop Down List তৈরী করতে প্রথমে
.
প্রদর্শন:ড্রপডাউন লিষ্ট:
উপরের উদাহরনে দেখুন selected Attributes এর কারনে প্রথম অপশন Maroon দেখাচ্ছে আপনি যদি চান White প্রথমে দেখাক তাহলে ৩ নম্বর লাইনে selected এট্রিবিউট ব্যবহার করবেন।
প্রতিটি <option> ট্যাগে value এট্রিবিউট আছে এটা খুব গুরত্বপূর্ন যখন ফর্মের ডেটা সার্ভারে পাঠাবেন।value Attributes নাম ধরে (যেমন bl,mr..) কল করতে হয়।
<select> ট্যাগের size এট্রিবিউট
<select> ট্যাগে size Attributes দিয়ে আপনি ঠিক করে দিতে পারেন যে List কয়টি আইটেম দেখাবে যেমন উপরের উদাহরনেই যদি size=2 দেন তাহলে দুটি অপশন দেখাবে বাকিটা স্ক্রল করে দেখতে হবে।
প্রদর্শন: ট্যাগের size Attributes:
ট্যাগের multiple এট্রিবিউট:
multiple এর মাধ্যমে আপনি একের অধিক বিষয় সিলেক্ট করার সুযোগ দিতে পারেন।
প্রদর্শন: ট্যাগের multiple এট্রিবিউট
*৭ নম্বর লাইনে যদি selected Attributes উঠিয়ে দেন তাহলে কোন Option আর Select দেখাবেনা। আপনার Option Liost যদি অনেক বড় হয় তাহলে Group করতে পারেন।<optgroup> Element দিয়ে এটা করা যায়। যেমন…
প্রদর্শন:
Web Design And Development Course- Line Break, Radio Button-Text Area
Web Design And Development Course- Line Break, Radio Button-Text Area
বিস্তারিত:
এটা হচ্ছে Line Break (ভাঙ্গার জন্য)একটি Tag এর জন্য Tag টি এইটুকুই, start বা end tag ইত্যাদি নেই। HTML Elem এর ভিতর এটা ব্যবহার করে যেকোন জায়গায় Line ভেঙ্গে নিচের Line এ নিয়ে যেতে পারেন। আমরা সাধারনত ঠিকানা ইত্যাদি লেখার সময়
এর ভিতর এটা ব্যবহার করে থাকি । এছাড়াও আরো অনেক প্রয়োগ আছে।
প্রদর্শন:
12/13 Market Road
Mirpur, Dhaka
Bangladesh
ট্যাগ
===============
লম্বা রেখা দেয়ার জন্য আড়াআড়ি ভাবে hr ট্যাগটি ব্যবহৃত হয়। যেমন…
প্রদর্শন:
Bangladesh
This is a heading
Web Design And Development Course-HTML Radio Button
** যেকোন Input (এখানে Radio বাটন) Filed একটা Form Element তাই এখানে যত উদাহরন দেব সব
এর ভিতর রাখতে হবে।
Fom এ অনেক সময় অনেকগুলি Option এর মধ্যে যেকোন একটি Option Select করার সুযোগ দেয়া লাগতে পারে। এসব ক্ষেত্রে Radio Button ব্যবহৃত হয়। যেমন…
প্রদর্শন:
Select your department
Statistics Mathematics CSE
দেখুন শুধু Type Attributes পরিবর্তন করাতে Radio Button চলে এসেছে, Type এর মান Text দিলে Textbox হয়, Checkbox দিলে একাধিক অপশন Select করার মত Filed আসে, Submit দিলে একটা Submit বাটন তৈরী হয় ইত্যাদি।
** Form Element এর Name Attributes এর মান ভিন্ন ভিন্ন দিতে হয় শুধু Radio বাটনের ক্ষেত্রে একই নাম দিতে হবে যদি চান যেকোন একটি Select করতে পারবেন (অন্যটি সিলেক্ট করলে Automatic Select টি Unselect হয়ে যাবে)। মান ভিন্ন দিবেন না কারন এটাতো Chackbox দিয়ে করা হয় যা প্রথম টিউটোরিয়ালে আলোচনা হয়েছে।
যদি যেকোন একটি Select দেখাতে চান তাহলে সেটাতে Checked বা checked=”checked” Attributes ব্যবহার করুন। যেমন….
প্রদর্শন:
Select your department
Statistics Mathematics CSE
এছাড়া Required, Disabled ইত্যাদি Attributes ব্যবহার করতে পারেন যেগুলি টেক্সটএরিয়া টিউটোরিয়ালে আলোচনা হয়েছে।
Web Design And Development Course-HTML Text Area
** Textarea একটি Form Element অর্থ্যাৎ এখানে উদাহরন যতগুলি থাকবে তা সবগুলো
ভিতরে রাখতে হবে।
Input এর type=”text” দিলে যে text Field তৈরী হয় সেখানে শব্দ লেখা চলে কয়েকটি মাএ । অনেক বেীশ লাইন লেখার প্রয়োজন হলে Element ব্যবহার করতে হবে। ধরা যাক Form এ User নিজের সম্পর্কে লেখার জন্য একটা Field দিবেন তখন Textraea ব্যববহার করতে পারেন কেননা User অনেক লাইন লিখতে পারে এবং নিজের সম্পর্কে লিখতে পারে।
প্রদর্শন:
Cols Attributes দিয়ে আড়াআড়ি ভাবে দৈর্ঘ্য বাড়ানো যায় আর Rows এর মান যত বেশি দিবেন ততো বেশী লম্বা হবে।
Wrap নামে একটা Attributes ব্যবহার করতে পারেন। Wrap=”Soft” দিলে User যদি Textarea এর Width এর চেয়ে বেশি Text দেয় তবুও এক লাইনে দেখাবে (সাবমিট করলে)। বাই ডিফল্ট এটাই সক্রিয় থাকে। wrap=”hard” দিলে লেখা মুড়িয়ে দেখাবে (ভেঙ্গে দেখাবে)। hard দিলে অবশ্যই cols Attributes ব্যবহার করতে হবে।
autofocus=”autofocus” বা শুধু autofocus দিতে পারেন। এটাও একটা Attributes এটা দিলে Automatic Textarea তে মাউস চলে যাবে এবং কারসর পিটপিট করবে। পেজ লোড হবার সময় এমন হবে। আর যদি এটা না দেন তাহলে Textarea এর ভিতর মাউস নিয়ে click করলে তারপর কারসর পিটপিট করবে।
Required=”required” বা শুধু Required দিতে পারেন। আগে জাভাস্ক্রিপ্ট দিয়ে করতে হত এখন ফর্ম ভেলিডেশনের দিয়ে কাজ হয় । এই ফিল্ড ইউজার পুরন না করলে ফর্ম সাবমিটই করতে দেবেনা।
Readonly=”readonly” বা শুধু Readonly দিলে User শুধু দেখতে পাবে কিন্তু সেখানে কিছু লিখতে পারবেনা। সাধারনত Privacy policy এর কথাগুলি অনেকসময় এভাবে
Textarea তে Readonly করে শুধু দেখানো হয় Disabled একটা Attributes ব্যবহার করতে পারেন Disabled=”disabled” বা শুধু Disabled দিয়ে। ধুসর রং দিয়ে Textarea টি দেখাবে।
যেকোন নামে .html এক্সটেনশন দিয়ে সেভ করে (যেমন test.html) রান করিয়ে দেখুন।
Note: Web Design And Development Course টিউটোরিয়াল (Part-1)
See More Articles…
Pingback: Web Design And Development Course-HTML Upload Form - MT Digital Agency
Pingback: Web Design And Development Course-Superscript, Subscript, Strike through. - MT Digital Agency
Pingback: Web Design And Development Course-HTML Form - MT Digital Agency
Pingback: Web Design And Development Course-HTML Text Field - MT Digital Agency
Pingback: Web Design And Development Course-Bold & Italic - MT Digital Agency