هنوز هیچ دوره ای اضافه نکرده اید.
آشنایی با صفات عناصر input در HTML
صفت ها اطلاعات اضافی را در مورد عنصر اچ تی ام ال فراهم می آورند. در فصل های قبلی به بعضی از این صفات اشاره کرده و کاربرد آنها را توضیح دادیم. ما در این مقاله قصد داریم صفت های مربوط به عناصر input را به طور کامل به شما عزیزان آمورش دهیم، همراه sitename باشید.
صفت value
مقدار اولیه برای یک فیلد ورودی از طریق این صفت مشخص می شود. در مثال زیر مقدار اولیه برای فیلد ورودی firstname مقدار John تعیین شده است :
به نمونه مثالی که در زیر ذکر شده است توجه کنید :
صفت readonly
بعضی اوقات فیلد های ورودی صرفا برای نمایش یک مقدار به کاربر استفاده می شوند و نباید مقدار آنها توسط کاربر قابل تغییر باشد.
برای رسیدن به این حالت از صفت readonly استفاده می کنیم :
به نمونه مثالی که در زیر ذکر شده است توجه کنید :
صفت disabled
برای نمایش یک فیلد ورودی در حالتی که غیر فعال است از صفت disabled استفاده می کنیم. فیلد های input در حالت غیر فعال ، غیر قابل کلیک و غیر قابل انتخاب بوده و مقادیر آنها در هنگام submit به سمت سرور ارسال نمی شود.
به نمونه مثالی که در زیر ذکر شده است توجه کنید :
نکته : به نحوه ی به کاربردن صفت disabled در مثال دقت کنید. بر خلاف دیگر صفات که از قاعده ی نام / مقدار استفاده می کنند برای استفاده از این صفت به به کاربردن نام آن به تنهایی کافی است.
صفت maxlength در input
حداکثر تعداد کاراکتری که میتوان در یک فیلد ورودی تایپ کرد توسط صفت maxlength تعیین می شود.
در مثال زیر حداکثر تعداد کارکتر برای فیلد firstname مقدار 10 تعیین شده است.
به نمونه مثالی که در زیر ذکر شده است توجه کنید :
دقت داشته باشید که صفت maxlength هشداری را برای زمانی که کاربر از مقدار مجاز تعداد کارکتر عبور کند فراهم نمی آورد و این وظیفه ی شما به عنوان برنامه نویس است که با استفاده از زبان JavaScript این هشدار را برای کاربر فراهم کنید.
صفات در HTML۵
زبان 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
در صفاتی که در قسمت قبل به آنها اشاره کردیم ، صفت autocomplete هم برای عنصر <input> و هم برای عنصر <form> وجود دارد.
صفت autocomplete مشخص می کند که قابلیت تکمیل خودکار برای عناصر <input> و یا <form> وجود داشته باشد یا خیر.
قابلیت تکمیل خودکار به این معنا است که اگر کاربری قبلا مقدار هایی را در عناصری مانند <input> وارد کرده باشد، بار بعدی مرورگر براساس مقادیر قبلی می تواند فیلد ها را پر کند.
وقتی از این صفت برای عنصر <form> استفاده می کنیم autocomplete به تمام عناصر <input> داخل فرم اعمال می شود.
در این حالت میتوان عنصری خاص را با مقدار "autocomplete="off از بقیه متمایز کرد.
نمونه مثال زیر نحوه ی استفاده از صفت autocomplete را نشان می دهد :
در بعضی از مرورگر ها ممکن است برای استفاده از قابلیت تکمیل خودکار نیاز به فعال کردن عملکرد autocomplete باشد.
صفت novalidate
از این صفت برای عنصر <form> استفاده می شود.
فرم ها با استفاده از زبان جاوااسکریپت می توانند قبل از این که به سمت سرور ارسال شوند، اعتبارسنجی شوند. برای جلوگیری از این عمل می توان از صفت novalidate در فرم استفاده کرد.
نمونه کد زیر نحوه ی استفاده از این صفت را نشان می دهد :
این صفت در مرورگر سافاری و اینترنت اکسپلورر 9 و نسخه های قدیمی تر آن پشتیبانی نمی شود.
صفت autofocus
گاهی اوقات نیاز است وقتی کاربر صفحه ای را باز می کند مستقیما فیلد ورودی انتخاب شده باشد. یعنی کاربر نیاز نداشته باشد برای تایپ در فیلد ورودی ابتدا آن را انتخاب کند.
برای رسیدن به چنین امکانی از صفت autofocus استفاده می کنیم.
نمونه مثال زیر نحوه ی استفاده از این صفت را نشان می دهد :
first name:
این صفت در مرورگر اینترنت اکسپلورر 9 و نسخه های قدیمی تر آن پشتیبانی نمی شود.
صفت form
صفت form که برای عناصر input استفاده می شود مشخص می کند که عنصر مورد نظر متعلق به کدام فرم است.
نمونه مثال زیر نحوه ی استفاده از این صفت را نشان می دهد :
last name:
در مثال بالا فیلد ورودی lname متعلق به فرم form1 است. این قابلیت در اینترنت اکسپلورر پشتیبانی نمی شود.
صفت formaction در input
صفت formaction آدرسی از یک صفحه را مشخص می کند که وقتی فرم به سمت سرور ارسال می شود کنترل input توسط آن پردازش می شود.
صفت formaction صفت action عنصر <form> را override می کند.
صفت formaction با صفت های "type="submit و "type="image استفاده می شود.
در نمونه مثال زیر عنصر فرم دارای دو دکمه ی submit با دو اکشن مختلف است :
این صفت در مرورگر اینترنت اکسپلورر 9 و نسخه های قدیمی تر آن پشتیبانی نمی شود.
صفت formenctype
صفت formenctype مشخص می کند که هنگام submit ، داده های فرم چگونه باید انکد شود (تنها برای فرم هایی که از صفت "method="post استفاده می کنند).
صفت formenctype صفت enctype عنصر <form> را override می کند.
صفت formenctype با صفت های "type="submit و "type="image استفاده می شود.
در نمونه مثال زیر وقتی روی دکمه ی سابمیت اولی کلیک شود داده ها به روش پیش فرض انکد شده، درحالی که با کلیک روی دکمه ی سابمیت دوم، داده ها به عنوان "multipart/form-data" انکد می شوند.
به نمونه مثالی که در ذیل ذکر شده است توجه کنید:
این صفت در مرورگر اینترنت اکسپلورر 9 و نسخه های قدیمی تر آن پشتیبانی نمی شود.
صفت formmethod در input
صفت formmethod روش اچ تی ام ال را برای ارسال داده های فرم به یک آدرس مشخص تعریف می کند.
صفت formmethod صفت method عنصر <form> را override میکند.
صفت formmethod با صفت های “type=”submit و “type=”image استفاده می شود.
در نمونه مثال زیر در هنگام استفاده از دکمه ی سابمیت اول داده ها به روش get ارسال می شود ، در حالی که دکمه ی سابمیت دوم داده ها را به روش post ارسال می کند.
به نمونه مثالی که در ذیل ذکر شده است توجه کنید:
این صفت در مرورگر اینترنت اکسپلورر 9 و نسخه های قدیمی تر آن پشتیبانی نمی شود.
صفت formnovalidate
صفت formnovalidate صفت novalidate فرم را لغو می کند. این صفت با استفاده از صفت “type=”submit می تواند مورد استفاده قرار گیرد.
در نمونه مثال زیر یک فرم با دو دکمه submit را نشان می دهد (یکی اعتبارسنجی می کند و دیگری نه) :
به نمونه مثالی که در ذیل ذکر شده است توجه کنید:
این صفت در مرورگر سافاری و اینترنت اکسپلورر 9 و نسخه های قدیمی تر آن پشتیبانی نمی شود.
صفت formtarget در input
صفت formtarget مشخص می کند که پاسخ فرم ارسالی به سمت سرور در کجا نمایش داده شود.
صفت formtarget مقدار صفت target عنصر فرم را لغو می کند.
در نمونه کد زیر یک فرم با دو دکمه سابمیت را نشان می دهد که از دو target مختلف استفاده می کند :
به نمونه مثالی که در ذیل ذکر شده است توجه کنید:
این صفت در مرورگر اینترنت اکسپلورر 9 و نسخه های قدیمی تر آن پشتیبانی نمی شود.
صفت placeholder
از صفت placeholder برای نمایش متنی در فیلد ورودی قبل از ورود داده های کاربر استفاده می شود.
مقدار این صفت هنگام تایپ اولین کارکتر توسط کارکتر از بین می رود.
در نمونه مثال زیر نحو ه ی استفاده از این صفت را نشان می دهد :
first name:
این صفت در مرورگر اینترنت اکسپلورر 9 و نسخه های قدیمی تر آن پشتیبانی نمی شود.
صفت required در input
صفت required مشخص می کند که فیلد ورودی قبل از ارسال به سمت سرور حتما باید دارای مقداری باشد.
در نمونه مثال زیر نحو ه ی استفاده از این صفت را نشان می دهد :
username:
این صفت در مرورگر سافاری و اینترنت اکسپلورر 9 و نسخه های قدیمی تر آن پشتیبانی نمی شود.
امیدوارم که مقاله آشنایی با صفات عناصر input در html برای شما عزیزان مفید بوده باشد.
نظرات
سلام و عرض ادب
این آموزش کامل هست ؟
سلام و عرض ادب
تاجایی که امکانش بود مباحث کلی مطرح شده
سلام خسته نباشید.
ممنون از آموزش خوبتون
قوانین ثبت دیدگاه
نشانی ایمیل شما منتشر نخواهد شد. بخش های مورد نیاز علامت گذاری شده اند *