Как мне создать простую форму подписки, используя html и css, чтобы она располагалась над нижним колонтитулом?

#html #css #forms

#HTML #css #формы

Вопрос:

Как я могу создать простую форму подписки? я пытался использовать эти коды и стиль css, но они не выровнены так, как это должно быть. что не так с тем, что я сделал? может ли кто-нибудь указать мне правильное направление? я хочу, чтобы форма имела цвет фона или изображение и располагалась чуть выше нижнего колонтитула, как мне этого добиться?

 .subscribe-container {
  width: 100%;
  padding-bottom: 5px;
  margin-left: 200px;
  margin-top: -40px;
}

.subscribe-container li {
  display: block;
  float: right;
  width: 60%;
  margin: 0 auto;
}

 <form method="post" class="subscribe-form" action="#">
  <div class="row">
    <div class="col span-1-of-3">
      <ul class="subscribe-container">
        <li class="subscribe-feature">
          <label for="email">Get Updates</label>
        </li>
      </ul>
    </div>
    <div class="col span-2-of-3">
      <ul class="subscribe-container">
        <li class="subscribe-feature">
          <input type="text" class="updates" id="updates" placeholder="Email Address">
        </li>
      </ul>
    </div>
  </div>
  <div class="row">
    <div class="col span-1-of-3">
      <ul class="subscribe-container">
        <li class="subscribe-features">
          <label>amp;nbsp;</label>
        </li>
      </ul>
    </div>
    <div class="col span-2-of-3">
      <ul class="subscribe-container">
        <li class="subscribe-features">
          <input type="submit" class="subscribe-btn" value="Subscribe">
        </li>
      </ul>
    </div>
  </div>
</form>

1. вы используете какой-нибудь фреймворк CSS, например bootstrap?

2. каков ваш ожидаемый результат?

3. @Sfili_81, я все еще новичок в веб-дизайне и написании кода, поэтому, думаю, я использую ее, не зная, или нет. Спасибо, что спросили

4. @Ava мой ожидаемый результат — очень простой for, содержащий только поле адреса электронной почты и кнопку подписки с изображением в фоновом режиме. спасибо , что спросил

Ответ №1:

вам нужно будет определить высоту и ширину вашего класса: subscribe-form, а затем установить цвет фона или изображение, вот так:

 .subscribe-form{
        width: 500px;
        heigth: 500px;
        background-image:url("/your directory");
        //or
        background-color: blue;
     }

Что касается формы, в которой вы движетесь в правильном направлении, ваше «действие» должно ссылаться на какую-то страницу действия, например, в php, и если вам нужно что-то вроде функции javascript, вы можете создать тег script в своем коде, чтобы включить функции javascript, вам нужно будет добавить кнопку type =»submit» в вашем html, чтобы вызывать их, вот так:

     <html>
    <form method="post" class="subscribe-form" action="#" onsubmit="doSomething()">
      <div class="row">
        <div class="col span-1-of-3">
          <ul class="subscribe-container">
            <li class="subscribe-feature">
              <label for="email">Get Updates</label>
            </li>
          </ul>
        </div>
        <div class="col span-2-of-3">
          <ul class="subscribe-container">
            <li class="subscribe-feature">
              <input type="text" class="updates" id="updates" placeholder="Email Address">
            </li>
          </ul>
        </div>
      </div>
      <div class="row">
        <div class="col span-1-of-3">
          <ul class="subscribe-container">
            <li class="subscribe-features">
              <label>amp;nbsp;</label>
            </li>
          </ul>
        </div>
        <div class="col span-2-of-3">
          <ul class="subscribe-container">
            <li class="subscribe-features">
              <input type="submit" class="subscribe-btn" value="Subscribe">
            </li>
          </ul>
        </div>
        <button type="submit">Action form</button>
      </div>
    </form>
    </html>
<script>
    doSomething() {
        window.alert('Thats the action of my form!');
    }
</script>