HTML5: ویژگی فرم مورد نیاز.

ترجمه: ولاد مرژویچ

همه در مورد فرم های وب می دانند، درست است؟ برچسب را بچسبانید

، چندین ، شاید ، همه را با دکمه کامل می کنیم و انجام شد.

شما نیمی از آن را نمی دانید. HTML5 بیش از دوجین نوع فیلد جدید را تعریف می کند که می توانید در فرم های خود استفاده کنید. و وقتی می‌گویم "استفاده" منظورم این است که می‌توان از آنها در حال حاضر استفاده کرد - بدون هیچ گونه پد، هک یا راه‌حل. زیاد نگران نباشید، من نمی گویم که همه این ویژگی های جدید هیجان انگیز در واقع در هر مرورگری پشتیبانی می شود. مطلقاً نه، منظورم همه نیست. در مرورگرهای مدرن، بله، فرم های شما هر چیزی را که می توانند نشان می دهند. اما در مرورگرهای قدیمی‌تر، فرم‌های شما همچنان کار می‌کنند، هرچند نه به‌طور کامل. یعنی این ویژگی‌ها در هر مرورگری به طرز زیبایی کاهش می‌یابند. حتی در IE6.

متن راهنما

پشتیبانی از راهنمای ابزار

IE	فایرفاکس	سافاری	کروم	اپرا	آیفون	اندروید
-	4.0+	4.0+	4.0+	11.0+	4.0+	-

اولین پیشرفت HTML5 برای فرم ها، امکان تنظیم متن سریع در قسمت ورودی است. اگر فیلد خالی باشد و فوکوس نداشته باشد، چنین متنی در قسمت ورودی نمایش داده می شود. به محض اینکه روی قسمت ورودی کلیک کنید (یا از طریق Tab به آن بروید)، متن درخواست ناپدید می شود.

احتمالاً قبلاً متن راهنمایی را دیده اید. به عنوان مثال، موزیلا فایرفاکس شامل متنی در نوار آدرس است که عبارت «جستجوی نشانک‌ها و تاریخچه» را نشان می‌دهد.

وقتی روی نوار آدرس کلیک می کنید، متن درخواستی ناپدید می شود.

در اینجا نحوه گنجاندن متن سریع در فرم های خود آورده شده است.

placeholder="(!LANG:جستجو در نشانک ها و تاریخچه" !}>

مرورگرهایی که از ویژگی placeholder پشتیبانی نمی کنند، به سادگی آن را نادیده می گیرند. بدون آسیب و آسیب.

از پروفسور مارکاپ بپرسید

☞ س. آیا می توانم از نشانه گذاری HTML برای ویژگی مکان نگهدار استفاده کنم؟ من می خواهم یک عکس درج کنم یا شاید رنگ ها را تغییر دهم.

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

زمینه هایی با فوکوس خودکار

پشتیبانی از فوکوس خودکار

IE	فایرفاکس	سافاری	کروم	اپرا	آیفون	اندروید
-	-	4.0+	3.0+	10.0+	-	-

سایت ها می توانند از جاوا اسکریپت استفاده کنند تا به طور خودکار روی فیلد فرم اول تمرکز کنند. مثلا در صفحه اصلی Google.comفوکوس خودکار در قسمت وارد کردن کلمات کلیدی جستجو است. در حالی که این برای اکثر افراد راحت است، اما می تواند برای کاربران پیشرفته و افراد با نیازهای خاص آزار دهنده باشد. اگر در حالی که منتظر پیمایش صفحه هستید، کلید فاصله را فشار دهید، پیمایشی وجود نخواهد داشت زیرا تمرکز روی فیلد ورودی فرم است (به جای پیمایش، یک فاصله در فیلد تایپ می شود). اگر در حین بارگیری صفحه، فوکوس را به فیلد ورودی دیگری منتقل کنید، اسکریپت فوکوس خودکار سایت می‌تواند فوکوس را «مفیدکننده» به قسمت ورودی اصلی برگرداند، تایپ شما را قطع کند و باعث شود در مکان اشتباه تایپ کنید.

از آنجایی که فوکوس خودکار از طریق جاوا اسکریپت کار می کند، ممکن است پیچیدگی هایی برای رسیدگی به این موارد افراطی وجود داشته باشد و گزینه های کمی برای افرادی که نمی خواهند یک صفحه وب تمرکز آنها را "دزدیده شود" وجود دارد.

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

به این ترتیب می توانید یک فیلد فرم فوکوس خودکار را تنظیم کنید.

مرورگرهایی که از ویژگی فوکوس خودکار پشتیبانی نمی کنند، آن را نادیده می گیرند.

چه اتفاقی افتاده است؟ آیا می گویید که می خواهید فوکوس خودکار در همه جا کار کند، نه فقط در مرورگرهای فانتزی HTML5؟ می توانید اسکریپت فعلی را با فوکوس خودکار رها کنید، فقط دو تغییر کوچک ایجاد کنید:

• ویژگی فوکوس خودکار را به کد HTML اضافه کنید.
• بررسی کنید که آیا مرورگر از ویژگی فوکوس خودکار پشتیبانی می کند یا خیر، و اگر نه، اسکریپت خود را اجرا کنید.

فوکوس خودکار با یک جایگزین

هر چه زودتر تمرکز را تنظیم کنید

بسیاری از صفحات وب منتظر فعال شدن window.onload و تنظیم فوکوس هستند. اما رویداد window.onload تا زمانی که همه تصاویر بارگیری نشده باشند فعال نمی شود. اگر صفحه شما دارای تعداد زیادی تصاویر باشد، چنین اسکریپت های ساده لوحی به طور بالقوه پس از شروع تعامل کاربر با بخش دیگری از صفحه شما، فوکوس را تغییر می دهند. به همین دلیل است که کاربران قدرتمند از اسکریپت های فوکوس خودکار متنفرند.

به عنوان مثال، در قسمت قبل، اسکریپت فوکوس خودکار بلافاصله بعد از فیلد فرمی که به آن اشاره می کند، قرار می گیرد. این راه حل بهینه است، اما ممکن است به احساسات شما آسیب برساند که یک بلوک از کد جاوا اسکریپت را در وسط صفحه قرار دهید (یا ساده تر، سیستم شما ممکن است آنقدر انعطاف پذیر نباشد). اگر نمی توانید اسکریپتی را در وسط صفحه وارد کنید، باید فوکوس را از طریق یک رویداد سفارشی مانند $(document).ready() در jQuery به جای window.onload تنظیم کنید.

فوکوس خودکار از طریق جی کوئری

رویداد سفارشی jQuery به محض در دسترس بودن DOM فعال می شود - یعنی منتظر می ماند تا متن صفحه بارگیری شود، اما منتظر نمی ماند تا همه تصاویر بارگیری شوند. این یک رویکرد بهینه نیست - اگر صفحه به طور غیرعادی بزرگ باشد یا اتصال شبکه کند باشد، ممکن است کاربر همچنان با صفحه قبل از اجرای اسکریپت فوکوس در حال تعامل باشد. اما هنوز خیلی بهتر از منتظر ماندن برای فعال شدن رویداد window.onload است.

اگر موافق هستید و مایلید یک اسکریپت را با یک عبارت در کد صفحه خود وارد کنید، این سازشی است که نسبت به گزینه اول کمتر و بهتر از گزینه دوم است. می توانید از رویدادهای سفارشی jQuery برای تنظیم رویدادهای خود استفاده کنید، مثلا autofocus_ready. سپس می توانید این رویداد را به صورت دستی، درست پس از در دسترس بودن فیلد فوکوس خودکار، فراخوانی کنید. با تشکر از E. M. Shtenberg برای آموزش این تکنیک به من.

فوکوس خودکار با رویداد سفارشی جایگزین

این راه حل مانند رویکرد اول بهینه است. در زمانی که متن صفحه هنوز در حال بارگیری است، فوکوس روی قسمت فرم تنظیم می شود. بخشی از منطق برنامه (تمرکز روی فیلد فرم) از بدنه صفحه به بخش منتقل شده است . این مثال بر اساس jQuery است، اما مفهوم رویدادهای سفارشی منحصر به jQuery نیست. سایر کتابخانه های جاوا اسکریپت مانند YUI و Dojo عملکرد مشابهی را ارائه می دهند.

بیایید خلاصه کنیم.

• تمرکز درست مهم است.
• در صورت امکان، از مرورگر بخواهید از ویژگی فوکوس خودکار در قسمتی که می‌خواهید فوکوس کنید استفاده کند.
• اگر از کد جایگزین برای مرورگرهای قدیمی استفاده می کنید، پشتیبانی از ویژگی فوکوس خودکار را تعریف کنید تا اسکریپت فقط در مرورگرهای قدیمی اجرا شود.
• هر چه زودتر تمرکز را تنظیم کنید. بلافاصله پس از فیلد فرم، اسکریپت فوکوس را در کد قرار دهید. اگر آزارتان نمی دهد، یک کتابخانه جاوا اسکریپت جاسازی کنید که رویدادهای سفارشی را پشتیبانی می کند و رویداد را در کد درست بعد از فیلد فرم فعال کنید. اگر این امکان وجود ندارد، از رویدادی مانند $(document).ready() از jQuery استفاده کنید.
• تحت هیچ شرایطی منتظر window.onload نباشید تا فوکوس را تنظیم کند.

آدرس ایمیل

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

همه این انواع فیلد هنوز در HTML5 کار می کنند. اگر "به HTML5 ارتقا دهید" (شاید با تغییر !DOCTYPE)، نیازی به ایجاد یک تغییر واحد در فرم های خود نخواهید داشت. هورا برای سازگاری با عقب!

با این حال، HTML5 13 نوع فیلد جدید را تعریف می کند و دلیلی برای عدم شروع استفاده از آنها وجود ندارد.

اولین مورد از این انواع جدید آدرس ایمیل است. به نظر می رسد این است.

می خواستم جمله ای بنویسم که "در مرورگرهایی که type="email" را پشتیبانی نمی کنند" شروع شد اما متوقف شد. چرا؟ زیرا مطمئن نیستم که آیا مرورگرها از type="email" پشتیبانی نمی کنند. همه مرورگرها "پشتیبانی می کنند" type="email" . آنها ممکن است کار خاصی انجام ندهند، اما مرورگرهایی که type="email" را نمی شناسند، آن را به عنوان type="text" در نظر می گیرند و آن را به عنوان یک فیلد متنی معمولی ارائه می کنند.

من تاکید می کنم که چقدر این مهم است. میلیون‌ها فرم در اینترنت وجود دارد که از آنها آدرس ایمیل می‌خواهند و همه از آنها استفاده می‌کنند . یک فیلد متنی می بینید، آدرس ایمیل خود را در آن وارد کنید و تمام. و در اینجا HTML5 می آید که نوع = "email" را تعریف می کند. آیا مرورگرها دیوانه می شوند؟ خیر هر مرورگر روی زمین با ویژگی نوع ناشناخته به عنوان type="text" برخورد می کند - حتی IE6. بنابراین می توانید فرم های خود را با type="email" همین الان "به روز کنید".

اگر مثلاً مرورگر از type="email" پشتیبانی کند چه اتفاقی می‌افتد؟ خوب، این می تواند به معنای هر چیزی باشد. مشخصات HTML5 به رابط کاربری خاصی برای انواع فیلدهای جدید نیاز ندارد. اپرا فیلد فرم را با یک نماد کوچک پر می کند. سایر مرورگرهای HTML5 مانند سافاری و کروم به عنوان یک فیلد متنی - مانند type="text" - ارائه می شوند تا کاربران شما متوجه تفاوت نشوند (تا زمانی که به کد منبع نگاه کنند).

و سپس آیفون است.

آیفون صفحه کلید فیزیکی ندارد. تمام «تایپ کردن» با ضربه زدن روی صفحه‌کلید روی صفحه که در زمان مناسب ظاهر می‌شود، مانند زمانی که به یک فیلد فرم در یک صفحه وب پیمایش می‌کنید، انجام می‌شود. اپل در مرورگر آیفون کار سختی انجام داد. برخی از فیلدهای جدید HTML5 را تشخیص می دهد و به صورت پویا صفحه کلید روی صفحه را برای بهینه سازی ورودی تغییر می دهد.

به عنوان مثال، یک آدرس ایمیل متنی است، درست است؟ البته، اما این یک نوع خاص از متن است. به عنوان مثال، تقریباً همه آدرس‌های ایمیل حاوی نماد @ و حداقل یک نقطه (.) هستند، اما بعید است که حاوی یک فاصله باشند. بنابراین وقتی از آیفون استفاده می کنید و به یک عنصر می روید ، یک صفحه کلید روی صفحه دریافت خواهید کرد که دارای فضای کمتر از حد معمول است و همچنین کلیدهای کاراکتر اختصاصی. و @.

بگذارید خلاصه کنم. هیچ اشکالی برای تبدیل فوری تمام فیلدهای آدرس ایمیل به type="email" وجود ندارد. تقریباً هیچ کس متوجه نخواهد شد، به جز کاربران آیفون، که احتمالاً هم متوجه نمی شوند. اما کسانی که متوجه می شوند به آرامی لبخند می زنند و از شما تشکر می کنند که کارشان را کمی آسان کرده اید.

آدرس های وب

آدرس وب - که متخصصان استاندارد آن را URL می نامند، به استثنای چند نفر که URI نامیده اند - نوع دیگری از متن تخصصی است. نحو یک آدرس وب توسط استاندارد اینترنتی مربوطه محدود شده است. اگر کسی از شما بخواهد که یک آدرس وب را در یک فرم وارد کنید، انتظار چیزی شبیه "http://www.google.com/" دارد، نه "125 Farwood Road". اسلش ها رایج هستند - حتی صفحه اصلی گوگل نیز سه عدد دارد. پریودها نیز رایج است، اما فضاها ممنوع است. و هر آدرس وب دارای پسوند دامنه مانند ".com" یا ".org" است.

و بنابراین ... (درامل لطفا) ... . در آیفون، به این شکل است.

آیفون صفحه کلید مجازی خود را مانند آدرس ایمیل تغییر داده است، اما اکنون آن را برای تایپ آدرس وب بهینه سازی کرده است. این فضا به طور کامل با سه کلید مجازی جایگزین شده است: اسلش، نقطه، و ".com" (شما می توانید کلید ".com" را نگه دارید تا پسوند دیگری مانند ".org" یا ".net" را انتخاب کنید).

مرورگرهایی که از HTML5 پشتیبانی نمی کنند، با type="url" به گونه ای برخورد می کنند که گویی type="text" است، بنابراین استفاده از این نوع برای همه فیلدهایی که باید آدرس وب را وارد کنید، هیچ اشکالی ندارد.

اعداد به عنوان شمارنده

مرحله بعدی: اعداد درخواست شماره پیچیده تر از درخواست ایمیل یا آدرس وب است. اول از همه، اعداد پیچیده تر از آن چیزی هستند که فکر می کنید. به سرعت یک عدد را انتخاب کنید. -یک؟ نه منظورم عددی بین 1 تا 10.7 ½ بود؟ نه، نه، نه کسری، احمقانه. π؟ حالا شما فقط یک عدد غیر منطقی انتخاب کردید.

می خواهم به این نکته اشاره کنم که اغلب از شما "فقط یک عدد" پرسیده نمی شود. احتمال اینکه عددی را در محدوده خاصی بخواهند بیشتر است. شما ممکن است فقط انواع خاصی از اعداد را در آن محدوده بخواهید - شاید اعداد صحیح، اما نه کسری یا اعشاری یا چیز عجیب‌تری مانند مضرب 10. HTML5 همه اینها را پوشش می‌دهد.

یک عدد، تقریباً هر کدام را انتخاب کنید

حداقل = "0"
حداکثر = "10"
مرحله = "2"
value="6">

بیایید به یک ویژگی نگاه کنیم.

• type="number" یعنی یک فیلد عددی است.
• min="0" حداقل مقدار مجاز را برای این فیلد مشخص می کند.
• max="10" حداکثر مقدار مجاز است.
• step="2" در ترکیب با حداقل مقدار، اعداد معتبر را در محدوده تعریف می کند: 0، 2، 4 و غیره، تا حداکثر مقدار.
• مقدار = "6" مقدار پیش فرض. اگر آشنا به نظر برسد، همیشه از همان ویژگی برای تعریف مقادیر فیلد فرم استفاده می شود. من در اینجا به عنوان نقطه شروعی که HTML5 بر روی نسخه های قبلی HTML ایجاد می کند، اشاره می کنم. برای انجام کاری که قبلا انجام می دادید، لازم نیست دوباره یاد بگیرید.

این کد فیلد عددی است. به خاطر داشته باشید که همه این ویژگی ها اختیاری هستند. اگر حداقل و نه حداکثر دارید، می توانید ویژگی min را مشخص کنید، اما ویژگی max را نه. مقدار گام پیش‌فرض 1 است و می‌توانید ویژگی step را حذف کنید تا زمانی که به مقدار گام دیگری نیاز باشد. اگر مقدار پیش‌فرض وجود نداشته باشد، مشخصه value می‌تواند یک رشته خالی باشد یا حتی به طور کلی حذف شود.

اما HTML5 به همین جا ختم نمی شود. با همان قیمت کم و کم آزادی، این روش های راحت جاوا اسکریپت را دریافت می کنید.

• input.stepUp(n) مقدار فیلد را n افزایش می دهد.
• input.stepDown(n) مقدار فیلد را n کاهش می دهد.
• input.valueAsNumber مقدار فعلی را به صورت شناور برمی گرداند (ویژگی input.value همیشه یک رشته است).

مشکلات نمایش؟ خوب، رابط صحیح برای دستکاری اعداد در مرورگرها به طور متفاوت پیاده سازی می شود. در آیفون، جایی که تایپ کردن دشوار است، مرورگر دوباره صفحه کلید مجازی را برای تایپ اعداد بهینه می کند.

در نسخه دسکتاپ اپرا، فیلد type="number" به صورت شمارنده با فلش های کوچک به سمت بالا و پایین ظاهر می شود که می توانید برای تغییر مقادیر روی آن کلیک کنید.

اپرا به ویژگی‌های min، max و step احترام می‌گذارد، بنابراین شما همیشه یک مقدار عددی معقول دریافت خواهید کرد. اگر مقدار را به حداکثر افزایش دهید، فلش رو به بالا در شمارنده خاکستری می شود.

مانند تمام فیلدهای ورودی دیگری که در این فصل بحث کردم، مرورگرهایی که از type="number" پشتیبانی نمی کنند، آن را به عنوان type="text" در نظر می گیرند. مقدار پیش فرض در فیلد نمایش داده می شود (همانطور که در ویژگی value ذخیره می شود)، اما سایر ویژگی ها مانند min و max نادیده گرفته می شوند. شما آزاد هستید که خودتان آنها را پیاده سازی کنید یا از یک چارچوب جاوا اسکریپتی استفاده کنید که قبلاً مدیریت مقابله را پیاده سازی می کند. ابتدا بررسی کنید که چگونه در اینجا.

if(!.inputtypes.number)(
// پشتیبانی بومی برای فیلد type=number وجود ندارد
// ممکن است Dojo یا چارچوب جاوا اسکریپ دیگری را امتحان کند
}

اعداد لغزنده

شمارنده تنها راه برای نمایش ورودی اعداد نیست. احتمالاً شما نیز یک نوار لغزنده را دیده اید که شبیه این است.

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

حداقل = "0"
حداکثر = "10"
مرحله = "2"
value="6">

همه ویژگی‌های موجود مانند type="number" - min , max , step , value - هستند و معنی یکسانی دارند. تنها تفاوت در رابط کاربری است. به جای یک فیلد ورودی، از مرورگرها انتظار می رود نوع = "range" را به صورت یک نوار لغزنده نمایش دهند. در زمان نوشتن، آخرین نسخه های سافاری، کروم و اپرا با این کار کار می کنند. متأسفانه، آیفون به عنوان یک فیلد متنی ساده نمایش داده می شود، حتی صفحه کلید روی صفحه خود را برای وارد کردن اعداد بهینه نمی کند. همه مرورگرهای دیگر به سادگی فیلد را به عنوان type="text" در نظر می گیرند، بنابراین دلیلی وجود ندارد که فوراً از آن نوع استفاده کنید.

HTML 4 شامل انتخابگر تاریخ از طریق تقویم نیست. چارچوب‌های جاوا اسکریپت به شما امکان می‌دهند تا از این موضوع دور شوید (Dojo، jQuery UI، YUI، Close Library)، اما البته هر یک از این راه‌حل‌ها نیازمند «جاسازی» چارچوب برای هر تقویم تعبیه‌شده هستند.

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

تا کنون، پشتیبانی... کمیاب است.

پشتیبانی از انتخابگر تاریخ

تایپ کنید	اپرا	مرورگرهای دیگر
نوع "تاریخ"	9.0+	-
نوع "ماه"	9.0+	-
نوع "هفته"	9.0+	-
نوع "زمان"	9.0+	-
نوع "تاریخ ساعت"	9.0+	-
نوع "تاریخ ساعت محلی"	9.0+	-

اپرا اینگونه نمایش می دهد :

در صورت نیاز به زمان همراه با تاریخ، Opera نیز پشتیبانی می کند :

اگر به یک ماه به علاوه یک سال نیاز دارید (مثلاً تاریخ انقضای کارت اعتباری)، Opera می‌تواند نمایش دهد :

کمتر رایج، اما در دسترس، انتخاب هفته از سال است :

آخرین اما نه کم اهمیت، زمان بندی است :

تاریخ انتخاب با جایگزین

...

این احتمال وجود دارد که مرورگرهای دیگر در نهایت از این نوع پشتیبانی کنند. مانند type="email" و انواع دیگر، این فیلدهای فرم به صورت متن ساده در مرورگرهایی که type="date" و انواع آن را نمی شناسند نمایش داده می شوند. اگر می خواهید فقط می توانید استفاده کنید از این که کاربران Opera را خوشحال کنید و منتظر بمانید تا مرورگرهای دیگر به نتیجه برسند. استفاده از آن واقع بینانه تر است ، اما بررسی کنید که آیا مرورگر از انتخابگر تاریخ داخلی پشتیبانی می کند یا خیر و یک راه حل اسکریپت جایگزین به انتخاب شما (Dojo، jQuery UI، YUI، Close Library یا گزینه های دیگر) را شامل می شود.

کادر جستجو

پس جستجو کن نه فقط جستجو از گوگل یا یاهو (خوب، آنها نیز). به هر جعبه جستجو، در هر صفحه، در هر سایتی فکر کنید. آمازون یک جعبه جستجو دارد، Yandex یک جعبه جستجو دارد، اکثر وبلاگ ها نیز این کار را دارند. چگونه ساخته می شوند؟ درست مانند هر فیلد متنی دیگری در وب. بیایید این را درست کنیم.

به دنبال نسل جدید باشید

در برخی از مرورگرها، تفاوتی با یک فیلد متنی معمولی مشاهده نخواهید کرد. اما اگر از Safari در Mac OS X استفاده می کنید، به این شکل خواهد بود.

تفاوت پیدا کردی؟ قسمت ورودی گوشه های گرد دارد! می دانم، می دانم، به سختی می توانی احساساتت را مهار کنی. اما صبر کنید، این تمام نیست! هنگامی که شروع به تایپ در قسمت type="search" می کنید، سافاری یک دکمه کوچک "x" را در سمت راست پنجره قرار می دهد. با کلیک بر روی "x" محتویات فیلد پاک می شود. گوگل کروم که از فناوری مشابهی در زیر کاپوت بهره می برد، رفتار مشابهی دارد. هر دوی این ترفندهای کوچک شبیه به جستجوی بومی در iTunes و دیگر برنامه‌های کلاینت Mac OS X هستند.

Apple.com استفاده می کند برای جستجوی سایت خود، برای کمک به سایت در انتقال احساس "دوست داشتنی". اما هیچ چیز مخصوص Mac در اینجا وجود ندارد. این فقط یک کد است تا هر مرورگر در هر پلتفرمی بتواند نحوه نمایش را مطابق با قراردادهای پلتفرم انتخاب کند. مانند سایر انواع جدید، مرورگرهایی که type="search" را نمی شناسند، آن را به عنوان type="text" در نظر می گیرند، بنابراین هیچ دلیلی وجود ندارد که امروز برای همه جعبه های جستجوی خود از type="search" استفاده نکنید.

پروفسور مارکوپ می گوید

به‌طور پیش‌فرض، Safari برای آن اعمال نمی‌شود اکثر سبک ها اگر می‌خواهید سافاری را مجبور کنید که فیلد جستجو را به عنوان یک فیلد متنی معمولی (برای اعمال سبک‌های خود) در نظر بگیرد، این قانون را به شیوه نامه خود اضافه کنید.

ورودی(
-webkit-appearance:textfield;
}

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

انتخاب رنگ

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

توجه داشته باشید. مترجم Opera 11 از این ویژگی پشتیبانی می کند.

اعتبار سنجی فرم

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

دو مشکل بزرگ در تأیید اعتبار آدرس ایمیل جاوا اسکریپت وجود دارد:

1. برخی از بازدیدکنندگان شما (احتمالاً حدود 10٪) جاوا اسکریپت را فعال ندارند.
2. آدرس نادرستی دریافت خواهید کرد.

جدی، شما آدرس اشتباهی دریافت خواهید کرد. تعیین اینکه مجموعه ای از کاراکترهای تصادفی یک آدرس ایمیل معتبر هستند بسیار دشوار است. هر چه سخت تر نگاه کنی، سخت تر می شود. آیا قبلاً گفتم که بسیار بسیار دشوار است؟ آیا آویزان کردن این سردرد در مرورگرتان آسان تر نیست؟

اپرا نوع = "ایمیل" را بررسی می کند

در اینجا یک اسکرین شات از اپرا 11 است، اگرچه این قابلیت از زمان اپرا 9 وجود داشته است. این کد شامل تنظیم ویژگی type به ایمیل است. هنگامی که یک کاربر Opera سعی می کند فرمی را با ، مرورگر به طور خودکار آدرس ایمیل را بررسی می کند حتی اگر اسکریپت ها غیرفعال باشند.

HTML5 همچنین اعتبار آدرس وب را با یک فیلد ارائه می دهد و اعداد با . اعتبار اعداد به مقادیر حداقل و حداکثر ویژگی احترام می گذارد، بنابراین مرورگرها به شما اجازه ارسال فرم را در صورت وارد کردن تعداد زیادی بزرگ نمی دهند.

هیچ کدی برای فعال کردن اعتبار سنجی فرم در HTML5 وجود ندارد، این به طور پیش فرض انجام می شود. برای غیرفعال کردن اعتبارسنجی، از ویژگی novalidate استفاده کنید.

منو امتحان نکن

مرورگرها به آرامی پشتیبانی از اعتبارسنجی فرم را در HTML5 فعال می کنند. فایرفاکس 4 پشتیبانی کامل خواهد داشت. متأسفانه، Safari و Chrome فقط تا حدی آن را پیاده‌سازی می‌کنند: آنها عناصر فرم را تأیید می‌کنند، اما زمانی که فیلدهای فرم تأیید نمی‌شوند، هیچ پیام قابل مشاهده‌ای را نمایش نمی‌دهند. به عبارت دیگر، اگر تاریخ نامعتبر (یا غلط املایی) را در type="date" وارد کنید، Safari و Chrome فرم را ارسال نمی‌کنند، اما به شما نمی‌گویند که چرا این کار را نکرده است. آنها فوکوس را روی فیلدی تنظیم می کنند که حاوی مقدار نامعتبر است، اما پیام خطایی مانند Opera یا Firefox 4 نشان نمی دهد.

فیلدهای مورد نیاز

حمایت کردن

IE	فایرفاکس	سافاری	کروم	اپرا	آیفون	اندروید
-	4.0+	-	-	9.0+	-	-

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

کد فیلدهای مورد نیاز تا حد امکان ساده است.

مرورگرها می توانند ظاهر پیش فرض یک فیلد مورد نیاز را تغییر دهند. در اینجا نمونه ای از نحوه ظاهر آن در موزیلا فایرفاکس 4.0 است.

همچنین، اگر بخواهید فرمی را بدون پر کردن مقدار مورد نیاز ارسال کنید، فایرفاکس نوار اطلاعاتی را نشان می دهد که فیلد مورد نیاز است و نمی توان آن را خالی گذاشت.

روز خوب. الکسی گولینین در تماس است. در آخرین مقاله با عناصر ساختاری جدید در HTML5 آشنا شدید. در این مقاله می‌خواهم به شما بگویم که HTML5 چه چیزی را هنگام کار با فرم‌ها برای ما به ارمغان آورده است. اول از همه، این بررسی فیلدها برای مطابقت با شرایط خاص، بدون استفاده از جاوا اسکریپت است. قبلاً همه فیلدهای ورودی را با یک برچسب تنظیم می کردیم با ویژگی type="text". سپس با استفاده از جاوا اسکریپت بررسی کردند که فیلد خالی نبوده و دارای شرایط خاصی است (مثلاً ایمیل کاربر). با ظهور HTML5، کل این روش ساده شده است. بیایید با یک مثال شروع کنیم. بیایید یک فرم ایجاد کنیم و یک برچسب اضافه کنیم با یک ویژگی جدید type="email" (این ویژگی تا زمانی که یک آدرس ایمیل معتبر وارد نشود، از ارسال فرم جلوگیری می کند):

در این حالت نوع فیلد را ایمیل تعیین کردیم و در واقع تا زمانی که یک آدرس ایمیل معتبر وارد نکنیم، فرم ارسال نشود. Yandex - مرورگر یک نکته بسیار جالب را نشان می دهد وقتی که ما چیزهای مزخرفی را در این زمینه وارد می کنیم. من "123" را وارد کردم و سعی کردم ارسال کنم. من پیامی دریافت کردم که نماد "@" مورد نیاز است

آن ها اگر "@" را وارد کنم، فرم باید ارسال شود. در واقع چه اتفاقی افتاد. بنابراین، استفاده از این نوع فیلد را توصیه نمی کنم، مگر اینکه یک ویژگی دیگر به آن اضافه کنید - pattern .

این ویژگی بررسی می‌کند که آنچه وارد کرده‌ایم مطابق با الگوی موجود باشد. این نیاز به دانش عبارات منظم دارد. اجازه دهید فرم خود را فقط پس از وارد کردن یک آدرس ایمیل NORMAL، نه فقط یک رشته حاوی "@" ارسال کنیم:

پست الکترونیک:

اگر نمی دانید عبارات منظم چیست، مهم نیست. آنها در یکی از مقالات بعدی مورد بحث قرار خواهند گرفت.

اکنون میدان به خوبی کار می کند.
ویژگی مورد نیاز است تا یک عبارت خالی ارسال نشود (الزامی - ضروری).

همچنین یک ویژگی type با مقدار tel وجود دارد که به شما امکان می دهد تلفن را وارد کنید:
در اینجا، مجدداً باید الگوی مشخص کنید تا این فیلد به طور معمول کار کند، زیرا فرمت گوشی برای همه متفاوت است. به عنوان مثال، این فرمت است:

تلفن: نمونه ای از یک عدد معتبر 937-12-12 است

تا زمانی که گوشی به روش صحیح وارد نشود، فرم به جایی نمی رسد. همچنین متذکر می شوم که الگو را می توان در فیلدهای متنی ساده نیز استفاده کرد (type="text" ).

یکی دیگر از ویژگی‌های نوع جدید با مقدار url، که به شما امکان می‌دهد بررسی کنید آیا آدرس اینترنتی وارد شده معتبر است یا خیر. مثال:

آدرس اینترنتی:

. در مرورگر Yandex به درستی کار می کند.

عنصر جدید دیگر نوار لغزنده است که با ویژگی type با مقدار range مشخص می شود.

این عنصر دارای یک مقدار حداقل و حداکثر است که می توان آن را به جایی منتقل کرد. تکالیف در حال حاضر:

یک کادر متنی در کنار این نوار لغزنده ایجاد کنید که در صورت تغییر مقدار اسلایدر را نمایش دهد.

اگر مشکلی وجود دارد، کد زیر قابل مشاهده است:

|

عنصر جدید بعدی عدد است. بگذارید مثالی بزنم و روشن خواهد شد:

در این حالت، می‌توانیم عناصر را از 5 تا 100 با افزایش 5 انتخاب کنیم. این عنصر بسیار عالی است. نه تنها در مرورگرهای مختلف متفاوت به نظر می رسد، بلکه می توانید به صورت دستی مقداری را در آن وارد کنید (برخی از مرورگرها این کار را انجام می دهند). اگرچه مرورگر من به طور معمول این فیلد را پردازش می کند (من از مرورگر Yandex استفاده می کنم). من هنوز استفاده از آن را توصیه نمی کنم، مگر اینکه جاوا اسکریپت را بررسی کنید. یک تکلیف دیگر (این بار بدون کد):

جاوا اسکریپت را بررسی کنید که مقدار وارد شده در فیلد داده شده باید مضربی از 5 باشد (از رویداد تغییر استفاده کنید).

تا کنون، ما تنها به یک ویژگی مورد نیاز پرداخته ایم. اما موارد دیگری نیز وجود دارد:

ویژگی فوکوس خودکار برای اطمینان از اینکه وقتی به این صفحه می روید، تمرکز روی این قسمت باشد استفاده می شود.

ویژگی مکان نگهدار به عنوان یک اشاره عمل می کند. به محض اینکه شروع به تایپ چیزی کنید، اشاره ناپدید می شود. مثلا:

پست الکترونیک:

در این مقاله یاد گرفتید که چیست عناصر فرم جدید در HTML5 ظاهر شد. این قسمت 1 مقاله بود، در مقاله بعدی به سایر عناصر کار با فرم ها خواهیم پرداخت، مشترک شوید تا آن را از دست ندهید.

الکسی گولینین در تماس بود، نظرات خود را بنویسید، شما را در مقالات بعدی می بینیم.

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

برای تعیین اینکه برچسب فعلی به کدام عنصر فرم تعلق دارد، باید از ویژگی for تگ استفاده کنید . مقدار ویژگی for باید با مقدار ویژگی کلی عنصر فرم که برچسب به آن ارجاع می‌دهد مطابقت داشته باشد. اگر عنصر مورد نظر باشد، ویژگی for قابل حذف است داخل عنصر خواهد بود .

بیایید مثالی از استفاده را در نظر بگیریم:

برای = "بله" > بله نه >

آره نه >

در این مثال ما:

• داخل اولینتشکیل می دهد:
  • ارسال شده دودکمه های رادیویی ( ) برای انتخاب یکی از گزینه های محدود. دوباره توجه داشته باشید که برای دکمه های رادیویی در همان فرم باید به همین نام باشد، مقادیر مختلفی را نشان دادیم. برای اولینعلامت زده شده است، که مشخص می کند که هنگام بارگیری صفحه، عنصر باید از قبل انتخاب شود (در این مورد، یک دکمه رادیویی با مقدار بله). علاوه بر این، ما برای دکمه‌های رادیویی ویژگی‌های جهانی را مشخص کرده‌ایم که یک شناسه منحصر به فرد برای عنصر تعریف می‌کنند.
  • دو مورد قرار داد ، که برچسب های متنی را برای فیلدهای متنی ما تعریف می کند. توجه داشته باشید که برای تعیین اینکه برچسب فعلی به کدام عنصر فرم تعلق دارد از ویژگی for استفاده کردیم. مقدار ویژگی for مطابق با مقدار مشخصه جهانی دکمه رادیویی مورد نیاز ما است.
• داخل دومینتشکیل می دهد:
  • ارسال شده دودکمه های رادیویی ( ) برای انتخاب یکی از گزینه های محدود. برای دومینبرای دکمه‌های رادیویی، ویژگی checked را مشخص کرده‌ایم که نشان می‌دهد عنصر باید از قبل در بارگذاری صفحه انتخاب شود (در این مورد، دکمه رادیویی با مقدار no ). علاوه بر این، مقادیر منحصر به فردی را برای دکمه های رادیویی در فرم و نام های مشابه مشخص کرده ایم.
  • دو مورد قرار داد ، دکمه های رادیویی خود را داخل آنها قرار دادیم. برخلاف روش قبلی، نیازی به تعیین ویژگی های سراسری برای دکمه های رادیویی (شناسه عنصر)، و برای برچسب های متنی برای ارجاع به آنها (ایجاد اتصال) از ویژگی for استفاده نمی شود.

در مرورگر، هر دو گزینه (روش) برای استفاده از برچسب های متنی یکسان به نظر می رسند:

راهنمای ابزار برای فیلدهای ورودی

بیایید به یک مثال استفاده نگاه کنیم:

وارد شدن: type="text" name="login" placeholder= "ورودی خود را وارد کنید">

کلمه عبور: type="password" name="password" placeholder= "رمز عبور خود را وارد کنید">
به علاوه

در این مثال برای عنصر مشخص کرده ایم با تایپ متن (یک فیلد متنی تک خطی) و رمز عبور (یک فیلد رمز عبور)، یک اشاره متنی برای کاربر (ویژگی مکان نگهدار) که مقدار مورد انتظار وارد شده را توصیف می کند.

نتیجه مثال ما:

سوالات و وظایف در مورد موضوع

قبل از رفتن به موضوع بعدی، کار عملی را کامل کنید:

• با استفاده از دانش به دست آمده، فرم سفارش زیر را ایجاد کنید:

Nuance: در فیلدهایی که قرار است انتخابی انجام شود، می توان با کلیک کردن روی متن، و نه فقط روی خود عنصر، انتخاب کرد.

پس از اتمام تمرین، کد صفحه را با باز کردن مثال در یک پنجره جداگانه بررسی کنید تا مطمئن شوید همه چیز را به درستی انجام داده اید.

این اولین مقاله از سه مقاله در مورد فرم های وب HTML5 است. قبل از اینکه به استایل سمت کلاینت و اعتبارسنجی جاوا اسکریپت بپردازیم، اجازه دهید نگاهی به برخی نشانه گذاری های اساسی بیندازیم. توصیه می‌کنم این مقاله را بخوانید، حتی اگر قبلاً با فرم‌ها آشنا هستید - ویژگی‌ها و خوبی‌های جدید زیادی وجود دارد!

فرم های HTML ممکن است ساده به نظر برسند، اما برای اکثر وب سایت ها و برنامه ها ضروری هستند. در HTML4، انواع فیلدهای ورودی به لیست زیر محدود می‌شدند:

• inputtype = "متن"
• inputtype = "چک باکس"
• ورودی "رادیو"
• ورودی = رمز عبور
• نوع ورودی = "مخفی" - برای داده های نامرئی برای کاربر
• نوع ورودی = "فایل" - برای آپلود فایل ها
• textarea - برای وارد کردن مقدار زیادی متن
• را انتخاب کنید - برای لیست های کشویی
• دکمه - معمولا برای ارسال داده های فرم استفاده می شود، اما نوع ورودی = "ارسال" و نوع ورودی = "تصویر" نیز قابل استفاده است.

بعلاوه:

• گزینه های یک ظاهر طراحی شده با CSS محدود است
• عناصر پیشرفته، مانند عناصر برای انتخاب تاریخ و رنگ، باید به طور مستقل و با استفاده از کد پیاده سازی شوند
• اعتبار سنجی سمت مشتری به جاوا اسکریپت نیاز دارد

انواع فیلد اضافی

HTML5 تعداد زیادی از انواع فیلدهای جدید را معرفی کرد. آنها ورودی های بومی و کمک های اعتبار سنجی را بدون کد جاوا اسکریپت ارائه می کنند.

تایپ کنید	شرح
پست الکترونیک	وارد کردن آدرس ایمیل
تلفن	ورودی شماره تلفن - دستور دقیقی وجود ندارد، اما خطوط شکسته حذف خواهند شد
آدرس اینترنتی	آدرس اینترنتی را وارد کنید
جستجو کردن	فیلد جستجو با شکست خط به طور خودکار حذف می شود
عدد	عدد ممیز شناور
دامنه	کنترلی برای وارد کردن یک مقدار تقریبی که معمولاً با استفاده از لغزنده ارائه می شود
تاریخ	روز، ماه و سال را وارد کنید
وقت قرار	روز، ماه، سال، ساعت، دقیقه، ثانیه و میکروثانیه را نسبت به منطقه زمانی فعلی وارد کنید
datetime-local	ورودی تاریخ و زمان بدون منطقه زمانی
ماه	ورود به ماه و سال بدون منطقه زمانی
هفته	شماره هفته را بدون منطقه زمانی وارد کنید
زمان	ورود زمان بدون منطقه زمانی
رنگ	انتخاب رنگ

ویژگی های فیلد ورودی

علاوه بر موارد ذکر شده در بالا، فیلدهای ورودی می توانند هر یک از ویژگی های خاص فرم را داشته باشند. برخی از آنها از نوع بولی هستند، به این معنی که آنها به مقادیر نیاز ندارند، به عنوان مثال:

البته، اگر مثلاً سینتکس به سبک XHTML را دوست دارید، می توانید آن ها را اضافه کنید

صفت	شرح
نام	نام فیلد ورودی
مقدار	معنی اصلی
بررسی شد	کادر انتخاب یا دکمه رادیویی را انتخاب می کند
بیشترین طول	حداکثر طول رشته متن ورودی. در HTML5 همچنین می توان به زمینه های textarea اعمال کرد
Minlength	حداقل طول رشته این ویژگی مستند است، اما در زمان نگارش، پشتیبانی مرورگر ضعیف است و اعتبار سنجی‌های HTML قسم می‌خورند. یک مورد استفاده جایگزین الگو=".(3,)" است که حداقل سه کاراکتر را در رشته ورودی بررسی می کند.
نگهدارنده مکان	راهنمای ابزار محجوب در داخل زمین
فوکوس خودکار	در بارگذاری صفحه، فوکوس را روی عنصر مشخص شده (قابل مشاهده) تنظیم می کند
ضروری	نشان می دهد که یک مقدار باید در فیلد وارد شود (نه یک فیلد خالی)
الگو	مقدار را در برابر یک عبارت منظم بررسی می کند
دقیقه	حداقل مقدار مجاز (عددی و تاریخ)
حداکثر	حداکثر مقدار مجاز (عددی و تاریخ)
گام	مرحله تغییر ارزش به عنوان مثال نوع ورودی =======================================================================================================================================================================================
تکمیل خودکار	به مرورگر یک راهنمایی تکمیل خودکار مانند "بررسی حساب" می گوید، یا می تواند روی "روشن" یا "خاموش" تنظیم شود تا تکمیل خودکار فعال یا غیرفعال شود.
حالت ورودی	روش ورودی را مشخص می کند. مفیدترین ویژگی ها: کلمه به کلمه - محتوای کلمه به کلمه، مانند نام های کاربری لاتین - لاتین، به عنوان مثال، فیلدهای جستجو نام لاتین - نام ها، یعنی حرف اول بزرگ نثر لاتین - محتوای غیرکلمه ای، مانند پیام ها، توییت ها و غیره. عددی - مقادیر عددی که در آن تعداد و انواع محدوده نامناسب هستند، مانند شماره کارت اعتباری
اندازه	اندازه بر حسب تعداد کاراکتر برای فیلدهای نوع متن یا رمز عبور، یا تعداد پیکسل برای فیلدهای نوع ایمیل، تلفن، آدرس اینترنتی یا جستجو. احتمالا باید از آن اجتناب کرد و از استایل CSS استفاده کرد
ردیف ها	تعداد خطوط متن (فقط textarea)
cols	تعداد ردیف کاراکترها (فقط برای ناحیه متنی)
فهرست	به لیستی از گزینه ها اشاره دارد
غلط املایی	برای فعال/غیرفعال کردن بررسی انتساب فیلد، روی true یا false تنظیم کنید
فرم	شناسه فرمی که این فیلد به آن تعلق دارد. به طور کلی، فیلدها باید در داخل فرم قرار داده شوند، اما این ویژگی به شما امکان می دهد فیلد را خارج از فرم، در هر نقطه از صفحه قرار دهید.
شکل گیری	یک URI را مشخص می کند که عملکرد فرم را هنگام ارسال داده لغو می کند (فقط دکمه ها/تصاویر ارسال)
روش فرم	GET یا POST را مشخص می‌کند، ویژگی روش فرم را لغو می‌کند (فقط دکمه‌های ارسال/تصویر)
فرمنتیپ	نوع محتوا را هنگام ارسال مشخص می‌کند (متن/ساده، چندبخشی/فرم-داده، یا برنامه/x-www-form-urlencoded، فقط برای دکمه‌ها و تصاویر ارسال)
قالب هدف	پنجره/فریم مورد نظر را برای لغو ویژگی هدف فرم در ارسال (فقط برای دکمه‌ها/تصاویر ارسال) مشخص می‌کند.
فقط خواندنی	مقدار فیلد را نمی توان تغییر داد، اگرچه تأیید و ارسال می شود
معلول	فیلد ورودی را غیرفعال می کند - هیچ اعتبارسنجی و داده ای ارسال نخواهد شد

توجه داشته باشید که فیلدهای تاریخ باید از فرمت YYYY-MM-DD برای ویژگی های مقدار، حداقل و حداکثر استفاده کنند.

مثال زیر یک فیلد ایمیل اجباری را نشان می‌دهد که به @mysite.com ختم می‌شود که با بارگیری صفحه، تمرکز را تغییر می‌دهد.

لیست داده ها

لیست داده شامل مجموعه ای از مقادیر مناسب برای هر نوع فیلد است، به عنوان مثال:

اگر فهرست داده پشتیبانی می‌شود، مرورگر فهرستی از مقادیر را ارائه می‌کند تا به محض شروع وارد کردن داده‌ها در فیلد، آن‌ها را تکمیل کنید. لیست کامل معمولاً با کلیک بر روی فلش پایین (در صورت وجود) نمایش داده می شود. برخلاف لیست کشویی استاندارد، کاربر می تواند مقادیر دلخواه را در فیلد وارد کند.

می توان مقادیر و توضیحات متنی را برای مقادیر مشخص کرد، به عنوان مثال:

اینترنت اکسپلورر

اما شایان ذکر است که پیاده سازی در مرورگرهای مختلف متفاوت است. به عنوان مثال، فایرفاکس متن را به صورت خودکار تکمیل می کند (اینترنت اکسپلورر)، در حالی که کروم به صورت خودکار مقادیر (IE) را تکمیل می کند، و متن با فونت خاکستری کاهش یافته نشان داده می شود:

اگر می‌خواهید از طریق AJAX لیست‌های داده را دریافت کنید، می‌توانید با جاوا اسکریپت پر شود.

غیرفعال کردن اعتبارسنجی

شما می توانید اعتبار سنجی فرم را با تنظیم ویژگی novalidate در عنصر فرم غیرفعال کنید. علاوه بر این، می توانید ویژگی formnovalidate را روی دکمه ارسال/تصویر فرم تنظیم کنید.

به یاد داشته باشید که با تنظیم ویژگی disabled به یک فیلد، اعتبارسنجی آن فیلد غیرفعال می شود.

فیلدهای خروجی

قبلاً در مورد فیلدهای ورودی بحث کردیم، اما HTML5 فیلدهای خروجی را نیز ارائه می دهد.

• خروجی - نتیجه محاسبه اقدامات کاربر
• پیشرفت - نوار پیشرفت (ویژگی های مقدار و حداکثر وضعیت را تنظیم می کنند)
• متر - مقیاسی است که می تواند رنگ خود را بین سبز، زرد و قرمز بسته به مقادیر تنظیم شده مقدار، حداقل، حداکثر، کم، زیاد و ویژگی های بهینه تغییر دهد.

فیلدهای جداسازی و برچسب گذاری

با توجه به مشخصات، هر عنصر فرم یک پاراگراف در نظر گرفته می شود و با یک عنصر از بقیه جدا می شود

جالب هست. من از div ها برای اهداف جداسازی استفاده می کنم، اگرچه شک دارم که تفاوت زیادی ایجاد کند. تگ p کوتاه‌تر است، با این تفاوت که برای حذف حاشیه‌ها باید یک استایل اضافی اعمال کنید.

مهمتر از همه، برچسب ها باید با احاطه کردن عنصر فرم یا با قرار دادن آنها در کنار هم و پیوند آنها با ویژگی for به فیلدهای مناسب استفاده شوند، مانند این:

نام

نام خانوادگی

آدرس ایمیل

مشترک شدن در خبرنامه

کنترل ها استاندارد نیستند

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

پشتیبانی مرورگر

همه انواع فیلدها و ویژگی ها در همه مرورگرها پشتیبانی نمی شوند. به طور کلی، همه مرورگرهای مدرن از IE10+ شامل پشتیبانی از انواع فیلدهای اصلی مانند فیلدهای ایمیل یا شماره هستند. اما در زمان نوشتن، فیلدهای تاریخ/زمان فقط در مرورگرهای مبتنی بر موتورهای Webkit و Blink پشتیبانی می‌شوند.

برای انواع فیلدهای پشتیبانی نشده، مرورگر به یک فیلد ورودی متن استاندارد بازمی گردد و ویژگی های پشتیبانی نشده و مقادیر آنها را نادیده می گیرد.

همیشه از نوع درست استفاده کنید!

مهم است که از نوع فیلد صحیح برای نوع ورودی مورد انتظارتان استفاده کنید. این ممکن است واضح به نظر برسد، اما مواقعی وجود خواهد داشت که باید از یک فیلد متنی ساده استفاده کنید.

تاریخ ها را در نظر بگیرید. پشتیبانی مرورگر تکه تکه است و این منجر به مشکلات پیاده سازی می شود.

1. فیلد استاندارد تاریخ همیشه یک تاریخ را با فرمت YYYY-MM-DD برمی گرداند، صرف نظر از اینکه چه قالب تاریخی در منطقه شما استفاده می شود.
2. اینترنت اکسپلورر و فایرفاکس به قسمت متن پیش‌فرض بازمی‌گردند و کاربران شما باید تاریخ‌ها را با فرمت انگلیسی MM-DD-YYYY یا DD-MM-YYYY اروپایی وارد کنند.
3. یک افزونه جاوا اسکریپت مانند jQuery UI به شما امکان می دهد قالب خود را - حداقل YYYY-MM-DD - تعریف کنید، اما نمی توانید تضمین کنید که جاوا اسکریپت در دستگاه کاربر فعال می شود.

یک راه حل ساده این است که فیلد تاریخ HTML5 را رها کنید، به یک فیلد متنی برگردید و کنترل تاریخ خود را پیاده سازی کنید. اون کارو نکن. شما هرگز یک انتخابگر تاریخ معمولی ایجاد نخواهید کرد که در همه دستگاه‌ها، در تمام وضوح‌های صفحه کار کند، از صفحه کلید، ماوس و ورودی لمسی پشتیبانی کند و زمانی که جاوا اسکریپت غیرفعال است به کار خود ادامه دهد. علاوه بر این، مرورگرهای تلفن همراه ابزارهای مخصوص به خود را برای کنترل کنترل های پیشرفته لمسی دارند.

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

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

اعتبار سنجی سمت مرورگر تضمین نمی شود. حتی اگر همه را مجبور به ارتقاء به آخرین نسخه کروم کرده باشید، حتی در این صورت نیز نمی‌توانید اجتناب کنید:

• اشکالات مرورگر یا اشکالات در جاوا اسکریپت که داده های نامعتبر را از دست داده است
• کاربرانی که DOM یا اسکریپت ها را با استفاده از ابزارهای مرورگر تغییر می دهند
• ارسال داده از سیستم هایی که شما کنترل نمی کنید
• رهگیری داده ها در مسیر مرورگر به سرور (معمولاً از طریق HTTP)

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

و در نهایت، به یاد داشته باشید که تاریخ ها را می توان در قالب های مختلف دریافت کرد، خواه YYYY-MM-DD، MM-DD-YYYY، DD-MM-YYYY و موارد دیگر. ارقام چهار کاراکتر اول را بررسی کنید یا در صورت لزوم از ابزارهای تجزیه و بررسی داخلی زبان/چارچوب مورد استفاده خود استفاده کنید.

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

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

مروری بر نوآوری ها

عناصر جدید

HTML5 پنج عنصر جدید مرتبط با ورود داده ها و فرم ها را معرفی می کند.

عنصر	هدف	یادداشت
پیش رفتن	نشان دهنده پیشرفت یک کار است.	عنصر پیشرفت می تواند نشان دهنده پیشرفت آپلود فایل باشد.
متر	یک مقدار مقیاس شده را در یک محدوده شناخته شده نشان می دهد.	به عنوان مثال می توان از عنصر متر برای اندازه گیری دما یا وزن استفاده کرد.
فهرست داده ها	مجموعه ای از عناصر گزینه را نشان می دهد که می توانند همراه با ویژگی لیست جدید برای ایجاد منوهای کشویی استفاده شوند.	هنگامی که کاربر برای وارد کردن داده ها در ناحیه مرتبط با فهرست داده حرکت می کند، یک منوی کشویی با مقادیر فهرست داده ظاهر می شود.
keygen	کنترل ایجاد جفت کلید.	هنگامی که فرم ارسال می شود، کلید خصوصی به حافظه محلی وارد می شود و کلید عمومی به سرور ارسال می شود.
خروجی	نتایج محاسبات را نمایش می دهد.	نمونه ای از استفاده از عنصر خروجی نمایش مجموع مقادیر دو عنصر ورودی است.

انواع جدید عناصر ورودی

HTML5 13 عنصر ورودی جدید را معرفی می کند. در مرورگرهایی که از آنها پشتیبانی نمی کنند، به عناصر ورودی متن عادی تبدیل می شوند.

نوع عنصر ورودی	هدف	یادداشت
تلفن	وارد کردن شماره تلفن	عنصر tel متن را مجبور نمی کند که در قالب خاصی وارد شود: برای این کار می توان از عنصر الگو یا متد setCustomValidity() استفاده کرد که اعتبار سنجی اضافی را انجام می دهد.
جستجو کردن	از کاربر می خواهد متن مورد جستجو را وارد کند.	تفاوت بین جستجو و متن عمدتا در سبک است. برای نوع جستجو، فیلد ورودی را می توان با توجه به فیلدهای جستجوی پلت فرم استایل بندی کرد.
آدرس اینترنتی	وارد کردن یک URL واحد.	عنصر url برای وارد کردن یک URL مطلق استفاده می شود که طیف نسبتاً گسترده ای از مقادیر را نشان می دهد.
پست الکترونیک	یک آدرس ایمیل یا لیستی از آدرس ها را وارد کنید.	اگر ویژگی چندگانه مشخص شده باشد، می توانید چندین آدرس ایمیل را که با کاما از هم جدا شده اند وارد کنید.
وقت قرار	تاریخ و زمان را در منطقه زمانی UTC وارد کنید.
تاریخ	وارد کردن تاریخ بدون منطقه زمانی
ماه	وارد کردن تاریخ با سال و ماه، اما بدون منطقه زمانی.
هفته	تاریخی را وارد کنید که شامل یک عدد هفته و یک سال است، اما منطقه زمانی ندارد.	نمونه ای از این فرمت 2011-W05 برای هفته پنجم سال 2011 است.
زمان	زمان را با ساعت، دقیقه، ثانیه و کسری از ثانیه وارد کنید، اما بدون منطقه زمانی.
datetime-local	وارد کردن تاریخ و زمان بدون منطقه زمانی
عدد	ورودی عددی	مقادیر معتبر اعداد ممیز شناور هستند.
دامنه	وارد کردن داده های عددی (برخلاف نوع عدد، خود عدد نقشی ندارد).	اجرای این کنترل محدوده در اکثر مرورگرهایی که از آن پشتیبانی می کنند به صورت کشویی است.
رنگ	انتخاب رنگ با استفاده از چرخه رنگ	مقدار باید یک رنگ معتبر، کوچک و ساده باشد، مانند #ffffff.

ویژگی های ورودی جدید

HTML5 همچنین چندین ویژگی جدید را برای عناصر ورودی و فرم معرفی می کند.

صفت	هدف	یادداشت
فوکوس خودکار	هنگامی که صفحه بارگذاری می شود، ورودی را روی یک عنصر متمرکز کنید.	ویژگی فوکوس خودکار را می توان برای عناصر ورودی، انتخاب، ناحیه متنی و دکمه اعمال کرد.
نگهدارنده مکان	راهنمایی به کاربر در مورد نوع داده ای که باید وارد شود.	مقدار متغیر مکان در متن سبک نمایش داده می شود تا زمانی که عنصر انتخاب شود و کاربر داده ها را وارد کند. این ویژگی را می توان بر روی عناصر ورودی و ناحیه متنی مشخص کرد.
فرم	یک یا چند فرم را مشخص می کند که عنصر ورودی به آنها تعلق دارد.	با ویژگی form، عناصر ورودی را می توان در هر نقطه از صفحه، نه فقط شی فرم، قرار داد. علاوه بر این، یک عنصر واحد را می توان با چندین فرم مرتبط کرد.
ضروری	ویژگی Boolean به این معنی است که عنصر مورد نیاز است.	ویژگی مورد نیاز هنگام انجام اعتبارسنجی مبتنی بر مرورگر بدون استفاده از کد جاوا اسکریپت سفارشی مفید است.
تکمیل خودکار	به شما امکان می دهد تعیین کنید که فیلد نباید از تکمیل خودکار استفاده کند و نباید با مقادیری که قبلاً توسط کاربر وارد شده است جایگزین شود.	ویژگی تکمیل خودکار برای فیلدهایی مانند شماره کارت اعتباری یا رمز عبور یکبار مصرف که نباید به صورت خودکار پر شوند مفید است. به طور پیش فرض، ویژگی تکمیل خودکار روی "روشن" تنظیم شده است. برای غیرفعال کردن آن، مقدار را خاموش کنید.
الگو	ارزش یک عنصر را بر اساس یک عبارت منظم تأیید کنید.	اگر از ویژگی الگو استفاده می شود، باید یک مقدار عنوان نیز ارائه دهید که الگوی ورودی مورد نظر را برای کاربر توصیف کند.
dirname	برای ارسال اطلاعات در مورد جهت کنترل به همراه فرم طراحی شده است.	به عنوان مثال، اگر کاربر متنی را از راست به چپ وارد کرده باشد و عنصر ورودی حاوی ویژگی dirname باشد، یک پارامتر جهت به همراه مقدار وارد شده ارسال خواهد شد.
اعتبار بخشیدن	اگر این ویژگی روی یک عنصر فرم مشخص شده باشد، اعتبار سنجی ارسال فرم غیرفعال است.
شکل گیری	نادیده گرفتن ویژگی action در یک عنصر فرم.
فرمنتیپ	نادیده گرفتن ویژگی enctype در یک عنصر فرم.	این ویژگی در عناصر ورودی و دکمه پشتیبانی می شود.
روش فرم	نادیده گرفتن ویژگی روش در یک عنصر فرم.	این ویژگی در عناصر ورودی و دکمه پشتیبانی می شود.
formnovalidate	نادیده گرفتن ویژگی novalidate در یک عنصر فرم.	این ویژگی در عناصر ورودی و دکمه پشتیبانی می شود.
قالب هدف	نادیده گرفتن ویژگی هدف در یک عنصر فرم.	این ویژگی در عناصر ورودی و دکمه پشتیبانی می شود.

شی FormData

یکی از پیشرفت‌های فناوری XMLHttpRequest، معرفی شیء FormData است. با FormData، می‌توانید مجموعه‌هایی از جفت‌ها و فایل‌های کلید/مقدار را با استفاده از XMLHttpRequest ایجاد و ارسال کنید. هنگام استفاده از این روش، داده‌ها به همان فرمتی ارسال می‌شوند که از روش ارسال() فرم با نوع کدگذاری چندبخشی/فرم-داده استفاده می‌شود.

شی FormData به شما اجازه می دهد تا به سرعت فرم های HTML را در جاوا اسکریپت ایجاد کنید و آنها را با استفاده از متد XMLHttpRequest.send ارسال کنید. در زیر یک مثال ساده آورده شده است.

varformData = new FormData(); formData.append("part_num", "123ABC"); formData.append("part_price", 7.95); formData.append("part_image", somefile) var xhr = new XMLHttpRequest(); xhr.open("POST"، "http://some.url/"); xhr.send(formData);

همچنین می توانید از شی FormData برای وارد کردن داده های اضافی در فرم موجود قبل از ارسال استفاده کنید.

VarformElement = document.getElementById("someFormElement"); var formData = new FormData(formElement); formData.append("part_description", "بهترین بخش تا کنون!"); varxhr = new XMLHttpRequest(); xhr.open("POST"، "http://some.url/"); xhr.send(formData);

اعتبارسنجی مبتنی بر مرورگر

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

ویژگی های ورودی جدید مانند مورد نیاز و الگو، همراه با انتخابگرهای شبه کلاس CSS، نوشتن چک و ارائه بازخورد به کاربران را آسان تر می کند. روش‌های اعتبارسنجی پیشرفته دیگری وجود دارد که به شما امکان می‌دهد از کد جاوا اسکریپت برای تنظیم قوانین و پیام‌های سفارشی و تعیین اینکه آیا یک عنصر نامعتبر است و چرا استفاده کنید.

ویژگی مورد نیاز

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

ویژگی الگو

ویژگی الگو عبارت منظم مورد استفاده برای اعتبار بخشی فیلد ورودی را مشخص می کند. این مثال یک فیلد ورودی متن مورد نیاز برای شماره قطعه را نشان می دهد. فرض بر این است که چنین عددی از سه حرف بزرگ و چهار رقم تشکیل شده است. استفاده از ویژگی های مورد نیاز و الگو تضمین می کند که فیلد با مقداری مطابق با این قالب وارد می شود. اگر کاربر روی فیلد قرار بگیرد، پیامی در ویژگی header نمایش داده می شود.

با تغییر جزئی مثال قبلی، می توانید فیلد ورودی را در صورتی که شماره قطعه نامعتبری در آن وارد شده است، با رنگ قرمز مشخص کنید. برای انجام این کار، فقط یک استایل CSS اضافه کنید که در صورت نامعتبر بودن مقدار، فیلد ورودی را در حاشیه قرمز قرار می دهد.

:invalid (حاشیه: 2px جامد #ff0000; )

ویژگی formnovalidate

ویژگی formnovalidate را می توان برای عناصر ورودی و دکمه اعمال کرد. این شامل اعتبار سنجی ارسال فرم است. در اینجا مثالی وجود دارد که در آن ارسال فرم با استفاده از دکمه ارسال به یک مقدار معتبر نیاز دارد، اما ارسال آن با استفاده از دکمه ذخیره نیازی ندارد.

API بررسی محدودیت

Constraint Check API ابزارهای مناسبی را برای انجام بررسی های سفارشی فراهم می کند. به شما امکان می دهد کارهایی مانند تنظیم یک خطای سفارشی، بررسی اعتبار یک عنصر و تعیین دلیل عدم اعتبار آن را انجام دهید. مثال زیر در صورت عدم تطابق مقادیر در دو فیلد، یک پیغام خطای سفارشی می دهد.

پست الکترونیک: آدرس ایمیل را تکرار کنید:

مونتاژ

در زیر نمونه ای از فرم درخواست رزرو وجود دارد که از انواع مختلف عناصر ورودی، اعتبارسنجی فرم و انتخابگرها و سبک های CSS استفاده می کند.