اینترنت پنجره ها اندروید
بسط دادن
اصلی ›

ویژگی های جهانی HTML. ویژگی های جهانی ویژگی های HTML5 را تشکیل می دهند

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

در این مقاله، ما بر روی مطالعه ویژگی های جدید تمرکز خواهیم کرد، و در موارد زیر، انواع ورود اطلاعات را در نظر می گیریم.

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

این مقاله - یک گزیده ای از فصل 6 کتاب ها شروع به یادگیری HTML5 و CSS3: تکامل شبکه (آغاز HTML5 و CSS3: Web Elevolded) کریستوفر مورفی، ریچارد کلارک و دیویا منن (کریستوفر مورفی، OLI Studholme، ریچارد کلارک و Divya Manian) منتشر شده توسط انتشارات Apress Publishing.

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

تاریخ اشکال HTML5

بخش فرم ها در HTML5 در ابتدا مشخصات به نام Web Forms 2.0 بود که انواع جدیدی از ابزارهای کنترل شکل را اضافه کرد. آغاز شده در اپرا و ویرایش شده توسط اپرا اپرا Ayan Hickson (Ian Hickson)، توسط W3C در اوایل سال 2005 تایید شد. این کار ابتدا توسط W3C انجام شد. سپس آن را با برنامه های کاربردی وب 1.0 به منظور ایجاد پایه ای از مشخصات HTML5 از گروه کار تکنولوژی فناوری وب سایت وب سایت (WHATWG) ترکیب شد.

استفاده از اصول طراحی HTML5

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

ویژگی های فرم های HTML5

در این مقاله، 14 ویژگی جدید زیر را در نظر خواهیم گرفت.

حفره یا سوراخ

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

بیایید دریابیم که نحوه اجرای ویژگی حفره یا سوراخ.

< input type = "text" name = "user-name" id = "user-name" placeholder = "حداقل 3 کاراکتر" >

مثل این! من می شنوم که شما فکر می کنید: "این چه چیزی در آن قابل توجه است؟ من آن را تمام زندگی من در جاوا اسکریپت انجام دادم. " بله درسته. با این حال، با HTML5، آن را بخشی از مرورگر می شود، به این معنی که لازم است نوشتن اسکریپت کمتر برای دستیابی به یک راه حل مقرون به صرفه تر مرورگر (حتی با جاوا اسکریپت غیر فعال). این رقم نشان دهنده عملکرد ویژگی متن جمع شده در Chrome است.

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

فوکوس اتوماتیک

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

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

این یک ویژگی بولی است (به جز زمانی که شما XHTML5 را بنویسید؛ توجه داشته باشید) و اعدام به عنوان اینجا:

< input type = "text" name = "first-name" id = "first-name" autofocus >

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

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

فوکوس اتوماتیک فوکوس اتوماتیک autofocus \u003d "autofocus \u003d" autofocus autofocus

فوکوس اتوماتیک

autofocus \u003d ""

autofocus \u003d "فوکوس اتوماتیک"

با این حال، هنگام نوشتن XHTML5، شما باید سبک فوکوس اتوماتیک \u003d "فوکوس اتوماتیک" را اعمال کنید.

تکمیل خودکار

ویژگی AutoComplete به کاربران کمک می کند تا فرم ها را بر اساس مقدمه داده های قبلی پر کنند. این ویژگی از زمان IE5.5 بار استفاده می شود، اما در نهایت به عنوان بخشی از HTML5 استاندارد شده است. به طور پیش فرض، فعال است. این بدان معنی است که ما اساسا مجبور نیستیم آن را اعمال کنیم. با این حال، اگر میخواهید هر بار پس از پر کردن (در مقایسه با Futofill Field Browser)، به دنبال آن هستید، سپس آن را به صورت زیر دنبال کنید:

< input type = "text" name = "tracking-code" id = "tracking-code" autocomplete = "off" >

زمینه میدان فیلد هر حالت تکمیل خودکار را که بر روی آیتم فرم نصب شده است، لغو می کند.

ضروری.

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

< input type = "text" id = "given-name" name = "given-name" required >

در حال حاضر، مورد نیاز تنها در اپرا 9.5+، فایرفاکس 4+، Safari 5+، اینترنت اکسپلورر 10 و Chrome 5+ اجرا می شود، به طوری که تا زمانی که تا زمان، شما مجبور به ادامه نوشتن اسکریپت ها برای پر کردن فیلدهای در سمت مشتری از مرورگرهای دیگر ( * khe-khe * یعنی!) اپرا، Chrome و فایرفاکس هنگام ارسال یک فرم پیام خطا، کاربر را نشان می دهند. اغلب مرورگرهای خطا بر اساس یک زبان اعلام شده محلی می شوند. Safari یک پیام خطا را هنگام ارسال نشان نمی دهد و به جای آن این زمینه را به تمرکز تبدیل می کند.

نمایش پیام خطای پیش فرض "مورد نیاز" بستگی به یک مرورگر جداگانه دارد؛ در حال حاضر، "حباب" با یک پیام خطا در تمام مرورگرها نمی تواند به عنوان سبک CSS منصوب شود. کروم، با این حال، دارای دارایی خاص خود است که می تواند مورد استفاده قرار گیرد تا یک پیام خطا را به سبک ها اختصاص دهد. شما همچنین می توانید سبک ها را برای وارد کردن داده ها با استفاده از pseudo-class اختصاص دهید: مورد نیاز است. جایگزین این است که لغو متن و سبک های جاوا اسکریپت با استفاده از روش setcustomaluccient () لغو شود. همچنین بسیار مهم است که فراموش نکنید که چنین اعتبار سنجی مرورگر اعتبار سرور را جایگزین نمی کند.

الگو.

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

< label > شماره محصول:

< input pattern = "{3}" name = "product" type = "text" title = "تک رقم به دنبال سه حروف بزرگ است."/ >

< / label >

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

همانطور که در مورد مورد نیاز، اپرا 9.5+، فایرفاکس 4+، Safari 5+، اینترنت اکسپلورر 10 و Chrome 5+ تنها مرورگرانی هستند که در حال حاضر از قالب پشتیبانی می کنند. با این حال، بقیه به زودی به دلیل ارتقاء سریع بازار مرورگر به زودی خواهند آمد.

فهرست و عناصر Datalist

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

مثال زیر نشان می دهد که چگونه لیست و Datalist ترکیب شده اند.

< label > میوه مورد علاقه شما:

< datalist id = "fruits" >

< option value = "توت سیاه." > توت سیاه.< / option >

< option value = "blackcurrant" > blackcurrant< / option >

< option value = "زغال اخته" > زغال اخته< / option >

< ! -- …-- >

< / datalist >

اگر دیگر، لطفا مشخص کنید:

< input type = "text" name = "fruit" list = "fruits" >

< / label >

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

< label > میوه مورد علاقه شما:

< datalist id = "fruits" >

< select name = "fruits" >

< option value = "توت سیاه." > توت سیاه.< / option >

< option value = "blackcurrant" > blackcurrant< / option >

< option value = "زغال اخته" > زغال اخته< / option >

< ! -- …-- >

< / select >

اگر دیگر، لطفا مشخص کنید:

< / datalist >

< input type = "text" name = "fruit" list = "fruits" >

< / label >

لیست و پشتیبانی مرورگر DataList در حال حاضر محدود به اپرا 9.5+، Chrome 20+، اینترنت اکسپلورر 10 و فایرفاکس 4+ است.

چندگانه

شما می توانید لیست و Datalist خود را بر روی گام به جلو با استفاده از ویژگی چند بولیل ارتقاء دهید تا بتوانید بیش از یک مقدار را از لیست داده ها وارد کنید. به عنوان مثال.

< label > میوه مورد علاقه شما:

< datalist id = "fruits" >

< select name = "fruits" >

< option value = "توت سیاه." > توت سیاه.< / option >

< option value = "blackcurrant" > blackcurrant< / option >

< option value = "زغال اخته" > زغال اخته< / option >

< ! -- …-- >

< / select >

اگر دیگر، لطفا مشخص کنید:

< / datalist >

< input type = "text" name = "fruit" list = "fruits" multiple >

< / label >

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

< label > آپلود فایل ها:

< input type = "file" multiple name = "upload" > < / label >

چندگانه در فایرفاکس 3.6+، Safari 4+، اپرا 11.5+، اینترنت اکسپلورر 10 و کروم 4+ پشتیبانی می شود.

noutaledate و formnovalidate.

ویژگی های NOVEALDATE و FORMNOVALIDATE نشان می دهد که هنگام ارسال یک فرم، لازم نیست که صحت داده را بررسی کنید. آنها هر دو هستند - ویژگی های بولی. FormNovalidate می تواند به ورودی AM با یک نوع ارسال یا تصویر اعمال شود. ویژگی NoValidate را می توان تنها به عنصر فرم نصب کرد.

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

استفاده از فرمنوالویدات را می توان در مثال زیر مشاهده کرد:

< form action = "process.php" >

< label for = "email" > پست الکترونیک:< / label >

< input type = "text" name = "email" value = "\u003ca href \u003d"/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="086f677a6c67486d70696578646d266b6765">[ایمیل محافظت شده]" >

< input type = "submit" formnovalidate value = "ارسال" >

< / form >

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

< form action = "process.php" novalidate >

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

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

ویژگی های جهانی اغلب در نمونه هایی از این کتاب درسی ملاقات می کنند، من پیشنهاد می کنم که ویژگی هایی را که ما قبلا در نظر گرفته ایم، تکرار کنیم و خود را با ویژگی های جهانی آشنا کنیم که در نزدیکترین مقالات در نظر گرفته شده است:

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

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


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

در HTML5، اگر چه تمام مرورگرهای مدرن در حال حاضر از این استاندارد پشتیبانی می کنند. از دسامبر 2011، استاندارد هنوز در حالت توسعه است.

در HTML5 بسیاری از ویژگی های جدید نحوی را اضافه می کند -

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