علامة <خيار> HTML


مثال

قائمة منسدلة بأربعة خيارات:

<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>

المزيد من الأمثلة "جربها بنفسك" أدناه.


التعريف والاستخدام

تحدد العلامة <option>خيارًا في قائمة التحديد.

<option>تدخل العناصر داخل عنصر <select> أو <optgroup> أو <datalist> .

ملاحظة: يمكن <option>استخدام العلامة بدون أي سمات ، لكنك تحتاج عادةً إلى سمة القيمة ، والتي تشير إلى ما يتم إرساله إلى الخادم عند إرسال النموذج.

نصيحة: إذا كانت لديك قائمة طويلة من الخيارات ، فيمكنك تجميع الخيارات ذات الصلة ضمن علامة <optgroup>


دعم المتصفح

Element
<option> Yes Yes Yes Yes Yes


صفات

Attribute Value Description
disabled disabled Specifies that an option should be disabled
label text Specifies a shorter label for an option
selected selected Specifies that an option should be pre-selected when the page loads
value text Specifies the value to be sent to a server

السمات العالمية

تدعم <option>العلامة أيضًا السمات العامة في HTML .


سمات الحدث

تدعم <option>العلامة أيضًا سمات الحدث في HTML .


مزيد من الأمثلة

مثال

استخدام <خيار> في عنصر <datalist>:

<label for="browser">Choose your browser from the list:</label>
<input list="browsers" name="browser" id="browser">

<datalist id="browsers">
  <option value="Edge">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

مثال

استخدام <خيار> في عناصر <مجموعة>:

<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>

الصفحات ذات الصلة

مرجع DOM HTML: كائن الخيار


إعدادات CSS الافتراضية

لا أحد.