Вёрстка адаптивной формы

Question

Вёрстка адаптивной формы

Рейтинг: 0Ответов: 1Опубликовано: 08.05.2023

Нужна блочная адаптивная верстка. На фото представлено то, как это должно быть с требованиями:

Не получается сделать именно верхний вариант:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>MAKET_FORM</title>
  <style>
  .F {
      line-height: 32px;
      float: left;
      width: 11em;
      font-size: 20px;
    }
    
    .S {
      line-height: 32px;
      margin-left: 11em;
      font-size: 20px;
    }
    
    #fifth {
      display: inline-block;
      width: 100%;
      font-size: 20px;
    }
    
    #first {
      font-size: 20px;
      width: 100%;
    }
    
    #second {
      font-size: 20px;
      width: 100%;
    }
    
    .R {
      width: 100%;
      font-size: 20px;
    }
    
    #six {
      font-size: 20px;
    }
    
    #third {
      width: 14px;
      height: 14px;
    }
    
    #fourth {
      width: 15px;
      height: 15px;
    }
    
    #fifth {
      font-size: 20px;
    }
    
    p {
      font-size: 20px;
    }
  }
  @media all and (max-width: 600px) {
    .F {
      line-height: 32px;
      font-size: 20px;
    }
    
    .S {
      line-height: 32px;
      font-size: 20px;
      width: auto;
    }
    
    #first {
      position: absolute;
      bottom: 32px;
      left: -11em;
      width: auto;
    }
  }
  </style>
</head>

<body>
  <form method=post>
    <p>Для публикации вашей статьи заполните, пожалуйста, следующую форму&colon;</p><br>
    <div id="P">
      <div class="F">
        <label for="first">Название статьи&colon;</label><br>
        <label for="second">Рубрика&colon;</label><br>
        <label for="third">Публикация&colon;</label><br>
        <label for="fourth">Разрешить комментарии&colon;</label><br>
        <label for="fifth">Текст статьи&colon;<br></label>
      </div>
      <div class="S">
        <input type="text" name="nam" id="first"><br>
        <select name="head" id="second"><br>
          <option value="1" selected id="second">программирование</option><br>
        </select><br>
        <input type="radio" name="answer" value="1" id="third"> на сайте
        <input type="radio" name="answer" value="2" id="third"> в журнале
        <input type="radio" name="answer" value="3" id="third"> на сайте и в журнале<br>
        <input type='checkbox' name='agree' checked id="fourth">
      </div>
      <div class="R">
        <textarea name="mytext" id="fifth"></textarea>
        <input type="submit" value="Опубликовать" id="six">
      </div>
    </div>
  </form>
</body>

</html>

html html5 css3 html-form

Источник: Stack Overflow на русском

Answer 1

▲ 2

Так как форма по внешнему виду представляет собой некую таблицу с выравниванием элементов и текста, то логичнее и верстать её с помощью <table>. Но, более гибкий подход - это использовать сетку (grid). В данном случае, откажитесь от float, старайтесь избегать дублирования ID и не бойтесь дополнительных обёрток и классов.

body { background-color: #eee; }

form {
  display: grid;
  align-items: center;
  justify-content: start;
  grid-template-columns: max-content 1fr;
  gap: .25em;
  width: fit-content;
  padding: 0 .75em .75em;
  border-radius: .25em;
  box-sizing: border-box;
  font-size: 20px;
  background-color: #fefefe;
  box-shadow: 0 12px 9px -6px #0008, inset 0 0 0 3px #fff, inset 0 1px 1px 3px #0004;
}

#first, #second, #fourth, #fifth { box-sizing: border-box; font-size: 20px; }
#first, #fifth { width: 100%; }
#fourth { width: .75em; height: .75em; }
#fifth { resize: vertical; }

.wide { grid-column: 1/-1; }
.group {
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-start;
  justify-content: start;
}

@media all and (max-width: 800px) { /* 600px изменил значение, чтобы были видны изменения */
  form { width: 20em; }
  form > :not(.half) { grid-column: 1/-1; }
  .group { flex-flow: column nowrap; }
}

<form method=post>
  <p class="wide">Для публикации вашей статьи заполните, пожалуйста, следующую форму:</p>
  <label for="first">Название статьи:</label>
  <div><input type="text" name="nam" id="first"></div>
  <label for="second">Рубрика:</label>
  <div>
    <select name="head" id="second">
      <option value="1" selected id="second">программирование</option><br>
    </select>
  </div>
  <label for="third">Публикация:</label>
  <div class="group">
    <label><input type="radio" name="answer" value="1" id="third"> на сайте</label>
    <label><input type="radio" name="answer" value="2"> в журнале</label>
    <label><input type="radio" name="answer" value="3"> на сайте и в журнале</label>
  </div>
  <label for="fourth" class="half">Разрешить комментарии:</label>
  <div class="half"><input type="checkbox" name="agree" checked id="fourth"></div>
  <label for="fifth" class="wide">Текст статьи:</label>
  <textarea name="mytext" id="fifth" class="wide"></textarea>
  <div class="wide"><input type="submit" id="six" value="Опубликовать"></div>
</form>

Вёрстка адаптивной формы

Ответы