Порядок полей в форме html

Конечно, для кого-то банальные вещи напишу, но в выдаче Яндекса такой хлам по запросу „порядок полей кнопка tab“, что нужно :)

Кто-то в комментариях этого блога пожаловался, что если заполнять поля в форме добавления комментария, переходя при этом между полями по клавише Tab, после ввода имени курсор улетает в поле входа в почту (в правой колонке). Я обещал разобраться.

Вот в чём проблема: обычно кнопка Tab переносит курсор в следующее по коду поле. Которое просто ниже по коду. И тогда проблем не бывает. Но сейчас интерфейсы усложнились — и на странице может быть несколько форм или сложные многоколоночные формы. Чтобы задать в них порядок полей (порядок переноса курсора) используется специальный параметр tabindex. Курсор переходит по объектам от меньшего значения параметра к большему.

Этот параметр был прописан как в форме комментирования из моей темы WordPress, так и в форме входа в почту на Яндексе. Разумеется, обе формы при этом считали себя уникальными — и нумеровали свои поля, начиная с единицы. Откуда и странное поведение: форма Яндекса по коду выше, поэтому из поля „Имя“ курсор при нажатии клавиши табуляции уносился в форму входа в почту.

Лечится очень просто — надо во вторичной форме (входа в почту в моём случае) изменить параметр tabindex на уникальный. Поскольку на страницах много разных полей (комментарии, ещё поиск и т. д.) для надёжности просто приписываем какую-нибудь цифру перед номерами полей — я приписал двойку, стало так:

<div class="label">Логин:</div>
<input type="text" name="login" value="" tabindex="21"/>
<div class="label">Пароль:</div>
<input type="hidden" name="retpath" value="http://mail.yandex.ru/for/amikeco.ru">
<input type="password" name="passwd" value="" maxlength="100" tabindex="22"/> <br>
<label for="a"><input type="checkbox" name="twoweeks" id="a" value="yes"
tabindex="23"/>запомнить меня</label>
<input type="submit" name="In" value="Войти" tabindex="24"/>
</form>

Думаю, теперь формочки в блоге будут работать более предсказуемо.

Комментарии закрыты