Как сделать - Контактную форму
Узнать, как создать контактную форму с помощью CSS.
Контактная форма
Создать контактную форму
Шаг 1) Добавить HTML
Используйте элемент <form>, для обработки входных данных. Вы можете узнать больше об этом в нашем учебник PHP. Затем добавьте входные данные (с соответствующей меткой) для каждого поля:
Пример
<div class="container">
<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>
<label for="subject">Сообщение</label>
<textarea id="subject" name="subject" placeholder="Написать нечто.." style="height:200px"></textarea>
<input type="submit" value="Отправить">
</form>
</div>Шаг 2) Добавить CSS:
Пример
/* Входные данные стиля с type="text", выберите элементы и области текста */
input[type=text], select, textarea {
width: 100%; /* Полная ширина */
padding: 12px; /* Немного отступов */
border: 1px solid #ccc; /* Серая граница */
border-radius: 4px; /* Округленные границы */
box-sizing: border-box; /* Убедитесь, что прокладка и ширина остаются на месте */
margin-top: 6px; /* Добавить верхнее поле */
margin-bottom: 16px; /* Нижнее поле */
resize: vertical /* Разрешить пользователю изменять размер текстовой области по вертикали (не по горизонтали) */
}
/* Стиль кнопки Отправить с определенным цветом фона и т. д */
input[type=submit] {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
/* При наведении курсора мыши на кнопку Отправить добавьте более темный зеленый цвет */
input[type=submit]:hover {
background-color: #45a049;
}
/* Добавить цвет фона и некоторые отступы вокруг формы */
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}Редактор кода »Совет: Зайдите на наш учебник HTML Форма, чтобы узнать больше о формах HTML.
Совет: Зайдите на наш учебник CSS Форма, чтобы узнать больше о том, как стилизовать элементы формы.
