как подать css на форму

Question

У меня есть форма, которая открывается при загрузке сайта, в правом верхнем углу должна быть кнопка закрытия. Я пытался, но результат показан ниже

Это код, который я пробовал:

<div class="form-popup" id="myForm">
    <form action="/action_page.php" class="form-container">
      <h1>Admission Form</h1>
      <button type="button" class="btn cancel" onclick="closeForm()">X</button>

      <input type="text" placeholder=" Name" name="username" required><br/>

      <input type="email" placeholder="Email" name="email" required>

      <input type="tel" placeholder="Phone" name="phone" required><br/>

      <select class="branches">
        <option value="volvo">Select a branch</option>
        <option value="icse">RCIS,Kalyan Nagar ICSE</option>
        <option value="cbse">RCIS,Kalyan Nagar CBSE</option>
        <option value="mysore">RCIS,Mysuru</option>
        <option value="sarjapur">RCIS,Sarjapur</option>
        <option value="begur">RCIS,Begur</option>
        <option value="mspalya">RCIS,MS Palya</option>
        <option value="chamrajpet">RCIS,Chamrajpet</option>
      </select><br/>

      <input type="text" placeholder="Grade for Applying" name="grade" required><br/>


      <input type="text" placeholder="Date of Birth" name="dob" required><br/>


      <button type="submit" class="btn">Enquire Now</button>
      <!-- <button type="button" class="btn cancel" onclick="closeForm()">X</button> -->
    </form>
  </div>

Это часть CSS:

    .form-container .cancel {
    background-color: white;
    color: black;
  }

Могу ли я узнать, как применить css к кнопке закрытия, которая должна появиться рядом с заголовком

Answer 1

Вам нужно взять кнопку closeForm вне тега формы.

<div class="form-popup" id="myForm">
        <button type="button" class="btn cancel" onclick="closeForm()">X</button>
        <form action="/action_page.php" class="form-container">
          <h1>Admission Form</h1>

          <input type="text" placeholder=" Name" name="username" required><br/>

          <input type="email" placeholder="Email" name="email" required>

          <input type="tel" placeholder="Phone" name="phone" required><br/>

          <select class="branches">
            <option value="volvo">Select a branch</option>
            <option value="icse">RCIS,Kalyan Nagar ICSE</option>
            <option value="cbse">RCIS,Kalyan Nagar CBSE</option>
            <option value="mysore">RCIS,Mysuru</option>
            <option value="sarjapur">RCIS,Sarjapur</option>
            <option value="begur">RCIS,Begur</option>
            <option value="mspalya">RCIS,MS Palya</option>
            <option value="chamrajpet">RCIS,Chamrajpet</option>
          </select><br/>

          <input type="text" placeholder="Grade for Applying" name="grade" required><br/>


          <input type="text" placeholder="Date of Birth" name="dob" required><br/>


          <button type="submit" class="btn">Enquire Now</button>
          <!-- <button type="button" class="btn cancel" onclick="closeForm()">X</button> -->
        </form>
      </div>`enter code here`

Затем вы можете использовать css, чтобы переместить кнопку вправо и присвоить ей положение относительно

* 1005. *

Вам следует подумать об использовании Bootstrap, чтобы облегчить жизнь вашей всплывающей форме. Это одна из многих интерфейсных сред, которые действительно помогают ускорить процесс разработки.

Вы можете импортировать bootstrap на свою страницу, следуя приведенным здесь инструкциям по началу работы, https://getbootstrap.com/docs/4.4/getting-started/introduction/

Bootstrap использует сеточную систему для страницы, которая упрощает визуализацию и верстку вашей страницы. Он также позволяет использовать несколько точек останова, поэтому ваша страница будет хорошо отображаться на экранах любого размера.

Вы можете создать всплывающее модальное окно и добавить «X» для выхода, выполнив следующие инструкции: https://getbootstrap.com/docs/4.0/components/modal/

После создания модального режима вы можете начните включать в нее элементы формы, прочитав это https://getbootstrap.com/docs/4.4/components/forms/

Answer 2

<h1> является блочным элементом, поэтому он будет занимать свою собственную горизонтальную область, а другие элементы будут располагаться sh.

Вы можете перемещать кнопку закрытия вправо и использовать position: relative и top, left для его настройки.

#myForm.form-popup {
  width: 320px
}

.form-container .cancel {
  background-color: white;
  color: black;
}

button.btn.cancel {
  float: right;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  position: relative;
  top: 2px
}

<div class="form-popup" id="myForm">
  <button type="button" class="btn cancel" onclick="closeForm()">✕</button>
  <form action="/action_page.php" class="form-container">
    <h1>Admission Form</h1>

    <input type="text" placeholder=" Name" name="username" required><br/>

    <input type="email" placeholder="Email" name="email" required>

    <input type="tel" placeholder="Phone" name="phone" required><br/>

    <select class="branches">
      <option value="volvo">Select a branch</option>
      <option value="icse">RCIS,Kalyan Nagar ICSE</option>
      <option value="cbse">RCIS,Kalyan Nagar CBSE</option>
      <option value="mysore">RCIS,Mysuru</option>
      <option value="sarjapur">RCIS,Sarjapur</option>
      <option value="begur">RCIS,Begur</option>
      <option value="mspalya">RCIS,MS Palya</option>
      <option value="chamrajpet">RCIS,Chamrajpet</option>
    </select><br/>

    <input type="text" placeholder="Grade for Applying" name="grade" required><br/>

    <input type="text" placeholder="Date of Birth" name="dob" required><br/>

    <button type="submit" class="btn">Enquire Now</button>
    <!-- <button type="button" class="btn cancel" onclick="closeForm()">X</button> -->
  </form>
</div>

Другой способ - использовать positive: relative для контейнера и position: absolute для кнопки, top и right для ее позиционирования:

#myForm.form-popup {
  width: 320px;
  position: relative;
}

.form-container .cancel {
  background-color: white;
  color: black;
}

button.btn.cancel {
  border-radius: 50%;
  width: 24px;
  height: 24px;
  position: absolute;
  top: 2px;
  right: 0;
}

<div class="form-popup" id="myForm">
  <button type="button" class="btn cancel" onclick="closeForm()">✕</button>
  <form action="/action_page.php" class="form-container">
    <h1>Admission Form</h1>

    <input type="text" placeholder=" Name" name="username" required><br/>

    <input type="email" placeholder="Email" name="email" required>

    <input type="tel" placeholder="Phone" name="phone" required><br/>

    <select class="branches">
      <option value="volvo">Select a branch</option>
      <option value="icse">RCIS,Kalyan Nagar ICSE</option>
      <option value="cbse">RCIS,Kalyan Nagar CBSE</option>
      <option value="mysore">RCIS,Mysuru</option>
      <option value="sarjapur">RCIS,Sarjapur</option>
      <option value="begur">RCIS,Begur</option>
      <option value="mspalya">RCIS,MS Palya</option>
      <option value="chamrajpet">RCIS,Chamrajpet</option>
    </select><br/>

    <input type="text" placeholder="Grade for Applying" name="grade" required><br/>

    <input type="text" placeholder="Date of Birth" name="dob" required><br/>

    <button type="submit" class="btn">Enquire Now</button>
    <!-- <button type="button" class="btn cancel" onclick="closeForm()">X</button> -->
  </form>
</div>

Answer 3

Просто вы можете просто использовать в разделе css кнопку закрытия. Это так просто, как это

right: 0

Answer 4

Этого недостаточно для позиционирования кнопки.

Тег h1 имеет определение по умолчанию display:block, поэтому он занимает всю строку.

Обычно кнопки закрытия на модальном Окно будет использовать что-то вроде этого:

.cancel {
   position: absolute;
   top: 20px;
   right: 20px;
}

И на всякий случай, если контейнер не имеет относительной позиции, вы можете добавить

.form-popup {
    position: relative;
}

Answer 5

Попробуйте использовать margin и padding Propert of CSS. Это поможет вам