اینپوت ها(inputs)
در کنار اینپوت های کلاسیک ارائه شده توسط بوتاسترپ، ما چند سبک برای تکمیل طرح موجود در قالب ایجاد کردیم. استفاده از آنها آسان است و میتوانید به آسانی آنها را از input-components.html کپی کنید. با این حال، چند نکته قابل توجه است.
html
<div class="input-style OPTION-1 OPTION-2 validate-field mb-4">
<i class="fa fa-user"></i>
<input type="name" class="form-control validate-name" id="form1" placeholder="Name">
<label for="form1" class="color-highlight">Name</label>
<i class="fa fa-times disabled invalid color-red-dark"></i>
<i class="fa fa-check disabled valid color-green-dark"></i>
<em>(required)</em>
</div>
چگونه از این اینپوت ها استفاده کنم؟
فایل component-inputs.html را باز کنید و آنها را به دلخواه کپی و پیست کنید. همین امر در مورد چک باکس ها و دکمه های رادیویی موجود نیز صدق میکند.
گزینه های موجود
- جایگذاری
OPTION-1باhas-bordersیاno-borders - جایگذاری
OPTION-2باhas-iconیاno-icon. اگرno-iconرا انتخاب کنید باید خط 2 را حذف کنید - VALIDATE-FIELD: اگر اعتبار سنجی فیلد را نمیخواهید، مطمئن شوید که این attribute و همچنین
validate-attributeرا در خط 3 حذف کنید. هنگام استفاده از فیلدهای بدون اعتبارسنجی، خطوط 5 تا 7 نیز باید حذف شوند.
این فیلدها چگونه اعتبار سنجی میشوند؟
ما از regular expressions(RegEX) برای اعتبارسنجی فیلدها استفاده میکنیم. با این اوصاف، در صورتی که برای اعتبارسنجی به افزونه گستردهتری نیاز دارید، میتوانید با دنبال کردن چگونه کد جاوا اسکریپت خود را اضافه کنم؟ در بخش سوالات متداول، هر پلاگین جی کوئری را که میخواهید اضافه کنید.