امتیاز دهید:

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

<!DOCTYPE html>
<html>
    
    <head>
        <meta charset="utf-8">
        <title>Netshahr</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 در نظر گرفتیم قرار می دهیم.


نظرات
نظرات
  • بهزاد مرادی :

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


    با سپاس فراوان
    بهزاد مرادی
    تیم تولید محتوای نت شهر


    1393/05/19 07:56:15
  • mnr73 :

    سلام
    اگر تعداد زیادی datalist مثلا همه کشورهارو داشته باشیم و بخوای به ترتیب حروف الفبا نشان داده بشه باید به طور منظم وارد کنیم یا دستوری برای منظم کردنشون هست؟


    1393/05/18 12:14:47