آموزش زبان HTML (جلسه ۵۸)

استفاده از تگ datalist در فرم های اچ تی ام ال (HTML)

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

<!DOCTYPE html>
<html>
     
    <head>
        <meta charset="utf-8">
        <title>asrefonon</title>
    </head>
     
    <body>
        <form action="send-form-information.php" method="post">
            <input name="country" list="country_name">
            <datalist id="country_name">
                <option value="Afghanistan">
                    <option value="Albania">
                        <option value="Algeria">
            </datalist>
        </form>
    </body>
</html>

پیش از توضیح پیرامون کد فوق ابتدا آن را در مرورگر اجرا می کنیم:

datalist_in_html_forms

با وارد کردن حرف a می بینیم که گزینه هایی که با حرف a شروع می شوند به کاربر پیشنهاد می شوند. حال که با عملکرد کد فوق آشنا شدیم می توان به توضیح کد فوق پرداخت.
ابتدا با استفاده از تگ <datalist> و <datalist/> تعدادی گزینه تعریف می کنیم. برای تعریف گزینه از تگ <option> استفاده می کنیم و با استفاده از Attribute یی تحت عنوان value مقداری برای آن در نظر می گیریم. علاوه بر این در تگ آغازین <datalist> می بایست با دستور id نامی برای تگ <datalist> انتخاب کنیم. به هر تعداد که بخواهیم می توان در تگ <datalist> از تگ های <option> استفاده کنیم. در نهایت در تگ <input> دستور list را نوشته و مقدار آن را برابر با مقداری که برای id در نظر گرفتیم قرار می دهیم.

221

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

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

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

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

توسط
تومان