Урок посвящен созданию страницы обратной связи с формой, включающей проверку данных и отправку письма. Используются AJAX и JavaScript, поэтому тег <form> не потребуется.
Создание страницы и базовой структуры
В папке проекта, рядом с файлом index.html, создайте новый файл feedback.html. Скопируйте код из index.html, заменив заголовок на «Обратная связь» и текст призыва к действию. После изменений, при переходе на feedback.html, вы увидите созданную страницу.
Форма на AJAX и JavaScript
Для формы не используется стандартный HTML-тег <form>. JavaScript и CSS создают поля ввода для имени, электронной почты, темы и сообщения.
<label>Имя:</label><input type="text" id="name"><br>
<label>Email:</label><input type="email" id="email"><br>
<label>Тема:</label><input type="text" id="subject"><br>
<label>Сообщение:</label><textarea id="message"></textarea><br>
<button type="button">Отправить</button>Стилизация формы (CSS)
Добавим стили CSS для элементов формы. Для всех полей input и textarea: ширина 30%, отступ слева 30%, плавающий стиль float: left, скругленные углы (радиус 5 пикселей), рамка 2 пикселя, размер шрифта 15 пикселей, синий цвет текста. Кнопка «Отправить» оформляется аналогично. Высота textarea — 150 пикселей, шрифт — «Arial», sans-serif, placeholder — «Введите ваше сообщение…». Для эффекта фокуса используются стили :focus, для кнопки — стили :hover и курсор cursor: pointer.
input, textarea {
width: 30%;
float: left;
margin-left: 30%;
border-radius: 5px;
border: 2px solid;
font-size: 15px;
color: blue;
}
textarea {
height: 150px;
font-family: "Arial", sans-serif;
placeholder: "Введите ваше сообщение...";
}Создана функциональная страница обратной связи с формой, используя CSS для стилизации и JavaScript для обработки данных (обработка отправки письма не описана). Основное внимание уделено функциональности.