ایچ ٹی ایم ایل کے عام استعمال ہونے والے فارم ایلیمنٹس

HTML5 میں input ایلیمنٹ کی چند نئی ٹائپس شامل کی گئی ہیں جن میں color , number , email , url , phone , time , date وغیرہ شامل ہیں۔ نئی ان پٹ ٹائپس کا زیادہ تر فائدہ فارم کی پڑتال کے سلسلہ میں ہوتا ہے مثلاً اگر کسی ان پٹ فیلڈ کی ٹائپ آپ نے url مقرر کی ہے تو پھر یہ فیلڈ غلط ویب ایڈریس قبول نہیں کرے گی۔ اس نئے اضافے سے ویب ڈیویلپرز کو بہت سے ایسے Javascript کوڈ سے چھٹکارا مل گیا ہے جو اس سے پہلے وہ براؤزر پر فارم کی پڑتال کے لیے استعمال کرتے تھے۔

درج ذیل سب سے پہلے input ایلیمنٹ کے type ایٹری بیوٹ کی چند نئی ویلیوز کی وضاحت کی جا رہی ہے:

• ٹائپ number کے ساتھ اگر step ایٹری بیوٹ کی ویلیو بغیر اعشاریہ کے استعمال کی جائے تو پھر یہ ایلیمنٹ صرف انٹیجر ویلیو وصول کرے گا۔ اور اگر step ایٹری بیوٹ کی ویلیو اعشاریہ کے ساتھ استعمال کی جائے تو پھر یہ ایلیمنٹ ڈیسیمل ویلیو کی اجازت دے گا۔
• ٹائپ phone ڈیفالٹ کے طور پر ٹائپ text کے طور پر ہی کام کرتی ہے، البتہ سمارٹ فون وغیرہ پر اگر آپ اس ایلیمنٹ میں کچھ لکھنا چاہیں گے تو نمبر پیڈ سامنے آجائے گا۔
• ٹائپ email والے ایلینمٹ میں صارف غلط ای میل ایڈریس مہیا نہیں کر سکے گا۔
• ٹائپ url والے ایلیمنٹ میں صارف غلط ویب سائیٹ ایڈریس مہیا نہیں کر سکے گا۔
• ٹائپ date والے ایلیمنٹ کے ساتھ موجود تیر کے نشان کی مدد سے کیلنڈر سامنے لایا جا سکتا ہے جس میں سے مطلوبہ تاریخ منتخب کی جا سکتی ہے۔ اس کی ویلیو سرور پر ڈیٹابیس کے فارمیٹ میں موصول ہوتی ہے۔ اس سے قبل ایسے کیلنڈر کے لیے جاوا اسکرپٹ کا کوئی پلگ ان استعمال کیا جاتا تھا۔
• ٹائپ time والے ایلیمنٹ میں آپ گھنٹہ، منٹ اور سیکنڈ کے ساتھ صبح یا شام کی علامت منتخب کر سکتے ہیں۔ اس کی ویلیو سرور پر چوبیس گھنٹے کے فارمیٹ میں موصول ہوتی ہے۔
• ٹائپ color والے ایلیمنٹ پر کلک کرنے سے ایک کلر باکس کھل جاتا ہے جس میں سے رنگ منتخب کیا جا سکتا ہے۔ اس کی ویلیو سرور پر ہیکسا ڈیسیمل یعنی 6f9fed# کی صورت میں موصول ہوتی ہے۔

اس کے علاوہ HTML5 میں ایک نیا فارم ایلیمنٹ datalist بھی متعارف کرایا گیا ہے جس کا مقصد select ایلمنٹ کی طرح ویلیوز کی فہرست فراہم کرنا ہے لیکن اس کے کام کا طریقہ کار کچھ مختلف ہے۔ (۱)صارف datalist میں شامل ویلیوز میں سے کوئی ویلیو منتخب کرنے کی بجائے اپنی طرف سے کوئی نئی ویلیو بھی فراہم کر سکتا ہے۔ (۲) جب صارف datalist کی فیلڈ میں ٹائپ کرنا شروع کرتا ہے تو ٹائپ کیے گئے حروف سے شروع ہونے والی ویلیوز سامنے آجاتی ہیں، یعنی اگر فہرست بہت لمبی ہے تو اس میں سے ویلیوز کو تلاش کرنا بہت آسان ہو جاتا ہے۔

درج ذیل HTML میں عام استعمال ہونے والے فارم ایلیمنٹس کا ایک خاکہ دیا جا رہا ہے تاکہ بوقت ضرورت ان کی دستیابی ذہن میں رہے۔ آپ دیکھ رہے ہیں کہ ہر ایلیمنٹ میں id اور name دونوں ایٹری بیوٹس استعمال کیے گئے ہیں۔ id ایٹری بیوٹ کی مدد سے CSS اور Javascript اس ایلیمنٹ تک رسائی حاصل کرتے ہیں، جبکہ name ایٹری بیوٹ کی مدد سے ویب سرور پر PHP یا کوئی اور لینگوئج اس ایلیمنٹ کی ویلیو وصول کرتی ہے۔

مندرجہ بالا خاکہ میں ایلیمنٹس کا ڈیفالٹ کے طور پر کام کرنے کا طریقہ دکھایا گیا ہے۔ اگر آپ چاہیں کہ صارف کسی ایلیمنٹ کی ویلیو ضرور مہیا کرے تو پھر اس میں required ایٹری بیوٹ استعمال کریں، مثلاً:

<input id="price" name="price" type="number" required>

اسی طرح اگر آپ یہ چاہیں کہ کوئی ایلیمنٹ کسی خاص فارمیٹ میں ویلیو وصول کرے تو اس کے لیے pattern ایٹری بیوٹ میں جاوا اسکرپٹ ریگولر ایکسپریشنز استعمال کیے جاتے ہیں، مثلا درج ذیل ایلیمنٹ امریکن فارمیٹ (7890-456-123) میں فون نمبر وصول کرے گا یعنی بائیں طرف سے تین عدد، پھر ڈیش، پھر تین عدد، پھر ڈیش، پھر ۴ عدد۔ البتہ یہ ویلیو لازمی حاصل کرنے کے لیے required ایٹری بیوٹ کا استعمال اضافی طور پر کرنا ہوگا۔

<input id="phone" name="phone" type="tel" pattern="\d{3}[\-]\d{3}[\-]\d{4}">