Home > Article > Web Front-end > What are the ways to layout Bootstrap forms? How to create Bootstrap form layout (with code)

What are the ways to layout Bootstrap forms? How to create Bootstrap form layout (with code)

PHPzOriginal: 2018-08-03 16:22:574654browse

What is Bootstrap? Bootstrap is a front-end framework for quickly developing web applications and websites. So, how to create a form with Bootstrap? Bootstrap uses some simple HTML tags and extended classes to create forms of different styles. Let's take a look at how Bootstrap creates forms.

Bootstrap form layout

[Related video recommendations: Bootstrap tutorial]

Bootstrap provides The following types of form layouts: vertical form (default), inline form, horizontal form, vertical or basic form

The basic form structure comes with Bootstrap, and individual form controls automatically receive some global styles. Listed below are the steps to create a basic form:

Add role="form" to the parent

element.

Put labels and controls in a

with class .form-group. This is necessary to obtain optimal spacing.

Add class ="form-control" to all text elements , and <select>. </select>

Example:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>Bootstrap 实例 - 基本表单</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<form role="form">
    <div class="form-group">
        <label for="name">名称</label>
        <input type="text" class="form-control" id="name" 
               placeholder="请输入名称">
    </div>
    <div class="form-group">
        <label for="inputfile">文件输入</label>
        <input type="file" id="inputfile">
        <p class="help-block">这里是块级帮助文本的实例。</p>
    </div>
    <div class="checkbox">
        <label>
            <input type="checkbox"> 选择打勾
        </label>
    </div>
    <button type="submit" class="btn btn-default">提交</button>
</form>
    
</body>
</html>

The running results are as follows:

What are the ways to layout Bootstrap forms? How to create Bootstrap form layout (with code)

##within Inline form

If you need to create a form with all its elements inline, left-aligned, and labels side by side, add class .form-inline to the tag.

Example

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>Bootstrap 实例 - 内联表单</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<form class="form-inline" role="form">
    <div class="form-group">
        <label class="sr-only" for="name">名称</label>
        <input type="text" class="form-control" id="name" 
               placeholder="请输入名称">
    </div>
    <div class="form-group">
        <label class="sr-only" for="inputfile">文件输入</label>
        <input type="file" id="inputfile">
    </div>
    <div class="checkbox">
        <label>
            <input type="checkbox"> 请打勾
        </label>
    </div>
    <button type="submit" class="btn btn-default">提交</button>
</form>

</body>
</html>

The running results are as follows:

What are the ways to layout Bootstrap forms? How to create Bootstrap form layout (with code)

By default, the input in Bootstrap , select and textarea have 100% width. When using inline forms, you need to set a width on the form control.

Using class .sr-only, you can hide the label of the inline form.

Horizontal form

Horizontal forms are different from other forms not only in the number of marks, but also in the form presentation. To create a horizontally laid out form, follow these steps:

Add class .form-horizontal to the parent

element.

Put labels and controls in a

with class .form-group.

Add class .control-label to the label.

Example

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>Bootstrap 实例 - 水平表单</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<form class="form-horizontal" role="form">
    <div class="form-group">
        <label for="firstname" class="col-sm-2 control-label">名</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="firstname" 
                   placeholder="请输入名字">
        </div>
    </div>
    <div class="form-group">
        <label for="lastname" class="col-sm-2 control-label">姓</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="lastname" 
                   placeholder="请输入姓">
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <div class="checkbox">
                <label>
                    <input type="checkbox"> 是否记住
                </label>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default">登录</button>
        </div>
    </div>
</form>

</body>
</html>

The results are as follows

Supported form controls

Bootstrap supports the most common form controls, mainly input, textarea, checkbox, radio and select.

Input box (Input)

The most common form text field is the input box input. Users can enter most necessary form data there. Bootstrap provides support for all native HTML5 input types, including: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel and color. Appropriate type declarations are required in order for the input to be fully styled.

Example

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>Bootstrap 实例 - 输入框</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<form role="form">
    <div class="form-group">
        <label for="name">标签</label>
        <input type="text" class="form-control" placeholder="文本输入">
    </div>
 </form>

</body>
</html>

The running results are as follows:

What are the ways to layout Bootstrap forms? How to create Bootstrap form layout (with code)

Textarea

When you need to enter multiple lines, you can use the text box textarea. Change the rows attribute if necessary (fewer rows = smaller boxes, more rows = larger boxes).

Example

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>Bootstrap 实例 - 文本框</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<form role="form">
    <div class="form-group">
        <label for="name">文本框</label>
        <textarea class="form-control" rows="3"></textarea>
    </div>
</form>

</body>
</html>

The results are as follows:

What are the ways to layout Bootstrap forms? How to create Bootstrap form layout (with code)

##Checkbox and Radio

Checkboxes and radio buttons are used to allow the user to select from a series of preset options.

When creating a form, use a checkbox if you want the user to select several options from a list. If you restrict users to selecting only one option, use radio.

Use .checkbox-inline or .radio-inline class for a series of checkboxes and radio buttons to control them to be displayed on the same line.

The following example demonstrates both types (default and inline):

Example

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>Bootstrap 实例 - 复选框和单选按钮</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<label for="name">默认的复选框和单选按钮的实例</label>
<div class="checkbox">
    <label><input type="checkbox" value="">选项 1</label>
</div>
<div class="checkbox">
    <label><input type="checkbox" value="">选项 2</label>
</div>
<div class="radio">
    <label>
        <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> 选项 1
    </label>
</div>
<div class="radio">
    <label>
        <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">选项 2 - 选择它将会取消选择选项 1
    </label>
</div>
<label for="name">内联的复选框和单选按钮的实例</label>
<div>
    <label class="checkbox-inline">
        <input type="checkbox" id="inlineCheckbox1" value="option1"> 选项 1
    </label>
    <label class="checkbox-inline">
        <input type="checkbox" id="inlineCheckbox2" value="option2"> 选项 2
    </label>
    <label class="checkbox-inline">
        <input type="checkbox" id="inlineCheckbox3" value="option3"> 选项 3
    </label>
    <label class="radio-inline">
        <input type="radio" name="optionsRadiosinline" id="optionsRadios3" value="option1" checked> 选项 1
    </label>
    <label class="radio-inline">
        <input type="radio" name="optionsRadiosinline" id="optionsRadios4"  value="option2"> 选项 2
    </label>
</div>

</body>
</html>

The running results are as follows:

What are the ways to layout Bootstrap forms? How to create Bootstrap form layout (with code)

Select box (Select)

When you want the user to choose from multiple options, but by default only When selecting an option, a selection box is used.

Use

Use multiple="multiple" to allow the user to select multiple options.

下面的实例演示了这两种类型（select 和 multiple）：

例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Bootstrap 实例 - 选择框</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<form role="form">
    <div class="form-group">
        <label for="name">选择列表</label>
        <select class="form-control">
            <option>A</option>
            <option>B</option>
            <option>C</option>
            <option>D</option>
            <option>E</option>
        </select>
        <label for="name">可多选的选择列表</label>
        <select multiple class="form-control">
            <option>A</option>
            <option>B</option>
            <option>C</option>
            <option>D</option>
            <option>E</option>
        </select>
    </div>
</form>

</body>
</html>

运行结果如下：

What are the ways to layout Bootstrap forms? How to create Bootstrap form layout (with code)

静态控件

当您需要在一个水平表单内的表单标签后放置纯文本时，请在

上使用 class .form-control-static。

实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Bootstrap 实例 - 静态控件</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<form class="form-horizontal" role="form">
    <div class="form-group">
        <label class="col-sm-2 control-label">Email</label>
        <div class="col-sm-10">
            <p class="form-control-static">email@example.com</p>
        </div>
    </div>
    <div class="form-group">
        <label for="inputPassword" class="col-sm-2 control-label">密码</label>
        <div class="col-sm-10">
            <input type="password" class="form-control" id="inputPassword" 
                   placeholder="请输入密码">
        </div>
    </div>
</form>

</body>
</html>

运行结果如下：

What are the ways to layout Bootstrap forms? How to create Bootstrap form layout (with code)

表单控件状态

除了 :focus 状态（即，用户点击 input 或使用 tab 键聚焦到 input 上），Bootstrap 还为禁用的输入框定义了样式，并提供了表单验证的 class。

输入框焦点

当输入框 input 接收到 :focus 时，输入框的轮廓会被移除，同时应用 box-shadow。

禁用的输入框 input

如果您想要禁用一个输入框 input，只需要简单地添加disabled 属性，这不仅会禁用输入框，还会改变输入框的样式以及当鼠标的指针悬停在元素上时鼠标指针的样式。

禁用的字段集 fieldset

对

添加 disabled 属性来禁用

内的所有控件。

验证状态

Bootstrap 包含了错误、警告和成功消息的验证样式。只需要对父元素简单地添加适当的 class（.has-warning、 .has-error 或 .has-success）即可使用验证状态。

下面的实例演示了所有控件状态：

实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>Bootstrap 实例 - 表单控件状态</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<form class="form-horizontal" role="form">
    <div class="form-group">
        <label class="col-sm-2 control-label">聚焦</label>
        <div class="col-sm-10">
            <input class="form-control" id="focusedInput" type="text"  value="该输入框获得焦点...">
        </div>
    </div>
    <div class="form-group">
        <label for="inputPassword" class="col-sm-2 control-label">
            禁用
        </label>
        <div class="col-sm-10">
            <input class="form-control" id="disabledInput" type="text" placeholder="该输入框禁止输入..." disabled>
        </div>
    </div>
    <fieldset disabled>
        <div class="form-group">
            <label for="disabledTextInput"  class="col-sm-2 control-label">禁用输入（Fieldset disabled）
            </label>
            <div class="col-sm-10">
                <input type="text" id="disabledTextInput" class="form-control"  placeholder="禁止输入">
            </div>
        </div>
        <div class="form-group">
            <label for="disabledSelect"  class="col-sm-2 control-label">禁用选择菜单（Fieldset disabled）
            </label>
            <div class="col-sm-10">
                <select id="disabledSelect" class="form-control">
                    <option>禁止选择</option>
                </select>
            </div>
        </div>
    </fieldset>
    <div class="form-group has-success">
        <label class="col-sm-2 control-label" for="inputSuccess">
            输入成功
        </label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="inputSuccess">
        </div>
    </div>
    <div class="form-group has-warning">
        <label class="col-sm-2 control-label" for="inputWarning">
            输入警告
        </label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="inputWarning">
        </div>
    </div>
    <div class="form-group has-error">
        <label class="col-sm-2 control-label" for="inputError">
            输入错误
        </label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="inputError">
        </div>
    </div>
</form>

</body>
</html>

运行结果如下：

What are the ways to layout Bootstrap forms? How to create Bootstrap form layout (with code)

表单控件大小

您可以分别使用 class .input-lg 和 .col-lg-* 来设置表单的高度和宽度。下面的实例演示了这点：

实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>Bootstrap 实例 - 表单控件大小</title>
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="//cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<form role="form">
    <div class="form-group">
        <input class="form-control input-lg" type="text" placeholder=".input-lg">
    </div>
    <div class="form-group">
        <input class="form-control" type="text" placeholder="默认输入">
    </div>
    <div class="form-group">
        <input class="form-control input-sm" type="text" placeholder=".input-sm">
    </div>
    <div class="form-group">
    </div>
    <div class="form-group">
        <select class="form-control input-lg">
            <option value="">.input-lg</option>
        </select>
    </div>
    <div class="form-group">
        <select class="form-control">
            <option value="">默认选择</option>
        </select>
    </div>
    <div class="form-group">
        <select class="form-control input-sm">
            <option value="">.input-sm</option>
        </select>
    </div>

    <div class="row">
        <div class="col-lg-2">
            <input type="text" class="form-control" placeholder=".col-lg-2">
        </div>
        <div class="col-lg-3">
            <input type="text" class="form-control" placeholder=".col-lg-3">
        </div>
        <div class="col-lg-4">
            <input type="text" class="form-control" placeholder=".col-lg-4">
        </div>
    </div>
</form>

</body>
</html>

运行结果如下：

What are the ways to layout Bootstrap forms? How to create Bootstrap form layout (with code)

表单帮助文本

Bootstrap 表单控件可以在输入框 input 上有一个块级帮助文本。为了添加一个占用整个宽度的内容块，请在后使用 .help-block。下面的实例演示了这点：

实例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>Bootstrap 实例 - 表单帮助文本</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<form role="form">
    <span>帮助文本实例</span>
    <input class="form-control" type="text" placeholder="">
    <span class="help-block">一个较长的帮助文本块，超过一行，
        需要扩展到下一行。本实例中的帮助文本总共有两行。</span>
</form>

</body>
</html>

运行结果如下：

What are the ways to layout Bootstrap forms? How to create Bootstrap form layout (with code)

What are the ways to layout Bootstrap forms? How to create Bootstrap form layout (with code)

Related articles