آموزش خصوصیات ورودی در HTML

آموزش خصوصیات ورودی در HTML

با جلسه بیست و ششم که جلسه آخر آموزش متنی طراحی وب سایت با Html است در خدمت شما هستیم. در این جلسه آموزش خصوصیات ورودی در HTML رو به شما آموزش میدیم.

آموزش خصوصیات ورودی در HTML

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

فرم‌ها انواع مختلف ورودی مثل عدد، متن، تاریخ، زمان و غیره را دریافت می‌کنند. هر یک از این ورودی‌ها دارای یک نوع خصوصیت یا attribute هستند. در ادامه با انواع خصوصیات ورودی در HTML آشنا می‌شویم.

 

خصوصیت value در HTML

خصوصیت مقدار (value)، مقدار اولیه برای یک فیلد ورودی را مشخص می‌کند:

 

خصوصیت readonly در HTML

خصوصیت readonly مشخص می‌کند که فیلد ورودی فقط خواندنی (غیر قابل تغییر) باشد:

 

خصوصیت disabled در Html

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

 

خصوصیت size در HTML

خصوصیت size اندازه بر حسب کاراکتر را برای فیلد ورودی مشخص می‌کند:

 

خصوصیت maxlength در HTML

خصوصیت maxlength حداکثر طول مجاز برای فیلد ورودی را مشخص می‌کند:

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

 

انواع مختلف خصوصیات در HTML5

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

  1. autocomplete
  2. autofocus
  3. form
  4. formaction
  5. formenctype
  6. formmethod
  7. formmethod
  8. formnovalidate
  9. formtarget
  10. height and width
  11. list
  12. min and max
  13. multiple
  14. pattern (regexp)
  15. placeholder
  16. required
  17. step

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

  1. autocomplete
  2. novalidate

حتما بخوانید 1 : فیلم آموزش رایگان Html مهندس رحمانی

حتما بخوانید 1 : فیلم آموزش رایگان CSS مهندس رحمانی

خصوصیت autocomplete در HTML

خصوصیت autocomplete مشخص می‌کند که تکمیل خودکار یک فرم یا یک فیلد ورودی فعال یا غیرفعال باشد. وقتی این خصوصیت در حالت فعال باشد مرورگر به صورت خودکار مقادیر ورودی را بر اساس ورودی‌هایی که کاربر قبلا وارد کرده است، کامل می‌کند. می‌توان خصوصیت autocomplete را برای فرم به صورت فعال و برای برخی از فیلدهای ورودی به صورت غیرفعال تنظیم کرد یا بالعکس. این خصوصیت با <form> و انواع ورودی شامل متن، جستجو، url، شماره تلفن، ایمیل، کلمه عبور، datepicker، دامنه و رنگ قابل اجرا است. در مثال زیر خصوصیت autocomplete برای فرم در حالت فعال و برای یک فیلد ورودی در حالت غیر فعال قرار دارد:

این نکته را به یاد داشته باشید که ممکن است در برخی از مرورگرها لازم باشد حتما خصوصیت autocomplete را فعال کنید تا این کد اجرا شود.

 

خصوصیت novalidate در HTML

خصوصیت novalidate یک خصوصیت <form> است. این خصوصیت مشخص می‌کند که داده‌های فرم نباید هنگام ارسال تایید اعتبار شوند. مثال زیر نشان می‌دهد که فرم ارسال شده معتبر شناخته نمی‌شود:

 

خصوصیت autofocus در HTML

خصوصیت autofocus مشخص می‌کند که فیلد ورودی باید در زمان بارگذاری سایت به صورت خودکار در حالت فوکوس قرار داشته باشد. در مثال زیر به صورت خودکار در زمان بارگذاری صفحه تمرکز روی فیلد ورودی “First name” است:

 

خصوصیت form در HTML

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

 

خصوصیت formaction در HTML

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

 

خصوصیت formenctype در HTML

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

 

خصوصیت formmethod در HTML

خصوصیت formmethod روش http برای ارسال داده‌های فرم به action url را تعریف می‌کند. این خصوصیت بر خصوصیت method متعلق به عنصر <form> برتری دارد. این خصوصیت را می‌توان با “type=”submit و “type=”image به کار برد. در مثال زیر، دکمه submit دوم روش http فرم را لغو می‌کند:

 

خصوصیت formnovalidate در HTML

خصوصیت formnovalidate بر خصوصیت novalidate مربوط به عنصر <form> برتری داشته و می‌توان آن را با “type=”submit به کار برد. در مثال زیر، یک فرم با دو دکمه submit (با اعتبارسنجی و بدون اعتبارسنجی) وجود دارد:

 

خصوصیت formtarget در HTML

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

 

خصوصیات height و width در HTML

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

 

خصوصیت list در HTML

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

 

خصوصیات min و max در HTML

این خصوصیات مقادیر حداقل و حداکثر را برای عنصر <input> مشخص کرده و با انواع ورودی شامل عدد، دامنه، تاریخ، datetime-local، ماه، زمان و هفته اجرا می‌شود. مثال زیر عنصرهای <input> با مقادیر min و max را نشان می‌دهد:

 

خصوصیت multiple در HTML

این خصوصیت مشخص می‌کند که کاربر اجازه وارد کردن بیش از یک مقدار را در عنصر <input> دارد. خصوصیت multiple با انواع داده‌های ورودی شامل ایمیل و فایل کار می‌کند. مثال زیر یک فیلد آپلود فایل را نشان می‌دهد که چندین مقدار را می‌پذیرد:

 

خصوصیت pattern در HTML

خصوصیت pattern یک عبارت با قاعده تعریف می‌کند که مقدار عنصر <input> با آن مقایسه و بررسی می‌شود. این خصوصیت با ورودی‌های متن، جستجو، url، تلفن، ایمیل و کلمه عبور کار می‌کند. می‌توانید برای کمک به کاربر از خصوصیت جهانی title برای توصیف الگو استفاده کنید. در مثال زیر یک فیلد ورودی وجود دارد که تنها حاوی سه حرف است (بدون عدد یا کاراکتر خاص):

 

خصوصیت placeholder در HTML

این خصوصیت یک نکته (یک مقدار نمونه یا یک توصیف کوتاه از فرمت) ایجاد می‌کند که مقدار پیش‌بینی شده یک فیلد ورودی را توصیف می‌کند. این نکته قبل از آنکه کاربر مقداری را در فیلد ورودی وارد کند در فیلد نمایش داده می‌شود. خصوصیت placeholder با انواع ورودی شامل متن، جستجو، url، تلفن، ایمیل و کلمه عبور به کار می‌رود. مثال زیر یک فیلد ورودی که دارای متن placeholder است را نشان می‌دهد:

 

خصوصیت required در HTML

این خصوصیت مشخص می‌کند که یک فیلد ورودی حتما باید قبل از ارسال فرم پر شود. معمولا این فیلدهای برای اطلاعات مهم کاربر هستند. این خصوصیت با ورودی‌های متن، جستجو، url، تلفن، ایمیل، کلمه عبور، انتخاب‌کننده تاریخ، عدد، چک باکس، رادیو باتن و فایل استفاده می‌شود. مثال زیر یک فیلد ورودی با خصوصیت required را نشان می‌دهد:

 

خصوصیت step در HTML

این خصوصیت تعداد مجاز مراحل را برای یک عنصر <input> مشخص می‌کند. به عنوان مثال، اگر “step=”3 باشند، اعداد مجاز می‌تواند 3-، 0، 3، 6 و غیره باشند. به یاد داشته باشید که خصوصیت step می‌تواند همراه با خصوصیات max و min برای تولید یک دامنه از مقادیر مجاز به کار رود. این خصوصیت با ورودی‌های عدد، دامنه، تاریخ، datetime-local، ماه، زمان و هفته مورد استفاده قرار می‌‌گیرد. مثال زیر یک فیلد ورودی با وقفه‌های عددی مجاز را نشان می‌دهد:

این هم از آخرین جلسه آموزش Html که به اتمام رسید. امیدوارم این آموزش مورد توجه همراهان عزیز قرار گرفته باشد.

منبع

 

لیست جلسات قبل آموزش Html

  1. آموزش اصول اولیه و عناصر HTML
  2. آموزش کار با خصوصیات(Attribute) و عناوین(Heading) در Html
  3. آموزش کار با پاراگراف و استایل در Html
  4. آموزش کار با قالب بندی متن در Html
  5. آموزش کار با کامنت در HTML
  6. آموزش کار با کامنت در HTML
  7. آموزش کار با رنگ ها در HTML
  8. آموزش کار با تصاویر در HTML
  9. آموزش کار با لینک در HTML
  10. آموزش کار با جدول در HTML
  11. آموزش کار با لیست ها در HTML
  12. آموزش کار با عناصر Block و Inline در HTML
  13. آموزش کار با عنصر Class در HTML
  14. آموزش Html؛ آموزش iframe در HTML
  15. آموزش Html؛ آموزش جاوا اسکریپت در HTML
  16. آموزش کار با عنصر Head در HTML
  17. آموزش Layout در HTML
  18. آموزش طراحی سایت ریسپانسیو در HTML
  19. آموزش عناصر کد کامپیوتر در HTML
  20. آموزش موجودیت (Entities) در HTML
  21. آموزش نمادها (Symbols) در HTML
  22. آموزش کار با Character (کاراکترهای رزرو شده) در HTML
  23. آموزش رمزگذاری URL در HTML
  24. آموزش کامل کار با فرم ها در HTML
  25. آموزش انواع ورودی (Input) در HTML
  26. آموزش خصوصیات ورودی در HTML

حتما بخوانید 1 : فیلم آموزش رایگان Html مهندس رحمانی

حتما بخوانید 1 : فیلم آموزش رایگان CSS مهندس رحمانی