Разница между группой ввода и группой форм

В чем разница между тегами <input-group> и <form-group>?

Ответы

Ответ 1

Группы ввода - расширенные элементы управления формой. Используя группы ввода, вы можете легко добавить и добавить текст или кнопки в текстовые входы. Например, вы можете добавить символ $, @для имени пользователя Twitter или что-либо еще по мере необходимости.

Группы форм используются для обертывания меток и управления формой в div, чтобы получить оптимальное расстояние между меткой и элементом управления.

Поэтому используйте как форму, так и группу ввода, как требуется. Упакуйте свой ярлык и ввод в тег группы форм. Если какое-либо из полей ввода необходимо добавить/добавить с помощью кнопки text/button, оберните элемент управления с помощью группы ввода. Ниже приведен пример, объединяющий оба из них. Надеюсь, что это поможет

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<body>
    <div class="container-fluid justify-content-center">
        <form role="form" class="pt-3">
            <div class="form-group row">
                <label for="inputfield1" class="col-sm-2 control-label">Generic input</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="inputfield1" placeholder="Generic input..." />
                </div>
            </div><!-- .form-group -->
            <div class="form-group row">
                <label for="inputfield2" class="col-sm-2 control-label">Money value</label>
                <div class="input-group col-sm-10">
                    <span class="input-group-prepend input-group-text">$</span>
                    <input type="text" class="form-control" id="inputfield2" placeholder="Money value..." />
                    <span class="input-group-append input-group-text">.00</span>
                </div>
            </div><!-- .form-group -->
            <div class="form-group row">
                <label for="inputfield3" class="col-sm-2 control-label">Username</label>
                <div class="input-group col-sm-10">
                    <span class="input-group-prepend input-group-text">@</span>
                    <input type="text" class="form-control" id="inputfield3" placeholder="Username..." />
                </div>
            </div><!-- .form-group -->
        </form>
    </div>
</body>

Ответ 2

Я обновляю таблицу стилей проекта веб-форм ASP.NET для начальной загрузки. Одна заметная разница, форма-группа максимизирует ширину элемента управления. input-group будет использовать только требуемую ширину. Например, строка с шириной столбца 4:

<div class="row">
    <div class="col-md-4">
        <div class="form-group">
            <asp:UpdatePanel ID="UpdatePanel4" runat="server">
                <ContentTemplate>
                    <asp:Label ID="Label3" runat="server" Text="Professional Title" /><br />
                    <asp:DropDownList ID="DropDownList2" runat="server" AutoPostBack="true"
                        OnSelectedIndexChanged="ddlptitle_SelectedIndexChanged" AppendDataBoundItems="true"
                        CssClass="form-control" />
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
    </div>
</div>

введите описание изображения здесь

<div class="row">
    <div class="col-md-4">
        <div class="input-group">
            <asp:UpdatePanel ID="UpdatePanel4" runat="server">
                <ContentTemplate>
                    <asp:Label ID="Label3" runat="server" Text="Professional Title" /><br />
                    <asp:DropDownList ID="DropDownList2" runat="server" AutoPostBack="true"
                        OnSelectedIndexChanged="ddlptitle_SelectedIndexChanged" AppendDataBoundItems="true"
                        CssClass="form-control" />
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
    </div>
</div>

введите описание изображения здесь