ساخت لیست کشویی با html

ساخت لیست کشویی با html تگ select و تگ option

آموزش ساخت لیست کشویی با html تگ select و تگ option

با نام و یاد خداوند بزرگ و بلند مرتبه جلسه ی یازدهم از آموزش html به زبان ساده را تحت عنوان ساخت لیست کشویی با html شروع می کنیم. دراین جلسه با تگ های option , select آشنا می شوید.

در جلسه ی قبل ساخت لیست با html را آموختید ولی لیست کشویی کاملا متفاوت است.

لیست کشویی چیست؟

لیست کشویی یا همان لیست باز شو به لیستی می گویند که یک عنوان اصلی دارد بعد از آنکه شما روی آن عنوان کلیک کنید زبانه ای از زیر شاخه های مربوط به عنوانی که انتخاب کردید به صورت کشویی نمایان می شود.

از این مورد در ساخت منو های کشویی نیز استفاده می شود. که در این جلسه به صورت کامل در مورد با مبحث ساخت لیست کشویی با html صحبت خواهیم کرد.

این نوع لیست ها با ترکیب چندین کد ساخته می شوند که امیدوارم مبحث ترکیب کد های html در جلسات قبل به خوبی آموخته باشید.

مثالی از یک لیست کشویی

تگ select مهم ترین عنصر برای ساخت لیست کشویی با html

مهم ترین تگ برای ساختن یک منوی کشویی تگ select می باشد.

ما تمامی پدیده های لیست کشویی خود را در داخل تگ select قرار می دهیم.

تگ option

ما هر یک از اعضای لیست خود را در تگ option قرار می دهیم.

یعنی در صورتی که شما قصد داشته باشید که لیست کشویی با 10 عضو داشته باشید.(منظور از عضو همان تعداد لیست مورد نظر ماست) باید ده بار  تگ option را در درون تگ select وارد کنید.

چیزی که در میان باز و بسته شدن تگ option قرار می گیرد نمایش داده می شود.

مثالی برای درک بهتر مبحث ساخت لیست کشویی با html

به کد زیر با دقت توجه کنید.

خروجی

خروجی کد بالا را مشاهده کنید. البته خروجی شما به این زیبایی نیست و کوچک تر و… است.

توضیح کامل کد بالا

این کد به شدت شبیه به ساخت جدول با html است.

در خط اول به مرورگر گفته ایم که ما از جدید ترین نسخه ی html استفاده می کنیم.

بعد هم تگ html را باز کرده ایم

سپس تگ head را باز کردیم که قسمت اول زبان html است در این تگ متا تگ ها و… را می نویسیم

بعد از آن ما تگ title را باز کرده ایم و عنوان صفحه ی خود را وارد کرده ایم.

سپس تگ body باز شده است.

بعد از آن تگ select باز شده

تگ های option که مقادیر لیست کشویی ما می باشند.

بعد از این هم ما

بسته شده به ترتیب تگ ها

<select>

<body>

<html>

را داریم.

دقت کنید که اولین تگ option که تعریف کنید عنوان لیست کشویی شما می باشد.

نوشتهٔ قبلی
لیست ها در html
نوشتهٔ بعدی
ساخت لینک به نقاط مختلف یک صفحه با html و تگ iframe در html

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

این فیلد را پر کنید
این فیلد را پر کنید
لطفاً یک نشانی ایمیل معتبر بنویسید.

فهرست