HTML <option> ਟੈਗ

ਵਿਵਰਣ ਅਤੇ ਵਰਤੋਂ

<option> ਟੈਗ ਵਿੱਚ ਚੋਣ ਸੂਚੀ ਦੇ ਵਿਕਲਪਾਂ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰਦਾ ਹੈ。

<option> ਟੈਗ ਅੰਦਰ <select><optgroup> ਜਾਂ <datalist> ਵੈਲਿਊ ਅੰਦਰ

ਧਿਆਨ:<option> ਟੈਗ ਬੇਕਾਰ ਵਰਤੋਂ ਵਿੱਚ ਹੋ ਸਕਦਾ ਹੈ, ਲੇਕਿਨ ਤੁਸੀਂ ਆਮ ਤੌਰ 'ਤੇ value ਪ੍ਰਤੀਯੋਗਿਤਾ ਵਰਤਣਾ ਚਾਹੀਦੇ ਹੋ, ਜਿਸ ਵਿੱਚ ਵੈਲਿਊ ਫਾਰਮ ਸੰਮੇਲਨ ਸਮੇਂ ਸਰਵਰ ਨੂੰ ਭੇਜਿਆ ਜਾਵੇਗਾ。

ਸੁਝਾਅ:ਤੁਸੀਂ ਲੰਮੇ ਵਿਕਲਪ ਸੂਚੀ ਹੋਣ ਤਾਂ ਤੁਸੀਂ <optgroup> ਟੈਗ ਅੰਦਰ ਸਬੰਧਤ ਵਿਕਲਪਾਂ ਨੂੰ ਗਰੁੱਪ ਕਰੋ。

ਇਸ ਦੇ ਨਾਲ ਵੀ ਦੇਖੋ:

HTML DOM ਸੂਚੀਕਰਣOption ਅਧਾਰ

ਉਦਾਹਰਣ

ਉਦਾਹਰਣ 1

ਚਾਰ ਵਿਕਲਪਾਂ ਵਾਲੀ ਲਿਸਟ ਬਿਲਟ-ਇਨ ਲਿਸਟ:

<label for="cars">ਇੱਕ ਕਾਰ ਬ੍ਰਾਂਡ ਚੁਣੋ:</label>
<select id="cars">
  <option value="audi">ਆਊਡੀ</option>
  <option value="byd">ਬਿਆਡ</option>
  <option value="geely">ਜੀਲੀ</option>
  <option value="volvo">ਵੋਲਵੋ</option>
</select>

ਆਪਣੇ ਅਨੁਸਾਰ ਕਰੋ

ਉਦਾਹਰਣ 2

ਵਿੱਚ <datalist> ਵਰਤੋਂ ਵਿੱਚ <option>

<label for="browser">ਸੂਚੀ ਤੋਂ ਆਪਣੇ ਬਰਾਊਜ਼ਰ ਚੁਣੋ:</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>

ਆਪਣੇ ਅਨੁਸਾਰ ਕਰੋ

ਉਦਾਹਰਣ 3

ਵਿੱਚ <optgroup> ਵਰਤੋਂ ਵਿੱਚ <option>

<label for="cars">ਇੱਕ ਕਾਰ ਬ੍ਰਾਂਡ ਚੁਣੋ:</label>
<select id="cars">
  <optgroup label="ਚੀਨੀ ਕਾਰ">
    <option value="byd">ਬਿਆਡ</option>
    <option value="geely">ਜੀਲੀ</option>
  </optgroup>
  <optgroup label="ਜਰਮਨ ਕਾਰ">
    <option value="mercedes">ਮਰਸੀਡੀਜ਼</option>
    <option value="audi">ਆਊਡੀ</option>
  </optgroup>
</select>

ਆਪਣੇ ਅਨੁਸਾਰ ਕਰੋ

ਵਿਸ਼ੇਸ਼ਤਾ

ਵਿਸ਼ੇਸ਼ਤਾ ਕੀਮਤ ਵਰਣਨ
disabled disabled ਚੋਣ ਨੂੰ ਨਾ ਵਰਤਣ ਵਾਲੀ ਹੈ ਕਰਦੀ ਹੈ。
label ਲਿਖਤ ਚੋਣ ਲਈ ਛੋਟੀ ਟੈਗ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰਦੀ ਹੈ。
selected selected ਪੰਨਾ ਲੋਡ ਹੋਣ ਉੱਤੇ ਇੱਕ ਚੋਣ ਪਹਿਲਾਂ ਤੋਂ ਚੋਣਨੀ ਚਾਹੀਦੀ ਹੈ。
value ਲਿਖਤ ਸੇਵਕ ਸਰਵਰ ਨੂੰ ਭੇਜਣ ਵਾਲੀ ਕੀਮਤ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰਦੀ ਹੈ。

ਸਾਰਵਤਰਿਕ ਵਿਸ਼ੇਸ਼ਤਾ

<option> ਟੈਗ ਨੂੰ ਵੀ ਸਮਰਥਨ ਹੈ HTML ਵਿੱਚ ਸਾਰਵਤਰਿਕ ਵਿਸ਼ੇਸ਼ਤਾ

ਈਵੈਂਟ ਵਿਸ਼ੇਸ਼ਤਾ

<option> ਟੈਗ ਨੂੰ ਵੀ ਸਮਰਥਨ ਹੈ HTML ਵਿੱਚ ਈਵੈਂਟ ਵਿਸ਼ੇਸ਼ਤਾ

ਮੂਲਤਬੀ CSS ਸੈਟਿੰਗ

ਨਹੀਂ ਹੈ。

ਬਰਾਉਜ਼ਰ ਸਮਰਥਨ

ਚਰਮੇ ਐਜ਼ ਫਾਇਰਫਾਕਸ ਸੈਫਾਰੀ ਓਪੇਰਾ
ਚਰਮੇ ਐਜ਼ ਫਾਇਰਫਾਕਸ ਸੈਫਾਰੀ ਓਪੇਰਾ
ਸਮਰਥਨ ਸਮਰਥਨ ਸਮਰਥਨ ਸਮਰਥਨ ਸਮਰਥਨ