امتیاز دهید:

لیست هایی تحت عنوان Drop-down Menu در طراحی صفحات وب مورد استفاده قرار می گیرند که در آن واحد یک گزینه بیشتر نمایش داده نمی شود اما به محض کلیک کردن روی آن به کلیه گزینه های بیشتری می توان دست پیدا نموده و یکی از آنها را انتخاب کرد. برای ایجاد چنین قابلیتی از تگی تحت عنوان <select> بایستی استفاده کرد. برای روشن شدن این موضوع کد زیر را وارد ویرایشگر متن خود می کنیم:

همانطور که در کد فوق مشخص است داخل  تگ مرتبط با فرم از تگی هایی تحت عنوان <select> و </select> استفاده کرده و داخل این تگ ها هم از تگی تحت عنوان <option> و </option> استفاده کرده ایم. کاری که تگ <option> انجام می دهد این است که تعداد گزینه های این منو را مشخص می سازد. حال برای مشاهده خروجی این فایل ابتدا آن را ذخیره نموده و آن را داخل مرورگر اجرا می کنیم:

drop down menu

 با انتخاب گزینه مد نظر، متن آن گزینه برای وب سرور ارسال خواهد شد. حال ممکن است که این منو حاوی اطلاعات بسیاری باشد و برای آنکه کاربر سر در گم نشود می خواهیم گزینه ای به آن اضافه نموده تحت عنوان "لطفاً شهر محل سکونت خود را انتخاب نمایید" که به کاربر نمایش داده شود. برای این منظور کد فوق را بازنویسی می کنیم:

<body>
        <form action="send-form-information.php" method="post">
            <select>
                <option>کرج</option>
                <option>اراک</option>
                <option>تبریز</option>
                <option selected>لطفاً شهر محل سکونت خود را انتخاب نمایید</option>
            </select>
        </form>
    </body>

می بینیم که یک بار دیگر تگ های <option> و </option> را نوشته و عبارت "لطفاً شهر محل سکونت خود را انتخاب نمایید" را داخل آن وارد کرده ایم. علاوه بر این داخل تگ آغازین <option> از دستوری تحت عنوان selected به معنی "انتخاب شده" استفاده کرده ایم که علیرغم قرار گرفتن این تگ پس از مابقی تگ های <option>، به محض نمایش صفحه در مرورگر کاربران به عنوان گزینه اول نمایش داده می شود:

drop down menu 1


نظرات
نظرات