HTML ورودی نوعیت

یہ فصل <input> عناصر کی ورودی کی نوعیت کا تعریف کرتا ہے۔

ورودی کا نوعیت: text

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

مثال

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

آزمایش کنید

مذکورہ HTML کو براوزر میں ایسا دیکھا جاتا ہے:

نام:


عام نام:

ورودی کا نوعیت: 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 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 کی جانی جائیگا。

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

<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 انٹری فیلڈ کی مجاز عددی تفریق مقرر کرتا ہے。
value انٹری فیلڈ کی مولوی محدودیت مقرر کرتا ہے。

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

مثال

<form>
  کمیت:
  <input type="number" name="points" min="0" max="100" step="10" value="30">
</form>

آزمایش کنید

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

<input type="date"> تاریخ شامل بنائی جانے والی انٹری فیلڈ کے لئے استعمال کیا جاتا ہے。

بنا پرتوسری بر ناوفرمئی، شاکل انتخاب تاریخ دکھائی دینگی جا رکھی وگی.

مثال

<form>
  جشن ميلاد:
  <input type="date" name="bday">
</form>

آزمایش کنید

آپ کو آپ کی تخلص میں محدودیت اضافہ کرسکتے ہیں:

مثال

<form>
  اکیس سے پہلے کی تاریخ شامل کریں:
  <input type="date" name="bday" max="1979-12-31"><br>
  Enter a date after 2000-01-01:
  

</form>

آزمایش کنید

输入类型：color

用于应该包含颜色的输入字段。

根据浏览器支持，颜色选择器会出现输入字段中。

مثال

<form>
  Select your favorite color:
  
</form>

آزمایش کنید

输入类型：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>
  جستجو در گوگل:
  <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>

آزمایش کنید