Что помимо input и label нужно использовать для формы?

Что нужно использовать в формах помимо input и label?

Полная структура HTML формы

Форма — это не просто набор полей. Правильная разметка важна для доступности (a11y), семантики и функциональности. Помимо input и label нужны дополнительные элементы.

Основные элементы формы

1. Тег form

<form action="/submit" method="POST">
  <!-- Вся форма должна быть внутри form -->
</form>

Определяет область формы и обработчик отправки.

2. Fieldset и legend

<fieldset>
  <legend>Контактная информация</legend>
  <label>
    <input type="text" name="name" />
    Имя
  </label>
</fieldset>

Группируют связанные поля. Legend обязателен для доступности.

3. Textarea для многострочного текста

<textarea name="message" rows="5" cols="30" required></textarea>

Используй вместо input для больших текстов.

4. Select и option

<select name="country" required>
  <option value="">Выбери страну</option>
  <option value="ru">Россия</option>
  <option value="ua">Украина</option>
</select>

Для выбора из списка вариантов.

5. Error сообщения (validation)

<div className="form-group">
  <label htmlFor="email">Email</label>
  <input id="email" type="email" required aria-invalid={hasError} aria-describedby="email-error" />
  {hasError && (
    <span id="email-error" className="error">Email не валиден</span>
  )}
</div>

Связывай ошибки с полями через aria-describedby.

6. Button

<button type="submit">Отправить</button>
<button type="reset">Очистить</button>
<button type="button" onClick={handleCancel}>Отменить</button>

Разные типы кнопок для разных действий.

Полный пример формы

function RegistrationForm() {
  const [errors, setErrors] = useState({});

  const handleSubmit = (e) => {
    e.preventDefault();
  };

  return (
    <form onSubmit={handleSubmit} noValidate>
      <fieldset>
        <legend>Личные данные</legend>
        
        <div className="form-group">
          <label htmlFor="fullname">Полное имя</label>
          <input id="fullname" type="text" name="fullname" required />
          {errors.fullname && (
            <span id="fullname-error" role="alert">{errors.fullname}</span>
          )}
        </div>

        <div className="form-group">
          <label htmlFor="email">Email</label>
          <input id="email" type="email" name="email" required />
          {errors.email && (
            <span id="email-error" role="alert">{errors.email}</span>
          )}
        </div>
      </fieldset>

      <fieldset>
        <legend>Дополнительно</legend>
        
        <div className="form-group">
          <label htmlFor="country">Страна</label>
          <select id="country" name="country">
            <option value="">Выбери страну</option>
            <option value="ru">Россия</option>
          </select>
        </div>

        <div className="form-group">
          <label htmlFor="bio">О себе</label>
          <textarea id="bio" name="bio" rows="4"></textarea>
        </div>

        <div className="checkbox-group">
          <input id="agree" type="checkbox" name="agree" required />
          <label htmlFor="agree">Согласен с условиями</label>
        </div>
      </fieldset>

      <div className="form-actions">
        <button type="submit">Зарегистрироваться</button>
        <button type="reset">Очистить</button>
      </div>
    </form>
  );
}

Важные атрибуты для доступности

• htmlFor на label — связь с input
• id на input — уникальный идентификатор
• required — поле обязательно
• aria-invalid — поле содержит ошибку
• aria-describedby — связь ошибки с полем
• noValidate на форме — отключить встроенную валидацию браузера

Правильная структура формы — это основа хорошего UX и доступности для всех пользователей.