الگوهای زبان html 5. ویژگی های max و min

08.04.2019 سیستم های عامل

و بیایید CSS زیر را اضافه کنیم تا ورودی های معتبر با علامت چک و ورودی های نامعتبر با علامت ضربدر برجسته شوند:

Div ( حاشیه-پایین: 10 پیکسل؛ موقعیت: نسبی؛ ) ورودی (عرض: 100 پیکسل؛ ) ورودی + دهانه (پردهی-راست: 30 پیکسل؛ ) ورودی:نامعتبر+span:after ( موقعیت: مطلق؛ محتوا: "✖"؛ بالشتک -سمت چپ: 5 پیکسل؛ رنگ: #8b0000؛ ) ورودی: اعتبار + دامنه: بعد ( موقعیت: مطلق؛ محتوا: "✓"؛ بالشتک چپ: 5 پیکسل؛ رنگ: #009000؛ )

خروجی به صورت زیر است:

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

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

در این مثال ما از همان CSS قبلی استفاده خواهیم کرد، اما HTML ما به شکل زیر تغییر کرده است:

یک شماره تلفن (به شکل xxx-xxx-xxxx) وارد کنید:

ارسال

Div ( حاشیه-پایین: 10 پیکسل؛ موقعیت: نسبی؛ ) ورودی (عرض: 100 پیکسل؛ ) ورودی + دهانه (پردهی-راست: 30 پیکسل؛ ) ورودی:نامعتبر+ دهانه: بعد ( موقعیت: مطلق؛ محتوا: "✖"؛ بالشتک -سمت چپ: 5 پیکسل؛ رنگ: #8b0000؛ ) ورودی: اعتبار + دامنه: بعد ( موقعیت: مطلق؛ محتوا: "✓"؛ بالشتک چپ: 5 پیکسل؛ رنگ: #009000؛ )

توجه کنید که چگونه مقدار وارد شده به عنوان نامعتبر گزارش می شود مگر اینکه الگوی xxx-xxx-xxxx مطابقت داشته باشد. به عنوان مثال، 41-323-421 پذیرفته نخواهد شد. 800-MDN-ROCKS نیز پذیرفته نخواهد شد. با این حال، 865-555-6502 پذیرفته خواهد شد. این الگوی خاص بدیهی است که فقط برای مناطق خاصی مفید است - در یک برنامه واقعی شما" d احتمالاً باید الگوی مورد استفاده را بسته به منطقه کاربر تغییر دهد.

مثال ها

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

هر ورودی دارای یک ویژگی نگهدارنده مکان برای نشان دادن راهنمایی به کاربران بینا در مورد آنچه باید وارد آن شود، الگویی برای اعمال تعداد مشخصی از کاراکترها برای بخش مورد نظر، و یک ویژگی aria-label برای نشان دادن راهنمایی برای خواندن برای صفحه‌خوان است. کاربران در مورد آنچه باید وارد آن شوند.

کشورتان را انتخاب کنید: بریتانیا ایالات متحده آلمان

شماره تلفن خود را وارد کنید:

ارسال

جاوا اسکریپت نسبتاً ساده است - شامل یک کنترل کننده رویداد onchange است که وقتی مقدار تغییر می کند، به روز رسانی می شود الگوی عنصر، مکان‌نما و برچسب آریا متناسب با قالب شماره‌های تلفن در آن کشور/منطقه.

Var selectElem = document.querySelector("انتخاب"); var inputElems = document.querySelectorAll("input"); selectElem.onchange = function() ( for(var i = 0; i< inputElems.length; i++) { inputElems[i].value = ""; } if(selectElem.value === "ایالات متحده") { inputElems.parentNode.style.display = "inline"; inputElems.placeholder = "کد منطقه"; inputElems.pattern = "{3}"; inputElems.placeholder = "قسمت اول"; inputElems.pattern = "{3}"; inputElems.setAttribute("aria-label","First part of number"); inputElems.placeholder = "بخش دوم"; inputElems.pattern = "{4}"; inputElems.setAttribute("aria-label","Second part of number"); } else if(selectElem.value === "بریتانیا") { inputElems.parentNode.style.display = "none"; inputElems.placeholder = "کد منطقه"; inputElems.pattern = "{3,6}"; inputElems.placeholder = "شماره محلی"; inputElems.pattern = "{4,8}"; inputElems.setAttribute("aria-label","Local number"); } else if(selectElem.value === "آلمان") { inputElems.parentNode.style.display = "inline"; inputElems.placeholder = "کد منطقه"; inputElems.pattern = "{3,5}"; inputElems.placeholder = "قسمت اول"; inputElems.pattern = "{2,4}"; inputElems.setAttribute("aria-label","First part of number"); inputElems.placeholder = "بخش دوم"; inputElems.pattern = "{4}"; inputElems.setAttribute("aria-label","Second part of number"); } }

مثال به این صورت است:

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

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

Div ( حاشیه-پایین: 10 پیکسل؛ موقعیت: نسبی؛ ) ورودی (عرض: 100 پیکسل؛ ) ورودی + دهانه (پردهی-راست: 30 پیکسل؛ ) ورودی:نامعتبر+ دهانه: بعد ( موقعیت: مطلق؛ محتوا: "✖"؛ بالشتک -سمت چپ: 5 پیکسل؛ رنگ: #8b0000؛ ) ورودی: اعتبار + دامنه: بعد ( موقعیت: مطلق؛ محتوا: "✓"؛ بالشتک چپ: 5 پیکسل؛ رنگ: #009000؛ )

مشخصات فنی

مشخصات	وضعیت	اظهار نظر
استاندارد زندگی HTML تعریف " "در آن مشخصات.	اپرا	سافاری	نمای وب اندروید	کروم برای اندروید	اج موبایل	فایرفاکس برای آندروید	اپرا برای اندروید	سافاری در iOS	اینترنت سامسونگ
نوع "تل"	پشتیبانی کامل کروم بله	پشتیبانی کامل Edge بله	پشتیبانی کامل فایرفاکس بله	پشتیبانی کامل IE 10 عنصر برای ایجاد کنترل های تعاملی برای فرم های مبتنی بر وب به منظور پذیرش داده ها از کاربر استفاده می شود. طیف گسترده ای از انواع داده های ورودی و ویجت های کنترلی بسته به دستگاه و عامل کاربر در دسترس هستند.">

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

تکمیل خودکار در فیلدهای متنی

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

فیلدهای ورودی ایمیل، آدرس اینترنتی و تلفن

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

الگوهایی برای تطبیق فیلدهای فرم با یک عبارت منظم

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

منوی زمینه سفارشی

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

بله، می توانید اینجا کلیک راست کنید.

ویدئو در HTML5، با فلش پلیر جایگزین.

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

عناصر پنهان در HTML5

HTML5 ویژگی پنهان را معرفی کرد که می تواند برای هر عنصری اعمال شود. اثر آن شبیه به ویژگی display:none CSS است.

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

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

پیش بارگذاری در HTML5

ژان باپتیست یونگ درباره پیش بارگذاری در HTML5 نوشت. به طور خلاصه، این یک راه آسان برای اطلاع رسانی به مرورگر در مورد منابعی است که ممکن است به زودی مورد نیاز باشد، به طوری که آنها را از قبل دانلود کند (به عنوان مثال، تصاویر بارگذاری شده توسط Ajax). کد زیر پیش بارگذاری تصویر را پیاده سازی می کند.

پخش فایل های صوتی در HTML5

HTML5 می تواند فیلم ها را پخش کند و البته می تواند فایل های صوتی را نیز مثلا در فرمت mp3 پخش کند. کد زیر یک پخش کننده صوتی مینیمالیستی اما کاربردی را پیاده سازی می کند.

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

ویژگی ها را تگ کنید

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

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

Autocomplete="off" تکمیل خودکار را غیرفعال می کند زمینه داده شده. برای فیلدهای ورودی برای کدهای یکبار مصرف، کپچا و غیره بسیار مفید است. .setAttribute("تکمیل خودکار"،"خاموش"); فوکوس خودکار دریافت فوکوس خودکار در بارگذاری صفحه. مقدار را می توان به سه روش تنظیم کرد: ... ... ... مثال شبیه سازی ویژگی فوکوس خودکار برای مرورگرهای قدیمی. disabled عنصر را غیر قابل دسترس می کند. موارد در دسترس به سرور ارسال نمی شود. name نام فیلد. هر فیلد ورودی که ایجاد می کنید باید نام منحصر به فرد خود را داشته باشد، در غیر این صورت اسکریپت تعیین نمی کند که مقادیر حاصل به کدام فیلدها تعلق دارند. البته نام فیلد ورودی باید با نامی که در برنامه پردازش برای آن توضیح داده شده است مطابقت داشته باشد. مقدار مقدار پیش فرض فیلد یا برچسب روی دکمه. اندازه اندازه فیلد نوع. maxlength محدودیت در تعداد کاراکترهایی که می توان در یک فیلد از نوع وارد کرد. readonly="readonly" یا "" از تغییر عنصر جلوگیری می کند. الزامی است به طور خودکار بررسی می کند که آیا فیلد پر شده است.
برای برجسته کردن یک فیلد اجباری که به درستی پر شده است، می توانید از ساختار سبک زیر استفاده کنید: min حداقل مقدار عدد در قسمت type عدد. max حداکثر مقدار عدد در فیلد نوع عدد. step مرحله تغییر عدد در قسمت type عدد. الگوی الگوی فیلد ورودی. بررسی صحت ورود داده ها الگوهای نمونه برای الگوی ورودی فرم html5. placeholder متن راهنمایی در فیلد فرم، که با فوکوس شدن فیلد به طور خودکار ناپدید می شود.
مثال تنظیم سبک نکته:

در IE و Firefox (تا نسخه 18) نگهدارنده مکانیک شبه کلاس در نظر گرفته می شود و در بقیه - یک شبه عنصر.

نتیجه:

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

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

دکمه

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

مثال

نتیجه:

دکمه SUBMIT

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

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

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

مثال

نتیجه:

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

مثال

نتیجه:

صفت formnovalidateمی تواند برای جلوگیری از اعتبارسنجی مقادیر فرم استفاده شود.

مثال

نتیجه:

کلید ریست

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

نکته: در انتخاب برچسب دکمه دقت کنید تنظیم مجدد. کاملا بصری (و مهمتر از همه، شهودی حتی برای یک قوری قوری) چیزی مانند "Clear"، "Start over"، "Delete input" و غیره خواهد بود. به طور کلی لازم است که کاربر در مورد هدف این کلید سایه تردید نداشته باشد.

مثال

فیلد ورودی TEXT

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

مثال

نتیجه:

متن Ivanov به عنوان مقدار اولیه در قسمت تولید شده قرار می گیرد. اگر کاربر هیچ تغییری ایجاد نکند یا روی دکمه کلیک کند، مقدار Ivanov به عنوان نام خانوادگی کاربر به اسکریپت ارسال می شود.

NUMBER فیلد ورودی

فیلد برای وارد کردن اعداد در نظر گرفته شده است. بخش کسری در طول ورودی را می توان با یک نقطه (2.5) و یک کاما (2.5) از هم جدا کرد. اگر کاربر حروف را وارد کند، فرم به سرور ارسال نمی شود.

مثال

نتیجه:

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

مثال

نتیجه:

برای تنظیم هر مرحله، استفاده کنید گام = "هر".

مثال

نتیجه:

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

کلمه عبور

فیلد مخفی HIDDEN

این یک نوع خاص (پنهان) است فیلد متنی. اگر همان اسکریپت چندین فرم مختلف را مدیریت می کند، می توانید یک شناسه در قسمت مخفی هر فرم مشخص کنید تا مشخص شود با کدام فرم سروکار دارید.

مثال

... عناصر فرم بیشتر ....

... عناصر فرم بیشتر...

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

مثال

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

فیلد ورودی ایمیل

برای وارد کردن چندین آدرس، می توانید ویژگی را اضافه کنید چندگانه، با کاما (،) برای جدا کردن آدرس ها استفاده می شود

مثال

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