این آموزش در تاریخ ۱۴۰۲/۰۶/۲۳ آپدیت شده است.
آموزش تگ select در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ select در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
تگ Select در HTML
تگ select تگی است که با استفاده از آن میتوان یک لیست کشویی ( لیست بازشو ) را ایجاد کرد، و همچنین با استفاده از تگ Option نیز میتوان آیتم های لیست کشویی را تعریف کرد.
Free-Learn
مثال از تگ select در HTML
در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.
مثال شماره ۱ : استفاده از تگ select برای ایجاد کردن لیست بازشو ( و استفاده از تگ option برای ایجاد آیتم های لیست )
|
1 2 3 4 5 6 7 8 9 10 11 |
<body> <label for="TF">طرفدار کدوم تیمی :</label> <select id="TF" name="tarafdari"> <option value="Esteghlal">استقلال</option> <option value="Persepolis">پرسپولیس</option> <option value="other">دیگر تیم ها</option> </select> </body> |
مثال شماره ۲ : استفاده از صفت size ( نمایش چندین آیتم از لیست )
|
1 2 3 |
<select size="3"> ... </select> |
مثال شماره ۳ : استفاده از صفت required ( ضروری هست حداقل یک آیتم از لیست انتخاب بشه )
|
1 2 3 |
<select required> ... </select> |
مثال شماره ۲ : لیستی که غیرفعال می باشد
|
1 2 3 |
<select disabled> ... </select> |
مثال شماره ۳ :استفاده از صفت multiple ( برای انتخاب بیش از ۱ آیتم باید دکمه Ctrl را از روی صفحه کلید نگه دارید سپس با ماوس گزینه ها را انتخاب نمایید )
|
1 2 3 |
<select multiple> ... </select> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ select در HTML پشتیبانی میکنند یا خیر.
| نام مرورگر | Chrome | Firefox | Opera | Safari | Edge |
| پشتیبانی | بله | بله | بله | بله | بله |
Free-Learn
جدول صفات تگ select در HTML
در جدول زیر میتوانید صفات بهمراه مقادیری را که میتوان در این تگ استفاده کرد را مشاهده نمایید.
| نام صفت | مقدار | توضیح |
|---|---|---|
| autofocus | autofocus | باعث میشه لیست به محض بالا اومدن صفحه روش فوکوس شه ( یعنی مثه اینه که روش کلیک شده ) |
| disabled | disabled | برای غیرفعال کردن لیست ( رنگش بصورت خاکستری می شود ) |
| form | form_id | مشخص میکند که داده های لیست بهمراه کدام فرم بسمت سرور ارسال شود |
| multiple | multiple | قابلیت انتخاب همزمان چندین آیتم از لیست برای انتخاب بیش از یک گزینه باید دکمه Ctrl را از روی صفحه کلید نگه دارید سپس با ماوس بروی گزینه های مورد نظرتان کلیک نمایید |
| name | name | یک نام را برای لیست مشخص میکند |
| required | required | انتخاب کردن حداقل یکی از گزینه های لیست ضروری می باشد |
| size | number | تعداد آیتم های قابل نمایش در لیست را مشخص میکند |
Free-Learn
پشتیبانی از صفات و رویدادهای عمومی
تگ select از صفات عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.
Free-Learn
نکات و توضیحات
- نکته یا توضیح خاصی وجود ندارد.
