معتبر سازی فرم ها
کد زیر را در نظر بگیرید.
نتیجه کد در مرورگر :
کد فوق یک فرم تماس با ما است و حاوی ۳ فیلد نام، تلفن و آدرس ایمیل است، فیلد اول و سوم اطلاعات ضروری و فیلد دوم اختیاری است.
حال به معتبرسازی فرم ایجاد شده می پردازیم :
اولین قسمت در معتبرسازی یک فرم، تعیین داده مورد نیازی است که کاربر بایستی آن را وارد کند.
استفاده از تگ های مخصوص آن داده روش مناسبی است، به طور مثال استفاده از input email برای یک آدرس ایمیل یا input url برای آدرس وب و یا input password برای وارد کردن یک پسورد.
اما با این حال فرم نیاز به معتبرسازی بیشتری دارد، به طور مثال ما فقط ایمیل هایی را می پذیریم که gmail باشند، یا پسورد هایی رو می پذیریم که فقط از حروف تشکیل شده باشند و …، ایجاد چنین شروطی معمولا با استفاده از جاوااسکریپت قابل انجام هست اما در اینجا میخواهیم با استفاده از html5 این کارها را انجام دهیم :
Placeholder
با استفاده از صفت placeholder می توان یک مقدار پیشفرض را در input قرار داد تا که کاربر توانایی تشخیص داده مورد نیاز را داشته باشد. به مثال زیر دقت کنید :
نتیجه کد در مرورگر :
ا استفاده از این صفت داده های دقیقتر و به یک اونیفورم (شبیه به هم) را دریافت خواهید کرد.
با طور مثال شاید با دیدن اولین تگ بنظر برسد فقط نام موردنیاز است، اما با استفاده از placeholder تعیین کردیم که نام و نام خانوادگی مورد نیازمان است. یا در تگ دوم تعیین کردیم که شماره تماس، منظور شماره موبایل است و …
required
با استفاده از این صفت بولین، می توان پر کردن یک فیلد را ضروری یا اختیاری تعیین کرد.
به مثال زیر دقت کنید :
نتیجه کد در مرورگر :
می بینید که در صورت خالی بودن فیلد required مرورگر یک پیغام خطا را نمایش می دهد.
در ضمن می توان با استفاده از صفت title توضیحات دیگری نیز به پیغام خطا اضافه کرد
به مثال زیر دقت کنید :
<form>
<fieldset>
<legend>Contant Details</legend>
<label for=”name”>Name <em style=”color: red;”>*</em>:</label>
<input id=”name” type=”text” placeholder=”John Smith” required title=”پر کردن فیلد ضروری است”><br>
<label for=”tel”>Telephone : </label>
<input id=”tel” type=”text” placeholder=”09XX-XXX-XXXX”><br>
<label for=”email”>Email <em style=”color: red;”>*</em>:</label>
<input id=”email” type=”email” placeholder=”john@exapmle.com” required ><br>
<input type=”submit” value=”Send”>
</fieldset>
</form>
نتیجه کد در مرورگر :
الگوی داده ی مورد نظر، pattern
بعد از تعیین دو مورد فوق، نوبت به تعیین یک قاعده برای داده های دریافتی می رسد، قبلا چنین قوانین و قواعدی بیشتر با استفاده از جاوااسکریپت ایجاد می شدند، اما به دلیل استفاده زیاد از این مورد، به صورت پیشفرض در html قرار گرفتند.
به طور مثال ما نیاز به کدی داریم که از ۷ کاراکتر تشکیل شده باشد، ۳ کاراکتر اول حروف بزرگ A تا Z یه خط فاصله و ۳ کاراکتر آخر عدد باشند. برای ایجاد چنین الگویی ، کدمان به شکل زیر خواهد بود :
<form>
<label for=”promoCode”>Promotion Code : </label>
<input id=”promoCode” placeholder=”QRB-001″
title=”Your promotion code is three uppercase letters, a dash, then three numbers”
pattern=”[A-Z]{3}-[0-9]{3}”>
<input type=”submit” value=”Send”>
</form>
