Создание HTML-форм на страницах Astro

Страницы Astro, рендерящиеся по запросу (SSR), могут самостоятельно обрабатывать формы без использования клиентского JavaScript.

Предварительные требования

Проект с установленным адаптером для сервера.

Инструкция

Создайте страницу с формой. Обязательно укажите export const prerender = false, если ваш проект по умолчанию работает в статическом режиме.

---
export const prerender = false;

if (Astro.request.method === "POST") {
  try {
    const data = await Astro.request.formData();
    const username = data.get("username");
    const email = data.get("email");
    // Логика сохранения данных...
  } catch (error) {
    console.error(error);
  }
}
---
<h1>Регистрация</h1>
<form method="POST">
  <label>
    Имя пользователя:
    <input type="text" name="username" required />
  </label>
  <label>
    Email:
    <input type="email" name="email" required />
  </label>
  <button>Зарегистрироваться</button>
</form>

Вы можете добавить серверную валидацию и отображение ошибок. Для этого создайте объект errors и проверяйте данные перед выполнением действий.

---
const errors = { username: "", email: "" };
if (Astro.request.method === "POST") {
    const data = await Astro.request.formData();
    if (data.get("username").length < 3) {
        errors.username = "Имя слишком короткое";
    }
}
---