خصوصیت های جدید در HTML5
چندین خصوصیت جدید در HTML5برای تگ های <form> و <input> اضافه شده است.
خصوصیت های جدید برای تگ <form>
خصوصیت های جدید برای تگ <input>
- autocomplete
- autofocus
- form
- formaction
- formenctype
- formmethod
- formnovalidate
- formtarget
- height and width
- list
- min and max
- multiple
- pattern
- placeholder
- required
- step
خصوصیت autocomplete در <form> / <input>
این خصوصیت مشخص می کند که مقادیر یک فرم یا یک فیلد متنی بصورت اتوماتیک پر شود یا نه.
زمانی که کاربر شروع به تایپ در فیلدهای autocomplete می کند، مرورگر گزینه هایی را که قبلاً کاربر وارد کرده است نمایش می دهد.
نکته: این امکان وجود دارد که خصوصیت autocomplete برای form فعال و برای یک فیلد بخصوص غیرفعال باشد و یا برعکس.
توجه:خصوصیت autocomplete برای تگ <form> و تگ <input>ی که از انواع زیر باشد کار می کند:
text, search, url, tel, email, password, datepickers, range, color
نکته: در بعضی مرورگرها باید خاصیت Autocomplete را فعال کنید تا این مثال کار کند.
خصوصیت novalidate در <form>
خصوصیت novalidate یک خصوصیت boolean است.
این خصوصیت نشان می دهد که این فرم برای ارسال به سرور نیاز به اعتبارسنجی ندارد.
اگر این خصوصیت برای فرم مشخص شده باشد هیچ یک از فیلدهای آن فرم از نظر اعتبارسنجی بررسی نمی شود.
خصوصیت autofocus در <input>
خصوصیت autofocus یک خصوصیت boolean است.
این خصوصیت باعث می شود که بعد از لود شدن صفحه، مکان نما بصورت پیشفرض روی آن فیلد قرار گیرد.
نکته: خصوصیت autofocus برای تمام انواع فیلدهای ورودی کار می کند.
خصوصیت form در <input>
این خصوصیت فرم یا فرم هایی که فیلد مورد نظر به آن ها تعلق دارد را مشخص می کند.
نکته: خصوصیت form برای تمام انواع فیلدهای ورودی کار می کند و برای اتصال یک فیلد به چند فرم باید با space بین id فرم ها فاصله بگذارید.
این خصوصیت باید به id فرم مورد نظرتان اشاره کند.
خصوصیت formaction در <input>
خصوصیت formaction، آدرس فایلی که مقادیر کنترل های ورودی بعد از ارسال در آن پردازش می شوند را مشخص می کند.
خصوصیت formaction، خصوصیت action عنصر <form>را لغو می کند و با مقدار مورد نظر تغییر می دهد.
نکته: خصوصیت formaction با انواع ورودی submit و image استفاده می شود.
نکته: از این صفات می توان برای ساخت دکمه های submit متفاوت که کارهای متفاوتی انجام می دهند استفاده کرد.
خصوصیت formenctype در <input>
خصوصیت formenctype، چگونگی رمز کردن داده های فرم، هنگام ارسال را مشخص می کند. (تنها زمانی که خصوصیت method عنصر <form> با مقدار "post" تنظیم شده باشد)
خصوصیت formenctype، خصوصیت enctype عنصر <form> را لغو می کند و با مقدار مورد نظر تغییر می دهد.
نکته: خصوصیت formenctype با انواع ورودی submit و image استفاده می شود.
خصوصیت formmethod در <input>
خصوصیت formmethod، مشخص می کند که ارسال اطلاعات از فرم HTMLبه سرور به چه شکل باشد، اگر آنرا با مقدار "get" پر کنیم، اطلاعات فرم در آدرس صفحه قرار می گیرد و ارسال می شود، و اگر آنرا با مقدار "post" تنظیم کنیم، اطلاعات به صورت یک آرایه ارسال می شود.(به صورت پیشفرض get در نظر گرفته می شود)
خصوصیت formmethod، خصوصیت method عنصر <form> را لغو می کند و با مقدار مورد نظر تغییر می دهد.
نکته: خصوصیت formmethod با انواع ورودی submit و image استفاده می شود.
خصوصیت formnovalidate در <input>
خصوصیت formnovalidate یک خصوصیت boolean است.
این خصوصیت نشان می دهد که فیلدهای ورودی برای ارسال به سرور نیاز به اعتبارسنجی ندارد.
خصوصیت formnovalidate، خصوصیت novalidate عنصر <form> را لغو می کند و با مقدار مورد نظر تغییر می دهد.
نکته: خصوصیت formnovalidate با نوع ورودی submit استفاده می شود.
خصوصیت formtarget در <input>
خصوصیت formtarget نشان می دهد، پاسخی که از سرور دریافت شده است کجا نمایش داده شود و می تواند شامل: صفحه جاری، صفحه جدید، صفحه پدر، یك فریم خاص و... باشد.
خصوصیت formtarget، خصوصیت target عنصر <form> را لغو می کند و با مقدار مورد نظر تغییر می دهد.
نکته: خصوصیت formtarget با انواع ورودی submit و image استفاده می شود.
خصوصیت های height و width در <input>
خصوصیت های height و width، ارتفاع و عرض برای نوع ورودی image را مشخص می کند.
توجه: همانطور که مشخص است این خصوصیت فقط برای نوع ورودی image کار می کند.
نکته: همیشه خصوصیت عرض و طول یک عکس را مشخص کنید. اگر این خصوصیت ها تنظیم شوند، زمانی که صفحه در حال لود شدن است، مکان مورد نیاز برای عکس در بین دیگر عناصر صفحه رزرو شده است. بنابراین طرح صفحه در حال لود با طرح کاملاً لود شده ی صفحه، تفاوتی نخواهد داشت. اما اگر این خصوصیات را تنظیم نکنید، مرورگر نمی تواند اندازه عکس را تشخیص دهد و اگر تصویری در بین متن باشد. جای آن تا لود کامل تصویر خالی خواهد ماند.
خصوصیت list در <input>
این خصوصیت یک datalist را به یک فیلد متنی متصل می کند.
زمانی که کاربر داده وارد می کند، یک لیست کشویی ظاهر می شود و می تواند از گزینه های پیشنهاد داده شده یکی را انتخاب نماید.
برای اتصال یک <datalist> به یک فیلد ورودی متنی، باید خاصیت list فیلد متنی را با id عنصر <datalist> تنظیم نمایید.
خصوصیت های min و max در <input>
خصوصیت های min و max، حداقل و حداکثر مقدار برای یک عنصر <input> را مشخص می کند.
توجه: این خصوصیت ها فقط برای انواع ورودی زیر استفاده می شود:
number, range, date, datetime, datetime-local, month, time ,week
خصوصیت multiple در <input>
خصوصیت multiple یک خصوصیت boolean است.
این خصوصیت نشان میدهد که مقادیر متعددی را می توان برای عنصر <input> تنظیم نمود. مقادیر را با کاما (,) از هم جدا کنید.
توجه: این خصوصیت فقط برای انواع ورودی email و file استفاده می شود.
خصوصیت pattern در <input>
این خصوصیت الگویی برای بررسی اعتبار یک فیلد ورودی مشخص می کند. این الگو یک یک عبارت منظم (regular expression) است که می توانید در اینترنت، عبارات منظم و نحوه ایجاد آن ها را بیابید.
توجه: این خصوصیت فقط برای انواع ورودی زیر استفاده می شود:
text, search, url, tel, email, password
نکته: می توان از خصوصیت title برای توضیح درباره الگو، جهت کمک به فهم کاربر استفاده نمود.
اگر مایلید درباره عبارات منظم در JavaScript بیشتر بدانید به مطلب JS Validation مراجعه کنید. همچنین سایت http://html5pattern.com نیز برای بررسی بیشتر بسیار مناسب است.
قطعا با عبارت منظم آشنا هستید، در زیر مفهوم برخی از علائم عبارات منظم آورده شده است:
- ^ : نشانه شروع می باشد. به طور مثال دستور bcd^ به معنی هر عبارتی است که با bcd شروع شود.
- $ : نشانه پایان می باشد. به طور مثال دستور $bcd به معنی هر عبارتی است که در انتها به bcd ختم شود.
- + : نشانه تکرار است و اگر پشت عبارتی قرار بگیرید باید حداقل یکبار تکرار شود.
- * : همانند + می باشد با این تفاوت که آن عبارت می تواند تکراری نداشته باشد.
- ? : اگر پشت عبارتی قرار بگیرد یعنی اینکه آن عبارت باید صفر یا یک بار تکرار شود.
- () : برای قسمت بندی عبارات به زیر عبارات و اولویت بندی نیز می باشد.
- [] : لیستی از کاراکترها که می خواهیم تطبیق دهیم در این دو کروشه قرار می گیرد.
- [ ^] : لیستی از کاراکترهائی که نمی خواهیم تطبیق داده شوند از این عبارت استفاده می کنیم.
- d\ : نشانه ارقام می باشد یعنی وقتی این عبارت بیاید منظور یکی از ارقام است.
- D\ : نشانه هر کاراکتری غیر از رقم می باشد.
- w\ : نشانه حرف یا عدد می باشد و کاراکترهای خاص نیست و معادل [a-zA-Z_0-9] است.
- W\ : نشانه کاراکترهای خاص می باشد و عدد یا حروف یا space نیست.
- s\ : نشانه کاراکتر space می باشد.
- S\ : نشان هر کاراکتری غیر از space می باشد.
- {} : مشخص کننده تعداد تکرارا می باشد و اگر داخل آن یک عدد نوشته شود یعنی اینکه عبارت قبل از آن دقیقا باید به تعداد آن عدد تکرارا شود ولی اگر دو عدد نوشته شود عبارت قبل از آن باید تکراری بین آن دو عدد باشد.
- | : بمعنی یا است. بعنوان مثال a|b یعنی یا a یا b
- - : بمعنی تا است. بعنوان مثال a-z یعنی از a تا z
- . : می تواند هر کاراکتری باشد.
خصوصیت placeholder در <input>
این خصوصیت یک عبارت را به صورت کم رنگ در داخل فیلد ورودی می نویسد که با فوکوس روی آن فیلد از بین می رود و فیلد خالی می شود.
توجه: این خصوصیت فقط برای انواع ورودی زیر استفاده می شود:
text, search, url, tel, email, password
خصوصیت required در <input>
خصوصیت required یک خصوصیت boolean است.
این خصوصیت مشخص می کند که فیلد ورودی قبل از ارسال به سرور باید حتما پر شده باشد.
توجه: این خصوصیت فقط برای انواع ورودی زیر استفاده می شود:
text, search, url, tel, email, password, date pickers, number, checkbox, radio, file
خصوصیت step در <input>
خصوصیت step، فاصله اعداد مجاز برای یک عنصر <input> را مشخص می کند.
مثال: اگر "3"=step باشد، اعداد مجاز می تواند... 6 ، 3 ، 0 ، 3- ، 6-... باشد.
نکته:خصوصیت step را می توان همراه با خصوصیت های min و max برای مشخص کردن یک محدوده ای از اعداد مجاز استفاده نمود.
توجه: این خصوصیت فقط برای انواع ورودی زیر استفاده می شود:
number, range, date, datetime, datetime-local, month, time ,week
READ MORE
