آموزش ساخت فرم اعتبارسنجی با HTML5

آموزش ساخت فرم اعتبارسنجی با HTML5

امروز در این آموزش ما به شما با استفاده از کدهای HTML نحوه اعتبارسنجی داده های وارد شده در فرم ثبت نامی را می دهیم.ما در این آموزش فقط از تکنیک های موجود در داخل خود HTML استفاده خواهیم کرد.

برای مشاهده لینک وارد شود

شما اگر فرمی را در داخل وبسایت خود قرار بدهید تا با استفاده از آن اطلاعات مورد نیاز خود را از کاربران دریافت کنید باید صحت اطلاعات وارده را بررسی نمایید تا اطلاعات به شکل صحیح وارد بشوند.ما امروز در این آموزش با استفاده از HTML5 نحوه ایجاد چندین نوع اعتبارسنجی را به شما یاد خواهیم داد تا شما بدون وارد کردن کدهای اضافی صحت اطلاعات وارده توسط کاربران خود را بررسی نمایید.

خوشبختانه،HTML5 به شما این امکان را می دهد که با چند تکه کد کوتاه انواع اعتبار سنجی مورد نیاز را انجام دهید که در ادامه آنها را مشاهده خواهید کرد.

Untitled

انواع مقادیر تخصصی که به HTML5 اضافه شده اند  و باعث میشوند تا ورودی ها فقط شکل خاصی از عبارات باشند عبارتند از :

  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

برای استفاده از هر کدام یک از عناوین بالا کافی است تا آنها را در داخل صفت type به شکل زیر قرار بدهید.

<input type="email"/>

فیلد اجباری(required):شما با قرار دادن آن در داخل صفت های  <input>، <select> ، <textarea> به مرورگر میگویید که پر کردن اطلاعات  توسط کاربر در این بخش الزامی است.مانند زیر

<input type="checkbox" name="terms" required >

اعمال محدودیت:شما میتوانید به فیلدهایتان محدودیتهایی اعمال کنید مثل حداقل یا حداکثر طول و ….شما برای اعمال محدودیت در نوشته از maxlength یا شبیه آن استفاده می کنید.برای مثال عبارت بالا حداکثر طول کلمه را تعیین می کند که نحوه استفاده آن را در زیر مشاهده می کنید.

<input type="text" name="name" required  maxlength="15">

برای محدودیت در اعداد از maxیا min مثل زیر استفاده میشود.

<input type="number" name="age" min="18" required>

استایل:شما در زیر بعضی از شبه کلاس هایی را که CSS3 در اختیار کاربران قرار داده تا با استفاده از آن به فرم خود قالب دلخواهی را اعمال کنند،مشاهده می کنید.

  • :valid
  • :invalid
  • :required
  • :optional
  • :in-range
  • :out-of-range
  • :read-only
  • :read-write

 

ما در فرم خود در بخش استایل، ما از ترکیب valid و  invalid با شبه کلاس focus،در دموی خود استفاده کردیم که هنگام فوکوس کردن روی فیلد رنگ آن قرمز است و هنگامی که کاربر شروع به نوشتن میکند رنگ آن سبز میشود.

input:focus:invalid,
textarea:focus:invalid{
	border:solid 2px #F5192F;
}

input:focus:valid,
textarea:focus:valid{
	border:solid 2px #18E109;
	background-color:#fff;

توضیحات:اگر پیش نمایش توجه کرده باشید،هنگامی که شما اطلاعات نادرست وارد می کنید یک هشدار(pop-up) نمایش داده میشود.ما با استفاده از صفت title میتوانیم متن نمایش داده شده را تغییر بدهیم.البته در مرورگرهای مختلف نحوه نمایش هشدار ها متفاوت است.شما میتوانید در زیر تکه کد مربوطه را مشاهده نمایید.

<input type="text" name="name" title="Please enter your user name.">

تغییر دادن محل نمایش و متن داخل هشدار ها(error box)ساده نیست و شما باید برای اینکار از جاوااسکریپت استفاده نمایید.که بعدا آموزش داده خواهد شد.

الگو:

ما با استفاده از صفت الگو(pattern) تعیین میکنیم که شکل و فرم اطلاعات وارده به چه شکلی باید باشد.شما میتوانید در زیر نحوه استفاده از این صفت را مشاهده نمایید.

<input type="email" name="email" required pattern="^\S+@\S+\.\S+$" title="example@mail.com">

در آخر فقط این توضیح را بدهیم که برای اینکه پیام های نمایش داده شده در هشدار ها به زبان فارسی باشند کافی است که شما زبان مرورگر خود را به فارسی تنظیم کنید.

+1
0


هرگونه انتشار مطالب اختصاصي و محصولات اين سايت بجز با درج لينک مستقيم شرعا حرام بوده و پيگرد قانوني دارد.
طبق ماده 12 فصل سوم قانون جرائم رايانه هرگونه کپي برداري ممنوع بوده و پيگرد قانوني دارد. براي اطلاعات بيشتر کليک کنيد.

درباره‌ی مدیر سایت

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

دیدگاه خود را بنویسید

آدرس پست الکترونیک شما منتشر نخواهد شد.خانه های ضروری نشانه گذاری شده اند. *

*


8 − هفت =

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>