引导程序/标记输入应用于所有表单字段/未正确显示

我在理解如何将Bootstrap/TagsInput正确应用于表单时遇到问题。

我的目标是有一个表单，其中一个字段使用TagsInput，另一个字段不使用它

有两个问题：

1. TagsInput似乎适用于任何表单字段，而不仅仅是我用data role="TagsInput"指定的字段
2. 标签不会停留在表单字段内，因为表单字段总是"刚好在"标签的前面

这是代码：

        var citynames = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        prefetch: {
            url: 'http://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/assets/citynames.json',
            filter: function(list) {
            return $.map(list, function(cityname) {
                return { name: cityname }; });
            }
        }
        });
        citynames.initialize();
        $('input').tagsinput({
        typeaheadjs: {
            name: 'citynames',
            displayKey: 'name',
            valueKey: 'name',
            source: citynames.ttAdapter()
        }
        });

        .tt-query {
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
            -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
                box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
        }
        .tt-hint {
        color: #999
        }
        .tt-menu {    /* used to be tt-dropdown-menu in older versions */
        width: 422px;
        margin-top: 4px;
        padding: 4px 0;
        background-color: #fff;
        border: 1px solid #ccc;
        border: 1px solid rgba(0, 0, 0, 0.2);
        -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
                border-radius: 4px;
        -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
            -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
                box-shadow: 0 5px 10px rgba(0,0,0,.2);
        }
        .tt-suggestion {
        padding: 3px 20px;
        line-height: 24px;
        }
        .tt-suggestion.tt-cursor,.tt-suggestion:hover {
        color: #fff;
        background-color: #0097cf;
        }
        .tt-suggestion p {
        margin: 0;
        }
        
        .bootstrap-tagsinput{
            width: 40%;
            display: block;
        }
        
        .twitter-typeahead {
            width: 40%;
            display: block;            
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap-theme.min.css">    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="http://bootstrap-tagsinput.github.io/bootstrap-tagsinput/dist/bootstrap-tagsinput.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rainbow/1.2.0/themes/github.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.js"></script>
<form class="form-inline" role="form" action="/items/create", method="post">
        <div class="form-group">
            <label for="title">Title (should be no tags input):</label>
            <input type="text" class="form-control" id="title" name="title">
        <div class="form-group">
            <label for="tags"> Tags (should have tags input):</label>
            <input type="text" class="form-control" id="tags" name="tags" data-role="tagsinput">
        <button type="submit" class="btn btn-default"> Submit</button>
    </form>

这是一个带有我的代码的JSFiddle：https://jsfiddle.net/gg6rwmwa/1/

我是JavaScript/CSS的新手，所以任何关于我做错什么的指导都将不胜感激。

我发现了一些类似的stackoverflow问题，但似乎没有一个完全符合这两点（并提供了答案）。

谢谢你的帮助！

<link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap.tagsinput/0.4.2/bootstrap-tagsinput.css" />
<script src="//cdn.jsdelivr.net/bootstrap.tagsinput/0.4.2/bootstrap-tagsinput.min.js"></script>
<form>
  <fieldset class="form-group">
    <label for="formGroupExample">No tags</label>
    <input type="text" class="form-control" id="formGroupExample">
  </fieldset>
  <fieldset class="form-group">
    <label for="formGroupExample2">No tags</label>
    <input type="text" class="form-control" id="formGroupExample2">
  </fieldset>
</form>
<form id="TagsInputForm" method="post" class="form-horizontal">
    <div class="form-group">
        <label class="control-label col-sm-2">Tag input</label>
        <div class="col-sm-10">
            <input type="text" name="tags" class="form-control"
                   value="Tag" data-role="tagsinput" />
        </div>
    </div>
    </form>
</form>

$(document).ready(function () {
    $('#TagsInputForm') {
        var citynames = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        prefetch: {
            url: 'https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/assets/citynames.json',
            filter: function(list) {
            return $.map(list, function(cityname) {
                return { name: cityname }; });
            }
        }
        });
        citynames.initialize();
        $('input').tagsinput({
        typeaheadjs: {
            name: 'citynames',
            displayKey: 'name',
            valueKey: 'name',
            source: citynames.ttAdapter()
        }}
        });
        });