آشنایی با فرم Input ها و Sizing درBootstrap

ما در این مقاله قصد داریم که form control های bootstrap را با بیان مثال کاربردی آموزش بدهیم.پس برای شروع همراه ما باشید.

form input چیست؟

بوت استرپ تعداد زیادی از گونه های form input و layout option ها و کامپوننت های سفارشی برای ساختن فرم های متنوع فراهم کرده است.

Form control ها

form control های زیر را پشتیبانی میکند:

1)Input

2)Textarea

3)Checkbox

4)Radio

5)Select

Bootstrap Input

بوت استرپ تمام Input های Html5 را پشتیبانی میکند.به عنوان مثال:

text ، password ، datetime ، date ، month ، time ، week ، number ، email ، url ، search وcolor.

اگر آن ها به درستی تعریف نشوند نمیتوانند استایل های متنوع بگیرند.

مثالی از form input

<!DOCTYPE html>    
<html>    
    <head>    
        <meta charset="utf-8">    
        <meta name="viewport" content="width=device-width, initial scale=1">    
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">    
    </head>    
<body>    
        <div class="container">    
            <div class="row">    
                    
                <div class="form-group">    
                    <label for="usr">نام:</label>    
                    <input type="text" class="form-control" id="usr">    
                </div>    
                <div class="form-group">    
                    <label for="pwd">کلمه عبور:</label>    
                    <input type="password" class="form-control" id="pwd">    
                </div>    
            
            </div>    
        </div>    
    <script type="text/javascript" src="js/bootstrap.min.js"></script>    
    <script type="text/css" src="js/jquery"></script>     
</body>    
</html>

خروجی

این خروجی مربوط به input بوت استرپ است.

Textarea

این text area معمولا در comment box ها ، address box ها و غیره استفاده میشوند.

مثالی از text area

<!DOCTYPE html>    
<html>    
    <head>    
        <meta charset="utf-8">    
        <meta name="viewport" content="width=device-width, initial scale=1">    
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">    
    </head>    
<body>    
        <div class="container">    
            <div class="row">    
                <div class="form-group">    
  <label for="comment">پیام:</label>    
  <textarea class="form-control" rows="5" id="comment">    
    
                
            
    <script type="text/javascript" src="js/bootstrap.min.js"></script>    
    <script type="text/css" src="js/jquery"></script>   
</body>  
</html>

خروجی

Checkbox ها

Checkbox معمولا برای انتخاب در بین چندین گزینه استفاده می شود.

مثالی از Checkbox

<!DOCTYPE html>    
<html>    
    <head>    
        <meta charset="utf-8">    
        <meta name="viewport" content="width=device-width, initial scale=1">    
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">    
    </head>    
<body>    
        <div class="container">    
            <div class="row">    
        <div class="checkbox">    
  <label><input type="checkbox" value="">گزینه1</label>    
</div>    
<div class="checkbox">    
  <label><input type="checkbox" value="">گزینه2</label>    
</div>    
<div class="checkbox">    
  <label><input type="checkbox" value="">گزینه3</label>    
</div>    
            </div>    
        </div>    
    <script type="text/javascript" src="js/bootstrap.min.js"></script>    
    <script type="text/css" src="js/jquery"></script>     
</body>    
</html>

خروجی

ChekBox به صورت inline یا خطی استفاده میشود.

در این کلاس به صورت خطی استفاده میشود ، بنابراین check box ها در یک خط ظاهر میشوند.

کلاس checkbox-inline. برای تعیین checkbox خطی استفاده میشود.

مثالی از checkbox های خطی(مثال اول)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial scale=1">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link href="css/bootstrap-rtl.css" rel="stylesheet" />
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="checkbox-inline">
                <label>گزینه1</label><input type="checkbox" value="">
            </div>
            <div class="checkbox-inline">
                <label>گزینه2</label><input type="checkbox" value="">
            </div>
            <div class="checkbox-inline">
                <label>3گزینه </label><input type="checkbox" value="">
            </div>
        </div>
    </div>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script type="text/css" src="js/jquery">
    </script>
</body>
</html>

مثالی از checkbox های خطی(مثال دوم)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial scale=1">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link href="css/bootstrap-rtl.css" rel="stylesheet" />
</head>
<body>
    <div class="container">
        <div class="row">
            <label class="checkbox-inline">گزینه 1</label><input type="checkbox" value="">
            <label class="checkbox-inline">گزینه 2</label><input type="checkbox" value="">
            <label class="checkbox-inline">گزینه 3</label><input type="checkbox" value="">

        </div>
    </div>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script type="text/css" src="js/jquery">
    </script>
</body>
</html>

خروجی

Radio Button ها

Radio Button زمانی که شما میخواهید کاربر فقط یک گزینه را انتخاب کند مورد استفاده قرار میگیرد.

Radio Button معمولا برای شناسایی جنسیت انسان ها مورد استفاده قرار میگیرد (زن و مرد)

مثالی از Radio Button:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial scale=1">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link href="css/bootstrap-rtl.css" rel="stylesheet" />
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="radio">
                <label>مرد</label><input type="radio" name="optradio">
            </div>
            <div class="radio">
                <label>زن</label><input type="radio" name="optradio">
            </div>
            <div class="radio">
                <label>غیره</label><input type="radio" name="optradio">
            </div>
        </div>
    </div>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script type="text/css" src="js/jquery">
    </script>
</body>
</html>

خروجی

Radio button به صورت خطی

برای اینکه Radio button ها در یک قرار بگیرند از کلاس inline استفاده میشود.

کلاس radio-inline. برای معین کردن خطی بودن radio button ها است.

مثال:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial scale=1">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link href="css/bootstrap-rtl.css" rel="stylesheet" />
</head>
<body>
    <div class="container">
        <div class="row">
            <label class="radio-inline">مرد</label><input type="radio" name="optradio">
            <label class="radio-inline">زن</label><input type="radio" name="optradio">
            <label class="radio-inline">غیره</label><input type="radio" name="optradio">
        </div>
    </div>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script type="text/css" src="js/jquery">
    </script>
</body>
</html>

خروجی

Select List

Select List زمانیکه شما میخواهید به کاربر اجازه دهید تا گزینه های مختلف را انتخاب کند مورد استفاده قرار خواهد گرفت.

مثالی از Select List

Static Control

اگر شما میخواهید یک plain text را در کنار یک form label به صورت افقی قرار بدهید ، میتوانید از کلاس form-cotrol-static. استفاده کنید.

که این کلاس باید در داخل تگ <p> قرار بگیرد.

مثالی از static control:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial scale=1">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link href="css/bootstrap-rtl.css" rel="stylesheet" />
</head>
<body >
    <div class="container">
        <div class="row">
            <form class="form-horizontal">
                <div class="form-group">
                    <label class="control-label col-sm-2" for="email">ایمیل:</label>
                    <div class="col-sm-10">
                        <p class="form-control-static">barnamenevisan@gmail.com</p>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script type="text/css" src="js/jquery">
    </script>
</body>
</html>

خروجی

Input Groups

input-group. برای بهبود input با افزودن آیکن ها ، متن یا دکمه در کنار یا پشت input به عنوان یک فیلد برای راهنمایی بیشتر کاربر استفاده می شود.

کلاس input-group-addon. یک ایکن یا متن را برای کمک به کاربر به input اضافه میکند.

کلاس input-group-btn. برای افزودن دکمه در کنار input مانند سرچ بار استفاده میشود.

مثال:

<!DOCTYPE html>    
<html>    
    <head>    
        <meta charset="utf-8">    
        <meta name="viewport" content="width=device-width, initial scale=1">    
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">    
    </head>    
<body>    
        <div class="container">    
            <div class="row">    
<form>    
  <div class="input-group">    
    <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>    
    <input id="email" type="text" class="form-control" name="email" placeholder="Email">    
  </div>    
  <div class="input-group">    
    <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>    
    <input id="password" type="password" class="form-control" name="password" placeholder="Password">    
  </div>    
  <div class="input-group">    
    <span class="input-group-addon">Text</span>    
    <input id="msg" type="text" class="form-control" name="msg" placeholder="Additional Info">    
  </div>    
<div class="input-group">    
    <input type="text" class="form-control" placeholder="Search">    
    <div class="input-group-btn">    
      <button class="btn btn-default" type="submit">    
        <i class="glyphicon glyphicon-search"></i>    
      </button>    
    </div>    
</form>    
</div>    
        </div>    
    <script type="text/javascript" src="js/bootstrap.min.js"></script>    
    <script type="text/css" src="js/jquery"></script>     
</body>    
</html>

خروحی

Input Sizing

Input Sizing در Form

دو نوع Input Sizing داریم که یکی بزرگ و دیگری کوچکتر است.

کلاس .input-lg-* برای نوع بزرگتر استفاده می شود.

کلاس .input-sm-*برای نوع کوچکتر مورد استفاده است.

مثالی از Input Sizing

<!DOCTYPE html>    
<html>    
    <head>    
        <meta charset="utf-8">    
        <meta name="viewport" content="width=device-width, initial scale=1">    
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">    
    </head>    
<body>        
        <div class="container">    
            <div class="row">    
<form>    
  <div class="form-group">    
    <label for="inputsm">Small input</label>    
    <input class="form-control input-sm" id="inputsm" type="text">    
  </div>    
   <div class="form-group">    
    <label for="inputdefault">Default input</label>    
    <input class="form-control" id="inputdefault" type="text">    
  </div>    
  <div class="form-group">    
    <label for="inputlg">Large input</label>    
    <input class="form-control input-lg" id="inputlg" type="text">    
  </div>    
</form>    
</div>    
        </div>    
    <script type="text/javascript" src="js/bootstrap.min.js"></script>    
    <script type="text/css" src="js/jquery"></script>     
</body>    
</html>

خروحی