HTML آئی اینڈیو ڈیپز آپس

اس فصل میں <input> علامت کا آئی اینڈیو ڈیپز آپس کا تعریف کیا گیا ہے。

آئی اینڈیو ڈیپز آپس: text

<input type="text"> تعلیمات فراہم کرنے کے لئےٹیکسٹ انٹر آپکا سول انٹر آپ فیلڈ:

مثال

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

خود کا تجربہ کریں

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

First name:


Last name:

آئی اینڈیو ڈیپز آپس: password

<input type="password"> ਪਰਿਭਾਸ਼ਿਤپاسورڈ فیلڈ:

مثال

<form>
 یوزر نیم:<br>
<input type="text" name="username">
<br>
 یوزر پاسورڈ:<br>
<input type="password" name="psw">
</form>

خود کا تجربہ کریں

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

یوزر نیم:


یوزر پاسورڈ:

ਟਿੱਪਣੀ:پاسورڈ فیلڈ میں کی کارکتریں مخفی کی جاتی ہیں (نشان ستارے یا خالی دائرے کی شکل میں دکھائی دیتی ہیں)。

آئی اینڈیو ڈیپز آپس: submit

<input type="submit"> ਪਰਿਭਾਸ਼ਿਤپیشکشفارم ڈاٹا کوفارم ہینڈلرکا بٹن ہوتا ہے。

فارم ہینڈلر (form-handler) عام طور پر آئی اینڈیو ڈیٹا کو ہینڈل کرنے والا سروئیسی پیج ہوتا ہے。

ਫਾਰਮ ਦੀ action ਵਿਸ਼ੇਸ਼ਤਾ ਵਿੱਚ ਫਾਰਮ ਹੰਡਲਰ (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>

خود کا تجربہ کریں

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

First name:


Last name:


ਤੁਸੀਂ ਸੰਬੋਧਨ ਬਟਨ ਦੀ value ਵਿਸ਼ੇਸ਼ਤਾ ਛੱਡੇ ਤਾਂ ਬਟਨ ਮੂਲ ਪਾਠ ਹੋਵੇਗਾ:

مثال

<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">
</form>

خود کا تجربہ کریں

Input Type: radio

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

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

مثال

<form>
<input type="radio" name="sex" value="male" checked>ਪੁਰਸ਼
<br>
<input type="radio" name="sex" value="female">ਮਹਿਲਾ
</form>

خود کا تجربہ کریں

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

ਪੁਰਸ਼

ਮਹਿਲਾ

Input Type: checkbox

<input type="checkbox"> ਚੈਕਬਾਕਸ ਪਰਿਭਾਸ਼ਿਤ ਕਰੋ。

ਚੈਕਬਾਕਸ ਯੂਜ਼ਰ ਨੂੰ ਸੀਮਿਤ ਸੰਖਿਆ ਵਿੱਚ ਕੋਈ ਵੀ ਚੋਣ ਕਰਨ ਜਾਂ ਕੋਈ ਵੀ ਚੋਣਾਂ ਚੁਣਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ。

مثال

<form>
<input type="checkbox" name="vehicle" value="Bike">ਮੈਂ ਇੱਕ ਸਾਈਕਲ ਹਾਂ
<br>
<input type="checkbox" name="vehicle" value="Car">ਮੈਂ ਇੱਕ ਕਾਰ ਹਾਂ 
</form>

خود کا تجربہ کریں

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

ਮੈਂ ਇੱਕ ਸਾਈਕਲ ਹਾਂ

ਮੈਂ ਇੱਕ ਕਾਰ ਹਾਂ

Input Type: button

<input type="button"> ਪਰਿਭਾਸ਼ਿਤਬਟਨ。

مثال

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

خود کا تجربہ کریں

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

HTML5 ਇਨਪੁਟ ਟਾਈਪ

HTML5 ਨੇ ਕਈ ਨਵੇਂ ਇਨਪੁਟ ਟਾਈਪ ਜੋੜੇ ਹਨ:

  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

ਟਿੱਪਣੀ:ਪੁਰਾਣੇ ਵੈਬ ਬਰਾਉਜ਼ਰਾਂ ਦੁਆਰਾ ਸਮਰੱਥ ਨਾ ਹੋਣ ਵਾਲੇ ਇਨਪੁਟ ਟਾਈਪ, ਇਨਪੁਟ ਟਾਈਪ text ਵਜੋਂ ਦੇਖਿਆ ਜਾਵੇਗਾ。

ਇਨਪੁਟ ਟਾਈਪ: number

<input type="number"> ਅੰਕ ਮੁੱਲ ਸ਼ਾਮਲ ਹੋਣ ਵਾਲੇ ਇਨਪੁਟ ਫੀਲਡ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ。

ਤੁਸੀਂ ਅੰਕਾਂ 'ਤੇ ਸੀਮਾਵਾਂ ਲਗਾ ਸਕਦੇ ਹੋ。

ਬਰਾਉਜ਼ਰ ਦੀ ਸਮਰੱਥਾ ਨੂੰ ਅਨੁਸਾਰ, ਸੀਮਾਵਾਂ ਇਨਪੁਟ ਫੀਲਡ 'ਤੇ ਲਾਗੂ ਕੀਤੀਆਂ ਜਾ ਸਕਦੀਆਂ ਹਨ。

مثال

<form>
  ਮਾਤਰਾ (1 ਤੋਂ 5 ਤੱਕ):
  <input type="number" name="quantity" min="1" max="5">
</form>

خود کا تجربہ کریں

ਇਨਪੁਟ ਸੀਮਾਵਾਂ

ਹੇਠ ਲਿਖੇ ਸਧਾਰਨ ਇਨਪੁਟ ਸੀਮਾਵਾਂ ਦੀ ਸੂਚੀ ਦਿੱਤੀ ਗਈ ਹੈ (ਕੁਝ ਹੀ ਹੈਲਜ਼ ਵਿੱਚ ਨਵੇਂ ਹੋਏ):

ਵਿਸ਼ੇਸ਼ਤਾ ਵਰਣਨ
disabled ਇਨਪੁਟ ਫੀਲਡ ਨੂੰ ਨਾਮਜ਼ਦ ਕਰੋ。
max ਇਨਪੁਟ ਫੀਲਡ ਦਾ ਮਹੱਤਵਪੂਰਣ ਮੁੱਲ ਨਿਰਧਾਰਿਤ ਕਰੋ。
maxlength ਇਨਪੁਟ ਫੀਲਡ ਦੇ ਮਹੱਤਵਪੂਰਣ ਅੰਕਾਂ ਦੀ ਸੀਮਾ ਨਿਰਧਾਰਿਤ ਕਰੋ。
min ਇਨਪੁਟ ਫੀਲਡ ਦਾ ਨਿਊਨਤਮ ਮੁੱਲ ਨਿਰਧਾਰਿਤ ਕਰੋ。
pattern ਇਸ ਰਾਹੀਂ ਇਨਪੁਟ ਮੁੱਲ ਦੀ ਚੇਕ ਕਰਨ ਵਾਲੇ ਪੈਟਰਨ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰੋ。
readonly ਇਨਪੁਟ ਫੀਲਡ ਨੂੰ ਸਿਰਫ ਪੜ੍ਹਨ ਲਈ ਕਰੋ (ਸੋਧ ਨਹੀਂ ਕਰਨਾ ਹੈ)
required ਇਨਪੁਟ ਫੀਲਡ ਨੂੰ ਲਾਜ਼ਮੀ (ਲਾਜ਼ਮੀ ਦਾਖਲ ਕਰੋ) ਕਰੋ。
size ਇਨਪੁਟ ਫੀਲਡ ਦੀ ਚਾਰਜ਼ਾਂ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰੋ (ਅੰਕਾਂ ਦੇ ਰੂਪ ਵਿੱਚ)
step ਇਨਪੁਟ ਫੀਲਡ ਦੇ ਲਾਗੂ ਅੰਕ ਅੰਤਰ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰੋ。
value ਇਨਪੁਟ ਫੀਲਡ ਦੇ ਮੂਲਮਤਾ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰੋ。

ਤੁਸੀਂ ਅਗਲੇ ਚਾਪ ਵਿੱਚ ਇਨਪੁਟ ਸੀਮਾਵਾਂ ਬਾਰੇ ਹੋਰ ਜਾਣਕਾਰੀ ਸਿੱਖ ਸਕੋਗੇ。

مثال

<form>
  ਮਾਤਰਾ:
  <input type="number" name="points" min="0" max="100" step="10" value="30">
</form>

خود کا تجربہ کریں

ਇਨਪੁਟ ਟਾਈਪ: date

<input type="date"> ਇਹ ਮਿਤੀ ਸ਼ਾਮਲ ਹੋਣ ਵਾਲੇ ਇਨਪੁਟ ਫੀਲਡ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ。

ਬਰਥਡੇ (ਮਿਤੀ ਅਤੇ ਸਮਾਂ):

مثال

<form>
  ਜਨਮ ਦਾ ਦਿਨ:
  <input type="date" name="bday">
</form>

خود کا تجربہ کریں

ਤੁਸੀਂ ਇਨਪੁਟ ਵਿੱਚ ਸੀਮਾਵਾਂ ਜੋੜ ਸਕਦੇ ਹੋ:

مثال

<form>
  ਇੱਕ ਮਿਤੀ ਇਕੱਠੋਂ 1980-01-01 ਪਹਿਲਾਂ ਦਾਖਲ ਕਰੋ:
  <input type="date" name="bday" max="1979-12-31"><br>
  2000-01-01 ਤੋਂ ਬਾਅਦ ਇੱਕ ਮਿਤੀ ਦਾ ਪ੍ਰਵੇਸ਼ ਕਰੋ:
  <input type="date" name="bday" min="2000-01-02"><br>
</form>

خود کا تجربہ کریں

ਇਨਪੁਟ ਟਾਈਪ: color

<input type="color"> ਜਿਸ ਵਿੱਚ ਰੰਗ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ ਇਸ ਲਈ ਇਸਤੇਮਾਲ ਕੀਤਾ ਜਾਂਦਾ ਹੈ。

ਬਰਾਉਜ਼ਰ ਦੀ ਸਮਰੱਥਾ ਨੂੰ ਅਨੁਸਾਰ ਰੰਗ ਚੋਣਕਾਰ ਇਨਪੁਟ ਫੀਲਡ ਵਿੱਚ ਦਿਖਾਇਆ ਜਾਵੇਗਾ。

مثال

<form>
  ਪਸੰਦੀਦਾ ਰੰਗ ਚੁਣੋ:
  <input type="color" name="favcolor">
</form>

خود کا تجربہ کریں

ਇਨਪੁਟ ਟਾਈਪ: range

<input type="range"> ਜਿਸ ਵਿੱਚ ਇੱਕ ਕੁਝ ਦਾਇਰੇ ਵਿੱਚ ਮੁੱਲ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ ਇਸ ਲਈ ਇਸਤੇਮਾਲ ਕੀਤਾ ਜਾਂਦਾ ਹੈ。

ਬਰਾਉਜ਼ਰ ਦੀ ਸਮਰੱਥਾ ਨੂੰ ਅਨੁਸਾਰ ਇਨਪੁਟ ਫੀਲਡ ਸਲਾਈਡਰ ਕੰਟਰੋਲ ਵਜੋਂ ਦਿਖਾਇਆ ਜਾ ਸਕਦਾ ਹੈ。

مثال

<form>
  <input type="range" name="points" min="0" max="10">
</form>

خود کا تجربہ کریں

ਤੁਸੀਂ ਹੇਠ ਲਿਖੇ ਵਿਸ਼ੇਸ਼ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ ਕੇ ਸੀਮਾਂ ਤੈਅ ਕਰ ਸਕਦੇ ਹੋ: min, max, step, value。

ਇਨਪੁਟ ਟਾਈਪ: month

<input type="month"> ਉਪਭੋਗਤਾ ਚੋਣ ਕਰ ਸਕਦਾ ਹੈ ਮਹੀਨੇ ਅਤੇ ਸਾਲ。

ਬਰਥਡੇ (ਮਿਤੀ ਅਤੇ ਸਮਾਂ):

مثال

<form>
  Birthday (month and year):
  <input type="month" name="bdaymonth">
</form>

خود کا تجربہ کریں

ਇਨਪੁਟ ਟਾਈਪ: week

<input type="week"> ਉਪਭੋਗਤਾ ਚੋਣ ਕਰ ਸਕਦਾ ਹੈ ਹਫਤਾ ਅਤੇ ਸਾਲ。

ਬਰਥਡੇ (ਮਿਤੀ ਅਤੇ ਸਮਾਂ):

مثال

<form>
  ਇੱਕ ਹਫਤਾ ਚੁਣੋ:
  <input type="week" name="week_year">
</form>

خود کا تجربہ کریں

ਇਨਪੁਟ ਟਾਈਪ: time

<input type="time"> ਉਪਭੋਗਤਾ ਚੋਣ ਕਰ ਸਕਦਾ ਹੈ ਸਮਾਂ (ਕੋਈ ਟਾਈਮ-ਜ਼ੋਨ ਨਹੀਂ)。

ਬਰਾਉਜ਼ਰ ਦੀ ਸਮਰੱਥਾ ਨੂੰ ਅਨੁਸਾਰ ਮਿਤੀ ਚੋਣਕਾਰ ਇਨਪੁਟ ਫੀਲਡ ਵਿੱਚ ਦਿਖਾਇਆ ਜਾਵੇਗਾ。

مثال

<form>
  ਇੱਕ ਸਮਾਂ ਚੁਣੋ:
  <input type="time" name="usr_time">
</form>

خود کا تجربہ کریں

ਇਨਪੁਟ ਟਾਈਪ: datetime

<input type="datetime"> ਉਪਭੋਗਤਾ ਚੋਣ ਕਰ ਸਕਦਾ ਹੈ ਮਿਤੀ ਅਤੇ ਸਮਾਂ (ਟਾਈਮ-ਜ਼ੋਨ ਨਾਲ)。

ਬਰਥਡੇ (ਮਿਤੀ ਅਤੇ ਸਮਾਂ):

مثال

<form>
  Birthday (date and time):
  <input type="datetime" name="bdaytime">
</form>

خود کا تجربہ کریں

ਇਨਪੁਟ ਟਾਈਪ: datetime-local

<input type="datetime-local"> ਉਪਭੋਗਤਾ ਚੋਣ ਕਰ ਸਕਦਾ ਹੈ ਮਿਤੀ ਅਤੇ ਸਮਾਂ (ਕੋਈ ਟਾਈਮ-ਜ਼ੋਨ ਨਹੀਂ)。

ਬਰਥਡੇ (ਮਿਤੀ ਅਤੇ ਸਮਾਂ):

مثال

<form>
  Birthday (date and time):
  
</form>

خود کا تجربہ کریں

<input type="datetime-local" name="bdaytime">

درجہ نوعیت: email <input type="email">

ای میل کا آدرس شامل کرنا چاہئیے والا داخل کردہ فیلڈ کیلئے استعمال کیا جاتا ہے۔

کچھ اسمارٹ فونس ایمیل کی قسم کو پہچانتا ہیں، اور کلیدیپ میں ".com" شامل کرکے ایمیل داخل کرانے کیلئے اضافہ کرتا ہیں۔

مثال

<form>
  ای میل:
  <input type="email" name="email">
</form>

خود کا تجربہ کریں

درجہ نوعیت: search

<input type="search"> تلاش کیلئے استعمال کیا جاتا ہے، جس کا نمائش معمولی متن فیلڈ کی طرح ہوتا ہے۔

مثال

<form>
  گوجل تلاش:
  <input type="search" name="googlesearch">
</form>

خود کا تجربہ کریں

درجہ نوعیت: tel

<input type="tel"> تلفون نمبر شامل کرنا چاہئیے والا داخل کردہ فیلڈ کیلئے استعمال کیا جاتا ہے۔

ابھی ساری سافری 8 tel قسم کو سپورٹ کرتی ہیں۔

مثال

<form>
  ٹیلیفون:
  <input type="tel" name="usrtel">
</form>

خود کا تجربہ کریں

درجہ نوعیت: url

<input type="url"> URL کا آدرس شامل کرنا چاہئیے والا داخل کردہ فیلڈ کیلئے استعمال کیا جاتا ہے۔

بروزر سپورٹ کے مطابق، داخل کردہ وقت پر url فیلڈ کو خودکار طور پر توثیق کیا جاسکتا ہے۔

کچھ اسمارٹ فونس کا پیمانہ url کی قسم کو پہچانتا ہیں، اور کلیدیپ میں ".com" شامل کرکے url داخل کرانے کیلئے اضافہ کرتا ہیں۔

مثال

<form>
  آپ کی ہوم پیج شامل کریں:
  <input type="url" name="homepage">
</form>

خود کا تجربہ کریں