هنگام ساخت یک وب سایت، چیزی که باید در اولویت قرار دهید تجربه کاربری است. ویژگی‌های عنصر ورودی اگر اهل توسعه وب هستید، باید با اصطلاح ویژگی‌های عنصر ورودی آشنا باشید.
در این وبلاگ قصد داریم در مورد آن بحث کنیم. من در مورد تگ ورودی و 5 ویژگی ورودی باید بدانید که برای توسعه وب استفاده می شود برای شما توضیح خواهم داد.
Input tag
عنصر HTML ورودی یک برچسب مفید برای ایجاد فرم های مبتنی بر وب تعاملی برای دریافت داده از کاربر است. بسته به دستگاه و عامل کاربر، طیف گسترده ای از ویجت های کنترل داده ورودی در دسترس هستند.
تگ ورودی برای تعداد زیادی از ترکیبات انواع و ویژگی های ورودی بسیار قدرتمند و پیچیده است.
بیایید یک مثال از یک تگ ورودی را در نظر بگیریم. در اینجا یک تگ ورودی گرفتیم تا نامی را وارد کنیم که کاربر بتواند حداقل 4 کاراکتر از نام خود و حداکثر 8 کاراکتر را در آن پر کند.
تصویر زیر نشان می دهد که چگونه کد HTML در یک ویرایشگر نمایش داده می شود.
تصویر زیر نشان می دهد که چگونه خروجی بالا در یک مرورگر نمایش داده می شود.
بنابراین این راهی است که می توانید داده های کاربر را بپذیرید. انواع مختلفی از تگ های ورودی وجود دارد. تعدادی از آنها عبارتند از متن، دکمه، چک باکس، رادیو، تاریخ-محلی، محدوده، جستجو. باید توجه داشته باشید که مقدار پیش فرض ویژگی type “text” است.
توجه به این نکته مهم است که رفتار یک <input> بسته به مقدار ویژگی نوع آن به طور قابل توجهی تغییر می کند. در نتیجه، انواع مختلف در صفحات مرجع جداگانه خود توضیح داده شده است. اگر این ویژگی ارائه نشده باشد، از نوع متن به عنوان مقدار پیش فرض استفاده می شود.
Input Attributes
عنصر <Input> به دلیل ویژگی هایش بسیار قدرتمند است. ویژگی type از این موضوع بسیار مهم است. از آنجایی که هر عنصر <input>، صرف نظر از نوع، مبتنی بر رابط HTMLInputElement است، این به این دلیل است که هر دو تقریباً مجموعه ای از ویژگی ها را به اشتراک می گذارند. با این حال، در واقعیت، بر نوع خاصی از زیرمجموعه از نوع ورودی تأثیر می گذارد. علاوه بر این، برخی از ویژگی ها بر روی یک نوع ورودی تأثیر می گذارند اما می توانند با ویژگی های مختلف متفاوت باشند.
در اینجا ما برخی از ویژگی های ضروری نوع ورودی را که یک توسعه دهنده باید به خوبی بداند، فهرست کرده ایم:
- Minlength
- بیشترین طول
- Disabled
- فوکوس خودکار
- Placeholder
حداقل طول
این ویژگی فقط با متن، جستجو، تلفن، URL، ایمیل یا نوع رمز عبور در عنصر ورودی کار می کند. ویژگی minlength حداقل کاراکتری را مشخص می کند که باید در کادر ورودی وارد شود، مانند واحدهای کد UTF-16.
این باید یک مقدار صحیح غیر منفی کوچکتر یا مساوی با مقدار مشخص شده در حداکثر طول باشد. اگر مقداری به minlength داده نشود یا مقدار نامعتبری مشخص شود، ورودی حداقل طول ندارد. در صورتی که تعداد کاراکترهای وارد شده در کادر ورودی کمتر از Minlength باشد، ارسال فرم ناموفق خواهد بود.
تصویر زیر نشان می دهد که چگونه کد HTML در یک ویرایشگر نمایش داده می شود.
تصویر زیر نشان می دهد که چگونه خروجی بالا در یک مرورگر نمایش داده می شود.
بیشترین طول
این ویژگی همچنین فقط با متن، جستجو، تلفن، URL، ایمیل یا نوع رمز عبور در عنصر ورودی مانند minilength کار می‌کند. ویژگی maxlength حداکثر کاراکتری را که باید در کادر ورودی وارد شود، مانند واحدهای کد UTF-16 مشخص می کند.
این باید یک مقدار صحیح غیر منفی بزرگتر یا مساوی با مقدار مشخص شده در minlength باشد. اگر مقداری به حداکثر طول داده نشود یا مقدار نامعتبر مشخص شود، ورودی حداکثر طول ندارد.
به طور پیش‌فرض، مرورگرها از وارد کردن تعداد کاراکترها در کادر ورودی در صورتی که بیشتر از حداکثر طول مشخص شده باشد، جلوگیری می‌کنند.
تصویر زیر نشان می دهد که چگونه کد HTML در یک ویرایشگر نمایش داده می شود.
تصویر زیر نشان می دهد که چگونه خروجی بالا در یک مرورگر نمایش داده می شود.
Disabled
این یک ویژگی بولی است. این ویژگی نشان می دهد که کاربر نباید با ورودی تعامل داشته باشد.
ورودی‌های غیرفعال به‌طور خاص با رنگ تیره‌تر نشان می‌دهند که از شکل دیگری نشان می‌دهد که برای استفاده در دسترس نیست. ویژگی disabled رویداد کلیک را دریافت نمی کند و مقدار فرم غیرفعال شده با ارسال فرم ارسال نمی شود.
تصویر زیر نشان می دهد که چگونه کد HTML در یک ویرایشگر نمایش داده می شود.
تصویر زیر نشان می دهد که چگونه خروجی بالا در یک مرورگر نمایش داده می شود.
فوکوس خودکار
این نیز یک ویژگی بولی مانند ویژگی disabled است. این نشان می دهد که وقتی صفحه فرآیند بارگیری را کامل می کند، کادر ورودی مورد توجه قرار می گیرد. یا زمانی که عنصر ورودی حاوی ویژگی فوکوس خودکار نمایش داده می شود.
بیش از یک عنصر ویژگی فوکوس خودکار را به دست نیاورده است. اگر با بیش از یک عنصر قرار داده شود، اولین عنصر دارای ویژگی متمرکز می شود زیرا ورودی های پنهان نمی توانند متمرکز شوند. بنابراین ویژگی فوکوس خودکار را می توان با انواع ورودی پنهان استفاده کرد.
تصویر زیر نشان می دهد که چگونه کد HTML در یک ویرایشگر نمایش داده می شود.
تصویر زیر نشان می دهد که چگونه خروجی بالا در یک مرورگر نمایش داده می شود.
Placeholder
مکان نگهدار یک ویژگی رشته است. این یک ویژگی است که ایده ای از داده هایی که باید در فیلد ورودی وارد شود را ارائه می دهد.
این باید یک کلمه یا عبارت کوتاه باشد که به جای توضیح در مورد نوع داده ای که باید در قسمت ورودی وارد شود اشاره کند. بنابراین، برای مثال، اگر یک فیلد انتظار می‌رود که نام کاربر را بگیرد و برچسب آن “نام” باشد، یک مکان‌نمای مناسب ممکن است “مثلا بروس” باشد.
تصویر زیر نشان می دهد که چگونه کد HTML در یک ویرایشگر نمایش داده می شود.
تصویر زیر نشان می دهد که چگونه خروجی بالا در یک مرورگر نمایش داده می شود.
نتیجه گیری
در این وبلاگ چند ویژگی عنصر ورودی را به شما معرفی کرده ام که باید بدانید، به خصوص اگر توسعه دهنده وب هستید. با استفاده از این ویژگی ها، می توانید عنصر ورودی را به روش های مختلف در فرم HTML یا یک صفحه وب کنترل کنید.
اگرچه تعداد زیادی ویژگی جدید وجود دارد که روز به روز اضافه می شوند، از جمله در HTML، اینها تعدادی از ویژگی های ضروری هستند.
