input fieldset с legend

Question

Я пытаюсь сверстать по заданию. Требование по заданию использовать flex и fieldset. Понимаю, что мне приходится скрывать этот fieldset, я думаю, что он какую-то разметку дает и возможность задать заголовок через label.

Ниже изображения макета.

Вот так получилось у меня:

.reserve__bottom-list {
  display: flex;
  justify-content: space-around;
}

.reserve__list-bottom-double {
  padding-top: 22px;
}

.reserve__list-bottom {
  list-style: none;
}

.reserve__item-bottom input {
  height: 52px;
}

.reserve__name {
  width: 292px;
}

.reserve__list-bottom input:focus {
  outline: none;
  border: #CD06FF 2px solid;
}

.reserve__list-bottom input:active {
  outline: none;
  border: 2px #CD06FF solid;
}

.reserve__name-bottom {
  font-size: 14px;
  line-height: 16px;
}

.reserve__name-double {
  height: 52px;
  margin-bottom: 36px;
}

.reserve__item-left {
  margin-right: 26px;
}

.reserve__name-double {
  width: 126px;
}

.reserve__name-solo {
  width: 292px;
}

.reserve__fieldset-right {
  display: flex;
}

.reserve__button-bottom {
  color: #6C0287;
  padding: 16px 50px;
  font-size: 22px;
  font-weight: bold;
  line-height: 28px;
  border-radius: 10px;
}

<fieldset class="reserve__fieldset reserve__bottom-list">
  <fieldset class="reserve__fieldset reserve__fieldset-left">
    <ul class="reserve__list-bottom reserve__list-bottom-double">
      <li class="reserve__item-bottom reserve__item-bottom-double">
        <input class="reserve__name-double reserve__item-left" type="number" name="date" min="1" max="31" placeholder="Дата">
        <input class="reserve__name-double reserve__item-right" type="number" name="time" min="9" max="20" step="1" placeholder="Время">
      </li>
      <li class="reserve__item-bottom">
        <input class="reserve__name-solo" type="number" name="people" placeholder="Сколько человек" min="1" max="">
      </li>
    </ul>
  </fieldset>
  <fieldset class="reserve__fieldset reserve__fieldset-right">
    <ul class="reserve__list-bottom">
      <li class="reserve__item-bottom">
        <label class="reserve__name-bottom" for="name">Имя</label>
        <input class="reserve__name" type="name" name="name" required>
        <label class="reserve__name-bottom" for="second_name">Фамилия</label>
        <input class="reserve__name" type="name" name="second_name">
      </li>
    </ul>
    <ul class="reserve__list-bottom">
      <li class="reserve__item-bottom">
        <label class="reserve__name-bottom" for="tel">Телефон</label>
        <input class="reserve__name" type="tel" name="tel" required>
        <label class="reserve__name-bottom" for="email">E-mail</label>
        <input class="reserve__name" type="email" name="email" required>
      </li>
      <li class="reserve__item-bottom">
        <button class="reserve__button-bottom" value="order">ЗАБРОНИРОВАТЬ</button>
      </li>
    </ul>
  </fieldset>
</fieldset>

Answer 1

body{
  background-color: #4e184e;
}
.container {
  width: 400px;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  grid-template-rows: repeat(3,1fr);
  gap: 10px;
  grid-auto-flow: row;
  grid-template-areas:
    "date time firstname phone"
    "people people lastname email"
    ". . . button";
}
.container>div{
  display: flex;
  flex-direction: column;
  align-self:end;
}
label{
  color:white;
}
input,
button{
  height:50px;
}

.date { grid-area: date; }

.time { grid-area: time; }

.people { grid-area: people; }

.firstname { grid-area: firstname; }

.lastname { grid-area: lastname; }

.phone { grid-area: phone; }

.email { grid-area: email; }

.button { grid-area: button; }

<div class="container">
  <div class="date">
    <input type="date">
  </div>
  <div class="time">
    <input type="date">
  </div>
  <div class="people">
    <input type="text">
  </div>
  <div class="firstname">
    <label for="firstname">Имя</label>
    <input type="text">
  </div>
  <div class="lastname">
    <label for="lastname">Фамилия</label>
    <input type="text">
  </div>
  <div class="phone">
    <label for="phone">Телефон</label>
    <input type="text">
  </div>
  <div class="email">
    <label for="email">e-mail</label>
    <input type="text">
  </div>
  <div class="button">
    <button>Забронировать</button>
  </div>
</div>

Answer 2

... требование по заданию использовать flex и fieldset.

Запустите сниппет, разверните на всю страницу и измените размер формы, ухватив за правый нижний угол:

form {
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px 30px;
  min-width: min-content;
  max-width: max-content;
  padding: 20px;
  background-color: #440f51;
  /* Only fo example --> */ overflow: hidden; resize: horizontal;
}

fieldset {
  position: relative;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: flex-start;
  gap: 20px;
  width: 190px;
  padding: 0;
  border: none;
}

fieldset label {
  position: absolute;
  font: bold 8px/1em sans-serif;
  color: #fff;
}
label:nth-of-type(1) { top: -10px; }
label:nth-of-type(2) { top: 44px; }

input {
  padding: 7px 14px;
  height: 34px; width: 84px;
  border: none;
  border-radius: 1px;
  box-sizing: border-box;
  font: 10px/1em sans-serif;
}
input:not([type="date"]):not([type="time"]) {
  width: 100%;
}
input[type="button"] {
  display: grid;
  place-items: center;
  color: #6c0287;
  font: bold 12px/1em sans-serif;
  border-radius: 8px;
}
input:active,
input:focus {
  outline: none;
  box-shadow: inset 0 0 1px 2px #cd06ff;
}

<form>
  <fieldset>
    <input type="date" name="date" placeholder="Дата">
    <input type="time" name="time" placeholder="Время">
    <input type="number" name="people" min="1" placeholder="Сколько человек">
  </fieldset>
  <fieldset>
    <label for="name">Имя</label>
    <input type="name" name="name" required>
    <label for="second_name">Фамилия</label>
    <input type="name" name="second_name">
  </fieldset>
  <fieldset>
    <label for="tel">Телефон</label>
    <input type="tel" name="tel" required>
    <label for="email">E-mail</label>
    <input type="email" name="email" required>
    <input type="button" value="ЗАБРОНИРОВАТЬ">
  </fieldset>
</form>

БЭМ и куча обёрток сами по себе чуда не сделают. Внимательно проанализируйте разметку и стили - максимально просто и приближено к нужному результату.

БЛОГ НА HUSL

input fieldset с legend

Ответы (2 шт):