Комментарии (1)
🐱
claude-haiku-4.5PrepBro AI2 апр. 2026 г.(ред.)
Ответ сгенерирован нейросетью и может содержать ошибки
Что такое атрибут action у form
Определение
action — это атрибут элемента <form>, который определяет URL адреса, на который будут отправлены данные формы при нажатии на кнопку отправки (submit). Это основной механизм передачи данных на сервер в традиционных HTML формах.
Синтаксис
<form action="/api/users" method="POST">
<input type="text" name="username" />
<input type="password" name="password" />
<button type="submit">Отправить</button>
</form>
Когда пользователь нажимает кнопку "Отправить", форма отправляет данные на URL, указанный в атрибуте action.
1. Основные примеры использования
<!-- Отправка на абсолютный URL -->
<form action="https://example.com/api/login" method="POST">
<input name="email" type="email" />
<button type="submit">Войти</button>
</form>
<!-- Отправка на относительный URL -->
<form action="/submit-form" method="POST">
<input name="name" type="text" />
<button type="submit">Отправить</button>
</form>
<!-- Отправка на текущую страницу (пусто или без атрибута) -->
<form action="" method="POST">
<!-- Форма отправляется на текущий URL -->
</form>
<!-- Без явного указания action (по умолчанию текущая страница) -->
<form method="POST">
<!-- Эквивалентно action="" -->
</form>
2. Атрибут action и метод method
action работает вместе с атрибутом method, который определяет HTTP метод:
<!-- GET запрос -->
<form action="/search" method="GET">
<input name="q" type="text" placeholder="Search..." />
<button type="submit">Поиск</button>
</form>
<!-- URL будет: /search?q=значение -->
<!-- POST запрос -->
<form action="/api/users" method="POST">
<input name="username" type="text" />
<input name="email" type="email" />
<button type="submit">Создать</button>
</form>
<!-- Данные отправляются в теле запроса -->
3. Различие между GET и POST
<!-- GET: данные в URL (видимые) -->
<form action="/filter" method="GET">
<input name="category" value="electronics" />
<button type="submit">Фильтр</button>
</form>
<!-- URL: /filter?category=electronics -->
<!-- POST: данные в теле запроса (скрытые) -->
<form action="/api/users" method="POST">
<input name="password" type="password" />
<button type="submit">Вход</button>
</form>
<!-- URL: /api/users, данные в body -->
4. Различные типы action URL
<!-- Относительный путь (начинается с /) -->
<form action="/api/submit">...</form>
<!-- Относительный путь (без слэша, относительно текущей папки) -->
<form action="submit">...</form>
<!-- Абсолютный URL (полный адрес) -->
<form action="https://example.com/api/submit">...</form>
<!-- Протокол (для кроссдоменных запросов) -->
<form action="//example.com/api/submit">...</form>
<!-- Якорь текущей страницы -->
<form action="#section">...</form>
<!-- Mailto (отправка на email) -->
<form action="mailto:contact@example.com">...</form>
5. Обработка на сервере
// Express.js - обработчик для POST запроса
app.post('/api/users', (req, res) => {
const { username, email } = req.body;
// Создаем пользователя
console.log(`Creating user: ${username}`);
// Отправляем ответ
res.json({ success: true, user: { username, email } });
});
// Express.js - обработчик для GET запроса
app.get('/search', (req, res) => {
const { q } = req.query;
// Выполняем поиск
const results = searchDatabase(q);
// Отправляем результаты
res.json(results);
});
6. JavaScript обработка формы
// Получение элемента формы
const form = document.querySelector('form[action="/api/submit"]');
// Прослушивание события submit
form.addEventListener('submit', (e) => {
e.preventDefault(); // Отменяем стандартное поведение
// Получаем данные формы
const formData = new FormData(form);
// Отправляем через fetch
fetch(form.action, {
method: form.method,
body: formData
})
.then(r => r.json())
.then(data => console.log('Success:', data))
.catch(error => console.error('Error:', error));
});
7. FormData и action
<!-- Форма с файлом -->
<form id="uploadForm" action="/api/upload" method="POST" enctype="multipart/form-data">
<input type="file" name="image" />
<input type="text" name="title" />
<button type="submit">Загрузить</button>
</form>
<script>
document.getElementById('uploadForm').addEventListener('submit', (e) => {
e.preventDefault();
const formData = new FormData(this);
// Отправляем формулу на URL из action
fetch(this.action, {
method: 'POST',
body: formData // FormData автоматически установит enctype
});
});
</script>
8. enctype — тип кодирования
<!-- application/x-www-form-urlencoded (по умолчанию) -->
<form action="/api/submit" method="POST">
<input name="name" value="John" />
<!-- Отправляет: name=John -->
</form>
<!-- multipart/form-data (для файлов) -->
<form action="/api/upload" method="POST" enctype="multipart/form-data">
<input type="file" name="photo" />
<input name="name" value="John" />
<!-- Отправляет файл и текстовые данные -->
</form>
<!-- text/plain (редко используется) -->
<form action="/api/submit" method="POST" enctype="text/plain">
<input name="email" value="test@example.com" />
<!-- Отправляет: email=test@example.com -->
</form>
9. Target — где открыть результат
<!-- Открыть в текущем окне (по умолчанию) -->
<form action="/result" target="_self">
<button type="submit">Отправить</button>
</form>
<!-- Открыть в новом окне/вкладке -->
<form action="/download" target="_blank">
<button type="submit">Скачать</button>
</form>
<!-- Открыть в фрейме -->
<form action="/api/submit" target="resultFrame">
<button type="submit">Отправить</button>
</form>
<iframe name="resultFrame"></iframe>
10. Современный подход: SPA (Single Page Application)
В современных приложениях часто используется JavaScript вместо стандартного отправления формы:
// React компонент
import { useState } from 'react';
export function LoginForm() {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [loading, setLoading] = useState(false);
const [error, setError] = useState('');
const handleSubmit = async (e) => {
e.preventDefault();
setLoading(true);
setError('');
try {
// Вместо action атрибута используем fetch
const response = await fetch('/api/login', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ email, password })
});
const data = await response.json();
if (!response.ok) {
throw new Error(data.message);
}
console.log('Login successful:', data);
} catch (err) {
setError(err.message);
} finally {
setLoading(false);
}
};
return (
<form onSubmit={handleSubmit}>
<input
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
required
/>
<input
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
required
/>
{error && <div className="error">{error}</div>}
<button type="submit" disabled={loading}>
{loading ? 'Загрузка...' : 'Вход'}
</button>
</form>
);
}
Обратите внимание: в этом примере форма не имеет атрибута action. Обработка происходит через JavaScript.
11. Next.js Server Actions
В Next.js 13+ есть встроенная поддержка Server Actions:
// app/page.tsx
'use server';
export async function submitForm(formData: FormData) {
const email = formData.get('email');
const message = formData.get('message');
// Обработка на сервере
await saveMessage(email, message);
}
export default function Page() {
return (
<form action={submitForm}>
<input name="email" type="email" required />
<textarea name="message" required />
<button type="submit">Отправить</button>
</form>
);
}
Заключение
- action определяет, куда отправляются данные формы
- Работает с атрибутом method (GET, POST)
- GET — для запросов с параметрами в URL
- POST — для отправки чувствительных данных
- В современных приложениях часто использует JavaScript для обработки форм вместо стандартного action
- enctype определяет формат отправки (текст, файлы и т.д.)
- target определяет, где открыть результат