گزینه (option)
با «تگ option» یک «گزینه (Option)» برای انتخاب می سازیم. این گزینه داخل «select» یا «datalist» می آید. سپس مرورگر آن را به کاربر نشان می دهد.
تگ option چیست؟
تگ «option» یک مورد انتخابی در لیست است. این تگ داخل «select»، «optgroup» یا «datalist» قرار می گیرد. معمولا ویژگی «value» می فرستد چه مقداری به سرور ارسال شود.
نکته: اگر لیست طولانی است، با تگ optgroup گروه بندی کن.
نمونه: لیست کشویی ساده
<label for="cars">Choose a car:<\/label>
<select id="cars">
<option value="volvo">Volvo<\/option>
<option value="saab">Saab<\/option>
<option value="opel">Opel<\/option>
<option value="audi">Audi<\/option>
<\/select>
نمونه: استفاده در datalist
<label for="browser">Choose your browser:<\/label>
<input list="browsers" id="browser" name="browser">
<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
<\/datalist>
نمونه: option داخل گروه ها
<label for="cars">Choose a car:<\/label>
<select id="cars">
<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>
ویژگی های مهم
value: مقداری که به سرور ارسال می شود.label: برچسب کوتاه تر برای نمایش.selected: این گزینه از ابتدا انتخاب باشد.disabled: این گزینه غیرقابل انتخاب باشد.
هشدار: اگر «value» نگذاری، متن داخل گزینه ممکن است ارسال شود. بهتر است همیشه «value» بدهی.
راهنمای سریع قدم به قدم
- یک <select> یا <datalist> بساز.
- برای هر مورد، یک <option> اضافه کن.
- برای سرور، ویژگی value را تنظیم کن.
- در صورت نیاز، selected یا disabled بده.
جمع بندی سریع
- تگ option یک مورد انتخابی می سازد.
- value تعیین می کند چه چیزی ارسال شود.
- selected گزینه پیش فرض را مشخص می کند.
- disabled گزینه را موقتا می بندد.
- برای گروه بندی از optgroup استفاده کن.