Какие теги используешь в форме?

Основные теги в HTML формах

При создании веб-форм используются несколько ключевых элементов, которые обеспечивают правильную структуру и функциональность:

Контейнер формы

Тег <form> — это основной контейнер для всех элементов формы. Он определяет, куда и как отправляются данные:

<form action="/submit" method="POST" enctype="multipart/form-data">
  <!-- содержимое формы -->
</form>

Атрибуты:

• action — URL, на который отправляются данные
• method — HTTP метод (GET или POST)
• enctype — тип кодирования (обычно multipart/form-data для файлов)

Элементы ввода

<input> — самый универсальный тег для ввода данных:

// Различные типы
<input type="text" name="username" placeholder="Введите имя">
<input type="email" name="email" required>
<input type="password" name="password">
<input type="number" name="age" min="0" max="120">
<input type="checkbox" name="agree" value="yes">
<input type="radio" name="gender" value="male">
<input type="date" name="birthday">
<input type="file" name="avatar" accept="image/*">
<input type="submit" value="Отправить">

<textarea> — для многострочного текста:

<textarea name="message" rows="5" cols="40" placeholder="Ваше сообщение"></textarea>

<select> — для выпадающего списка:

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

Структурные элементы

<label> — связывает текст с полем ввода для улучшения доступности:

<label for="email">Email:</label>
<input id="email" type="email" name="email">

<fieldset> и <legend> — группируют связанные элементы:

<fieldset>
  <legend>Персональные данные</legend>
  <label for="name">Имя:</label>
  <input id="name" type="text">
</fieldset>

Button элементы

<button> — универсальная кнопка с большей гибкостью:

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

Best Practices

• Всегда используйте <label> для каждого поля — это улучшает доступность и позволяет кликать по тексту
• Группируйте связанные поля с помощью <fieldset> для структурированности
• Проводите валидацию как на клиенте (HTML5 атрибуты), так и на сервере
• Используйте правильные типы <input> — это даёт бесплатную валидацию и улучшает UX на мобильных
• Улучшайте доступность через aria-label, aria-describedby для сложных форм

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