Типичные ошибки: Таблицы и формы

Ошибка 1: input без label

Как ломается: поле без подписи непонятно скринридеру, а клик по «названию» рядом не ставит курсор в поле. Один placeholder исчезает при вводе.

<div>Имя</div>
<input type="text" placeholder="Имя">

Как правильно: явный <label> с for, связанным с id поля.

<label for="name">Имя</label>
<input id="name" name="name" type="text">

Ошибка 2: input без name

Как ломается: поле выглядит нормально и заполняется, но при отправке формы его значение не попадает на сервер — браузер игнорирует поля без name.

<!-- значение НЕ отправится -->
<input id="email" type="email">

<!-- правильно: есть name -->
<input id="email" name="email" type="email">

Ошибка 3: таблица без th

Как ломается: если шапку сделать обычными td, таблица теряет заголовки — непонятно, где названия столбцов, а скринридер не связывает данные с колонками.

<tr><td>Навык</td><td>Уровень</td></tr>

Как правильно: заголовки столбцов — это <th> внутри <thead>.

<thead>
  <tr><th>Навык</th><th>Уровень</th></tr>
</thead>

Ещё частые промахи

• Использовать <table> для сетки страницы — раскладку делают через CSS.
• Ставить placeholder вместо полноценного label.
• Использовать type="text" для e-mail и пароля вместо type="email" / type="password".