با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش Bootstrap 3 را دنبال می کنند. تمام وب سایت ها برای دریافت اطلاعات از کاربران به فرم ها (forms) و عناصر آن، نیاز دارند. با توجه به کاربرد بسیار مهم و گسترده ی فرم ها، در اغلب وب سایت ها حداقل از یک فرم برای اقداماتی نظیر ثبت نام کاربران و … استفاده می شود. فریم ورک bootstrap نیز طرح هایی را به همراه ویژگی responsive از فرم ها ارائه می دهد. غالبا طرح های form در bootstrap 3 بسیار ساده است. برای آشنایی بیشتر با فرم ها در bootstrap 3 در ادامه ی مباحث آموزش کار با فرم ها در bootstrap 3 با ما همراه باشید.
کنترل ها و عناصر فرم، بطور خودکار از style های فریم ورک bootstrap استفاده می کنند:
تمام عناصر ورودی <input>
, <textarea>
و <select>
دارای کلاس .form-control
و عرضی (width) با مقدار ۱۰۰% هستند.
bootstrap 3 سه طرح کلی از فرم ها را ارائه می دهد:
قوانین استاندارد طرح های فوق، بصورت زیر است:
<div class="form-group">
قرار می گیرند..form-control
به تمام عناصر ورودی <input>
, <textarea>
و <select>
اضافه می شود.مثال زیر چگونگی ایجاد فرم فوق، را نشان می دهد:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <form action="/action_page.php"> <div class="form-group"> <label for="email">ایمیل خود را وارد کنید:</label> <input type="email" class="form-control" id="email"> </div> <div class="form-group"> <label for="pwd">رمز عبور:</label> <input type="password" class="form-control" id="pwd"> </div> <div class="checkbox"> <label><input type="checkbox"> مرا به خاطر بسپار</label> </div> <button type="submit" class="btn btn-default">Submit</button> </form> |
در حالت inline تمام عناصر فرم در یک سطر با ترازبندی چپ قرار می گیرند.
نکته: این حالت فقط برای صفحه نمایش هایی با حداقل عرض ۷۶۸px پاسخگو می باشد.
قوانین فرم های inline:
.form-inline
را به عنصر <form>
اضافه کنید.کد زیر، چگونگی ایجاد یک فرم inline ساده را نشان می دهد:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <form class="form-inline" action="/action_page.php"> <div class="form-group"> <label for="email">Email address:</label> <input type="email" class="form-control" id="email"> </div> <div class="form-group"> <label for="pwd">Password:</label> <input type="password" class="form-control" id="pwd"> </div> <div class="checkbox"> <label><input type="checkbox"> Remember me</label> </div> <button type="submit" class="btn btn-default">Submit</button> </form> |
اگر می خواهید که برچسب(label) ها، باشند. از کلاس .sr-only
در فرم بصورت زیر استفاده کنید:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <form class="form-inline" action="/action_page.php"> <div class="form-group"> <label class="sr-only" for="email">Email address:</label> <input type="email" class="form-control" id="email"> </div> <div class="form-group"> <label class="sr-only" for="pwd">Password:</label> <input type="password" class="form-control" id="pwd"> </div> <div class="checkbox"> <label><input type="checkbox"> Remember me</label> </div> <button type="submit" class="btn btn-default">Submit</button> </form> |
در فرم horizontal ،در هر سطری یک کنترل ورودی فرم با برچسب مربوط به آن قرار می گیرد. و عرض فیلدهای ورودی برابر با عرض عنصر والد خواهد بود.
اما در صفحه نمایش های کوچکتر (با عرض کمتر از ۷۶۷px) عرض عناصر فرم بصورت خودکار کوچک می شود.
برای ایجاد فرم horizontal بصورت زیر عمل کنید:
.form-horizontal
را به عنصر <form>
اضافه کنید..control-label
را نیز به عناصر <label>
اضافه کنید.نکته: از کلاسهای grid در bootstrap 3 استفاده کنید تا برچسب ها و گروه های کنترل فرم را در یک طرح افقی ترکیب کنید.
مثال زیر چگونگی ایجاد یک فرم horizontal را مانند نمونه ی فوق، نشان می دهد:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <form class="form-horizontal" action="/action_page.php"> <div class="form-group"> <label class="control-label col-sm-2" for="email">Email:</label> <div class="col-sm-10"> <input type="email" class="form-control" id="email" placeholder="Enter email"> </div> </div> <div class="form-group"> <label class="control-label col-sm-2" for="pwd">Password:</label> <div class="col-sm-10"> <input type="password" class="form-control" id="pwd" placeholder="Enter password"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <div class="checkbox"> <label><input type="checkbox"> Remember me</label> </div> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default">Submit</button> </div> </div> </form> |
مباحث فوق، به منظور آشنایی شما با نمونه ها و طرح های مختلف فرم در bootstrap 3 ارائه شده است. با مرور مباحث آموش فوق، می توانید از طرح های مختلف فرم در bootstrap 3 بر اساس کاربرد هر یک در قالب صفحات وب خود استفاده کنید. امیدواریم که از مباحث آموزش کار با فرم ها (forms) در bootstrap 3 بخوبی استفاد کرده باشید.