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

          برنامه نویس 
            بازدید : 68
          سه شنبه 25 تیر 1398
           نظرات (0)
        

تمام عناصر فرم ها در بوت استرپ استایل دهی شده اند. بنابراین باید بدانید این استایل ها به چه شکل هستند. تمام<input> های متنی و <textarea> و عناصر <select> ای که کلاس form-control. را داشته باشند عرض 100 درصد می گیرند.

در واقع بوت استرپ دو نوع فرم به شما ارائه می دهد: فرم های inline و فرم های stacked به معنی انباشته (تمام عرض صفحه را می گیرند).

فرم های stacked

مثال زیر یک فرم stacked می سازد که دو عدد input، یک checkbox و یک دکمه ی submit دارد. همچنین برای اطمینان از اینکه margin ها دست نخورند و صفحه به هم نریزد، هر کدام از عوامل فرم ها (input ها، checkbox ها و …) را در یک عنصر نگهدارنده با کلاس form-group. قرار داده ایم:

 



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
27
28
29
30
31
32
33
34
35

<!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/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
  <h2>Stacked 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="pswd">
    </div>
    <div class="form-group form-check">
      <label class="form-check-label">
        <input class="form-check-input"type="checkbox"name="remember">Remember me
      </label>
    </div>
    <button type="submit"class="btn btn-primary">Submit</button>
  </form>
</div>
 
</body>
</html>

مشاهده ی خروجی در JSBin

فرم های inline

در فرم های inline عوامل فرم روی هم قرار نمی گیرند، بلکه همه از سمت چپ (به طور پیش فرض) چیده می شوند. البته نکته ای بسیار مهم را در ذهن داشته باشید؛ از آن جا که بوت استرپ واکنش گراست، کنار هم قرار گرفتن عوامل فرم به شرطی اجرایی می شود که عرض صفحه از 576px کمتر نشود. اگر عرض صفحه ای کمتر از 576px باشد، تمامی عوامل فرم مانند input ها روی هم قرار خواهند گرفت.

برای ساخت این فرم ها باید کلاس form-inline. را به عنصر <form> اضافه کنید؛ به طور مثال در کد زیر دو عدد input، یک checkbox و یک دکمه ی submit داریم:

 



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
27
28
29
30
31
32

<!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/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
  <h2>Inline form</h2>
  <p>Make the viewport larger than576pxwide tosee that all of the form elements are inline andleft-aligned.On small screens,the form groups will stack horizontally.</p>
  <form class="form-inline"action="/action_page.php">
    <label for="email">Email:</label>
    <input type="email"class="form-control"id="email"placeholder="Enter email"name="email">
    <label for="pwd">Password:</label>
    <input type="password"class="form-control"id="pwd"placeholder="Enter password"name="pswd">
    <div class="form-check">
      <label class="form-check-label">
        <input class="form-check-input"type="checkbox"name="remember">Remember me
      </label>
    </div>
    <button type="submit"class="btn btn-primary">Submit</button>
  </form>
</div>
 
</body>
</html>

مشاهده ی خروجی در JSBin

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

البته اگر به خروجی کد بالا نگاه کنید متوجه خواهید شد که فرم ما به هم چسبیده و فشرده است. اگر از جداکننده های بوت استرپ استفاده کنید، ظاهر فرم بسیار بهتر می شود. به طور مثال کد زیر (قسمت mr-sm-2.) به هر input از سمت راست margin مشخصی اضافه کرده و قسمت mb-2. نیز margin پایین را مشخص می کند. دلیل اینکه برای فرم margin پایین قرار می دهیم این است که اگر فرم از قسمتی شکست و بعضی محتویات آن به خط بعدی منتقل شد به عناصر بالای سرش نچسبد. مثال:

 



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
27
28
29
30
31
32

<!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/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
  <h2>Inline form</h2>
  <p>Make the viewport larger than576pxwide tosee that all of the form elements are inline andleft-aligned.On small screens,the form groups will stack horizontally.</p>
  <form class="form-inline"action="/action_page.php">
    <label for="email2"class="mb-2 mr-sm-2">Email:</label>
    <input type="text"class="form-control mb-2 mr-sm-2"id="email2"placeholder="Enter email"name="email">
    <label for="pwd2"class="mb-2 mr-sm-2">Password:</label>
    <input type="text"class="form-control mb-2 mr-sm-2"id="pwd2"placeholder="Enter password"name="pswd">
    <div class="form-check mb-2 mr-sm-2">
      <label class="form-check-label">
        <input type="checkbox"class="form-check-input"name="remember">Remember me
      </label>
    </div>    
  <button type="submit"class="btn btn-primary mb-2">Submit</button>
  </form>
</div>
 
</body>
</html>

مشاهده ی خروجی در JSBin

اعتبار سنجی فرم ها

شما می توانید از کلاس های اعتبار سنجی مختلفی استفاده کنید تا اشتباهات کاربران در هنگام پر کردن فرم ها را به آن ها متذکر شوید. برای این کار، کلاس was-validated. یا کلاس needs-validation را به عنصر <form> اضافه کنید؛ یکی از آن ها پس از ثبت فرم آن را اعتبار سنجی می کند و دیگری هنگام ورود داده ها. فرم برای نمایش خطا یا موفق بودن دریافت اطلاعات از حاشیه ی سبز یا قرمز استفاده می کند. همچنین کلاس های valid-feedback. و invalid-feedback. برای (در صورت اضافه شدن) به کاربر واضح و دقیق می گویند که کجای کارشان اشتباه بوده است و کدام قسمت نیاز به تصحیح دارد.

مثال زیر با استفاده از was-validated. نوشته شده است. بنابراین قبل از ثبت فرم اشتباهات کاربر را به او متذکر می شود:

 



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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

<!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/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
  <h2>Form Validation</h2>
  <p>Inthisexample,we use<code>.was-validated</code>toindicate what'smissing before submitting the form:</p>
  <form action="/action_page.php"class="was-validated">
    <div class="form-group">
      <label for="uname">Username:</label>
      <input type="text"class="form-control"id="uname"placeholder="Enter username"name="uname"required>
      <div class="valid-feedback">Valid.</div>
      <div class="invalid-feedback">Please fill out thisfield.</div>
    </div>
    <div class="form-group">
      <label for="pwd">Password:</label>
      <input type="password"class="form-control"id="pwd"placeholder="Enter password"name="pswd"required>
      <div class="valid-feedback">Valid.</div>
      <div class="invalid-feedback">Please fill out thisfield.</div>
    </div>
    <div class="form-group form-check">
      <label class="form-check-label">
        <input class="form-check-input"type="checkbox"name="remember"required>Iagree on blabla.
        <div class="valid-feedback">Valid.</div>
        <div class="invalid-feedback">Check thischeckbox tocontinue.</div>
      </label>
    </div>
    <button type="submit"class="btn btn-primary">Submit</button>
  </form>
</div>
 
</body>
</html>

مشاهده ی خروجی در JSBin

مثال زیر با استفاده از needs-validation. نوشته شده است. بنابراین بعد از ثبت فرم اشتباهات را به کاربر می گوید:

 



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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

<!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/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
  <h2>Form Validation</h2>
  <p>Inthisexample,we use<code>.needs-validation</code>,which will add the validation effect AFTER the form has been submitting(ifthere'sanything missing).</p>
  <p>Trytosubmit thisform before filling out the input fields,tosee the effect.</p>
  <form action="/action_page.php"class="needs-validation"novalidate>
    <div class="form-group">
      <label for="uname">Username:</label>
      <input type="text"class="form-control"id="uname"placeholder="Enter username"name="uname"required>
      <div class="valid-feedback">Valid.</div>
      <div class="invalid-feedback">Please fill out thisfield.</div>
    </div>
    <div class="form-group">
      <label for="pwd">Password:</label>
      <input type="password"class="form-control"id="pwd"placeholder="Enter password"name="pswd"required>
      <div class="valid-feedback">Valid.</div>
      <div class="invalid-feedback">Please fill out thisfield.</div>
    </div>
    <div class="form-group form-check">
      <label class="form-check-label">
        <input class="form-check-input"type="checkbox"name="remember"required>Iagree on blabla.
        <div class="valid-feedback">Valid.</div>
        <div class="invalid-feedback">Check thischeckbox tocontinue.</div>
      </label>
    </div>
    <button type="submit"class="btn btn-primary">Submit</button>
  </form>
</div>
 
<script>
// Disable form submissions if there are invalid fields
(function(){
  'use strict';
  window.addEventListener('load',function(){
    // Get the forms we want to add validation styles to
    varforms=document.getElementsByClassName('needs-validation');
    // Loop over them and prevent submission
    varvalidation=Array.prototype.filter.call(forms,function(form){
      form.addEventListener('submit',function(event){
        if(form.checkValidity()===false){
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      },false);
    });
  },false);
})();
</script>
 
</body>
</html>

مشاهده ی خروجی در JSBin

اگر دقت کرده باشید در مثال بالا کمی کد جی کوئری نیز وجود دارد. بدون این کدهای جی کوئری نمی توانید این مثال را عملی کنید.

منبع: روکسو

ارسال نظر برای این مطلب