HTML <select> ਟੈਗ

ਪਰਿਭਾਸ਼ਾ ਅਤੇ ਵਰਤੋਂ

<select> ਇਲੈਕਟ੍ਰੌਨਿਕ ਫਾਰਮ ਵਿੱਚ ਡਰਾਪਡਵਾਰੀ ਲਿਸਟ ਬਣਾਉਣ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ。

<select> ਇਲੈਕਟ੍ਰੌਨਿਕ ਫਾਰਮ ਵਿੱਚ ਸਭ ਤੋਂ ਅਧਿਕ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ ਅਤੇ ਉਪਯੋਗਕਰਤਾ ਦੇ ਪ੍ਰਵੇਸ਼ ਨੂੰ ਸਭਾਲਦਾ ਹੈ。

ਫਾਰਮ ਭੇਜਣ ਤੋਂ ਬਾਅਦ name ਪ੍ਰਤੀਕ ਵਰਤੋਂ ਕਰੋ (ਜੇਕਰ name ਪ੍ਰਤੀਕ ਛੱਡ ਦਿੱਤਾ ਜਾਵੇ ਤਾਂ ਡਰਾਪਡਵਾਰੀ ਲਿਸਟ ਵਿੱਚ ਦਾਤਾ ਭੇਜਿਆ ਨਹੀਂ ਜਾਵੇਗਾ)。

<select> ਅੰਤਰ ਵਿੱਚ <option> ਟੈਗ ਡਰਾਪਡਵਾਰੀ ਲਿਸਟ ਵਿੱਚ ਉਪਲੱਬਧ ਚੋਣਾਂ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰੋ。

ਡਰਾਪਡਵਾਰੀ ਲਿਸਟ ਨੂੰ ਲੇਬਲ (label) ਨਾਲ ਜੋੜਨ ਲਈ id ਪ੍ਰਤੀਕ ਵਰਤੋਂ ਕਰੋ。

ਸੁਝਾਅ:ਹਮੇਸ਼ਾ ਸ਼ਾਮਲ ਕਰੋ <label> ਟੈਗ ਬਿਹਤਰ ਪਹੁੰਚ ਪ੍ਰਣਾਲੀ ਲਈ

ਇਸ ਲਈ ਵੀ ਦੇਖੋ:

HTML DOM ਰੈਫਰੈਂਸ ਮੈਨੂਅਲSelect ਆਬਜੈਕਟ

CSS ਟੂਰਫਾਰਮ ਸਟਾਈਲ ਸੈਟ ਕਰੋ

ਇਨਸਟੈਂਸ

ਉਦਾਹਰਣ 1

ਚਾਰ ਚੋਣਾਂ ਵਾਲੀ ਡਰਾਪਡਵਾਰੀ ਲਿਸਟ ਬਣਾਓ:

<label for="cars">ਕਿਸੇ ਕਾਰ ਬ੍ਰਾਂਡ ਨੂੰ ਚੁਣੋ：</label>
<select name="cars" id="cars">
  <option value="audi">ਆਊਡੀ</option>
  <option value="byd">ਬਿਆਡ</option>
  <option value="geely">ਜੀਲੀ</option>
  <option value="volvo">ਵੋਲਵੋ</option>
</select>

ਆਪਣੇ ਆਪ ਨੂੰ ਪ੍ਰਯੋਗ ਕਰੋ

ਉਦਾਹਰਣ 1

ਉਦਾਹਰਣ 2 <select> optgroup ਟੈਗ ਦੇ ਨਾਲ ਵਰਤੋਂ:

<label for="cars">ਕਿਸੇ ਕਾਰ ਬ੍ਰਾਂਡ ਨੂੰ ਚੁਣੋ：</label>
<select  name="cars" 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>

ਆਪਣੇ ਆਪ ਨੂੰ ਪ੍ਰਯੋਗ ਕਰੋ

ਵਿਸ਼ੇਸ਼ਤਾ

ਵਿਸ਼ੇਸ਼ਤਾ ਮੁੱਲ ਵਰਣਨ
autofocus autofocus ਡਰਾਪਡਵਾਰੀ ਲਿਸਟ ਨੂੰ ਪੰਜੀਕਰਨ ਸਮੇਂ ਆਟੋਮੈਟਿਕ ਫੋਕਸ ਮਿਲਣਾ ਚਾਹੀਦਾ ਹੈ。
disabled disabled ਡਰਾਪਡਵਾਰੀ ਲਿਸਟ ਨੂੰ ਨਾ ਚਾਲੂ ਕਰੋ。
form ਫਾਰਮ ਆਈਡੀ ਡਰਾਪਡਵਾਰੀ ਲਿਸਟ ਦੀ ਫਾਰਮ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰੋ。
multiple multiple ਕਈ ਚੋਣਾਂ ਨੂੰ ਇੱਕ ਸਾਰੀ ਚੋਣ ਸਕਦੇ ਹਨ。
name ਨਾਮ ਡਰਾਪ-ਡਾਉਨ ਲਿਸਟ ਦਾ ਨਾਮ ਨਿਰਧਾਰਿਤ ਕਰਦੇ ਹਨ。
required required ਇਹ ਵਿਸ਼ੇਸ਼ਤਾ ਪ੍ਰਦਾਨ ਕਰਦੀ ਹੈ ਕਿ ਉਪਯੋਗਕਰਤਾ ਨੂੰ ਫਾਰਮ ਭੇਜਣ ਤੋਂ ਪਹਿਲਾਂ ਇੱਕ ਮੁੱਲ ਚੁਣਨਾ ਚਾਹੀਦਾ ਹੈ。
size ਨੰਬਰ ਡਰਾਪ-ਡਾਉਨ ਲਿਸਟ ਵਿੱਚ ਦਿਸਣ ਵਾਲੇ ਵਿਸ਼ੇਸ਼ ਵਿਕਲਪਾਂ ਦੀ ਸੰਖਿਆ ਨਿਰਧਾਰਿਤ ਕਰਦੇ ਹਨ。

ਗਲੋਬਲ ਵਿਸ਼ੇਸ਼ਤਾ

<select> ਟੈਗ ਨੇ ਵੀ ਈਵੈਂਟ ਵਿਸ਼ੇਸ਼ਤਾ ਸਮਰਥਨ ਕਰਦੇ ਹਨ HTML ਵਿੱਚ ਗਲੋਬਲ ਵਿਸ਼ੇਸ਼ਤਾ。

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

<select> ਟੈਗ ਨੇ ਵੀ ਈਵੈਂਟ ਵਿਸ਼ੇਸ਼ਤਾ ਸਮਰਥਨ ਕਰਦੇ ਹਨ HTML ਵਿੱਚ ਈਵੈਂਟ ਵਿਸ਼ੇਸ਼ਤਾ。

ਮੂਲਤਵੀ ਸੀਐੱਸਐੱਸ ਸੈਟਿੰਗ

ਨਹੀਂ ਹੈ。

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

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