Как сделать - Сложенную форму
Узнать, как создать сложенную форму с помощью CSS.
Сложенная форма
Вертикально сложенная форма (где входные данные и метки размещаются друг на друге, а не рядом друг с другом):
Создать сложенную форму
Шаг 1) Добавить HTML
Используйте элемент <form> для обработки входных данных. Вы можете узнать больше об этом в нашем учебнике PHP.
Добавить входные данные (с соответствующей меткой) для каждого поля:
Пример
<form action="/action_page.php">
<label for="fname">Имя</label>
<input type="text" id="fname" name="firstname" placeholder="Ваше имя..">
<label for="lname">Фамилия</label>
<input type="text" id="lname" name="lastname" placeholder="Ваша фамилия..">
<label for="country">Страна</label>
<select id="country" name="country">
<option value="australia">Австралия</option>
<option value="canada">Канада</option>
<option value="usa">США</option>
</select>
<input type="submit" value="Отправить">
</form>
Шаг 2) Добавить CSS:
Пример
/* Стиль ввода */
input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
/* Стиль кнопки "Отправить" */
input[type=submit] {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
/* Добавить цвет фона для кнопки отправки при наведении курсора мыши */
input[type=submit]:hover {
background-color: #45a049;
}
Редактор кода »Совет: Зайдите на наш учебник HTML Форма чтобы узнать больше о формах HTML.
Совет: Зайдите на наш учебник CSS Форма чтобы узнать больше о том, как стилизовать элементы формы.