What three states can bootstrap set for the form?

Bootstrap can set three states for the form: 1. Focus state, which tells the user that they can enter or select things; 2. Disabled state, which tells the user that they cannot enter or select things; 3. Verification Status, which tells the user whether the operation he performed is correct.

The operating environment of this tutorial: Windows 7 system, bootsrap version 3.3.7, DELL G3 computer

There are three main forms control states in Bootstrap: Focus state, disabled state, verification state.

1. Focus state: This state tells the user that they can enter or select something

The focus state passes the pseudo-class ":focus" to achieve.

bootstrap.css corresponding source code:

.form-control:focus {
    border-color: #66afe9;
    outline: 0;   //删除了outline的默认样式
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);  //添加了阴影效果
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
}

Usage: Add the class name "form-control" to the control.

eg:

<input class="form-control" type="text" placeholder="不是焦点状态下效果">
<input class="form-control" type="text" placeholder="焦点状态下效果">

The rendering is as follows: (blue border effect in focus state)

Focus In this state, the effect of the file, radio, and checkbox controls is not exactly the same as that of the ordinary input space, because Bootstrap has done special processing for them.

bootstrap.css corresponding source code:

input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {outline: thin dotted;outline: 5px auto -webkit-focus-ring-color;outline-offset: -2px;
}

2. Disabled state: This state tells the user that they cannot enter or select things

The disabled state is achieved by adding the "disabled" attribute to the form control.
bootstrap.css corresponding source code:

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
    cursor: not-allowed;
    background-color: #eee;
    opacity: 1;
}

Usage: Add the "diabled" attribute to the form control that needs to be disabled.

eg:

<input class="form-control" type="text" placeholder="不是焦点状态下效果">
<input class="form-control" type="text" placeholder="表单已禁用，不能输入"  disabled>

The rendering is as follows:

Description: The background color of the control in the disabled state is gray, and the hand shape becomes a shape that prohibits input. If the form control does not use the class name "form-control", the disabled control only has a hand shape that prohibits input.

PS: In Bootstrap, if the fieldset is set to the "disabled" attribute, the entire field is disabled.

eg:

<form role="form">
    <fieldset disabled>
        <div class="form-group">
            <label for="disabledTextInput">禁用的输入框</label>
            <input type="text" id="disabledTextInput" class="form-control" placeholder="禁止输入">
        </div>
        <div class="form-group">
            <label for="disabledSelect">禁用的下拉框</label>
            <select id="disabledSelect" class="form-control">
                <option>不可选择</option>
            </select>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox">无法选择
            </label>
        </div>
        <button type="submit" class="btnbtn-primary">提交</button>
    </fieldset>
</form>

The effect is as shown below:

PS: For a disabled domain, if the legend is If there is an input box, this input box cannot be disabled.

eg:

<form role="form">
    <fieldset disabled>
        <legend><input type="text" class="form-control" placeholder="我没被禁用" /></legend>
        <div class="form-group">
            <label for="disabledTextInput">禁用的输入框</label>
            <input type="text" id="disabledTextInput" class="form-control" placeholder="禁止输入">
        </div>
        <div class="form-group">
            <label for="disabledSelect">禁用的下拉框</label>
            <select id="disabledSelect" class="form-control">
                <option>不可选择</option>
            </select>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox">无法选择
            </label>
        </div>
        <button type="submit" class="btnbtn-primary">提交</button>
　　</fieldset>
</form>

The rendering is as follows:

3. Verification status: This status tells the user whether their operation is correct

Provides 3 verification status styles in Bootstrap:

① .has-success: Success status (green)

② .has-error: Error status (red)

③ .has-warning: Warning status (yellow)

Usage: in form Just add the corresponding status class name to the -group container.

eg:

<form role="form">
    <div class="form-group has-success">
        <label class="control-label" for="inputSuccess1">成功状态</label>
        <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
    </div>
    <div class="form-group has-warning">
        <label class="control-label" for="inputWarning1">警告状态</label>
        <input type="text" class="form-control" id="inputWarning1" placeholder="警告状态">
    </div>
    <div class="form-group has-error">
        <label class="control-label" for="inputError1">错误状态</label>
        <input type="text" class="form-control" id="inputError1" placeholder="错误状态">
    </div>
</form>

Explanation: It can be seen from the effect that the three styles have the same effect except for the different colors.

In Bootstrap's form validation, different icons will be provided for different states, such as a check mark "√" for success, a cross "×" for error, etc.

If you want the form to display the corresponding icon in different states, you only need to add the class name "has-feedback" in the corresponding state.

PS: The class name "has-feedback" should be used in conjunction with "has-error", "has-warning", and "has-success".

eg:

<form role="form">
    <div class="form-group has-success has-feedback">
        <label class="control-label" for="inputSuccess">成功状态</label>
        <input type="text" class="form-control" id="inputSuccess" placeholder="成功状态" >
        <span class="glyphicon glyphicon-ok form-control-feedback"></span>
    </div>
    <div class="form-group has-warning has-feedback">
        <label class="control-label" for="inputWarning">警告状态</label>
        <input type="text" class="form-control" id="inputWarning" placeholder="警告状态" >
        <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
　　</div>
　　<div class="form-group has-error has-feedback">
        <label class="control-label" for="inputError">错误状态</label>
        <input type="text" class="form-control" id="inputError" placeholder="错误状态" >
        <span class="glyphicon glyphicon-remove form-control-feedback"></span>
　　</div>
</form>

The effect is as follows:

Note: As can be seen from the rendering, the icons are On the right.

Note: The icons in Bootstrap are all made using @face-face, and a span element must be added to the form to achieve this.

eg:

<span class="glyphicon glyphicon-remove form-control-feedback"></span>

[Related recommendation: "bootstrap tutorial"]

The above is the detailed content of What three states can bootstrap set for the form?. For more information, please follow other related articles on the PHP Chinese website!