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

در خدمت شما هستیم با آموزش Bootstrap 4 جلسه بیست و یکم (Input)

آموزش Bootstrap 4 جلسه بیست و یکم (Input) از سری آموزش های تک قسمتی است.

ساخت input

در جلسه قبلی درباره ساخت فرم ها به صورت کلی صحبت کردیم در این جلسه ریز تر شده و درباره مواردی که در فرم قرار میگیرد صحبت میکنیم انواع باکس ها و ورودی هایی که میتواند در فرم جای گیرد اولین آنها input است . به کمک input و کلاس های بوت استرپ میتوانیم ورودی هایی مثل password و text را بسازیم کلاسی که بوت استرپ برای این نوع ورودی ها در نظر گرفته است form-control است.

از جمله دیگر type هایی که در input جای میگیرند:

• datetime
• datetime-local
• date
• month
• time
• week
• number
• email
• url
• search
• tel
• color

برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

<div class="form-group">
  <label for="usr">Name:</label>
  <input type="text" class="form-control" id="usr">
</div>
<div class="form-group">
  <label for="pwd">Password:</label>
  <input type="password" class="form-control" id="pwd">
</div>

ساخت textarea

معمولا از textarea برای بخش نظر گذاری یا همان comment استفاده میشود. این باکس به شما امکان درج تعداد text بالا را میدهد کلاسی که بوت استرپ برای textarea در نظر گرفته است form-control است دقیقا مشابه input همچنین باید بدانید که textarea تگ باز و بسته دارد برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

<div class="form-group">
  <label for="comment">Comment:</label>
  <textarea class="form-control" rows="5" id="comment"></textarea>
</div>

ساخت checkbox

به کمک checkbox میتوانید چند گزینه را با هم انتخاب کنید کافیست به تگ label کلاس form-check-label و به تگ input کلاس form-check-input را بدهید. همچنین label و input را باید داخل div با کلاس form-check قرار دهید به این روش میتوانید هر تعداد چک باکسی که میخواهید بسازید اگر قصد دارید چک باکسی را غیر فعال کنید کافیست به آن مقدار disabled را بدهید برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

<div class="form-check">
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input" value="">Option 1
  </label>
</div>
<div class="form-check">
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input" value="">Option 2
  </label>
</div>
<div class="form-check">
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input" value="" disabled>Option 3
  </label>
</div>

ساخت checkbox خطی 

در قسمت قبل ساخت چک باکس را یاد گرفتید اما اگر میخواهید این چک باکس را در یک خط بنویسید و اصطلاحا inline checkbox بسازید لازم است کلاس form-check–inline را به تگ div اختصاص دهید یعنی هر div که تگ های label و input داخل آن قرار دارد باید این کلاس در آن قرار گیرد برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

<div class="form-check-inline">
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input" value="">Option 1
  </label>
</div>
<div class="form-check-inline">
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input" value="">Option 2
  </label>
</div>
<div class="form-check-inline">
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input" value="" disabled>Option 3
  </label>
</div>

ساخت radio button

radio button مشابه checkbox است با این تفاوت که تنها میتوانید یک گزینه را انتخاب کنید و بیشتر برای مواردی استفاده میشود که باید یک گزینه را از این باقی موارد انتخاب کنید برای ساخت radio باید input با type بسازید که مقدار آن radio باشد و مقدار name را در همه radio ها یکسان قرار دهید باقی موارد کاملا مشابه چک باکس است و میتوانید از آموزش آن کمک بگیرید برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

<div class="form-check">
  <label class="form-check-label">
    <input type="radio" class="form-check-input" name="optradio">Option 1
  </label>
</div>
<div class="form-check">
  <label class="form-check-label">
    <input type="radio" class="form-check-input" name="optradio">Option 2
  </label>
</div>
<div class="form-check disabled">
  <label class="form-check-label">
    <input type="radio" class="form-check-input" name="optradio" disabled>Option 3
  </label>
</div>

ساخت radio button خطی

مشابه checkbox شما میتوانید رادیو های خود را نیز در یک خط قرار دهید برای این کار کافیست دقیقا مشابه چک باکس خطی عمل کنید و به تگ div خود که مربوط به هر label و input است کلاس form-check-inline را اختصاص دهید به همین راحتی میتوانید radio های خود را در یک لاین قرار دهید برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

<div class="form-check-inline">
  <label class="form-check-label">
    <input type="radio" class="form-check-input" name="optradio">Option 1
  </label>
</div>
<div class="form-check-inline">
  <label class="form-check-label">
    <input type="radio" class="form-check-input" name="optradio">Option 2
  </label>
</div>
<div class="form-check-inline disabled">
  <label class="form-check-label">
    <input type="radio" class="form-check-input" name="optradio" disabled>Option 3
  </label>
</div>

ساخت select list

select list یا همان لیست انتخابی به شما امکان این را میدهد که از لیستی یک یا چند مورد را انتخاب کنید بله درست است در اینجا ۲ حالت وجود دارد انتخاب یک مورد از لیست یا انتخاب چند مورد از لیست ابتدا ساخت خود لیست را بررسی میکنیم برای ساخت لیست باید تگ select را بسازیم و کلاس form-control را به آن بدهیم و گزینه های لیست را با تگ option نمایش میدهیم برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

<div class="form-group">
  <label for="sel1">Select list:</label>
  <select class="form-control" id="sel1">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>
</div>

حالت قبل امکان انتخاب یک مورد از لیست را میدهد اگر قصد انتخاب چند مورد از لیست را دارید باید مقدار multiple را به تگ select اضافه کنید برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

<div class="form-group">
  <label for="sel1">Select list:</label>
  <select multiple class="form-control" id="sel1">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>
</div>

سایز input ها

شما میتوانید input های خود را در ۳ سایز داشته باشید یکی کوچک دیگری متوسط یا همین حالت پیشفرض و سومی حالت بزرگ برای این کار اگر میخواهید سایز کوچک را به input خود بدهید کلاس form-control-sm را به تگ input بدهید اگر قصد دارید حالت بزرگ را به input بدهید کلاس form-control-lg را به تگ input بدهید برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

<input type="text" class="form-control form-control-sm">
<input type="text" class="form-control form-control">
<input type="text" class="form-control form-control-lg">

ساخت plain text

ابتدا لازم است توضیح دهیم plain text چیست اگر میخواهید کادری دور باکس هایتان نباشد باید از حالت plain text استفاده کنید این حالت تنها نوشته داخل input را نمایش میدهد و کادر دور آن را تنها در زمانی که روی آن کلیک میکنید نمایش میدهد برای ساخت این حالت باید کلاس form-control-plaintext را به تگ input خود بدهید برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

<input type="text" class="form-control-plaintext">

ساخت range و file

به عنوان آخرین مبحث range و file را با هم توضیح میدهیم اگر قصد ساخت یک نوار لغزنده را دارید باید از type با مقدار range استفاده کنید و به آن کلاس form–control-range را بدهید و اگر قصد ساخت file را دارید که به کمک آن بتوانید امکان آپلود فایل را ایجاد کنید باید از type با مقدار file و کلاس form-control-file استفاده کنید برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

<input type="range" class="form-control-range">
<input type="file" class="form-control-file border">

برای راحتی شما عزیزان کدی شامل کل آموزش برای شما قرار میدهیم:

<!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 control: input</h2>
  <p>The form below contains two input elements; one of type text and one of type password:</p>
  <form action="/action_page.php">
    <div class="form-group">
      <label for="usr">Name:</label>
      <input type="text" class="form-control" id="usr" name="username">
    </div>
    <div class="form-group">
      <label for="pwd">Password:</label>
      <input type="password" class="form-control" id="pwd" name="password">
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</div>



----------------------------------------------------------------------------

    
<div class="container">
  <h2>Form control: textarea</h2>
  <p>The form below contains a textarea for comments:</p>
  <form action="/action_page.php">
    <div class="form-group">
      <label for="comment">Comment:</label>
      <textarea class="form-control" rows="5" id="comment" name="text"></textarea>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</div>


----------------------------------------------------------------------------
<div class="container">
  <h2>Form control: checkbox</h2>
  <p>The form below contains three checkboxes. The first option is checked by default, and the last option is disabled:</p>
  <form action="/action_page.php">
    <div class="form-check">
      <label class="form-check-label" for="check1">
        <input type="checkbox" class="form-check-input" id="check1" name="option1" value="something" checked>Option 1
      </label>
    </div>
    <div class="form-check">
      <label class="form-check-label" for="check2">
        <input type="checkbox" class="form-check-input" id="check2" name="option2" value="something">Option 2
      </label>
    </div>
    <div class="form-check">
      <label class="form-check-label">
        <input type="checkbox" class="form-check-input" disabled>Option 3
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</div>


----------------------------------------------------------------------------
<div class="container">
  <h2>Form control: inline checkbox</h2>
  <p>The form below contains three inline checkboxes:</p>
  <form action="/action_page.php">
    <div class="form-check-inline">
      <label class="form-check-label" for="check1">
        <input type="checkbox" class="form-check-input" id="check1" name="vehicle1" value="something" checked>Option 1
      </label>
    </div>
    <div class="form-check-inline">
      <label class="form-check-label" for="check2">
        <input type="checkbox" class="form-check-input" id="check2" name="vehicle2" value="something">Option 2
      </label>
    </div>
    <div class="form-check-inline">
      <label class="form-check-label">
        <input type="checkbox" class="form-check-input" disabled>Option 3
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</div>

----------------------------------------------------------------------------
<div class="container">
  <h2>Form control: radio buttons</h2>
  <p>The form below contains three radio buttons. The first option is checked by default, and the last option is disabled:</p>
  <form action="/action_page.php">
    <div class="form-check">
      <label class="form-check-label" for="radio1">
        <input type="radio" class="form-check-input" id="radio1" name="optradio" value="option1" checked>Option 1
      </label>
    </div>
    <div class="form-check">
      <label class="form-check-label" for="radio2">
        <input type="radio" class="form-check-input" id="radio2" name="optradio" value="option2">Option 2
      </label>
    </div>
    <div class="form-check">
      <label class="form-check-label">
        <input type="radio" class="form-check-input" disabled>Option 3
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</div>

----------------------------------------------------------------------------
<div class="container">
  <h2>Form control: inline radio buttons</h2>
  <p>The form below contains three inline radio buttons. The first option is checked by default, and the last option is disabled:</p>
  <form action="/action_page.php">
    <div class="form-check-inline">
      <label class="form-check-label" for="radio1">
        <input type="radio" class="form-check-input" id="radio1" name="optradio" value="option1" checked>Option 1
      </label>
    </div>
    <div class="form-check-inline">
      <label class="form-check-label" for="radio2">
        <input type="radio" class="form-check-input" id="radio2" name="optradio" value="option2">Option 2
      </label>
    </div>
    <div class="form-check-inline">
      <label class="form-check-label">
        <input type="radio" class="form-check-input" disabled>Option 3
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</div>

----------------------------------------------------------------------------
<div class="container">
  <h2>Form control: select</h2>
  <p>The form below contains two dropdown menus (select lists):</p>
  <form action="/action_page.php">
    <div class="form-group">
      <label for="sel1">Select list (select one):</label>
      <select class="form-control" id="sel1" name="sellist1">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
      </select>
      <br>
      <label for="sel2">Mutiple select list (hold shift to select more than one):</label>
      <select multiple class="form-control" id="sel2" name="sellist2">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
      </select>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</div>
----------------------------------------------------------------------------
<div class="container">
  <h2>Form Control Sizing</h2>
  <p>Change the size of the form control with .form-control-sm or .form-control-lg:</p>
  <form action="/action_page.php">
    <div class="form-group">
      <input type="text" class="form-control form-control-sm" placeholder="Small form control" name="text1">
    </div>
    <div class="form-group">
      <input type="text" class="form-control" placeholder="Default form control" name="text2">
    </div>
    <div class="form-group">
      <input type="text" class="form-control form-control-lg" placeholder="Large form control" name="text3">
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</div>
----------------------------------------------------------------------------
<div class="container">
  <h2>Form Control Plain Text</h2>
  <p>Use the .form-control-plaintext if you want to style the input field as plain text:</p>
  <form action="/action_page.php">
    <div class="form-group">
      <input type="text" class="form-control" placeholder="Default form control" name="text1">
    </div>
    <div class="form-group">
      <input type="text" class="form-control-plaintext" placeholder="Form control with plain text" name="text2">
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</div>

----------------------------------------------------------------------------
<div class="container">
  <h2>Form Control Range and File</h2>
  <p>Add the .form-control-range class to input type"range" or .form-control-file to input type"file" to style a range control or a file field with full-width:</p>
  <form action="/action_page.php">
    <div class="form-group">
      <input type="range" class="form-control-range" name="range">
    </div>
    <div class="form-group">
      <input type="file" class="form-control-file border" name="file">
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</div>
<br>
</body>
</html>

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

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

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

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

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