Как сделать - Форму линейную
Узнать, как создать отзывчивую линейную форму с помощью CSS.
Форма линейная
Измените размер окна браузера, чтобы увидеть эффект (метки и входные данные будут складываться друг на друга, а не рядом друг с другом на меньших экранах):
Создать форму линейную
Шаг 1) Добавить HTML
Используйте элемент <form> для обработки входных данных. Вы можете узнать больше об этом в нашем учебнике PHP.
Пример
<form class="form-inline" action="/action_page.php">
<label for="email">Email:</label>
<input type="email" id="email" placeholder="Введите email" name="email">
<label for="pwd">Пароль:</label>
<input type="password" id="pwd" placeholder="Введите пароль" name="pswd">
<label>
<input type="checkbox" name="remember"> Запомнить меня
</label>
<button type="submit">Отправить</button>
</form>Шаг 2) Добавить CSS:
Пример
/* Стиль формы - отображение элементов по горизонтали */
.form-inline {
display: flex;
flex-flow: row wrap;
align-items: center;
}
/* Добавить некоторые поля для каждой метки */
.form-inline label {
margin: 5px 10px 5px 0;
}
/* Стиль полей ввода */
.form-inline input {
vertical-align: middle;
margin: 5px 10px 5px 0;
padding: 10px;
background-color: #fff;
border: 1px solid #ddd;
}
/* Стиль кнопки "Отправить" */
.form-inline button {
padding: 10px 20px;
background-color: dodgerblue;
border: 1px solid #ddd;
color: white;
}
.form-inline button:hover {
background-color: royalblue;
}
/* Добавить отзывчивость - отображение элементов управления формы вертикально, а не горизонтально на экранах шириной менее 800 пикселей */
@media (max-width: 800px) {
.form-inline input {
margin: 10px 0;
}
.form-inline {
flex-direction: column;
align-items: stretch;
}
}Редактор кода »Совет: Зайдите на наш учебник HTML Форма, чтобы узнать больше о формах HTML.
Совет: Зайдите на наш учебник CSS Форма, чтобы узнать больше о том, как стилизовать элементы формы.
