Web Design And Development Course-HTML Drop down list

Web Design And Development Course

Web Design And Development Course

বিস্তারিত:

Drop Down List এর মাধ্যমে আপনি User এর জন্য এমন একটা তালিকা তৈরী করতে পারবেন যেখান থেকে  User যেকোন একটা Select  করে দিতে পারবে। ধরা যাক আপনাকে একটা ফর্ম তৈরী করতে বলা হল এবং এখানে একজনের প্রিয় রং (Color) কি সেটা যাতে Select সিলেক্ট করে দিতে পারে (অনেকগুলি রং Color) এর মধ্যে) এমন একটি অপশন রাখতে হবে,তখন Drop Down List এর মাধ্যমে সেটা সহজেই করতে পারেন।

Drop Down List তৈরী করতে প্রথমে

.

Web Design And Development Course

প্রদর্শন:ড্রপডাউন লিষ্ট:

1.

উপরের উদাহরনে দেখুন selected Attributes এর কারনে প্রথম অপশন Maroon দেখাচ্ছে আপনি যদি চান White প্রথমে দেখাক তাহলে ৩ নম্বর লাইনে selected এট্রিবিউট ব্যবহার করবেন।

প্রতিটি <option> ট্যাগে value এট্রিবিউট আছে এটা খুব গুরত্বপূর্ন যখন ফর্মের ডেটা সার্ভারে পাঠাবেন।value Attributes নাম ধরে (যেমন bl,mr..) কল করতে হয়।

 

<select> ট্যাগের size এট্রিবিউট

<select> ট্যাগে size Attributes দিয়ে আপনি ঠিক করে দিতে পারেন যে List কয়টি আইটেম দেখাবে যেমন উপরের উদাহরনেই যদি size=2 দেন তাহলে দুটি অপশন দেখাবে বাকিটা স্ক্রল করে দেখতে হবে।

Web Design And Development Course

প্রদর্শন: ট্যাগের size Attributes:

01. 02. 03. 04. 05. 06. 07. 08. 09.

*৭ নম্বর লাইনে যদি selected Attributes উঠিয়ে দেন তাহলে কোন Option আর Select   দেখাবেনা। আপনার Option  Liost  যদি অনেক বড় হয় তাহলে Group করতে পারেন।<optgroup> Element  দিয়ে এটা করা যায়। যেমন…

Web Design And Development Course

প্রদর্শন:

01.

Web Design And Development Course- Line Break, Radio Button-Text Area

Web Design And Development Course

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 ট্যাগটি ব্যবহৃত হয়। যেমন…

Web Design And Development Course

প্রদর্শন:

Bangladesh

This is a heading

Web Design And Development Course-HTML Radio Button

** যেকোন Input (এখানে Radio বাটন) Filed একটা Form Element  তাই এখানে যত উদাহরন দেব সব

এর ভিতর রাখতে হবে।

Fom এ অনেক সময় অনেকগুলি Option এর  মধ্যে যেকোন একটি Option Select  করার সুযোগ দেয়া লাগতে পারে। এসব ক্ষেত্রে Radio Button ব্যবহৃত হয়। যেমন…

Web Design And Development Course

প্রদর্শন:

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 ব্যবহার করুন। যেমন….

Web Design And Development Course

প্রদর্শন:

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 অনেক লাইন লিখতে পারে এবং নিজের সম্পর্কে লিখতে পারে।

Web Design And Development Course

প্রদর্শন:

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 টি দেখাবে।

Web Design And Development Course

যেকোন নামে .html এক্সটেনশন দিয়ে সেভ করে (যেমন test.html) রান করিয়ে দেখুন।

5 thoughts on “Web Design And Development Course-HTML Drop down list”

  1. Pingback: Web Design And Development Course-HTML Upload Form - MT Digital Agency

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

  3. Pingback: Web Design And Development Course-HTML Form - MT Digital Agency

  4. Pingback: Web Design And Development Course-HTML Text Field - MT Digital Agency

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

Leave a Comment

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

Recommended
How to earn money online without investment for students? If…
Cresta Posts Box by CP