عناصر فرم

ورودی های استاندارد

ورودی های رایج مانند متن، ایمیل، تلفن، رمز عبور، آدرس و غیره را با استفاد از کلاس .validate-required به ورودی فرم مورد نیاز خود اضافه کنید.

با استفاده از تگ <label> برای کمک بیشتر کاربر، قبل از وارد کردن ورودی، به کاربر کمک می کنید

<label>برچسب وردودی</label>
<input class="validate-required" type="text" name="My Input" placeholder="اسم" />
					

<label>برچسب برای textarea<>
<textarea class="validate-required" name="My Text" rows="4" placeholder="نوشته"></>
					

گوگل reCAPTCHA

با افزودن کلید سایت recaptcha خود به طور خودکار چک باکس "من یک ربات نیستم" را اجرا کنید و با استفاده از اتربیوت data-recaptcha-sitekey به تگ <form> المان، شما میتوانید به راحتی گوگل reCAPTCHA را به فورم های خود اضافه کنید.

به تگ div خود با کلاس recaptcha اضافه کنید، اگر نیازدارید به کنترل موقعیت و عرض المان دارید.

<form data-recaptcha-sitekey="6LewhCIUAAAAACSwFvBDhgtTbw6EnW6e9dip8o2u">
    <div class="col-md-12">
        <div class="recaptcha">
    </div>
</form>
					

برای جزئیات بیشتر، به مستندات استک مراجعه کنید.

ورودی همراه با ایکون

برای استفاده از هر یک از ایکون های استک شما از یک تک div همراه با کلاس .input-icon استفاده کرده و درون اون تگ از تگ <input> استفاده و درون اون تگ از تگ <i> با کلاس .input-icon استفاده شود.
نکته قابل توجه این است که باید درون اون تگ <i> اسم ایکون مورد نظر خود را وارد کنید

برای اینکه راستچین کنید ایکون هارا میتوانید از کلاس input-icon--right استفاده کنید

<div class="input-icon">
	<i class="material-icons">person</i>
	<input type="text" name="input" placeholder="اسم خود را وارد کنید" />
</div>
					

ورودی های چک باکس

ورودی‌های چک باکس را در عنصر input-checkbox با یک فرزند ورودی فرزند و ادامه خرید عنصر برچسب را برای گزینه‌ای شیک‌تر بپیچید. متناوبا، یک دهانه را مستقیماً بعد از آن قرار دهید تا این دو را برای استفاده بصری گروه بندی کنید

<div class="input-checkbox">
	<input id="checkbox" type="checkbox" name="agree" />
	<label for="checkbox"></label>
</div>
<span>Helper text for checkbox</span>
					

سوئیچ ورودی ها

کلاس را اضافه کنید .input-checkbox--switch به .input-checkbox عنصری که ظاهر آن را به یک سوئیچ تغییر دهید.

<div class="input-checkbox input-checkbox--switch">
	<input id="checkbox-switch" type="checkbox" name="agree" />
	<label for="checkbox-switch"></label>
</div>
<span>Helper text for checkbox</span>
					

ورودی های رادیویی

ورودی های رادیویی را در عنصر ورودی-رادیویی با ورودی فرزند و ادامه خرید عنصر برچسب برای گزینه ای شیک تر بپیچید.

<div class="input-radio">
	<span class="input__label">Option 1</span>
	<input id="radio-1" type="radio" name="radio" value="radio1" />
	<label for="radio-1"></label>
</div>
					

ورودی های رادیویی (متن داخل)

ورودی های رادیویی را در عنصر input-radio بپیچید و کلاس را اضافه کنید .input-radio--innerlabel

<div class="input-radio input-radio--innerlabel">
	<input id="radio-1" type="radio" name="radio" value="radio1" />
	<label for="radio-1">Label Text</label>
</div>
					

ورودی ها را انتخاب کنید

ورودی‌های رادیویی را در عنصر انتخاب ورودی بپیچید تا گزینه‌ای شیک با تم سازگارتر داشته باشید.

<div class="input-select">
	<select>
		<option selected="" value="Default">یک گزینه را انتخاب کنید</option>
		<option value="Small">Small</option>
		<option value="Medium">Medium</option>
		<option value="Larger">Large</option>
	</select>
</div>
					

ورودی های تاریخ

کلاس را اضافه کنید .datepicker به یک input[type="text"] عنصری برای ارائه یک انتخابگر تاریخ سازگار با موضوع زمانی که کاربر کلیک یا لمس می کند.

<input type="text" name="date" class="datepicker" placeholder="Choose a date" />
					

ورودی های اعداد

مفید برای مقادیر و بیشتر، بسته بندی کنید input[type="number"] در یک .input-number عنصر برای ارائه کنترل های کمیت سازگار با موضوع. استفاده کنید data-step ویژگی بر روی .input-number عنصر برای کنترل مقدار گام.

<div class="input-number">
	<input type="number" name="quantity" placeholder="تعداد" value="1" min="1" max="10" />
	<div class="input-number__controls">
		<span class="input-number__increase"><i class="stack-up-open"></i></span>
		<span class="input-number__decrease"><i class="stack-down-open"></i></span>
	</div>
</div>
					

قالب بندی فرم ها

با استفاده از کلاس‌های ستون Bootstrap، می‌توانید به راحتی عرض ورودی‌های فرم خود را کنترل کنید.

کد زیر فرمی را با دو ورودی به اندازه (شش ستون) در دو ستون مجاور ارائه می دهد.

<form>
	<div class="col-md-6">
		<label>نام شما: </label>
		<input type="text" name="name" placeholder="نام خود را وارد کنید" />
	</div>
	<div class="col-md-6">
		<label>آدرس ایمیل: </label>
		<input type="email" name="email" placeholder="آدرس ایمیل" />
	</div>
</form>