خواص فیلدهای ورودی در html5

html-attribute

html5 خواص زیر را برای < input > اضافه کرده است:

  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • height and width
  • list
  • min and max
  • multiple
  • (pattern(regexp
  • placeholder
  • required
  • step

همچنین خواص زیر را برای < form > اضافه کرده است:

  • autocomplete
  • novalidate

خصوصیت autocomplete در HTML5

خصوصیت autocomplete تعیین می کند که مقادیر یک فرم به صورت خودکار تکمیل شود یا خیر. در واقع هنگام ورود اطلاعات در سایت فیلد متنی شما هنگام وارد کردن ابتدای عبارت برای انتخاب مقادیری که قبلاً وارد کرده اید به شما پیشنهاد می دهد. دو مقدار on و off را می تواند بپذیرد.
نکته: این امکان وجود دارد که خصوصیت autocomplete برای فرم فعال و برای یک فیلد خاص غیرفعال باشد و یا برعکس.
autocomplete در <form> استفاده می شود و برای انواع <input> مثل متن، جستجو، آدرس، تلفن، ایمیل، رمز عبور، دامنه، رنگ به کار می رود.
مثال زیر یک فرم html با autocomplete on می باشد و شامل autocomplete off برای یک ورودی خاص است:

نکته: در بعضی از مرورگرها شما باید خصوصیت autocomplete را برای این منظور فعال کنید تا بتوانید مثال بالا را اجرا کنید.

خصوصیت novalidate در HTML5

خصوصیت novalidate در <form> استفاده می شود. این خصوصیت نشان می دهد که این فرم برای ارسال به سرور نیاز به اعتبارسنجی ندارد. در واقع یعنی هیچ یک از فیلدهای آن فرم از نظر اعتبارسنجی بررسی نمی شود. به مثال زیر توجه کنید:

خصوصیت autofocus در HTML5

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

خصوصیت form در HTML5

خصوصیت form فرم هایی که فیلد مورد نظر به آن ها تعلق دارد را مشخص می کند. در واقع مشخص می کند که عنصر ورودی متعلق به فرم یا فرم های دیگر نیز می باشد. این خصوصیت برای تمام انواع فیلدهای ورودی کار می کند. برای اتصال یک فیلد به چند فرم باید با space بین id فرم ها فاصله ایجاد کرد. این خصوصیت به id فرم مورد نظر اشاره می کند. در مثال زیر فیلد ورودی در خارج از فرم html قرار دارد اما هنوز هم، بخشی از فرم است:

خصوصیت formaction در HTML5

خصوصیت formaction آدرس فایلی که مقادیر کنترل های ورودی بعد از ارسال در آن پردازش می شوند را مشخص می کند. یعنی تعیین می کند که به هنگام ارسال یک فرم، داده های مربوط به آن به کجا فرستاده شوند. خصوصیت formaction، خصوصیت action عنصر <form> را لغو می کند. این خصوصیت برای “type=”submit و “type=”image استفاده می شود.
مثال زیر یک فرم html با دو دکمه submit و دو action متفاوت است:

خصوصیت formenctype در HTML5

خصوصیت formenctype، تعیین می کند که اطلاعات فرم جهت ارسال به سرور چگونه رمزگذاری شوند (تنها زمانیکه در <form> خصوصیت “method=”post باشد). خصوصیت formenctype، خصوصیت enctype عنصر <form> را لغو می کند. این خصوصیت برای “type=”submit و “type=”image به کار می رود.
در مثال زیر در دکمه اول، داده ها براساس enctype پیشفرض فرم ارسال می شوند، و در دکمه دوم داده ها بر اساس ” multipart/formdata “رمزگذاری می شوند و سپس ارسال می شوند:

خصوصیت formmethod در HTML5

این خصوصیت مشخص می کند که داده های مربوط به یک فرم چگونه و با استفاده از کدام متد HTTP ارسال شوند. اگر این خصوصیت را با post بنویسیم، اطلاعات به صورت یک آرایه ارسال می شود. اما اگر با get بنویسیم، اطلاعات در آدرس صفحه قرار می گیرد و سپس ارسال می شود. خصوصیت formmethod، خصوصیت method عنصر <form> را لغو می کند.
خصوصیت formmethod برای type=submit و type=image به کار می رود.
در مثال زیر دومین دکمه ارسال، متد HTTP فرم را لغو می کند:

خصوصیت formnovalidate در HTML5

خصوصیت formnovalidate مشخص می کند که احتیاجی به سنجش اعتبار داده های یک فرم نمی باشد. این خصوصیت، یک خصوصیت boolean است. خصوصیت formnovalidate، خصوصیت novalidate عنصر <form> را لغو می کند.
خصوصیت formnovalidate برای type=submit استفاده می شود.
مثال زیر یک فرم با دو دکمه (با و بدون اعتبار سنجی) می باشد.

خصوصیت formtarget در HTML5

خصوصیت formtarget مشخص می کند که پس از ارسال فرم، پیغام در کجا نشان داده شود. این مکان می تواند صفحه جاری، صفحه جدید، صفحه پدر، یک فریم خاص و جاهای دیگر باشد.
خصوصیت formtarget، خصوصیت target عنصر <form> را لغو می کند.
خصوصیت formtarget برای type=submit و type=image استفاده می شود.
مثال زیر یک فرم با دو دکمه submit و targetهای متفاوت می باشد:

خصوصیت های height و width در HTML5

خصوصیت height ارتفاع عنصر <input> را مشخص می کند. خصوصیت width عرض عنصر <input> را مشخص می کند. خصوصیت های height و width فقط برای type=image استفاده می شود.
همیشه خصوصیت عرض و طول عکس را مشخص کنید، زیرا اگر این دو خصوصیت به کار روند، وقتی صفحه در حال لود شدن است، مکان عکس رزو شده و حتی اگر عکس کاملاً لود نشود مکان عکس به همان صورت باقی می ماند و فرقی با زمانی که عکس لود می شود نمی کند. در صورتی که اگراین خصوصیت به کار نرود مرورگر نمی تواند اندازه عکس را تشخیص دهد.
مثال زیر مشخص کردن یک عکس به عنوان submit، با خصوصیت های height و width می باشد:

خصوصیت list در HTML5

خصوصیت list به یک عنصر <datalist> اشاره دارد که شامل گزینه های از پیش تعریف شده برای تگ های <input> است. در واقع یک فیلد متنی از پیش تعریف شده داریم.
مثال زیر یک عنصر <input> با مقدارهای از پیش تعریف شده در یک <datalist> می باشد:

خصوصیت های min و max در HTML5

خصوصیت های min و max حداقل و حداکثر مقدار برای یک عنصر <input> را مشخص می کند. خصوصیت های min و max فقط برای انواع ورودی number، range، date، datetime، datetime local، month، time و week استفاده می شود.
مثال زیر عنصر <input> با مقادیر min و max می باشد:

خصوصیت multiple در HTML5

خصوصیت multiple یک خصوصیت boolean است. این خصوصیت بیان می کند که کاربر می تواند بیش از یک مقدار در یک عنصر <input> وارد کند. این خصوصیت فقط برای انواع ورودی email و file استفاده می شود.

خصوصیت pattern در HTML5

خصوصیت pattern برای عنصر <input> یک عبارت منظم تعریف می کند تا ورودی های آن بر اساس این عبارت ارزیابی شوند. در واقع اعتبار یک فیلد ورودی را مشخص می کند. خصوصیت pattern برای انواع ورودی های text، search، url، tel، email، password به کار می رود.
از خصوصیت title می توان برای توضیح درباره الگو، برای کمک به فهم کاربر استفاده کرد.
مثال زیر یک فیلد متنی است که می تواند فقط شامل ۳ حرف باشد( نه اعداد و کاراکترهای خاص):

خصوصیت placeholder در HTML5

خصوصیت placeholder عبارتی تعیین می کند که بیان می کند که در فیلد مورد نظر چه نوع ورودی انتظار می رود. این خصوصیت یک عبارت را به صورت کم رنگ در داخل فیلد ورودی می نویسد که با کلیک روی آن از بین می رود و فیلد را به صورت خالی نشان می دهد.
خصوصیت placeholder فقط برای انواع ورودی های text، search، url، tel، email، password به کار می رود.
مثال زیر یک فیلد ورودی با متن placeholder می باشد:

خصوصیت required در HTML5

خصوصیت required یک خصوصیت boolean است. این خصوصیت بیان می کند که فیلد مورد نظر قبل از ارسال فرم حتماً باید پر شود. خصوصیت required فقط برای انواع ورودی text، search، url، tel، email، password، date pickers، number، checkbox، radio و file به کار می رود.
مثال زیر فیلد ورودی required است:

خصوصیت step در HTML5

خصوصیت step مقدار فواصل قانونی را برای یک فیلد ورودی تعیین می کند. در واقع مشخص می کند که بین اعداد برای یک عنصر <input> چقدر فاصله باشد.
مثال: اگر step =3 باشد، اعداد مجاز می تواند … ۶ ، ۳ ، ۰ ، ۳- ، ۶- … باشد.
نکته: خصوصیت step را می توان با خصوصیت های min و max به منظور مشخص کردن محدوده ای از اعداد استفاده کرد.
خصوصیت step فقط برای انواع ورودی number، range، date، datetime، datetime local، month، time و week به کار می رود.
مثال زیر یک فیلد ورودی با تعداد فواصل قانونی را مشخص می کند:

2 نظرات شما

  • عاشقانه های لاوین 20

    تیر ۲۵, ۱۳۹۴ at ۸:۴۳ ب.ظ
    سلام ب مدیریت عزیز خسته نباشید من ی مشکل دارم ک نتونستم تو سایت شما پیدا کنم میخواستم یه فایل php رو ویرایش کنم توی اون فایل ی سری اهنگ و پلیر گذاشته شده میخواستم اونارو عوض کنم اگه ممکنه ی کمکی برام بکنین خیلی ممنون lavin20.rzb.ir
  • حمید

    تیر ۲۹, ۱۳۹۴ at ۳:۰۶ ب.ظ
    چی عجب این سایت آپدیت شد :)‌ راستش اولا که php یاد نداشتم میومدم اینجا ولی چیز دیگه ای بهش اضافه نشد :| حتی نظرهام تایید نمیشد :| چی برسته به جواب! با اینکه من اینایی که میگین رو یاد دارم ولی اگه سایتتون آپدیت شه حتما میخونم! بازم از توشون یه چیزی یاد میگیرم :)‌

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *


© 2013 Mobtadi. All rights reserved.
کلیه حقوق مادی و معنوی برای وبسایت مبتدی محفوظ است.