- فرم ها
- ساده
ورودی متن
نمونه کد
<!-- input text -->
<form>
<input type="text" placeholder="Some Text..." class="form-input" required />
<button type="submit" class="btn btn-primary mt-6">Submit</button>
</form>
ورودی رمز
نمونه کد
<!-- input password -->
<form>
<input type="password" placeholder="Enter Password" class="form-input" required />
<button type="submit" class="btn btn-primary mt-6">Submit</button>
</form>
ورودی ایمیل
نمونه کد
<!-- input email -->
<form>
<input type="email" placeholder="email@mail.com" class="form-input" required />
<button type="submit" class="btn btn-primary mt-6">Submit</button>
</form>
ورودی آدرس اینترنتی
نمونه کد
<!-- input url -->
<form>
<input type="url" placeholder="https://dummyurl.com" class="form-input" required />
<button type="submit" class="btn btn-primary mt-6">Submit</button>
</form>
ورودی تلفن
نمونه کد
<!-- input telephone -->
<form>
<input type="tel" placeholder="6-(666)-111-7777" class="form-input" required />
<button type="submit" class="btn btn-primary mt-6">Submit</button>
</form>
ورودی جستجو
نمونه کد
<!-- input search -->
<form>
<input type="search" placeholder="Search..." class="form-input" required />
<button type="button" class="btn btn-primary mt-6">Submit</button>
</form>
ورودی محدوده
نمونه کد<!-- input range --> <form> <input type="range" class="w-full py-2.5" min="0" max="100" /> </form>
ورودی با برچسب
نمونه کد
<!-- input with label -->
<form>
<label for="fullname">Full Name</label>
<input id="fullname" type="text" placeholder="Enter Full Name" value="Alan Green" class="form-input" />
</form>
کنترل های فرم
نمونه کد
<!-- form controls -->
<form class="space-y-5">
<div>
<label for="ctnEmail">Email address</label>
<input id="ctnEmail" type="email" placeholder="name@example.com" class="form-input" required />
</div>
<div>
<label for="ctnSelect1">Example select</label>
<select id="ctnSelect1" class="form-select text-white-dark" required>
<option>Open this select menu</option>
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
</div>
<div>
<label for="ctnSelect2">Example multiple select</label>
<select id="ctnSelect2" multiple="multiple" class="form-multiselect text-white-dark" required>
<option>Open this select menu</option>
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
</div>
<div>
<label for="ctnTextarea">Example textarea</label>
<textarea id="ctnTextarea" rows="3" class="form-textarea" placeholder="Enter Textarea" required></textarea>
</div>
<div>
<label for="ctnFile">Example file input</label>
<input id="ctnFile" type="file" class="form-input file:py-2 file:px-4 file:border-0 file:font-semibold p-0 file:bg-primary/90 ltr:file:mr-5 rtl:file:ml-5 file:text-white file:hover:bg-primary" required />
</div>
<button type="submit" class="btn btn-primary !mt-6">Submit</button>
</form>
فرم شبکه
نمونه کد
<!-- form grid -->
<form>
<div class="grid grid-cols-1 sm:flex justify-between gap-5">
<input type="text" placeholder="نام را وارد کنید" class="form-input" />
<input type="text" placeholder="Enter Last Name" class="form-input" />
</div>
<button type="button" class="btn btn-primary mt-6">Submit</button>
</form>
فرم سطری
نمونه کد
<!-- form row -->
<form>
<div class="grid grid-cols-1 sm:flex justify-between gap-5">
<input type="text" placeholder="نام را وارد کنید" class="form-input" />
<input type="text" placeholder="Enter Last Name" class="form-input" />
</div>
<button type="button" class="btn btn-primary mt-6">Submit</button>
</form>
فرم گروهی
نمونه کد
<!-- form groups -->
<form class="space-y-5">
<div>
<label for="groupFname">نام را وارد کنید</label>
<input id="groupFname" type="text" placeholder="نام را وارد کنید" class="form-input" />
</div>
<div>
<label for="groupLname">Enter Last Name</label>
<input id="groupLname" type="text" placeholder="Enter Last Name" class="form-input" />
</div>
<button type="button" class="btn btn-primary !mt-6">Submit</button>
</form>
تغییر اندازه ستون
نمونه کد
<!-- column sizing -->
<form>
<div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-2">
<input type="text" placeholder="Enter City" class="form-input lg:col-span-2" />
<input type="text" placeholder="Enter State" class="form-input" />
<input type="text" placeholder="Enter Zip" class="form-input" />
</div>
<button type="button" class="btn btn-primary mt-6">Submit</button>
</form>
ورودی با متن کمک (پیش فرض راست)
نمونه کد
<!-- input with help text -->
<form>
<div>
<input type="text" placeholder="نام را وارد کنید" class="form-input" />
<span class="text-white-dark text-xs">این این متن برای تست می باشد.</span>
</div>
</form>
ورودی با متن کمک نشان شده (پیش فرض راست)
نمونه کد
<!-- input with badge help text -->
<form>
<div>
<input type="text" placeholder="نام را وارد کنید" class="form-input mb-2" />
<span class="badge bg-primary text-xs hover:top-0">این این متن برای تست می باشد.</span>
</div>
</form>
ورودی با بلاک متن کمک (پیش فرض راست)
نمونه کد
<!-- input with block badge help text -->
<form>
<div>
<input type="text" placeholder="نام را وارد کنید" class="form-input mb-2" />
<span class="badge bg-primary block text-xs hover:top-0">این این متن برای تست می باشد.</span>
</div>
</form>
متن کمک درخط
نمونه کد
<!-- inline Help text -->
<form>
<div>
<label for="Txtpassword">Password</label>
<input id="Txtpassword" type="password" placeholder="Enter Password" class="form-input w-3/5" />
<span class="text-xs text-white-dark ltr:pl-2 rtl:pr-2">Min 8-20 char</span>
</div>
</form>
فیلدهای ورودی
نمونه کد
<!-- input fields -->
<form>
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
<div>
<label for="inputLarge">Large Input</label>
<input id="inputLarge" type="text" placeholder="Large Input" class="form-input form-input-lg" />
</div>
<div>
<label for="inputDefault">Default Input</label>
<input id="inputDefault" type="text" placeholder="Default Input" class="form-input" />
</div>
<div>
<label for="inputSmall">Small Input</label>
<input id="inputSmall" type="text" placeholder="Small Input" class="form-input form-input-sm" />
</div>
</div>
</form>
فیلد های select
نمونه کد
<!-- select field -->
<form>
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
<div>
<select class="form-select form-select-lg text-white-dark">
<option>Open this select menu</option>
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
</div>
<div>
<select class="form-select text-white-dark">
<option>Open this select menu</option>
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
</div>
<div>
<select class="form-select form-select-sm text-white-dark">
<option>Open this select menu</option>
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
</div>
</div>
</form>
اندازه برچسب فرمهای افقی
نمونه کد
<!-- horizontal form label sizing -->
<form class="space-y-5">
<div class="sm:flex justify-between items-center gap-5 md:gap-20">
<label for="hrLargeinput">Email</label>
<input id="hrLargeinput" type="email" placeholder="name@example.com" class="form-input py-2.5 text-base" />
</div>
<div class="sm:flex justify-between items-center gap-5 md:gap-20">
<label for="hrDefaultinput">Email</label>
<input id="hrDefaultinput" type="email" placeholder="name@example.com" class="form-input" />
</div>
<div class="sm:flex justify-between items-center gap-5 md:gap-20">
<label for="hrSmallinput">Email</label>
<input for="hrSmallinput" type="email" placeholder="name@example.com" class="form-input py-1.5 text-xs" />
</div>
</form>
ورودی فقط خواندنی
نمونه کد
<!-- input readonly -->
<form>
<div>
<input type="text" placeholder="Readonly input here…" class="form-input disabled:pointer-events-none" readonly />
</div>
</form>
فیلدهای غیر فعال
نمونه کد
<!-- disabled fileds -->
<form class="space-y-5">
<div>
<label for="disInput" class="text-white-dark">Disabled input</label>
<input id="disInput" type="text" placeholder="Readonly input here…" class="form-input disabled:pointer-events-none disabled:bg-[#eee] dark:disabled:bg-[#1b2e4b] cursor-not-allowed" disabled />
</div>
<div>
<label for="disSelect" class="text-white-dark">Disabled select menu</label>
<select id="disSelect" class="form-select disabled:pointer-events-none disabled:bg-[#eee] dark:disabled:bg-[#1b2e4b] text-white-dark" disabled>
<option>Open this select menu</option>
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
</div>
<div>
<label class="flex items-center">
<input type="checkbox" class="form-checkbox" disabled />
<span class="text-white-dark"">Can't check this</span>
</label>
</div>
<button type="submit" class="btn btn-primary !mt-6 disabled:pointer-events-none disabled:opacity-60" disabled>Submit</button>
</form>
چک باکس ها
نمونه کد
<!-- checkboxes -->
<form>
<div>
<label class="flex items-center cursor-pointer">
<input type="checkbox" class="form-checkbox" checked />
<span class=" text-white-dark"">Checkbox</span>
</label>
</div>
</form>
رادیو
نمونه کد
<!-- radio -->
<form class="space-y-5">
<div>
<label class="flex items-center cursor-pointer">
<input type="radio" name="custom_radio2" class="form-radio" checked />
<span class="text-white-dark"">Toggle this custom radio</span>
</label>
</div>
<div>
<label class="flex items-center cursor-pointer">
<input type="radio" name="custom_radio2" class="form-radio" />
<span class="text-white-dark"">Or toggle this other custom radio</span>
</label>
</div>
</form>
غیرفعال
نمونه کد
<!-- disabled -->
<form class="space-y-5">
<div>
<label class="flex items-center">
<input type="checkbox" class="form-checkbox" disabled />
<span class=" text-white-dark"">Check this custom checkbox</span>
</label>
</div>
<div>
<label class="flex items-center">
<input type="radio" class="form-radio" disabled />
<span class="text-white-dark"">Toggle this custom radio</span>
</label>
</div>
</form>
لیست select
نمونه کد
<!-- select menu -->
<form>
<div>
<select class="form-select text-white-dark">
<option>Open this select menu</option>
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
</div>
</form>
لیست چند انتخابی
نمونه کد
<!-- multiselect -->
<form>
<div>
<select size="4" multiple="multiple" class="form-multiselect text-white-dark !bg-none">
<option>Open this select menu</option>
<option>One</option>
<option>Two</option>
<option>Three</option>
<option>Four</option>
<option>Five</option>
</select>
</div>
</form>
© روشاک