در فرآیند ایجاد یک وب سایت یا وبلاگ و پر کردن بیشتر آن با محتوا، به دلایل مختلف، گاهی اوقات لازم می شود بخشی از متن پنهان شود، اطلاعات حجیم تری در یک بلوک پنهان فعلاً پنهان شود، اما همچنان به آن نشان داده شود. از آنچه در دسترس است استفاده کنید و به او این فرصت را بدهید که بدون رفتن به خط یا صفحه بعدی، محتوای پنهان را مشاهده کند.
قبلاً از یک سری جاوا اسکریپت برای پیاده سازی چنین راه حلی استفاده می شد، اما اکنون همه اینها را می توان به راحتی با استفاده از ویژگی های شگفت انگیز انجام داد.

امروز ما ساده‌ترین راه را برای ایجاد بلوک‌های مخفی محتوا در صفحات سایت و در پیام‌های فردی که با کلیک بر روی یک عنصر متنی خاص باز می‌شوند، با استفاده از ویژگی‌های منحصراً CSS3 بررسی خواهیم کرد. یک سوئیچ می تواند یک کلمه، یک عبارت برجسته، یک جمله کامل یا یک نماد آموزنده باشد.
چنین بلوک‌هایی اغلب در صفحاتی با حجم زیادی از محتوا استفاده می‌شوند، به منظور ساختارمندتر و فشرده‌تر کردن آن، همه محتوا به اصطلاح به گروه‌هایی تقسیم می‌شوند که در آن فقط عنوان‌ها به کاربر ارائه می‌شوند، تمام متن به طور پیش‌فرض پنهان می‌شود. و با کلیک بر روی یک عنصر خاص قابل مشاهده است (به بالا مراجعه کنید).

بیایید سعی کنیم بدون آب غیر ضروری انجام دهیم، به کل این مکانیسم ساده در عمل، با یک مثال واضح نگاه کنید، و همچنین می توانید در صورت تمایل چیزی را ویرایش کنید:

مثال شماره 1

متن انتخاب نشده و بدون علامت به عنوان سوئیچ برای بلوک های کشویی با اطلاعات اضافی، با یک دعوت بدون ابهام برای کلیک بر روی آن استفاده می شود، که برای دیدن آن باید بدون ترس یا تردید انجام دهید)))

همانطور که می بینید، همه چیز بیش از حد عالی کار می کند، محتوای پنهان بدون مشکل ظاهر می شود و با یک کلیک ملایم ماوس ناپدید می شود و در عین حال از حداقل کدهای اجرایی چه در چارچوب html و چه در شکل گیری استفاده کردیم. از سبک های css بدون اتصال کتابخانه های جاوا اسکریپت اضافی، با نگرانی ابدی که آیا آنها در سمت کاربر غیرفعال هستند یا خیر.
اجرای همه این اقدامات به لطف شبه کلاس CSS3 امکان پذیر شد :بررسی شد، برای عناصر رابط مانند دکمه های رادیویی () اعمال می شود. آنچه ما در واقع در تگ انجام دادیم ما ویژگی type را به کادر چک مقدار و همچنین شناسه id="hd-1" مربوط به شناسه منحصر به فرد اختصاص دادیم. for="hd-1"سوئیچ بلوک فعلی ما چک باکس ها را به طور کامل و برای همیشه با تنظیم ویژگی display: none در class.hide پنهان می کنیم.
در واقع، هیچ چیز خاصی برای توضیح در اینجا وجود ندارد؛ کل مکانیسم برای روشن و خاموش کردن بلوک های مخفی از سه عنصر تشکیل شده است:

• چک باکس - برچسب با معنی چک باکسصفت نوعو با یک شناسه پیوندی خاص
• عنوان (سوئیچ متن) - برچسب با یک مقدار شناسه منحصر به فرد برای ویژگی برای، (شناسه باید با شناسه تگ یکسان باشد ورودیبا معنی چک باکسصفت نوع).
• بلوک محتوا یک تگ div است که تا زمان های بهتر تا زمانی که کاربر کلیک کند حاوی محتوای مخفی مختلف (متن، تصاویر و غیره و غیره) خواهد بود.

امیدوارم از توضیحات آشفته من مشخص شده باشد که اصل مطلب چیست. CSS سبک های جدیدی را اعمال می کند (با استفاده از کلاس شبه بررسی شد) برای نشان دادن بلوکی از محتوایی که قبلاً تنها زمانی پنهان شده بود که کاربر روی عنصری کلیک کند که با یک شناسه منحصربه‌فرد با کادر انتخاب مرتبط است.

از همه اینها نتیجه می گیرد یادداشت مهم:

هنگامی که از چندین بلوک پنهان در یک صفحه استفاده می کنید، هر دکمه رادیویی باید یک شناسه منحصر به فرد داشته باشد که با شناسه های موجود در بلوک های دیگر متفاوت باشد.

بنابراین، در کلمات ما مرتب کرده ایم که چه چیزی به کجا می رود و چرا، اکنون، بیایید به چارچوب html کل ساختار نگاه کنیم:

< input class = "hide" id= "hd-1" type= "checkbox" > < label for = "hd-1" >برای باز کردن اینجا را کلیک کنید! < div>مطالب پنهان...... < input class = "hide" id= "hd-2" type= "checkbox" > < label for = "hd-2" >برای خواندن بیشتر در اینجا کلیک کنید! < div>محتوای پنهان ...

برای باز کردن اینجا را کلیک کنید!

برای خواندن بیشتر در اینجا کلیک کنید!

در مرحله بعد، ما مستقیماً به شکل‌گیری سبک‌های CSS می‌رویم، که بدون آن کل این طراحی کار نخواهد کرد. حداقل کد، بدون هیچ تزئینی، فقط کمی پس زمینه بلوک کشویی را برجسته می کند تا برای شما تعریف شود و قاب متن پنهان را نشان دهد. می‌توانید بلوک‌ها را به دلخواه طراحی کنید، حاشیه‌ها، گوشه‌های گرد، متن برجسته یا .

1.CSS

. پنهان شدن، . hide + label ~ div (نمایش: هیچکدام؛ ) /* نوع متن برچسب */. پنهان کردن + برچسب، . پنهان کردن: علامت زده + برچسب (بالشتک: 0؛ رنگ: سبز؛ مکان نما: نشانگر؛ حاشیه پایین: 1 پیکسل سبز نقطه‌دار؛ ) . پنهان کردن: علامت زده + برچسب + div (نمایش: بلوک؛ پس‌زمینه: #efefef؛ - moz- box- shadow: inset 3px 3px 10px #7d8e8f; - webkit- box- shadow: inset 3px 3px 10px #7d8e8f; box- shadow: inset 3px 3px 10px #7d8e8f؛ padding: 10px;)

/* مخفی کردن چک باکس ها و بلوک های محتوا */ .hide، .hide + label ~ div (نمایش: هیچ، ) /* ظاهر متن برچسب */ .hide + label, .hide:checked + label ( padding: 0; color: green ؛ مکان نما: نشانگر؛ حاشیه-پایین: 1 پیکسل سبز نقطه چین؛ ) /* ظاهر متن برچسب وقتی سوئیچ فعال است */ .پنهان: علامت زده + برچسب ( رنگ: قرمز؛ حاشیه پایین: 0؛ ) /* وقتی چک باکس فعال است، نشان دادن بلوک‌ها با محتوا */ .hide:checked + label + div ( display: block; background: #efefef; -moz-box-shadow: inset 3px 3px 10px #7d8e8f; -webkit-box-shadow: inset 3px 3px 10px #7d8e8f؛ box-shadow: inset 3px 3px 10px #7d8e8f؛ padding: 10px; )

این همه، برای مثال زاهدانه، حداقلی کاملاً کافی است. اما اگر حداقل چیزهای خوبی اضافه نکنیم، اصلاً ما نخواهیم بود، و بهتر است به صورت بصری به کاربر بگوییم کجا کلیک کند.
در مثال دوم، یک علامت ساده به شکل یک علامت مثبت اضافه کردم که به وضوح نشان می‌دهد چیز دیگری در اینجا پنهان شده است؛ وقتی فشار داده می‌شود، فوراً به منهای تبدیل می‌شود و من یک انیمیشن کوچک به بلوک‌های مخفی با محتوا اضافه کردم. آنها ظاهر می شوند، و همه اینها منحصراً با کمک جادوی CSS3.

2.CSS

/* مخفی کردن چک باکس ها و بلوک های محتوا */. پنهان شدن، . hide + label ~ div (نمایش: هیچکدام؛ ) /* نوع متن برچسب */. پنهان کردن + برچسب (حاشیه: 0؛ بالشتک: 0؛ رنگ: سبز؛ مکان نما: نشانگر؛ نمایشگر: بلوک درون خطی؛ ) /* ظاهر متن برچسب زمانی که سوئیچ فعال است */. پنهان کردن: علامت زده + برچسب (رنگ: قرمز؛ حاشیه - پایین: 0 ؛ ) /* وقتی چک باکس فعال است، بلوک های حاوی محتوا را نشان دهید */. پنهان کردن: علامت زده + برچسب + div (نمایش: بلوک؛ پس‌زمینه: #efefef؛ - moz- box- shadow: inset 3px 3px 10px #7d8e8f; - webkit- box- shadow: inset 3px 3px 10px #7d8e8f; box- shadow: inset 3px 3px 10px #7d8e8f; حاشیه سمت چپ: 20px;بالشتک: 10px; /* یک انیمیشن کوچک هنگام نمایش */- webkit- انیمیشن: fade ease- در 0. 5s. - moz- انیمیشن: fade ease- در 0. 5s; انیمیشن: fade ease- در 0. 5s; ) /* انیمیشن زمانی که بلوک های مخفی ظاهر می شوند */@- moz- فریم های کلیدی محو می شوند ( از ( کدورت: 0 ; ) به ( تیرگی: 1 ) ) @- webkit- فریم های کلیدی محو می شوند ( از ( کدورت: 0 ; ) به ( تیرگی: 1 ) ) فریم های کلیدی @ محو می شوند ( از ( کدورت: 0 ; ) به ( کدورت: 1 ) ) . پنهان کردن + برچسب: قبل ( پس زمینه - رنگ: #1e90ff؛ رنگ: #fff; محتوا: " \002 B"; نمایش: بلوک؛ شناور به سمت چپ؛ اندازه فونت: 14px; فونت-وزن: پررنگ; ارتفاع: 16 پیکسل؛ ارتفاع خط: 16 پیکسل. حاشیه: 3px 5px; text- align: center; عرض: 16 پیکسل؛ - webkit- border- شعاع: 50%؛ - moz- border- شعاع: 50%; شعاع مرزی: 50%; ) . پنهان کردن: علامت زده + برچسب: قبل ( محتوا: " \221 2" ; }

/* مخفی کردن چک باکس ها و بلوک های محتوا */ .hide، .hide + label ~ div (نمایش: هیچ، نشانگر؛ نمایش: بلوک درون خطی؛ ) /* ظاهر متن برچسب زمانی که سوئیچ فعال است */ .hide:checked + label (رنگ: قرمز؛ حاشیه-پایین: 0;) /* هنگامی که چک باکس فعال است، نشان داده شود بلوک‌های دارای محتوا */ . hide:checked + label + div ( display: block; background: #efefef; -moz-box-shadow: inset 3px 3px 10px #7d8e8f; -webkit-box-shadow: inset 3px 3px 10px #7d8e8 ؛ box-shadow: inset 3px 3px 10px #7d8e8f؛ حاشیه سمت چپ: 20px؛ بالشتک: 10px؛ /* کمی انیمیشن هنگام نمایش */ -webkit-animation:fade ease-in 0.5s; -moz-animation:fade ease -in 0.5s؛ انیمیشن: fade ease-in 0.5s; ) /* انیمیشن زمانی که بلوک های مخفی ظاهر می شوند */ @-moz-keyframes محو می شوند ( از ( opacity: 0; ) به ( opacity: 1 ) ) @-webkit-keyframes fade (از ( opacity: 0 ; ) to ( opacity: 1 ) ) @keyframes fade (از ( opacity: 0; ) to ( opacity: 1 ) ) .hide + label:before ( background-color: #1e90ff; رنگ: #fff; محتوا: "\002B"؛ نمایش: بلوک؛ شناور به سمت چپ؛ اندازه فونت: 14px; فونت-وزن: پررنگ; ارتفاع: 16 پیکسل؛ ارتفاع خط: 16 پیکسل. حاشیه: 3px 5px; text-align: center; عرض: 16 پیکسل؛ -webkit-border-radius: 50%؛ -moz-border-radius: 50%; شعاع مرزی: 50%; ) .hide:checked + label:before ( محتوا: "\2212"; )

با همه حساب ها، روش بدون شک خوب است، اما مثل همیشه، و اصلا تعجب آور نیست، مشکلاتی با ترمز ابدی پیشرفت، مرورگر اینترنت اکسپلورر، شبه کلاس ایجاد می شود. بررسی شدفقط از نسخه های 9 و جدیدتر این مرورگر پشتیبانی می کند. برای نسخه‌های قدیمی‌تر IE، همه چیز ثابت می‌ماند، باید از جاوا اسکریپت استفاده کنید.

با استفاده از چک باکس های مخفی، می توانید به راحتی بلوک های سبک، لغزنده، گالری ها و موارد دیگر را پیاده سازی کنید.

با تمام احترام، اندرو

شرح

تگ HTML برای ایجاد یک لیست کشویی (کشویی) استفاده می شود که با کلیک روی عنصر فرم ظاهر می شود و به بازدید کننده سایت اجازه می دهد یکی از گزینه های از پیش تعریف شده را انتخاب کند.

عنصر

ممکن است حاوی دو یا چند برچسب باشد ، انتخاب های موجود را در لیست کشویی تعریف می کند. متن عنصر فرزند اول در ابتدا در لیست کشویی نمایش داده می شود، یعنی مقدار پیش فرض لیست خواهد بود. مقدار پیش فرض را تغییر دهید یا تنظیم کنید می توانید ویژگی انتخاب شده را به گزینه مورد نظر اضافه کنید:

ولوو ساب فولکس واگن آئودی

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

ویژگی های

فوکوس خودکار: مشخص می کند که عنصر باید به طور خودکار هنگام بارگیری صفحه وب فوکوس دریافت کند. مقادیر ممکن برای ویژگی بولین فوکوس خودکار: مثال "

توجه: ویژگی فوکوس خودکار در IE9 و نسخه های قبلی و فایرفاکس پشتیبانی نمی شود.

Disabled: نشان می دهد که عنصر غیرفعال است، به این معنی که کاربر نمی تواند با عنصر تعامل داشته باشد. مقادیر ممکن برای ویژگی Boolean غیر فعال:

مثال » فرم: فرمی را که عنصر با آن مرتبط است را مشخص می کند. مقدار مشخصه، شناسه عنصر است

. این ویژگی به شما امکان می دهد یک عنصر را قرار دهید در هر مکانی از سند، و نه فقط به عنوان یک نسل از عنصر .

توجه: ویژگی فرم در فایرفاکس پشتیبانی نمی شود.

Multiple: نشان می دهد که می توان چندین گزینه را در یک زمان انتخاب کرد. چندین گزینه بسته به سیستم عامل متفاوت است:

• ویندوز: کلید CTRL را نگه دارید تا چندین گزینه را انتخاب کنید.
• مک: برای انتخاب چندین گزینه، کلید CMD را نگه دارید.

مقادیر ممکن برای صفت منطقی چندگانه: مثال "

توجه: با توجه به روش‌های مختلف انتخاب چندین مورد و اطلاع‌رسانی اضافی به کاربران مبنی بر در دسترس بودن چندین انتخاب، توصیه می‌شود به جای فهرست کشویی از چک باکس‌ها استفاده کنید.

نام: نامی را برای لیست کشویی تعریف می کند. می توان از آن برای دسترسی به داده های فرم پس از ارسال یا برای ارجاع به یک عنصر در جاوا اسکریپت استفاده کرد. اندازه: تعداد گزینه های قابل مشاهده در لیست کشویی را مشخص می کند. اگر مقدار مشخصه اندازه بزرگتر از 1 اما کمتر از تعداد کل گزینه های موجود در لیست باشد، مرورگر به طور خودکار یک نوار اسکرول اضافه می کند تا نشان دهد که گزینه های بیشتری برای مشاهده وجود دارد.

تگ های HTML که فرم های HTML را در سایت تعریف می کنند

ما وب سایت ها و صفحات فردی را در اینترنت ایجاد می کنیمبرای ارتباط با بازدیدکنندگان

فرم های HTMLبرای ثبت نام بازدیدکنندگان در سایت، نظرسنجی های تعاملی و رای گیری، امکان ارسال پیام، خرید و غیره استفاده می شود. HTMLاین فرم برای یک هدف ایجاد شده است: جمع آوری و متعاقباً انتقال اطلاعات برای پردازش توسط یک اسکریپت نرم افزاری یا از طریق ایمیل.

نمونه فرم HTML | وارد سایت شوید

برچسب ها، ویژگی ها و ارزش ها

- شکل را تعیین کنید.
• name="" - نام فرم را مشخص می کند.
• method="" - روش ارسال داده ها را از فرم تعریف می کند. مقادیر: "get" (پیش فرض) و "post". روش "پست" اغلب مورد استفاده قرار می گیرد، زیرا امکان انتقال حجم زیادی از داده ها را فراهم می کند.
• action="" - نشانی اینترنتی که داده ها برای پردازش در آن ارسال می شوند را مشخص می کند. در مورد ما - enter_data.php ..
• - عناصر فرم را مانند دکمه ها، سوئیچ ها، فیلدهای متنی برای ورود داده ها تعریف کنید.
• type="text" - یک فیلد متنی برای ورود داده ها تعریف می کند.
• type="password" - فیلدی را برای وارد کردن رمز عبور تعریف می کند که متن آن به شکل ستاره یا دایره نمایش داده می شود.
• type="checkbox" - یک دکمه رادیویی را تعریف می کند.
• type="hidden" - یک عنصر فرم پنهان را تعریف می کند - برای انتقال اطلاعات اضافی به سرور استفاده می شود.
• size="25" - طول فیلد متن به کاراکتر.
• maxlength="30" - حداکثر تعداد مجاز کاراکترهای وارد شده.
• value="" - مقداری را تعیین می کند که برای پردازش ارسال می شود اگر مربوط به دکمه های رادیویی یا سوئیچ ها باشد. مقدار این ویژگی به عنوان بخشی از یک فیلد متنی یا دکمه به عنوان مثال، Vasya یا Login در مثال بالا نشان داده خواهد شد.

نمونه فرم HTML | نظرات در سایت

نام ایمیل

برچسب ها، ویژگی ها و ارزش ها

• action="http://site/comments.php" - نشانی اینترنتی را که داده های فرم به آن ارسال می شود را مشخص می کند.
• id="" - نام و شناسه عنصر فرم را تعریف می کند.
• name="" - نام عنصر فرم را مشخص می کند.
• - یک فیلد متنی را به عنوان بخشی از فرم تعریف کنید.
• cols="" - تعداد ستون های فیلد متن فرم را تعیین می کند.
• rows="" - تعداد ردیف های فیلد متن فرم را مشخص می کند.

اگر بین متن را جای دهید، در داخل فیلد به عنوان نمونه نشان داده می شود که به راحتی قابل حذف است.

نمونه فرم HTML | لیست کشویی

مقام اول مقام دوم مقام سوم مقام چهارم

برچسب ها، ویژگی ها و ارزش ها

• - لیستی با موقعیت هایی برای انتخاب تعریف کنید.
• size="" - تعداد موقعیت های قابل مشاهده لیست را تعیین می کند. اگر مقدار 1 باشد، با یک لیست کشویی روبرو هستیم.
• - تعیین موقعیت (اقلام) لیست.
• value="" - حاوی مقداری است که توسط فرم برای پردازش به url مشخص شده ارسال می شود.
• select="selected" - یک آیتم لیست را به عنوان نمونه برجسته می کند.

نمونه فرم HTML | فهرست با نوار پیمایش

با افزایش مقدار مشخصه size=""، لیستی با نوار اسکرول دریافت می کنیم:

مقام اول مقام دوم مقام سوم مقام چهارم

مقام اول مقام دوم مقام سوم مقام چهارم

برای این گزینه از پرچم multiple="multiple" استفاده کنید که امکان انتخاب چندین موقعیت را فراهم می کند. عدم وجود آن به شما امکان می دهد فقط یک مورد را انتخاب کنید.

type="submit" - یک دکمه را تعریف می کند.

type="reset" - یک دکمه تنظیم مجدد را تعریف می کند.

value="" - برچسب روی دکمه را مشخص می کند.

به ادامه مطلب مراجعه کنید:

شرح

برچسب بزنید به شما امکان می دهد یک عنصر رابط را در قالب یک لیست کشویی و همچنین یک لیست با انتخاب تک یا چندگانه ایجاد کنید، همانطور که در زیر نشان داده شده است. ظاهر نهایی بستگی به استفاده از ویژگی اندازه تگ دارد که ارتفاع لیست را تعیین می کند. عرض لیست با گسترده ترین متن مشخص شده در برچسب تعیین می شود ، و همچنین با استفاده از استایل ها قابل تغییر است. هر مورد با استفاده از یک برچسب ایجاد می شود ، که باید در ظرفی تودرتو شود . اگر قصد دارید داده های لیست را به سرور ارسال کنید، باید عنصر را قرار دهید داخل فرم این نیز زمانی ضروری است که به داده های لیست از طریق اسکریپت ها دسترسی داشته باشید.

نحو

بند 1 نقطه 2

ویژگی های

به شما امکان می دهد با استفاده از میانبرهای صفحه کلید به فهرستی بروید. لیست را برای دریافت فوکوس پس از بارگیری صفحه تنظیم می کند. دسترسی و اصلاح یک عنصر را مسدود می کند. یک لیست را با یک فرم مرتبط می کند. به شما امکان می دهد چندین مورد لیست را به طور همزمان انتخاب کنید. نام عنصری که باید به سرور ارسال شود یا از طریق اسکریپت به آن دسترسی پیدا کنید. انتخاب لیست قبل از ارسال فرم الزامی است. تعداد خطوط فهرست برای نمایش توالی انتقال بین عناصر را هنگام فشار دادن کلید Tab تعریف می کند

برچسب بسته شدن

ضروری.

HTML5 IE Cr Op Sa Fx

یک قهرمان انتخاب کنید چبوراشکا کروکودیل گنا شاپوکلیاک موش لاریسا

تگ گزینه HTML برای ایجاد یک لیست کشویی استفاده می شود که به کاربر اجازه می دهد یک گزینه را از مجموعه مقادیر از پیش تعریف شده انتخاب کند.

متن قابل مشاهده برای کاربر ممکن است با متن مشخص شده در ویژگی value متفاوت باشد. در اینجا نحوه ایجاد یک لیست کشویی آورده شده است:

سبز رنگ زرد مشکی

• لیست کشویی با استفاده از تگ ایجاد می شود ;
  داخل یک تگ
  گزینه های انتخاب با استفاده از یک برچسب تعریف می شوند ;
• در تگ می توانید از ویژگی value برای دسترسی به گزینه انتخاب شده با استفاده از PHP، JS، Jquery و غیره استفاده کنید.

همچنین می توان به جای استفاده از ID برای استایل دادن به لیست کشویی، یک کلاس CSS را مشخص کرد.

در بخش بعدی، نمونه هایی از استفاده از لیست کشویی HTML در جاوا اسکریپت/JQuery را نشان خواهم داد. مثال ها همچنین نحوه تنظیم سبک ها را نشان می دهند با استفاده از CSS/CSS3 و فریم ورک بوت استرپ.

نمونه ای از ایجاد یک لیست کشویی ساده

این مثال از گزینه انتخاب HTML برای ایجاد یک لیست کشویی با سه گزینه برای انتخاب استفاده می کند:

مثال بالا از نشانه گذاری زیر برای ایجاد یک لیست کشویی استفاده می کند:

5 10 15 20 25

با استفاده از ویژگی value

همانطور که قبلا ذکر شد، مقدار مشخصه value ممکن است با متن نمایش داده شده در صفحه متفاوت باشد. به عنوان مثال، می توانید نام کشورها یا رنگ ها را برای کاربران نمایش دهید و از کدهای کوتاه در ویژگی value استفاده کنید.

در مثال زیر، یک لیست کشویی با ویژگی مقدار ایجاد می کنیم:

نمایش دمو و کد آنلاین

برای برچسب زدن کد زیر استفاده می شود:

مارون سبز رنگ زرد آبی قرمز

نمونه ای از دسترسی به گزینه انتخاب شده در جاوا اسکریپت

حال بیایید نمونه ای از دسترسی به مقدار یک گزینه انتخاب شده و انجام برخی اقدامات ایجاد کنیم. ما همان لیستی را که در مثال بالا با گزینه های رنگ ایجاد می کنیم ایجاد می کنیم. پس از انتخاب، روی دکمه کلیک کنید تا آن رنگ به سند اعمال شود:

نمایش دمو و کد آنلاین

برای مقدار گزینه HTML کد زیر استفاده می شود:

مارون سبز رنگ زرد آبی قرمز دیگر

خط کد زیر در جاوا اسکریپت برای دسترسی به مقدار ویژگی مقدار یک گزینه استفاده می شود :

var seltheme = document.getElementById("selcolor").value;

هنگامی که دکمه کلیک می شود، یک تابع JS فراخوانی می شود که مقدار انتخاب شده در لیست کشویی را به یک متغیر اختصاص می دهد. این مقدار برای اعمال رنگ به سند فعلی استفاده می شود.

دسترسی به متن قابل مشاهده در JQuery

این بار از JQuery برای دسترسی به مقدار گزینه انتخاب شده استفاده می کنم: هم متن و هم مقدار . در این نسخه نمایشی، من به متن قابل مشاهده در یک تگ گزینه در HTML دسترسی خواهم داشت:

نمایش دمو و کد آنلاین

در کد هر گزینه در تگ

معنی با متن متفاوت است هنگامی که یک رنگ را انتخاب می کنید، jQuery متن قابل مشاهده در هشدار را نمایش می دهد. کد برچسب بعد:

مارون سبز رنگ زرد آبی قرمز

در اینجا نحوه دسترسی به این مقدار در اینجا آمده است گزینه انتخاب HTML جاوا اسکریپت را انتخاب کرد:

var selectedcolor = $("#jqueryselect option:selected").text();

همچنین می توانید با استفاده از روش JQuery $.val() به مقدار دسترسی پیدا کنید:

var selectedcolor = $("#jqueryselect").val();

این خط را در مثال بالا جایگزین کنید و کد به جای متن قابل مشاهده، مقدار کد کوتاه/رنگ را در ویژگی value نمایش می دهد.

نمونه ای از گرفتن مقدار در اسکریپت PHP

در این مثال از دریافت مقدار گزینه انتخاب شده از یک لیست کشویی، فرم با استفاده از تگ ایجاد می شود در بخش نشانه گذاری پس از انتخاب رنگ از لیست کشویی، روی دکمه "ارسال" کلیک کنید. داده های فرم به همان فایل PHP ارسال می شود و پس از آن رنگ انتخاب شده نمایش داده می شود:

نمایش دمو و کد آنلاین

روش فرم استفاده شده در مثال POST است، بنابراین می توانید مقادیر فرم را با استفاده از آرایه PHP $_POST[“”] بدست آورید. این کد فرم استفاده شده در مثال است:

یک رنگ را انتخاب کنید:

مارون سبز رنگ زرد آبی قرمز