как вставить свою форму в готовый шаблон панели поиска Codepen - PullRequest
Новая
       19

как вставить свою форму в готовый шаблон панели поиска Codepen

0 голосов
/ 10 апреля 2020

Ребята, у меня есть готовый поисковый ввод, который я взял из 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. Что мне здесь не хватает?

Заранее спасибо

1 Ответ

1 голос
/ 11 апреля 2020 
<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>.

...