Формы

Форма 1

<section id="policy-calculation">
  <h2>Расчет страхового полиса</h2>
  <form id="policy-form">
    <label for="insurance-type">Тип страхования:</label>
    <select id="insurance-type" name="insurance-type">
      <option value="auto">Автострахование</option>
      <option value="health">Медицинское страхование</option>
      <option value="property">Страхование имущества</option>
    </select>

    <label for="coverage-amount">Сумма покрытия (руб.):</label>
    <input
      type="number"
      id="coverage-amount"
      name="coverage-amount"
      min="10000"
      step="1000"
    />

    <label for="term">Срок страхования (мес.):</label>
    <input type="number" id="term" name="term" min="1" max="60" />

    <button type="button" id="calculate-btn">Рассчитать</button>
  </form>
  <div id="calculation-result"></div>
</section>

<section id="policy-application">
  <h2>Оформление полиса</h2>
  <form id="application-form">
    <label for="full-name">ФИО:</label>
    <input type="text" id="full-name" name="full-name" required />

    <label for="email">Электронная почта:</label>
    <input type="email" id="email" name="email" required />

    <label for="phone">Телефон:</label>
    <input type="tel" id="phone" name="phone" required />

    <button type="submit">Оформить полис</button>
  </form>
</section>

form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

label {
  font-weight: bold;
}

input,
select,
button {
  padding: 0.5rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button {
  background-color: #0078d7;
  color: white;
  cursor: pointer;
  border: none;
}

button:hover {
  background-color: #005bb5;
}