HTML ورج کا قسم

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

ورج کا قسم: ٹیکسٹ

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

مثال

<form>
 عام نام:<br>
<input type="text" name="firstname">
<br>
 عائلی نام:<br>
<input type="text" name="lastname">
</form>

آزمایش کنید

کد HTML بالا در مرورگر به این شکل نمایش داده می‌شود:}

عام نام:


عائلی نام:

ورج کا قسم: پاسورڈ

<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">
عام نام:<br>
<input type="text" name="firstname" value="Mickey">
<br>
عائلی نام:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

آزمایش کنید

کد HTML بالا در مرورگر به این شکل نمایش داده می‌شود:}

عام نام:


عائلی نام:


اگر آپ نکل ساتھی کا value نمبر چھوڑ دیں تو اس بٹن کو طور پر نمبر دیا جائے گا:

مثال

<form action="action_page.php">
عام نام:<br>
<input type="text" name="firstname" value="Mickey">
<br>
عائلی نام:<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>

آزمایش کنید

محدودیت‌های ورودی

در اینجا برخی از محدودیت‌های ورودی معمولی لیست شده‌اند (بعضی از آنها جدیداً در HTML5 اضافه شده‌اند):

ویژگی‌ها توضیحات
disabled تعیین می‌کند که آیا فیلد ورودی باید غیرفعال باشد.
max حداکثر مقدار فیلد ورودی تعیین می‌شود.
maxlength حداکثر تعداد کاراکتر فیلد ورودی تعیین می‌شود.
min حداقل مقدار فیلد ورودی تعیین می‌شود.
pattern عبارت منظم برای بررسی مقدار ورودی تعیین می‌شود.
readonly تعیین می‌کند که فیلد ورودی فقط خواندنی است (قابل تغییر نیست).
required تعیین می‌کند که آیا فیلد ورودی الزامی است (باید پر شود).
size عرض فیلد ورودی (به تعداد کاراکتر) تعیین می‌شود.
step محدودیت‌های عددی مجاز فیلد ورودی تعیین می‌شود.
مقدار مقدار پیش‌فرض فیلد ورودی تعیین می‌شود.

شما در فصل بعدی بیشتر درباره محدودیت‌های ورودی یاد خواهید گرفت.

مثال

<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>
  برسی (ماه و سال):
  <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>
  برسی (تاریخ و وقت):
  <input type="datetime" name="bdaytime">
</form>

آزمایش کنید

نوع ورودی: datetime-local

<input type="datetime-local"> به کاربر اجازه می‌دهد که تاریخ و وقت را انتخاب کند (بدون منطقه زمانی).

بنا بر پشتیبانی مرورگر، انتخاب‌گر تاریخ در فیلد ورودی ظاهر خواهد شد.

مثال

<form>
  برسی (تاریخ و وقت):
  <input type="datetime-local" name="bdaytime">
</form>

آزمایش کنید

نوع ورودی: email

<input type="email"> برای ورودی‌هایی که باید شامل آدرس ایمیل شوند استفاده می‌شود.

بسته به پشتیبانی کاوشگر، می‌توانید در هنگام ارسال از اعتبارسنجی خودکار آدرس ایمیل استفاده کنید.

برخی از تلفن‌های هوشمند نوع ایمیل را تشخیص داده و به صفحه کلید ".com" اضافه می‌کنند تا با ورودی ایمیل مطابقت داشته باشند.

مثال

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

آزمایش کنید

نوع ورودی: search

<input type="search"> برای فیلدهای جستجو استفاده می‌شود (نحوه نمایش فیلدهای جستجو مشابه فیلدهای متنی معمولی است).

مثال

<form>
  Google جستجو کنید:
  <input type="search" name="googlesearch">
</form>

آزمایش کنید

نوع ورودی: tel

<input type="tel"> برای ورودی‌هایی که باید شامل شماره تلفن شوند استفاده می‌شود.

در حال حاضر تنها Safari 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>

آزمایش کنید