آموزش تگ select در HTML

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ select در HTML با من همراه باشید.

آموزش تگ select در HTML

Free-Learn

تگ Select در HTML

تگ select تگی است که با استفاده از آن میتوان یک لیست کشویی ( لیست بازشو ) را ایجاد کرد.

همچنین با استفاده از تگ Option نیز میتوان آیتم ها یا گزینه های لیست کشویی را مشخص/تعریف کرد.

Free-Learn

مثال از تگ select در HTML

در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.

امتحان کنید

مثال شماره ۲ : لیستی که غیرفعال می باشد.

امتحان کنید

مثال شماره ۳ : لیستی که قابلیت انتخاب بیش از چند گزینه را دارد. (برای انتخاب بیش از ۱ آیتم/گزینه باید دکمه Ctrl را از روی صفحه کلید نگه دارید سپس با ماوس گزینه ها را انتخاب نمایید)

امتحان کنید

Free-Learn

پشتیبانی مرورگرها

در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ select در HTML پشتیبانی میکنند یا خیر.

نام مرورگر Chrome Firefox Opera Safari IE
پشتیبانی بله بله بله بله بله

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

نکات و توضیحات

با استفاده از این تگ میتوان یک لیست کشویی را ایجاد نماییم و همچنین با استفاده از صفات این تگ (صفاتی که در جدول بالا قرار دارند) نیز میتوان به لیست مان ویژگی های مختلفی را اعمال نماییم.

Free-Learn

دستورات CSS پیش فرض

این تگ هیچ دستور CSS پیش فرضی ندارد.

Free-Learn