ایچ تی ام ال فرم عناصر

ਇਸ ਅਧਿਆਏ ਵਿੱਚ ਸਾਰੇ HTML ਫਾਰਮ ਐਲੀਮੈਂਟਾਂ ਦੀ ਵਿਸ਼ੇਸ਼ਤਾ ਦੱਸੀ ਜਾਵੇਗੀ。

<input> ਐਲੀਮੈਂਟ

ਸਭ ਤੋਂ ਮਹੱਤਵਪੂਰਨ ਫਾਰਮ ਐਲੀਮੈਂਟ ਹੈ <input> ਐਲੀਮੈਂਟ

<input> ਐਲੀਮੈਂਟ ਵੱਖ-ਵੱਖ ਇੰਪੁਟ ਟਾਈਪਾਂ ਦੇ ਅਧਾਰ 'ਤੇ type ਅਟਰੀਬਿਊਟ ਵੱਖ-ਵੱਖ ਰੂਪਾਂ ਵਿੱਚ ਬਦਲ ਸਕਦਾ ਹੈ。

ਟਿੱਪਣੀ:ਅਗਲੇ ਅਧਿਆਏ ਵਿੱਚ ਸਾਰੇ HTML ਇੰਪੁਟ ਟਾਈਪਾਂ ਦੀ ਵਿਸ਼ੇਸ਼ਤਾ ਦੱਸੀ ਜਾਵੇਗੀ。

<select> ਐਲੀਮੈਂਟ (ਡਾਊਨ ਲਿਸਟ)

<select> ਐਲੀਮੈਂਟ ਨਿਰਧਾਰਿਤ ਕਰਦਾ ਹੈਡਾਊਨ ਲਿਸਟ:

ਉਦਾਹਰਣ

<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

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

<option> ਐਲੀਮੈਂਟ ਚੁਣਨ ਵਾਲੇ ਵਿਕਲਪਾਂ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰਦਾ ਹੈ。

ਸੂਚੀ ਆਮ ਤੌਰ 'ਤੇ ਪਹਿਲਾ ਵਿਕਲਪ ਚੁਣਿਆ ਹੋਇਆ ਦਿਖਾਉਂਦੀ ਹੈ。

ਤੁਸੀਂ selected ਅਟਰੀਬਿਊਟ ਨੂੰ ਜੋੜ ਕੇ ਪ੍ਰਿਮੀਅਮ ਵਿਕਲਪ ਨਿਰਧਾਰਿਤ ਕਰ ਸਕਦੇ ਹੋ

ਉਦਾਹਰਣ

<option value="fiat" selected>Fiat</option>

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

<textarea> ਐਲੀਮੈਂਟ

<textarea> ਐਲੀਮੈਂਟ ਬਹੁਲਾ ਇੰਪੁਟ ਫੀਲਡ ਨਿਰਧਾਰਿਤ ਕਰਦਾ ਹੈ (ਟੈਕਸਟ ਏਰੀਆ）：

ਉਦਾਹਰਣ

<textarea name="message" rows="10" cols="30">
ਕਿਤਾਬ ਬਗੀਚੇ ਵਿੱਚ ਖੇਡ ਰਹੀ ਸੀ。
</textarea>

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

ਇਸ ਹੇਠ ਲਿਖੇ HTML ਕੋਡ ਬਰਾਊਜ਼ਰ ਵਿੱਚ ਦਿਖਾਇਆ ਜਾਵੇਗਾ:

ਕਿਤਾਬ ਬਗੀਚੇ ਵਿੱਚ ਖੇਡ ਰਹੀ ਸੀ。

<button> ਐਲੀਮੈਂਟ

<button> ਐਲੀਮੈਂਟ ਨੂੰ ਕਿਸਮਤੀ ਦੇ ਨਾਲ ਦਿਖਾਇਆ ਜਾਂਦਾ ਹੈਬਟਨ:

ਉਦਾਹਰਣ

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

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

ਇਸ ਹੇਠ ਲਿਖੇ HTML ਕੋਡ ਬਰਾਊਜ਼ਰ ਵਿੱਚ ਦਿਖਾਇਆ ਜਾਵੇਗਾ:

HTML5 ਫਾਰਮ ਐਲੀਮੈਂਟ

HTML5 ਨੇ ਹੇਠ ਲਿਖੇ ਫਾਰਮ ਐਲੀਮੈਂਟਾਂ ਵਿੱਚ ਵਾਧਾ ਕੀਤਾ ਹੈ:

  • <datalist>
  • <keygen>
  • <output>

ਟਿੱਪਣੀ:ਮੂਲ ਰੂਪ ਵਿੱਚ, ਬਰਾਊਜ਼ਰ ਅਣਜਾਣੇ ਐਲੀਮੈਂਟਾਂ ਨੂੰ ਨਾਜਾਬ ਨਹੀਂ ਦਿਖਾਉਂਦੇ ਹਨ। ਨਵੇਂ ਐਲੀਮੈਂਟ ਤੁਹਾਡੀ ਪੰਨੀ ਨੂੰ ਨੁਕਸਾਨ ਨਹੀਂ ਪਹੁੰਚਾਉਂਦੇ ਹਨ。

HTML5 <datalist> ਐਲੀਮੈਂਟ

<datalist> ਐਲੀਮੈਂਟ ਨੂੰ <input> ਐਲੀਮੈਂਟ ਲਈ ਪ੍ਰਿਮੀਟਾਈਮ ਵਿਕਲਪਾਂ ਦੀ ਲਿਸਟ ਨਿਰਦੇਸ਼ਿਤ ਕਰਦਾ ਹੈ。

ਉਪਯੋਗਕਰਤਾ ਉਨ੍ਹਾਂ ਦੇ ਇਨਪੁਟ ਦਾਤਾ ਦੇ ਮੌਜੂਦਾ ਵਿਸ਼ਲੇਸ਼ਣ ਦੌਰਾਨ ਪ੍ਰਿਮੀਟਾਈਮ ਵਿਕਲਪਾਂ ਦੀ ਲਿਸਟ ਦੇਖ ਸਕਦੇ ਹਨ。

ਐਲੀਮੈਂਟ ਦੇ <input> ਦੇ list ਪ੍ਰਤੀਭੂਤੀ ਨਿਰਦੇਸ਼ਿਤ ਕਰਨਾ <datalist> ਐਲੀਮੈਂਟ ਦੇ id ਪ੍ਰਤੀਭੂਤੀ

ਉਦਾਹਰਣ

ਪ੍ਰਿਮੀਟਾਈਮ ਵੈਲਿਊਜ਼ ਸੈਟ ਕਰਨ ਲਈ <input> ਐਲੀਮੈਂਟ <datalist> ਦੇਣਾ:

<form action="action_page.php">
<input list="browsers">
<datalist id="browsers">
   <option value="Internet Explorer">
   <option value="Firefox">
   <option value="Chrome">
   <option value="Opera">
   <option value="Safari">
</datalist> 
</form>

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