HTML ورک ان کی نوعیت

اس باب میں <input> علامت کی ورک ان کی نوعیت کا تفصیل دی گئی ہے。

ورک ان کی نوعیت: ٹیکسٹ

<input type="text"> تعریف کیٹیکسٹ ان پُٹکا سول ان پُٹ فیلڈ:

ਇੰਸਟੈਂਸ

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

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

ਉੱਪਰੋਕਤ ਐੱਚਟੀਐੱਮਐੱਲ ਕੋਡ ਬਰਾਉਜ਼ਰ ਵਿੱਚ ਇਸ ਤਰ੍ਹਾਂ ਦੇਖਿਆ ਜਾਵੇਗਾ:

First name:


Last name:

ورک ان کی نوعیت: پاسورڈ

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

ਇੰਸਟੈਂਸ

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

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

ਉੱਪਰੋਕਤ ਐੱਚਟੀਐੱਮਐੱਲ ਕੋਡ ਬਰਾਉਜ਼ਰ ਵਿੱਚ ਇਸ ਤਰ੍ਹਾਂ ਦੇਖਿਆ ਜਾਵੇਗਾ:

یوزر نیم:


یوزر پاسورڈ:

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

ورک ان کی نوعیت: 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>

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

ਉੱਪਰੋਕਤ ਐੱਚਟੀਐੱਮਐੱਲ ਕੋਡ ਬਰਾਉਜ਼ਰ ਵਿੱਚ ਇਸ ਤਰ੍ਹਾਂ ਦੇਖਿਆ ਜਾਵੇਗਾ:

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>

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

ਉੱਪਰੋਕਤ ਐੱਚਟੀਐੱਮਐੱਲ ਕੋਡ ਬਰਾਉਜ਼ਰ ਵਿੱਚ ਇਸ ਤਰ੍ਹਾਂ ਦੇਖਿਆ ਜਾਵੇਗਾ:

ਪੁਰਸ਼

ਮਹਿਲਾ

Input Type: checkbox

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

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

ਇੰਸਟੈਂਸ

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

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

ਉੱਪਰੋਕਤ ਐੱਚਟੀਐੱਮਐੱਲ ਕੋਡ ਬਰਾਉਜ਼ਰ ਵਿੱਚ ਇਸ ਤਰ੍ਹਾਂ ਦੇਖਿਆ ਜਾਵੇਗਾ:

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

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

Input Type: button

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

ਇੰਸਟੈਂਸ

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

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

ਉੱਪਰੋਕਤ ਐੱਚਟੀਐੱਮਐੱਲ ਕੋਡ ਬਰਾਉਜ਼ਰ ਵਿੱਚ ਇਸ ਤਰ੍ਹਾਂ ਦੇਖਿਆ ਜਾਵੇਗਾ:

ਐੱਚਟੀਐੱਮਐੱਲ5 ਇਨਪੁਟ ਟਾਈਪ

ਐੱਚਟੀਐੱਮਐੱਲ5 ਨੇ ਕਈ ਨਵੇਂ ਇਨਪੁਟ ਟਾਈਪ ਜੋੜੇ ਹਨ:

  • 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>

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

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

ਹੇਠ ਵਿੱਚ ਸਾਮਾਨਿਆਰ ਇਨਪੁਟ ਸੀਮਾਵਾਂ ਦੇ ਅਸਲ ਵਿੱਚ ਸੂਚੀਬੱਧ ਹਨ (ਕੁਝ ਹੀ ਐੱਚਟੀਐੱਮਐੱਲ5 ਵਿੱਚ ਜੋੜੇ ਗਏ ਹਨ):

ਵਿਸ਼ੇਸ਼ਤਾ ਵਰਣਨ
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):
  <input type="datetime-local" name="bdaytime">
</form>

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

ਇਨਪੁਟ ਟਾਈਪ: email

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

ਬਰਾਊਜ਼ਰ ਸਮਰਥਨ ਨੂੰ ਅਨੁਸਾਰ, ਸੰਬੋਧਨ ਵੇਲੇ ਈਮੇਲ ਦਾ ਆਟੋਮੈਟਿਕ ਰੂਪ ਵਿੱਚ ਸਹੀਅਤਾ ਦਿੱਤੀ ਜਾ ਸਕਦੀ ਹੈ

ਕੁਝ ਸਮਾਰਟਫੋਨ ਈਮੇਲ ਟਾਈਪ ਨੂੰ ਪਛਾਣਦੇ ਹਨ ਅਤੇ ਕੀਬੋਰਡ ਵਿੱਚ ".com" ਸ਼ਾਮਿਲ ਕਰਦੇ ਹਨ ਤਾਂਕਿ ਈਮੇਲ ਇਨਪੁਟ ਨਾਲ ਮੇਲ ਖਾਣ

ਇੰਸਟੈਂਸ

<form>
  E-mail:
  <input type="email" name="email">
</form>

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

ਇਨਪੁਟ ਟਾਈਪ: search

<input type="search"> ਖੋਜ ਫੀਲਡ (ਖੋਜ ਫੀਲਡ ਰੋਮਾਂਚਕ ਟੈਕਸਟ ਫੀਲਡ ਦੇ ਤਰੀਕੇ ਨਾਲ ਪ੍ਰਦਰਸ਼ਿਤ ਹੁੰਦਾ ਹੈ)

ਇੰਸਟੈਂਸ

<form>
  Search Google:
  <input type="search" name="googlesearch">
</form>

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

ਇਨਪੁਟ ਟਾਈਪ: tel

<input type="tel"> ਫੋਨ ਨੰਬਰ ਸ਼ਾਮਲ ਹੋਣ ਵਾਲੇ ਇਨਪੁਟ ਫੀਲਡ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ

ਮੌਜੂਦਾ ਵਿੱਚ ਸਿਰਫ ਸਫਾਰੀ 8 ਨੇ tel ਟਾਈਪ ਨੂੰ ਸਮਰਥਨ ਕੀਤਾ ਹੈ

ਇੰਸਟੈਂਸ

<form>
  Telephone:
  <input type="tel" name="usrtel">
</form>

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

ਇਨਪੁਟ ਟਾਈਪ: url

<input type="url"> ਯੂਰਲ ਪਤਾ ਸ਼ਾਮਲ ਹੋਣ ਵਾਲੇ ਇਨਪੁਟ ਫੀਲਡ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ

ਬਰਾਊਜ਼ਰ ਸਮਰਥਨ ਨੂੰ ਅਨੁਸਾਰ, ਸੰਬੋਧਨ ਵੇਲੇ ਯੂਰਲ ਫੀਲਡ ਨੂੰ ਆਟੋਮੈਟਿਕ ਰੂਪ ਵਿੱਚ ਸਹੀਅਤਾ ਦਿੱਤੀ ਜਾ ਸਕਦੀ ਹੈ

ਕੁਝ ਸਮਾਰਟਫੋਨ ਯੂਰਲ ਟਾਈਪ ਨੂੰ ਪਛਾਣਦੇ ਹਨ ਅਤੇ ਕੀਬੋਰਡ ਵਿੱਚ ".com" ਸ਼ਾਮਿਲ ਕਰਦੇ ਹਨ ਤਾਂਕਿ ਯੂਰਲ ਇਨਪੁਟ ਨਾਲ ਮੇਲ ਖਾਣ

ਇੰਸਟੈਂਸ

<form>
  Add your homepage:
  <input type="url" name="homepage">
</form>

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ