Ответ
Форма на сайте состоит из HTML-элементов (<form>, <input>, <select>, <button> и др.), CSS для стилизации и JavaScript для обработки данных.
Основные элементы:
<form>— контейнер для полей, атрибутыaction(куда отправлять) иmethod(GET/POST).- Поля ввода (
<input>,<textarea>,<select>) с атрибутамиname,type,required. - Кнопка отправки (
<button type="submit">).
Пример:
<form action="/submit" method="POST">
<input type="text" name="username" required>
<input type="password" name="password">
<button type="submit">Отправить</button>
</form>Обработка:
- Данные отправляются на сервер или обрабатываются JavaScript (например, через
fetch). - Валидация может быть на стороне клиента (HTML5 атрибуты, JS) и сервера.
Дополнительно:
- Используйте
preventDefault()для AJAX-отправки. - Для удобства — библиотеки вроде Formik или React Hook Form.
Ответ 18+ 🔞
А, формы на сайте, ну это ж классика, блядь! Ну, как бы, это такая штука, где пользователь тыкает в поля, а потом всё это куда-то улетает. Ёпта, давайте разберём, не будем мудаками.
Смотри, основа всему — это тег <form>, ну, типа контейнер такой, где вся движуха живёт. У него два главных атрибута, без которых он как кот без хвоста — action (это куда данные пошлёшь, адресок) и method (это как пошлёшь — GET или POST, ну ты понял).
А внутри уже всякие пиздюки-поля: <input>, <textarea>, <select>. Главное им всем дать name, а то сервер получит анонимную хуйню и не поймёт, кто есть кто. Ну и type не забудь, а то вместо пароля текст покажется — будет овердохуища веселья.
Вот, смотри, простейший пример, чтоб глаза не вытекали:
<form action="/submit" method="POST">
<input type="text" name="username" required>
<input type="password" name="password">
<button type="submit">Отправить</button>
</form>Ну и кнопка, само собой, <button type="submit">. Без неё форма — как машина без колёс, никуда не поедет, только смотри на неё и матерись.
А что с обработкой, спросишь? А вот тут вариантов — хуева туча! Можно по-старинке, чтобы страница перезагрузилась и данные на сервер ушли. А можно по-модному, через JavaScript, с помощью fetch, чтобы всё тихо-мирно, без мордобоя. Только не забудь event.preventDefault() вызвать, а то форма всё равно попробует улететь по старинке, и будет тебе чих-пых в сраку.
И валидация, блядь, важна! Сперва на клиенте проверь (те же атрибуты required, pattern или свой скрипт), а потом ОБЯЗАТЕЛЬНО на сервере, потому что пользователь — он как мартышлюшка хитрая, может HTML в консоли подправить и отправить тебе всякой дичи. Доверия к нему — ноль ебать.
Если совсем заебало с этим возиться, есть библиотеки — Formik, React Hook Form. Они, конечно, не панацея, но иногда жизнь упрощают, как будто тебе в жопу дунули. Но основы-то ты теперь знаешь, да?