تگ <select>
از تگ select برای ایجاد یک لیست drop-down میتوان استفاده کرد. با تگ option موجود در تگ select گزینه های مختلفی را برای لیست خود میتوانید استفاده کنید.
لیست drop-down فهرستی از انتخاب‌هاست که کاربر میتواند از میان گزینه‌های نمایش‌داده‌شده، موردی را انتخاب کند. تگ select چارچوب این فهرست را در فرم HTML می‌سازد و گزینه‌ها را درون خودش نگه می‌دارد. این ساختار زمانی کاربرد دارد که لازم است انتخاب کاربر از میان چند مقدار مشخص انجام شود. برای نمونه، فرم ثبت‌نام میتواند با این روش امکان انتخاب یک شهر یا گروه را فراهم کند. هر گزینه میتواند متن قابل مشاهده و مقداری برای استفاده در فرم داشته باشد. هنگام طراحی فرم، متن گزینه‌ها را کوتاه و روشن بنویسید تا انتخاب برای کاربر ساده‌تر شود. تفاوت میان متن نمایشی و مقدار گزینه در کد نمونه بهتر دیده میشود. برای آشنایی بیشتر با ساختار گزینه‌ها، پیوندهای مربوط به تگ select و option قابل استفاده هستند.
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
در این نمونه، تگ select آغاز و پایان فهرست را مشخص میکند و چهار گزینه در میان آن قرار گرفته‌اند. هر خط option یک انتخاب جداگانه می‌سازد و متن میان تگ‌ها برای کاربر نمایش داده میشود. ویژگی value مقداری را در کد برای همان گزینه تعیین میکند و با متن نمایشی ارتباط دارد. برای ساخت فهرستی مشابه، میتوانید نام گزینه‌ها و مقدارهای نمونه را متناسب با فرم خود تغییر دهید. این مثال ساده نشان می‌دهد گزینه‌ها بدون دسته‌بندی نیز می‌توانند در یک فهرست کنار هم باشند. حفظ ترتیب گزینه‌ها در کد، ترتیب مشاهده‌شدن آن‌ها در فهرست را روشن میکند.
تگ select همچنین ویژگی های عمومی در HTML را پشتیبانی میکند.این تگ ویژگی های رویدادها در HTML را نیز پشتیبانی میکند.
ویژگی‌های عمومی، مشخصه‌هایی هستند که در عناصر مختلف HTML کاربرد دارند و می‌توانند اطلاعات یا تنظیمات عنصر را بیان کنند. ویژگی‌های رویدادها نیز به رویدادهای رخ‌داده در صفحه مربوط می‌شوند و در HTML پشتیبانی می‌شوند. پشتیبانی از این ویژگی‌ها کمک میکند تگ select در کنار بخش‌های دیگر یک صفحه استفاده شود. انتخاب ویژگی مناسب به هدف فرم و رفتاری که برای آن در نظر گرفته‌اید بستگی دارد. برای بررسی نام و کاربرد هر ویژگی، پیوندهای موجود در همین بخش به منابع مرتبط هدایت می‌شوند. در کار عملی، ساختار اصلی فهرست را از تنظیمات تکمیلی آن جدا در نظر بگیرید. این تفکیک خواندن کد فرم را برای توسعه‌دهنده آسان‌تر میکند.
تگ <option>
تگ option برای ایجاد یک گزینه در لیست بکار میرود. تگ option داخل تگ های select یا datalist استفاده میشود.
تگ option بخش مستقلی از انتخاب‌های قابل ارائه را تعریف میکند و معمولاً همراه یکی از عناصر میزبان آن قرار می‌گیرد. در فهرست select، هر گزینه به کاربر امکان می‌دهد یک مورد از میان موارد موجود را برگزیند. datalist نیز در متن اصلی به‌عنوان جای دیگری برای استفاده از این تگ معرفی شده است. محتوای میان تگهای باز و بسته option همان چیزی است که به‌صورت متن گزینه دیده میشود. مقدار value در کد میتواند از متن قابل مشاهده گزینه متفاوت باشد. برای مثال، متن نمایشی ممکن است نامی خوانا باشد و مقدار، شناسه‌ای کوتاه‌تر را مشخص کند. نوشتن گزینه‌ها به شکل منظم، ویرایش و بررسی فرم را ساده‌تر خواهد کرد. بنابراین در طراحی فهرست، هم متن هر گزینه و هم مقدار آن را با دقت انتخاب کنید.
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
نمونه دوم نیز یک فهرست select را همراه چهار تگ option نشان می‌دهد و هر گزینه مقدار جداگانه‌ای دارد. متن‌هایی مانند Volvo و Opel درون تگ‌ها قرار گرفته‌اند تا نام انتخاب‌ها مشخص باشد. مقایسه این نمونه با نمونه قبلی نشان می‌دهد که گزینه‌ها می‌توانند با نیاز هر فرم تغییر کنند. ترتیب قرارگیری موارد در کد، ترتیب فهرست را قابل‌فهم و قابل‌مدیریت نگه می‌دارد. اگر فهرست به اطلاعات دیگری نیاز داشته باشد، میتوان ساختار گزینه‌ها را با همان الگو گسترش داد. در زمان افزودن مورد تازه، بسته‌شدن درست تگ‌ها را بررسی کنید تا ساختار HTML منظم بماند.
تگ option همچنین ویژگی های عمومی در HTML را پشتیبانی میکند. این تگ ویژگی های رویدادها در HTML را نیز پشتیبانی میکند.
همانند select، برای تگ option نیز امکان استفاده از ویژگی‌های عمومی HTML و ویژگی‌های رویدادها ذکر شده است. ویژگی‌های عمومی می‌توانند در کنار تگ گزینه قرار بگیرند و اطلاعات مربوط به آن را نگه دارند. ویژگی‌های رویدادها به رویدادهای صفحه مربوط هستند و برای آشنایی بیشتر، پیوند مرتبط در متن آمده است. پیش از افزودن ویژگی‌ها، مشخص کنید هرکدام چه نقشی در فرم شما دارند. استفاده سنجیده از ویژگی‌ها باعث میشود کد گزینه‌ها هدفمند و خوانا باقی بماند. اگر درباره جزئیات یک ویژگی پرسشی دارید، منبع پیوندشده اطلاعات تکمیلی همان موضوع را ارائه میکند. تگ option همچنان وظیفه اصلی خود، یعنی تعریف یک انتخاب، را در این ساختار حفظ میکند.
تگ<optgroup>
تگ optgroup برای ایجاد گروهی از option ها در یک drop-down استفاده میشود.
تگ optgroup گزینه‌های مرتبط را در یک گروه مشترک قرار می‌دهد تا ساختار فهرست روشن‌تر شود. در این حالت، optionها همچنان موارد قابل انتخاب هستند و optgroup نقش دسته‌بندی را بر عهده دارد. گروه‌بندی برای فهرستی سودمند است که گزینه‌های آن به چند موضوع یا دسته تعلق دارند. برچسب گروه میتواند به کاربر کمک کند ارتباط میان چند انتخاب را سریع‌تر تشخیص دهد. این روش به‌جای نمایش گزینه‌ها به شکل یک مجموعه بلند، آن‌ها را مرتب‌تر سازمان‌دهی میکند. در نمونه‌های HTML، تگ optgroup درون select قرار می‌گیرد و optionها درون گروه نوشته می‌شوند. انتخاب دسته‌بندی مناسب، خواندن فهرست و پیدا کردن گزینه موردنظر را ساده‌تر میکند. به همین دلیل، optgroup با تگهای select و option ارتباط مستقیم دارد.
اگر شما دارای یک لیست طولانی از گزینه ها میباشید استفاده از تگ optgroup برای راحت تر کنترل کردن گزینه ها پیشنهاد میشود.
هرچه تعداد انتخاب‌ها بیشتر شود، تشخیص مورد مناسب در فهرست ممکن است دشوارتر شود. دسته‌بندی گزینه‌های هم‌موضوع، این فهرست طولانی را برای کاربر قابل‌بررسی‌تر میکند. برای نمونه، فهرستی از محصولات میتواند بر اساس گروه‌های نام‌گذاری‌شده مرتب شود. این کار به‌جای تغییر گزینه‌ها، نحوه سازمان‌دهی آن‌ها را روشن میکند. تگ optgroup به طراح فرم امکان می‌دهد دسته‌ها را کنار گزینه‌های مربوط به هر دسته نشان دهد. برچسب‌های دقیق و قابل‌فهم برای گروه‌ها، مسیر انتخاب را شفاف‌تر می‌کنند. هنگام تنظیم فهرست، بررسی کنید هر گزینه در گروه متناسب با مفهوم خودش قرار گرفته باشد. این نظم هم برای کاربر و هم برای نگهداری کد مفید است.
<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
در این نمونه، دو optgroup درون یک select قرار گرفته‌اند و هر گروه برچسب جداگانه‌ای دارد. ویژگی label نامی برای معرفی گروه تعیین میکند و گزینه‌های مرتبط زیر همان گروه نوشته شده‌اند. گروه نخست Volvo و Saab را در کنار هم قرار می‌دهد و گروه دوم شامل Mercedes و Audi است. این چیدمان، دسته‌بندی مثال را بدون نیاز به توضیح جداگانه در کد نشان می‌دهد. برای ساخت نمونه مشابه، نام گروه و گزینه‌های زیر آن را با موضوع فهرست خود هماهنگ کنید. بسته‌شدن هر optgroup پیش از آغاز گروه بعدی، ساختار کد را واضح نگه می‌دارد. تگ select نیز همچنان ظرف کلی همه گروه‌ها و گزینه‌های این مثال است.
تگ optgroup همچنین ویژگی های عمومی در HTML را پشتیبانی میکند.این تگ ویژگی های رویدادها در HTML را نیز پشتیبانی میکند.
تگ optgroup نیز ویژگی‌های عمومی HTML و ویژگی‌های رویدادها را پشتیبانی میکند و پیوندهای مرتبط در متن آمده‌اند. ویژگی label در مثال، نام هر گروه را مشخص میکند و به دسته‌بندی گزینه‌ها معنا می‌دهد. ویژگی‌های عمومی و رویدادها موضوعی جدا از نقش اصلی گروه‌بندی دارند. هنگام خواندن این بخش، تفاوت وظیفه select، option و optgroup را به خاطر بسپارید. select فهرست را ایجاد میکند، option انتخاب‌ها را می‌سازد و optgroup آن‌ها را دسته‌بندی میکند. این تقسیم نقش، فهم ساختار فرم را برای افراد تازه‌کار نیز ساده‌تر می‌سازد. برای مرور جزئیات بیشتر، پیوندهای مربوط به ویژگی‌ها و تگ‌ها را دنبال کنید.