html – input-group和form-group之间的区别

前端之家收集整理的这篇文章主要介绍了html – input-group和form-group之间的区别前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
标签< input-group>之间的区别是什么?和< form-group>?

解决方法

输入组是扩展的表单控件.使用输入组您可以轻松地将文本或按钮附加到基于文本的输入.例如,您可以为Twitter用户名添加$符号@,或者根据需要添加其他任何内容.

表单组用于在div中包装标签和表单控件,以获得标签和控件之间的最佳间距.

因此,根据需要同时使用表单组和输入组.将标签和输入包装在表单组标签中.如果您的任何输入字段需要添加/附加文本/按钮,请使用input-group包装控件.以下是这两个例子.希望这可以帮助

<body>
        <form class="form-horizontal col-md-8" role="form">
            <div class="form-group">
                <label for="inputfield1" class="col-sm-2 control-label">Input 1</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="inputfield1" placeholder="Input 1">
                </div>
            </div>
            <div class="form-group">
                <label for="inputfield2" class="col-sm-2 control-label">Input 2</label>
                <div class="controls">
                    <div class="input-group col-sm-10">
                        <input type="text" class="form-control" id="inputfield2" placeholder="Input 2">
                        <span class="input-group-addon">.00</span>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label for="inputfield3" class="col-sm-2 control-label">Input 3</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="inputfield3" placeholder="Input     3">
                </div>
        </form>
    </body>

原文链接:https://www.f2er.com/html/225029.html

猜你在找的HTML相关文章