استفاده از اعتبارسنجی داده HTML5

پذیرش داده از بازدیدکنندگان ناشناس وب سایت یک چیز خطرناک است. با این حال، برنامه های وب پویا برای کار کردن باید با کاربر تعامل داشته باشند. معمای این است که چگونه هر دو را انجام دهیم. یکی از روش‌ها استفاده از اعتبارسنجی داده‌ها است، که فرآیند تأیید صحت داده‌هایی است که بازدیدکنندگان سایت شما در فیلدهای فرم وارد می‌کنند. دو راه برای مقابله وجود داردآن فرآیند:
»»روی سرور با کد برنامه نویسی سمت سرور
»» در مرورگر مشتری، با استفاده از HTML، CSS و جاوا اسکریپت در کتاب 4، فصل 4، تمام مبانی استفاده از برنامه نویسی سمت سرور را پوشش می دهمبرای تایید داده های فرمبا این حال، منتظر بمانید تا مرورگر داده ها را در آن آپلود کند.

سرور برای تایید آن می تواند تا حدودی دست و پا گیر باشد. در آن زمان، بازدید کننده سایت قبلاً تمام داده های فرم را وارد کرده است. بازگرداندن یک صفحه وب و بازدیدکننده سایت وارد کردن مجدد تمام آن داده ها فقط به دلیل یک اشتباه تایپی راه خوبی برای حفظ مشتریان نیست. اینجاست که اعتبار سنجی داده های سمت مشتری مفید است. هرچه بتوانید داده های بیشتری را در مرورگر به هنگام وارد کردن بازدیدکننده سایت تأیید کنید، در وهله اول شانس بیشتری برای دریافت داده های معتبر خواهید داشت.جای خود را نگه دارید.
HTML5 با چند ویژگی اضافی به این فرآیند کمک می کند. یکی از این ویژگی ها ویژگی مکان نگهدار برای عنصر ورودی است. ویژگی placeholder ظاهر می شود به عنوان متن خاکستری در داخل فیلد فرم و می تواند یک قالب پیشنهادی برای داده ها ارائه دهد
برای ورود:

Enter your daytime phone number:

مرورگر مقدار مکان نگهدار را در داخل فیلد فرم ورودی، اما به صورت متن خاکستری، نمایش می دهد. همانطور که شروع به تایپ متن در قسمت ورودی می کنید، متن مکان نگهدار ناپدید می شود.ایجاد داده های خاص مورد نیاز است یکی دیگر از ویژگی های اعتبارسنجی داده که توسط HTML5 اضافه شده است، ویژگی مورد نیاز است:

input type=”text” name=”Lastname” need=”required”>

ویژگی لازم فیلد فرم را علامت گذاری می کند تا مرورگر آن را آپلود نکند در صورت خالی بودن آن فیلد فرم دهید. برخی از مرورگرها یک پیغام خطا نشان می دهند که فیلد(های) فرم مورد نیاز خالی است.

اعتبار سنجی انواع داده ها

نه تنها انواع ورودی HTML5 اضافی انواع مختلفی از ورودی را تولید می کنند فیلدها، اما می توانید از آنها برای اعتبارسنجی داده ها نیز استفاده کنید. مرورگرهایی که از انواع داده های جدید HTML5 پشتیبانی می کنند، فیلدهای فرم ورودی را که حاوی داده های نامناسب هستند، علامت گذاری می کنند.
CSS قوانین شبه کلاس را برای عناصر سبک بر اساس وضعیت آنها ارائه می دهد (به کتاب 2 مراجعه کنید،فصل 2). شما از حالت های شبه کلاس نامعتبر و معتبر برای استایل دادن به فیلدهای ورودی استفاده می کنید با داده های نامعتبر متفاوت از فیلدهای ورودی با داده های معتبر است. این به ساختن کمک می کند فیلدهایی با داده های نامعتبر در فرم برجسته می شوند. در اینجا یک مثال سریع وجود دارد که می توانید برای آزمایش این ویژگی امتحان کنید:

1. ویرایشگر متن، ویرایشگر برنامه یا بسته IDE مورد علاقه خود را باز کنید
2. کد زیر را تایپ کنید:
3. Testing for Invalid Data
4. Testing for invalid data
5. You must be over 18 to participate
6. Age:
8. فایل را به عنوان invaliddatatest.html در پوشه DocumentRoot برای سرور وب خود ذخیره کنید (c:\xampp\htdocs برای XAMPP در ویندوز یا /
   برنامه های کاربردی/XAMPP/htdocs برای XAMPP در macOS).
9. وب سرور آپاچی را از XAMPP راه اندازی کنید.
10. یک مرورگر باز کنید و URL زیر را وارد کنید:
    http://localhost:8080/invaliddatatest.html
11. مرورگر را ببندید و وب سرور XAMPP را متوقف کنید.
    وقتی برای اولین بار فرم invaliddatatest.html ظاهر شد، فیلد داده سن خالی و سبز رنگ می شود.اگر از نمادهای چرخان در سمت راست کادر متن استفاده می کنید، اعداد از 18 شروع می شوند و کادر متن سبز باقی می ماند. با این حال، اگر بخواهید به صورت دستی سن کمتر از 18 سال را وارد کنید، کادر متن بلافاصله قرمز می شود.

سی اس اس پیشرفته

مقالات قبل به شما نشان می دهد که چگونه از ترکیب HTML5 استفاده کنید و CSS برای ایجاد محتوا و استایل آن برای صفحات وب شما. CSS3 فراهم می کند.
برخی از ویژگی های پیشرفته تر به شما این امکان را می دهد که یک ظاهر طراحی بیشتری را برای خود انجام دهید.
صفحات وب. این فصل شما را با برخی از ویژگی های هیجان انگیزتر آشنا می کند از CSS3 که می توانید برای زنده کردن سایت خود از آن استفاده کنید.

گرد کردن گوشه های خود

در ادامه ، نحوه ساخت فرم های آنلاین با استفاده از HTML5 را توضیح می دهم. با این حال، به‌طور پیش‌فرض، فرم‌های HTML حتی پس از افزودن برخی استایل‌های CSS تا حدودی خسته‌کننده هستند.
استایل پیش‌فرض که مرورگرها برای نمایش جعبه‌های متن، دکمه‌ها و نواحی متن استفاده می‌کنند در فرم ها چیزی جز جعبه های مربعی تولید نمی کند که بسیار خسته کننده می شود. اصلی استاندارد CSS هیچ کاری برای حل مشکل انجام نداد، به جز اینکه احتمالاً اضافه می کند مقداری رنگ به جعبه های مربعی. کوبیسم ممکن است برای برخی از سبک های نقاشی خوب باشد
ما این طرح در فرم ها کار نمی کند و می تواند بازدیدکنندگان وب سایت شما را خسته کند. یکی از ویژگی هایی که در دنیای مرورگرها به شدت مورد توجه قرار گرفته بود، بوده است توانایی استفاده از گوشه های گرد برای عناصر فرم. عمل ساده گرد کردن جعبه های مربعی فقط کمی می توانند فرم را زنده کنند.
ویژگی گوشه های گرد را به تنهایی و جدا از استاندارد CSS اضافه کرد.
متأسفانه، همانطور که ممکن است حدس بزنید، مرورگرهای مختلف از روش های مختلفی برای این کار استفاده می کردند.
اجرای گوشه های گرد تلاش برای نوشتن سبکی که در همه موارد کارساز باشد مرورگرها هم سخت و هم گیج کننده شدند.
آنقدر محبوب شد که در نهایت این ویژگی به عنوان استاندارد به CSS3 اضافه شد. ویژگی سبک مرزی جدید به شما امکان می دهد لبه های تیز را گرد کنید.