Форма — один из ключевых элементов сайта. С её помощью пользователи могут отправлять данные: регистрироваться, оформлять заказ, подписываться на рассылку и многое другое. В HTML форма создаётся с помощью тега <form>.
👉 <form action="send.php" method="post"> <input type="text" name="username" placeholder="Имя"> <button type="submit">Отправить</button> </form>
Методы отправки:
- GET — данные передаются в адресной строке.
- POST — данные отправляются скрыто, что безопаснее и подходит для форм с большим количеством информации.
Основные элементы форм:
Текстовое поле
👉 <input type="text" name="username" placeholder="Ваше имя">
Пароль
👉 <input type="password" name="userpass">
Email
👉 <input type="email" name="email">
Телефон
👉 <input type="tel" name="phone">
Флажок (checkbox)
👉 <input type="checkbox" name="agree" checked> Согласен
Переключатель (radio)
👉 <input type="radio" name="color" value="red"> Красный
👉 <input type="radio" name="color" value="blue"> Синий
Выпадающий список
👉 <select name="city"> <option value="msk">Москва</option> <option value="spb">Санкт-Петербург</option> </select>
Многострочное поле для текста
👉 <textarea name="message" rows="4" placeholder="Ваше сообщение"></textarea>
Кнопка отправки
👉 <button type="submit">Отправить</button>
Полезные атрибуты:
👉 <input required> — делает поле обязательным для заполнения
👉 <input disabled> — делает поле недоступным
👉 <input autofocus> — автоматически ставит курсор в поле при загрузке страницы
👉 <input placeholder="Текст"> — подсказка внутри поля
Стилизация формы:
👉 input, select, textarea, button { width: 100%; padding: 8px; margin: 5px 0; border-radius: 4px; border: 1px solid #ccc; }
👉 button { background: #4CAF50; color: white; border: none; cursor: pointer; }
👉 button:hover { background: #45a049; }
💡 Совет: Всегда проверяйте введённые данные и в браузере, и на сервере — это защитит сайт от ошибок и взломов.
Подпишитесь на наш канал Girsoft в Дзене!
📌 Читайте свежие статьи, полезные советы и эксклюзивные материалы на нашем канале:
Не пропустите новые публикации – подпишитесь, чтобы всегда быть в курсе! 🔔
Спасибо за вашу поддержку! ❤️