آموزش زبان HTML (جلسه ۶۳)

نحوه ایجاد Drop-down Menu در فرم های اچ تی ام ال (HTML)

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

      
    <html><head>
        <meta charset="utf-8">
        <title>asrefonon</title>
    </head>
      
    <body>
        <form action="send-form-information.php" method="post">
            <select>
                <option>کرج</option>
                <option>اراک</option>
                <option>تبریز</option>
            </select>
        </form>
    </body>
</html>

همانطور که در کد فوق مشخص است داخل  تگ مرتبط با فرم از تگی هایی تحت عنوان <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

221

اسماعیلی هستم مدیر عصر فنون. فارغ التحصیل مقطع کارشناسی ارشد رشته مهندسی فناوری اطلاعات (IT)

پیشنهاد لحظه ای
ارسال دیدگاه

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

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.

توسط
تومان