آموزش Bootstrap جلسه بیست و چهارم (Forms)

بازدید
12202

دسته بندی :آموزش Bootstrap,آموزش طراحی وب

در خدمت شما هستیم با آموزش Bootstrap جلسه بیست و چهارم (Forms)

آموزش Bootstrap جلسه بیست و چهارم (Forms) از سری آموزش های تک قسمتی است

سلام برنامه در این آموزش درباره رسپانسیو کردن فرم ها صحبت می کند

تقریبا تمامی سایت ها دارای فرم هستند که می تواند فرم تماس یا فرم ورود یا فرم ثبت نام باشد

پس رسپانسیو بودن فرم ها هم موضوع مهمی است که باید به آن پرداخته شود

فرم ها شامل موارد مختلفی مثل input ها ، teaxtarea ، select و … می شوند که هر کدام باید بررسی شوند

تقریبا در تمام موارد بالا ما از کلاس form-control استفاده می کنیم

این کلاس از کلاس های تعریف شده خود بوت استرپ می باشد

فرم ها

همانطور که میدانید کاربرد فرم ها در صفحات وب غیر قابل انکار است تقریبا هر صفحه وب پویایی شامل فرم ها میشود ار فرم ها در مصارف مختلفی استفاده میشود اگر بخواهیم به چند مورد اشاره کنیم موارد زیر پرکاربرد ترین موارد هستند:

خبرنامه ها
فرم های ثبت نام
فرم های ورود
فرم هاس استخدام
فرم های پاپ آپ
فرم های مشخصات فردی
و…

پس همانطور که میبینید بخش های عمده ای از یک سایت را فرم ها تشکیل میدهند مورد حرفه ای تری را اگر بخواهیم بیان کنیم تقریبا هر فیلدی که دریافت اطلاعات در وب دارد تشکیل شده از فرم ها است.

فرم ها در بوت استرپ

موضوع الی بحث ما در این مقاله فرم ها در بوت استرپ هستند همانطور که میدانید بعد از مبحث رسپانسیو فرم های عادی با مشکلات بزرگی مواجه شدند که استفاده از آنها واکنشگرا بودن صفحه را از بین میبرد اما فرمی که امروز آموزش میبینید توسط کلاس های بوت استرپ ساخته میشود و کاملا مناسب سایت های رسپانسیو است.

فرم ها تشکیل شده از input ها textarea ها select ها و باقی موارد هستند که در اینجا ما کلاس form-control که متعلق به بوت استرپ است را هم به آنها اضافه میکنیم. شما به واسطه بوت استرپ میتوانید ۳ نوع فرم ایجاد کنید:

فرم های عمودی که حالت پیشفرض همه فرم ها است
فرم های افقی
فرم های درون خطی

ما هر ۳ حالت فرم را خدمت شما آموزش خواهیم داد و از هرکدام مثال خواهیم زد.

فرم های عمودی

پرکاربرد ترین حالت فرم همین مورد است که با آن انواع فرم لاگین و ثبت نام ساخته میشود ما هم کار را به یک قطعه کد به عنوان مثال شروع میکنیم:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Vertical (basic) form</h2>
  <form action="/action_page.php">
    <div class="form-group">
      <label for="email">Email:</label>
      <input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
    </div>
    <div class="form-group">
      <label for="pwd">Password:</label>
      <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
    </div>
    <div class="checkbox">
      <label><input type="checkbox" name="remember"> Remember me</label>
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
  </form>
</div>

</body>
</html>

در قطعه کد بالا ما یک فرم ساده شامل باکس email و رمز عبور ساختیم action در این فرم به معنی عملی است که باید انجام شود که ما اینجا گفته ایم موارد پر شده را به فایل action_page.php ارسال کند.
از آنجایی که بخش از فرم ما شامل ۱ قسمت است یکی لیبل عنوان و یکی input ما از کلاس form-group برای جمع بستن این ۲ مورد استفاده کرده ایم.

با استفاده از type در قسمت input ما نوع فیلد خود را مشخص میکنیم به عنوان مثال فیلد password زمان وارد کردن رمز محتویات را نشان نمیدهد که این خصوصیت در بخش type برای آن تعریف شده است ما type های متنوعی برای موارد مختلف داریم که در اینجا با password و email آشنا شدید.

همچنین type دیگری با عنوان submit نیز میبینید که به دکمه ارسال اطلاعات معروف است. و برای ارسال اطلاعات درون فرم از آن استفاده میشود و با کلیک روی آن عمل action که قبلا توضیح دادیم اجرا میشود.

فرم های افقی

مورد بعدی فرم های افقی هستند منظور از فرم های افقی فرم هایی است که عنوان فیلد آن در ابتدای آن نوشته میشود در حالت عمودی عنوان و فیلد در خط هایی مجزا نوشته میشدند. بوت استرپ برای شناسایی فرم های افقی از کلاس form-horizontal در تگ form استفاده میکند و همینطور از کلاس control-label در تگ label برای درک بهتر موضوع کد زیر را دنبال کنید:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Horizontal form</h2>
  <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" name="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" name="pwd">
      </div>
    </div>
    <div class="form-group">        
      <div class="col-sm-offset-2 col-sm-10">
        <div class="checkbox">
          <label><input type="checkbox" name="remember"> 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>
</div>

</body>
</html>

در کد بالا از col استفاده شده است برای حفظ ظاهر مناسب در حالت های رسپانسیو اگر نمیدانید col چیست میتوانید آموزش Bootstrap جلسه چهارم (col/row) را مشاهده کنید.

فرم های خطی

این نوع فرم ها تا زمانی که فرم صفحه رسپانسیو را خراب نکنند در یک خط نمایش داده میشوند اصطلاحا پشت سرم هم نوشته میشوند اما اگر در یک خط جا نشوند به حالت فرم عمودی که توضیح دادیم در می آیند برای اینکه این فرم را به شکل فرم بوت استرپ در بیاوریم و به بوت استرپ اعلام کنیم این فرم از نوع خطی است کلاس form-inline در تگ form استفاده میکنیم. برای اینکه بهتر مووع را متوجه شوید از کد زیر استفاده کنید:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Inline form</h2>
  <p>Make the viewport larger than 768px wide to see that all of the form elements are inline, left aligned, and the labels are alongside.</p>
  <form class="form-inline" action="/action_page.php">
    <div class="form-group">
      <label for="email">Email:</label>
      <input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
    </div>
    <div class="form-group">
      <label for="pwd">Password:</label>
      <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
    </div>
    <div class="checkbox">
      <label><input type="checkbox" name="remember"> Remember me</label>
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
  </form>
</div>

</body>
</html>

می توانید دیگر قسمت ها را در لینک زیر ببینید

آموزش Bootstrap جلسه بیست و سوم (navbar)

آموزش Bootstrap جلسه بیست و پنجم (Inputs)

شما می توانید این آموزش را به صورت آنلاین از ویدیو زیر ببینید

و یا آن را در آپارات ببینید

و یا توسط آدرس زیر در یوتیوب ببینید

آموزش ساخت فرم در بوت استرپ در یوتیوب

همچنین در صورت علاقه می توانید این آموزش را از باکس دانلود موجود در زیر همین پست دانلود نمایید

سلام برنامه | HiProgram

مرجع آموزش برنامه نویسی وب و اندروید

مطالب پربازدید

آخرین ارسالی ها

آموزش رفع محدودیت سایز آپلود در وردپرس

آموزش Bootstrap 4 جلسه بیست و هشتم (ScrollSpy)

آموزش Bootstrap 4 جلسه بیست و هفتم (popover)

آموزش Bootstrap 4 جلسه بیست و ششم (Tooltip)

آموزش Bootstrap 4 جلسه بیست و پنجم (Modal)

پکیج های آموزشی

پکیج طراحی قالب وردپرس

اتوماتیک کردن کارها در وردپرس

پکیج طراحی قالب جوملا ۳

آموزش تصویری html5

آموزش تصویری css3