Question

单击订阅按钮时，表单无法正常工作，并且没有任何反应或错误。

请参阅此处的代码：

<section id="contact" class="section section-subscribe bg--position-center no-repeat bg-cover" style="background-image:url(images/subscribe.png)">
      <div class="container">
        <div class="row">
          <div class="col-md-8 col-md-offset-2">
            <div class="subscribe-card bg--position-center no-repeat bg-cover" style="background-image:url(images/mail.png)">
              <header>
                <h3 class="text-center"><span class="text--semi-bold">Subscribe to </span> <span class="text--light">Our Newsletter</span></h3>
              </header>
              <div class="subscription-form">
                <form action="email-subscribe.html">
                  <div class="form-group">
                    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
                    <div class="input-group">
                      <input type="email" class="form-control" id="exampleInputAmount" placeholder="Email">
                      <div class="input-group-addon subscribe-addons">subscribe</div>
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

Answer 1

您必须使用按钮才能提交数据。另外在你的表单中，我添加了一种传递数据的方法，方法=“post”。

请参阅文档。 https://www.w3schools.com/css/css_form.asp

<section id="contact" class="section section-subscribe bg--position-center no-repeat bg-cover" style="background-image:url(images/subscribe.png)">
  <div class="container">
    <div class="row">
      <div class="col-md-8 col-md-offset-2">
        <div class="subscribe-card bg--position-center no-repeat bg-cover" style="background-image:url(images/mail.png)">
          <header>
            <h3 class="text-center"><span class="text--semi-bold">Subscribe to </span> <span class="text--light">Our Newsletter</span></h3>
          </header>
          <div class="subscription-form">
            <form method="post" action="email-subscribe.html">
              <div class="form-group">
                <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
                <div class="input-group">
                  <input type="email" class="form-control" id="exampleInputAmount" placeholder="Email">
                  <input type="submit" value="Subscribe">
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Answer 2

您没有使用输入，只需设置div的样式，将订阅div更改为输入类型=＆＃34;提交＆＃34;如下所示，它会开火。还要在表单中添加一个方法。

＆＃13;

<section id="contact" class="section section-subscribe bg--position-center no-repeat bg-cover" style="background-image:url(images/subscribe.png)">
      <div class="container">
        <div class="row">
          <div class="col-md-8 col-md-offset-2">
            <div class="subscribe-card bg--position-center no-repeat bg-cover" style="background-image:url(images/mail.png)">
              <header>
                <h3 class="text-center"><span class="text--semi-bold">Subscribe to </span> <span class="text--light">Our Newsletter</span></h3>
              </header>
              <div class="subscription-form">
                <form method="post" action="email-subscribe.html">
                  <div class="form-group">
                    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
                    <div class="input-group">
                      <input type="email" class="form-control" id="exampleInputAmount" placeholder="Email">
                      <input type="submit" value="subscribe" class="input-group-addon subscribe-addons">
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

＆＃13;

单击订阅按钮时表单失败

2 个答案: