时间戳

首页 > 解决方案 > 如何将我自己的表单插入到搜索栏准备好的 Codepen 模板中

html - 如何将我自己的表单插入到搜索栏准备好的 Codepen 模板中

问题描述

伙计们，我已经准备好从 CodePen 获取的搜索输入，看起来很棒。

<div class="input-group">
          <input type="text" class="form-control" placeholder="Search this blog">
          <div class="input-group-append">
            <button class="btn btn-secondary" type="submit">
              <i class="fa fa-search"></i>
            </button>
          </div>
            </div>

我的表格效果很好但很丑：

<form method="POST" >
                 {% csrf_token %}
                 {{ form}}
                 <button lass="btn btn-secondary" type="submit"><i class="fa fa-search"></i></button></form>

我想将我的表单合并到现成的 CodePen 模板中，而不是输入。但是，当我尝试时：

<div class="input-group">
           <form method="POST" >
             {% csrf_token %}
             {{ form}}
          <div class="input-group-append">
            <button class="btn btn-secondary" type="submit">
              <i class="fa fa-search"></i> </button></form>
          </div>
            </div>

盒子没有得到第一个的大小并且不起作用。总的来说它没有得到 Codepen 模板的份额和参数。我在这里想念什么？

提前致谢

标签： htmlcssdjangocodepen

解决方案

<div class="input-group">
  <form method="POST">
    {% csrf_token %}
    {{ form}}
    <div class="input-group-append">
      <button class="btn btn-secondary" type="submit">
        <i class="fa fa-search"></i> Submit </button>
    </div>
  </form>
</div>

移动你的</div>前</form>标签。

推荐阅读