HTML ਫਾਰਮ

HTML ਫਾਰਮ ਵਿੱਚ ਵੱਖ-ਵੱਖ ਕਿਸਮ ਦੇ ਯੂਜ਼ਰ ਇੰਪੁਟ ਸਭਾਲਣ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ。

<form> ਇਲੈਕਟ੍ਰੌਨਿਕ

HTML ਫਾਰਮ ਯੂਜ਼ਰ ਦੇ ਇੰਪੁਟ ਨੂੰ ਸਭਾਲਣ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ。

<form> ਇਲੈਕਟ੍ਰੌਨਿਕ ਵਿੱਚ HTML ਫਾਰਮ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰਦਾ ਹੈ:

مثال

<form>
 .
فرم عناصر
 .
</form>

HTML ਫਾਰਮ ਵਿੱਚਫਾਰਮ ਇਲੈਕਟ੍ਰੌਨਿਕ。

ਫਾਰਮ ਇਲੈਕਟ੍ਰੌਨਿਕ ਵਿੱਚ ਵੱਖ-ਵੱਖ ਕਿਸਮ ਦੇ input ਇਲੈਕਟ੍ਰੌਨਿਕ, ਚੈੱਕਬਾਕਸ, ਰੇਡੀਓ ਬਟਨ, ਸੰਭਾਲ ਬਟਨ ਆਦਿ ਹਨ।

<input> ਇਲੈਕਟ੍ਰੌਨਿਕ

<input> ਇਲੈਕਟ੍ਰੌਨਿਕ ਵਿੱਚ ਸਭ ਤੋਂ ਮਹੱਤਵਪੂਰਨਫਾਰਮ ਇਲੈਕਟ੍ਰੌਨਿਕ。

<input> ਇਲੈਕਟ੍ਰੌਨਿਕ ਅਨੇਕ ਰੂਪਾਂ ਵਿੱਚ ਹੈ, ਕਈ ਰੂਪਾਂ ਦੇ ਅਨੁਸਾਰ。 type ਲੋੜ ਦਾਤਾ

ਇਸ ਚਾਪ 'ਚ ਵਰਤੇ ਜਾਣ ਵਾਲੇ ਕਿਸਮਾਂ

ਕਿਸਮ وصف
text ਰੋਮਾਂਚਕ ਟੈਕਸਟ ਇੰਪੁਟ ਨਿਰਧਾਰਿਤ ਕਰੋ
radio ਰੇਡੀਓ ਇੰਪੁਟ (ਕਈ ਚੋਣਾਂ ਵਿੱਚੋਂ ਇੱਕ ਚੁਣਨ) ਨਿਰਧਾਰਿਤ ਕਰੋ
submit ਸੰਭਾਲ ਬਟਨ (ਫਾਰਮ ਸੰਭਾਲ) ਨਿਰਧਾਰਿਤ ਕਰੋ

نوٹ:ਤੁਸੀਂ ਬਾਅਦ ਵਿੱਚ ਇਸ ਟਿੱਪਣੀ ਵਿੱਚ ਇੰਪੁਟ ਕਿਸਮਾਂ ਬਾਰੇ ਹੋਰ ਜਾਣੂ ਹੋਵੋਗੇ。

ਟੈਕਸਟ ਇੰਪੁਟ

<input type="text"> ਵਰਤਿਆ ਜਾਣ ਵਾਲਾਟੈਕਸਟ ਇੰਪੁਟਦੇ ਇੱਕ ਪਾਠ ਇੰਪੁਟ ਫੀਲਡ

مثال

<form>
 First name:<br>
<input type="text" name="firstname">
<br>
 Last name:<br>
<input type="text" name="lastname">
</form>

ਆਪਣੇ ਆਪ ਸਿਖਰ ਦੇਖੋ

ਬਰਾਉਜ਼ਰ ਵਿੱਚ ਇਹ ਵਿਖਾਇਆ ਜਾਂਦਾ ਹੈ:

پہلا نام:


آخری نام:

نوٹ:ਫਾਰਮ ਹੀਨ ਨਹੀਂ ਦਿਖਾਈ ਦਿੰਦੀ ਹੈ। ਇਸ ਦੇ ਨਾਲ-ਨਾਲ ਟੈਕਸਟ ਫੀਲਡ ਦਾ ਮੂਲਤਬੀ ਚੋਰੀਆਂ ਵਿਸ਼ਾਲਤਾ 20 ਅੱਖਰ ਹੈ।

ਰੇਡੀਓ ਬਟਨ ਇੰਪੁਟ

<input type="radio"> ਨਿਰਧਾਰਿਤ ਕਰੋਰੇਡੀਓ ਬਟਨ。

ਰੇਡੀਓ ਬਟਨ ਯੂਜ਼ਰ ਨੂੰ ਸੀਮਿਤ ਸਿਖਰ ਵਿੱਚੋਂ ਇੱਕ ਚੁਣਨ ਦੀ ਅਨੁਮਤੀ ਦਿੰਦੇ ਹਨ:

مثال

<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form>

ਆਪਣੇ ਆਪ ਸਿਖਰ ਦੇਖੋ

ਰੇਡੀਓ ਬਟਨ ਬਰਾਉਜ਼ਰ ਵਿੱਚ ਇਹ ਵਿਖਾਇਆ ਜਾਂਦਾ ਹੈ:

Male

Female

ਸੰਭਾਲ ਬਟਨ

<input type="submit"> ਸੰਭਾਲ ਲਈ ਵਰਤਿਆ ਜਾਣ ਵਾਲਾਫਾਰਮ ਹੈਂਡਲਰ(form-handler)ਸੰਭਾਲਫਾਰਮ ਦੇ ਬਟਨ

ਫਾਰਮ ਹੈਂਡਲਰ ਫਾਰਮ ਵਿੱਚ ਸ਼ਾਮਿਲ ਹੋਣ ਵਾਲੀ ਇੰਪੁਟ ਡਾਟਾ ਨੂੰ ਸੰਭਾਲਣ ਲਈ ਸਕ੍ਰਿਪਟ ਸ਼ਾਮਲ ਕਰਨ ਵਾਲੀ ਸਰਵਰ ਪੰਨਾ ਹੈ。

ਫਾਰਮ ਦੇ ਸੰਭਾਲਣ ਵਿੱਚ ਫਾਰਮ ਹੈਂਡਲਰ ایکشن ਲੋੜ ਦਾਤਾ ਵਿੱਚ ਸ਼ਾਮਿਲ ਕਰੋ:

مثال

<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

ਆਪਣੇ ਆਪ ਸਿਖਰ ਦੇਖੋ

ਬਰਾਉਜ਼ਰ ਵਿੱਚ ਇਹ ਵਿਖਾਇਆ ਜਾਂਦਾ ਹੈ:

پہلا نام:


آخری نام:


Action ਲੋੜ ਦਾਤਾ

action ਲੋੜ ਦਾਤਾਫਾਰਮ ਸੰਭਾਲ ਨੂੰ ਚਲਾਉਣ ਵਾਲੀ ਕਾਰਵਾਈ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰੋ。

ਫਾਰਮ ਨੂੰ ਸਰਵਰ 'ਤੇ ਸੰਭਾਲਣ ਦੀ ਆਮ ਪ੍ਰਕਿਰਿਆ ਸੰਭਾਲ ਬਟਨ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਹੈ。

ਆਮ ਤੌਰ 'ਤੇ, ਫਾਰਮ ਵੈਬ ਸਰਵਰ 'ਤੇ ਵੈੱਬਸਾਈਟ ਨੂੰ ਸੰਭਾਲਣ ਲਈ ਸੰਭਾਲਿਆ ਜਾਂਦਾ ਹੈ。

ਇਸ ਉਦਾਹਰਣ ਵਿੱਚ, ਕੋਈ ਸਰਵਰ ਸਕ੍ਰਿਪਟ ਨੂੰ ਸੰਭਾਲਣ ਲਈ ਸ਼ਾਮਿਲ ਕੀਤਾ ਗਿਆ ਹੈ:

<form action="action_page.php">

action ਅਤੀਤ ਲਈ ਸੰਜੋਗ ਨਾ ਕਰਨ ਤਾਂ action ਮੌਜੂਦਾ ਪੰਨੇ ਦਾ ਅਡਰੈੱਸ ਸੈਟ ਕੀਤਾ ਜਾਵੇਗਾ।

Method ਅਤੀਤ

method ਅਤੀਤform ਸੰਬੋਧਨ ਵੇਲੇ ਵਰਤੇ ਜਾਣ ਵਾਲੇ HTTP ਮੇਥਡ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰਦਾ ਹੈ (GET ਜਾਂ POST）：

<form action="action_page.php" method="GET">

ਜਾਂ:

<form action="action_page.php" method="POST">

ਜਦੋਂ GET ਦਾ ਉਪਯੋਗ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ?

ਤੁਸੀਂ GET (ਮੂਲ ਮੱਥਦੰਡ) ਦਾ ਉਪਯੋਗ ਕਰ ਸਕਦੇ ਹੋ:

ਜੇਕਰ ਫਾਰਮ ਸੰਬੋਧਨ ਪਾਸਿਵ (ਉਦਾਹਰਣ ਵਜੋਂ ਸੈਰਚ ਐਗੋਰਟ ਕੁਰਸੀ) ਹੈ ਅਤੇ ਸੰਵੇਦਨਸ਼ੀਲ ਸੂਚਨਾ ਨਹੀਂ ਹੈ。

ਜਦੋਂ ਤੁਸੀਂ GET ਦਾ ਉਪਯੋਗ ਕਰਦੇ ਹੋ ਤਾਂ ਫਾਰਮ ਡਾਟਾ ਪੰਨੇ ਦੇ ਅਡਰੈੱਸ ਬਾਰ ਵਿੱਚ ਦਿਸਦਾ ਹੈ:

action_page.php?firstname=Mickey&lastname=Mouse

نوٹ:GET ਕੁਝ ਛੋਟੇ ਡਾਟਾ ਸੰਬੋਧਨ ਲਈ ਸਭ ਤੋਂ ਵਧੀਆ ਹੈ। ਬਰਾਉਜ਼ਰ ਨੂੰ ਕੈਪੇਸਿਟੀ ਲਿਮਿਟ ਨਿਰਧਾਰਿਤ ਕਰਦਾ ਹੈ。

ਜਦੋਂ POST ਦਾ ਉਪਯੋਗ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ?

ਤੁਸੀਂ POST ਦਾ ਉਪਯੋਗ ਕਰਨਾ ਚਾਹੀਦੇ ਹਨ:

ਜੇਕਰ ਫਾਰਮ ਨੂੰ ਸਾਈਟ ਦਾ ਡਾਟਾ ਅੱਪਡੇਟ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾ ਰਿਹਾ ਹੈ ਜਾਂ ਉਸ ਵਿੱਚ ਸੰਵੇਦਨਸ਼ੀਲ ਸੂਚਨਾ (ਉਦਾਹਰਣ ਵਜੋਂ ਪਾਸਵਰਡ) ਹੈ。

POST ਦੀ ਸੁਰੱਖਿਆ ਬਹੁਤ ਬਿਹਤਰ ਹੈ ਕਿਉਂਕਿ ਪੰਨੇ ਦੇ ਅਡਰੈੱਸ ਬਾਰ ਵਿੱਚ ਸੰਬੋਧਨ ਕੀਤੇ ਗਏ ਡਾਟਾ ਦਿਸਦੇ ਨਹੀਂ ਹਨ。

Name ਅਤੀਤ

ਜੇਕਰ ਇਹ ਸਹੀ ਤਰ੍ਹਾਂ ਸੰਬੋਧਨ ਕੀਤਾ ਜਾਵੇ ਤਾਂ ਹਰੇਕ ਇਨਪੁਟ ਫੀਲਡ ਨੂੰ name ਅਤੀਤ ਸੈਟ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ。

ਇਸ ਮਾਮਲੇ ਵਿੱਚ ਕੇਵਲ "Last name" ਇਨਪੁਟ ਫੀਲਡ ਦਾ ਸੰਬੋਧਨ ਕੀਤਾ ਜਾਵੇਗਾ:

مثال

<form action="action_page.php">
First name:<br>
<input type="text" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

ਆਪਣੇ ਆਪ ਸਿਖਰ ਦੇਖੋ

fieldset ਦੇ ਮਾਧਿਅਮ ਨਾਲ ਫਾਰਮ ਡਾਟਾ ਮਿਲਾਓ

<fieldset> element ਨਾਲ ਫਾਰਮ ਵਿੱਚ ਸਬੰਧਤ ਡਾਟਾ ਮਿਲਾਉਂਦਾ ਹੈ

<legend> element ਨੂੰ <fieldset> element ਵਿੱਚ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਦਾ ਹੈ。

مثال

<form action="action_page.php">
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit"></fieldset>
</form>

ਆਪਣੇ ਆਪ ਸਿਖਰ ਦੇਖੋ

ਇਹ HTML ਕੋਡ ਬਰਾਉਜ਼ਰ ਵਿੱਚ ਇਸ ਤਰ੍ਹਾਂ ਦਿਸਦਾ ਹੈ:

شخصی معلومات:
پہلا نام:


آخری نام:


HTML فرم اٹری بیوٹ

HTML <form> عنصر، تمام ممکن اٹری بیوٹس کو مقرر کرتا ہے، اس طرح ہوتا ہے:

مثال

<form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8"
ectype="application/x-www-form-urlencoded" autocomplete="off" novalidate>
.
فرم عناصر
 .
</form>

نیچے <form> اٹری بیوٹس کی لیسٹ درج ہے:

اٹری بیوٹ وصف
اکیپٹ چارکرت فرم میں استعمال کی جانے والی چارکرت کو مقرر کرتا ہے (مقابلہ: وینج کی چارکرت)。
ایکشن فرم کو ارسال کرنے کیلئے آدرس (URL) مقرر کرتا ہے (ارسال وینج)。
آٹوکامپلیٹ براوزر کو فرم کو خودکار طور پر مکمل کرنا چاہئے (مقابلہ: چاہئے)。
انکوائٹ ارسال کی جانے والی ڈاٹا کا کد مقرر کرتا ہے (مقابلہ: url-encoded)。
میتھد فرم کو ارسال کیلئے استعمال کی جانے والی ایچ تی پی میتھد مقرر کرتا ہے (مقابلہ: GET)。
نام فرم کا نام پہچاننے کیلئے استعمال کیا جاتا ہے (برائے DOM: document.forms.name)。
نوولیویل براوزر کو فرم کو تھیک نہیں کرنا چاہئے (مقابلہ: نہیں چاہئے)。
ٹارگٹ ایکشن اٹری بیوٹ میں مقصد کا آدرس مقرر کرتا ہے (مقابلہ: _self)。

نوٹ:آپ نے نیچے کے چپتر میں اٹری بیوٹس کے بارے میں مزید معلومات حاصل کریں گے。