этот удивительный tabindex

[garbager]

удивительно — что про это на хабре начали писать

[andi]

ну почему же? вполне закономерно.
на xap.ru видимо не знают об этой вещи. вводишь логин -> tab и попадаешь не на поле ввода пароля, а на ‘войти’

[PingMe]

А у меня все нормально на этом xap.ru, что бы это значило?

[andi]

ff3, ie7, opera9
после ввода логина и нажатии на tab курсор перескакивает на ‘войти’

да там и быть по нормальному не может. элементы расположены табличкой:
логин input войти
пароль password забыл

никаких табиндексов. при нажатии на tab с инпута упрыгивает на субмит формы.

[PingMe]

Откройте, пожалуйста, в Safari, у меня все нормально. Пользуйтесь нормальными браузерами. Но я ни в коем случае не против, что за tabindex не нужно следить при разработке.

[aka_SKIff]

В Сафари есть хитрая настроечка перемещения между ТОЛЬКО текстовыми полями ввода. Понта в ней никакого, потому что на кнопки и чекбоксы ТАБом из-за нее не перемещает. Отключите ее, и будете наблюдать тот же эффект, что и на остальных браузерах.

[PingMe]

Зачем мне ее отключать, если меня ТАК устраивает? На кнопочки мне не нужно перемещаться табом.

[aka_SKIff]

Ага. И за чекбоксом «Запомнить меня на этом сайте» приходится тянуться мышкой :) А когда попадается нерадивый верстальщик, который не пользуется тегом <label>, или пользуется, но не знает про аттрибут FOR, так вообще операция попадания в данный чекбокс превращается в пытку :)

[elfxf]

А еще (по крайней мере в маках) если фокус водить только по инпутам, невозможно попасть в селекты, что тоже не всегда удобно. Либо только инпуты, либо гулять криво по всем ссылкам, пока введешь логин и пароль )

[ubica]

ненавижу это)

[Frosty]

>>f3, ie7, opera9
>Пользуйтесь нормальными браузерами

Сильно, однако, сильно вы хотите убить себе карму.

[PingMe]

Кармадрочер? У меня и так все в минусе, я высказываю свое мнение.

[Frosty]

«Вы все говно, я — граф Монте Кристо» — не выражение мнения, а моча в голове и попытка выпендриться и показать как я крут.

[PingMe]

Верно. Я крут.

[Tagire]

Как тесто для пельменей. Мука, вода и 2 яйца)

[v_k]

посмотрел на xap, исправили :)

[romx]

«удививтельно» скорее ;)

PS: «вёрска»

[ApreDeFoe]

Хабра. Мы идем в ногу со временем.

[kossnocorp]

Ваш заголовок «этот удвивтельный tabindex» — удивителен. Но тема не плохая, да. Часто о ней забывают все.

[postdig]

спасибо за напоминание о банальной, но удобной мелочи

[shx]

Эта банальная мелочь в одном проекте мне сэкономила пол кило нервных клеток :)

[Ghz]

Хм… я незнал, всегда бесит на многих сайтов, из-за того что по по коду сабмит фокусится посли поля логина, т.е. нужно еще раз нажать, найти наконец пассворд…
Автор -респект;)

[tgm]

Спасибо, действительно забываешь о таких вещах.
А ведь это для юзер-френдли обязательно.

[hulinada]

за год своей быдловерстальщецкой деятельности не знал. спасибо.

[Joka]

я конечно понимаю что учиться никогда не поздно, однако о таких вещах пишут в любых учебниках. это основы хтмл. стыдно не знать такое если вы работаете с хтмл.

[tgm]

Стыдно минусовать за «стыдно не знать».
А учиться никогда не поздно.

Подобные вещи активно использую в создаваемых Delphi-приложениях.
Понимал, что это есть и в вебе. Просто не задавался мыслью искать это.
А сейчас увидел и сказал автору спасибо. Неужели это так страшно?
Ох люди-люди… Работой бы вас напрячь :)

[Joka]

1. с чего вы решили что я минусовал?
2. я так и сказал, что учиться никогда не поздно
3. для меня это страшно когда люди работаю по специальности не знает элементарных вещей по этой специальности

[tgm]

Ну ведь я не сказал, что Вы минусовали — даже не предположил. Просто обратил внимание минусовавшего и высказал мнение, что может быть действительно стыдно.
Во-вторых, знать всего ведь не возможно. Узнавая даже об элементарных вещах получаешь знания. Вы ведь тоже радуетесь, читая о полезных вещах, которых не знали.

Профессионалов, знающих почти все — очень мало.

[easterism]

стыдно писать хтмл, если работаешь с HTML

[grimskin]

не стыдно не знать, стыдно не учиться

[nimbler]

Всё гениальное просто

[Atilla]

Знали бы это разработчики mail.ru…

[ring0]

Не грешите на mail.ru, в форме на главной странице tabindex'ы стоят.

[deniamnet]

они, конечно, стоят, но кривовато, имхо: после ввода логина люди обычно хотят перейти на ввод пароля и только потом выбрать доп. опцию «какой домен я пользую для ящика»
как думаете, почему нельзя было сделать tabindex=3 на select, а не на пароль?
если домен отличный от дефолтового mail.ru — после ввода перешел табом и выбрал еще и домен
если домен дефолтный mail.ru — сразу нажал enter и зашел в почту

[killerdesign]

Ага, лично мне всю жизнь эта особенность мешает) Наверное, одна из причин переползания на Gmail :)

[deniamnet]

у меня тоже, но я перешел на гмейл из-за того, что считаю его лучшей почтой в мире )) дофига места (хотя кому-то мало), удобная структура, полезные фичерсы, лучший спам-фильтр и гордая надпись «GOOGLE» — что может быть лучше? :)

[ring0]

Возможно я не обратил внимание на это, так как не пользуюсь web-интерфейсом.

[putnik]

Странно, что в коде теги строчными, а в списке — прописными.
Хотя лично я предпочёл бы XHTML style.

[deniamnet]

использую tabindex практически в каждом проекте во фронтенде (для экономии нервов пользователей) и в бакенде (для скорости работы администраторов)
также приятно, что данный параметр поддерживается всеми браузерами и валиден

[Kirk]

Часто на это просто не хватает времени.

[deniamnet]

зато потом хватает времени ездить табом туда-сюда? :) по-моему, лучше 1 раз нормально закодить

[MAD_Kolia]

В таком случае Вы — плохой разработчик.

[KEPZ]

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

[MAD_Kolia]

Кстати, да. Все, на что можешь попасть при нажатии TAB, может управляться tabindex'ом.

[seeingred]

Тема все-таки к интерфейсам более относится, чем к дизайну, не?

[xvoland]

скорее к Usability

[cybd]

знали бы об этом новые разрабы бигмира

[MAD_Kolia]

А те, у кого в браузере настроен поиск на странице сразу во время ввода — они обрадуются?
И почему S — поиск? F — поиск, S — сохранить.

[MAD_Kolia]

Ну уже де факто приняли что Файнд, а не Сёрч. И Сэйв, а не что-то другое.

[msa]

Еще можно ставить tabindex-ы с одинаковыми номерами, тогда перебор будет в порядке следования элементов на странице (и в порядке возрастания номера). Это удобно для вставки новых элементов, не нужно перенумеровывать все элементы после вставленного.

[yorick_kiev_ua]

>Это удобно для вставки новых элементов, не нужно перенумеровывать все элементы после вставленного.

Для этого гораздо проще добавлять tabindex с шагом 10, к примеру.
Т.е:

После добавления поля будет:

[yorick_kiev_ua]

Гы, всё пождал долгоносик…

input type=«text» name=«login» tabindex=«10»
input type=«password» name=«password» tabindex=«20»

После добавления нового поля:

input type=«text» name=«login» tabindex=«10»
input type=«text» name=«ыгзукlogin» tabindex=«15»
input type=«password» name=«password» tabindex=«20»

[msa]

а если нужно 10 новых полей :)

[yorick_kiev_ua]

Тогда добавляете десять, а последнему ставите «tabindex=«25»» :)

[msa]

т.е. пришли к тому с чего начали, при вставке все последующие элементы нужно перенумеровывать

[yorick_kiev_ua]

Нет. Надо перенумеровать только ОДИН следующий номер.

Было:
input type=«text» name=«login» tabindex=«10»
input type=«password» name=«password» tabindex=«20»

Станет:
input type=«text» name=«login» tabindex=«10»
… тут 10 новых полей.
input type=«password» name=«password» tabindex=«25»

Вообще, добавление 10-15-ти новых полей — случай достаточно редкий. Он обычно предсказуем и тогда вы просто берёте шаг в 50.

А вставка с одинаковыми номерами — это, извините, бред. Какой в этом смысл? Вы снова пришли к тому, что перебор осуществляется не по номеру, а по расположению.

[msa]

Не совсем по расположению, перебор будет в первую очередь по элементам с установленным tabindex.
т.е. одинаковый tabindex полезен в группах элементов, порядок в которых и так определяется порядком следования на странице. Я не призываю ставить один табиндекс на всю страницу :)

Пример:
есть таблица с элементами, перемещение нужно по столбцу. в первой колонке устанавливаем все элементы с tabindex=«1», во второй — «2»…

при добавлении новой строки в таблицу, добавляем элементы с теми же табиндексами.

[yorick_kiev_ua]

>одинаковый tabindex полезен в группах элементов, порядок в которых и так определяется порядком следования на странице.

Тогда он там не нужен вовсе.

>есть таблица с элементами, перемещение нужно по столбцу. в первой колонке устанавливаем все элементы с tabindex=«1», во второй — «2»…

Представим, что у нас ваша таблица. Только столбцов у неё десять. И в каждом по пять элементов.

А потом вам говорят: «у нас новый функционал, между первым и вторым столбцом появляется новый, переход с первого на этот новый, с нового — на вторую». И вы лопатите 9 столбцов*5 элементов=45 табиндексов. :D

[MAD_Kolia]

Вы тоже программировали в GW Basic (и ваще, самый перый бейсик)? ;-)

[yorick_kiev_ua]

чОрт! А ведь верно…

Basic, ZX Spectrum… Как давно это было…

[xnodev]

как в бейсике .-0

[non7top]

Очередное открытие америки для хабрашкольников? Хотя не, в школе рассказывают про tabindex. Для хабрадетсадовцев.

[jandosul]

Таким образом можно на рекламу в другом конце странички навести это я так мысли вслух

[ElaSTiC]

Автор прав, тему поднял не новую, но актуальную. Мышкой тыкать в поле пароля после ввода логина — западло.

[Tesla]

Гм… В дизайнере форм Visual Studio я всегда уделял внимание табиндексам, а в вебформах почему-то никогда о нем даже не задумывался :) Спасибо

[scherbet]

Класс, слово «удвивтельный» в заголовке сначало даже не заметил, пока не посмотрел комменты)

А так очень полезно, пока не знал, спасибо!

[panterras]

Ух ты! такая штука, таки, существет!!!

[jcd]

Я так понимаю, именно эта штука помогает делать нормальный autotype с помощью менеджеров паролей типа KeePass. Однозначно нужно!

[jcd]

Что я написал не так? Почитайте:
keepass.info/help/base/autotype.html

[mobilz]

аффтар ты святой! К сожалению или к счастью, я не из тех, кому в школе преподавали html, ибо в школе у нас были БК, верстку учил сам, верстаю лет 6, но tabindex`ы упустил, слышу впервые =) Спасибо большое. Хотя уже, если честно, принаравился размещать важные элементы в форме (авторизация, рега итп) в нужном порядке =)

[xvoland]

БК 10-01(11), ДВК, ZX-Spectrum, Siclair, Поиск-1,2,3 и т.д. тут не причём, наверное вы за 6 лет слышали про стандарты :) и синтаксис языка. Абсолютно не важно, что это за язык PHP или C — есть стандарты и синтаксис!

[1stNoBoDy]

Спасибо! Крайне полезный пост. Сам постоянно tab'ами «передвигаюсь» :-)

[marapper]

Вот читаю я и дивлюсь количеству верстальщиков, не знающих/не делающих про табиндексы. Теперь понятно, почему на фрилансерских биржах всегда на предложения верстки так много охотников выискивается.

[xvoland]

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

Есть синтаксис и его нужно соблюдать! (правда, всегда есть исключения :-)

[sgolubev]

Не будем забывать, что пропуская некоторые элементы в форме с помощью установки tabindex на них, вы тем самым рушите accessibility сайта, в особенности для людей с ограниченными возможностями.

[Gero]

Поясните, пожалуйста.

[sgolubev]

Незрячего пользователя, которому screen-reader озвучивает содержание сайта, собъёт с толку непоследовательное перемещение по элементам, так как в большинстве случаев такой пользователь пользуется табом.

[sectus]

Как сильно у нас в России сайтов для слепых, сколько слепых России ходят по интернету?

[Vii]

Как это относится к веб-дизайну, может хотя бы в web-разработку?

А вот за <a> и другие «неформовые» элементы спасибо — не знал

[sgolubev]

Давайте не меркальтильничать. Если уж на то пошло: дизайн решает поставленную проблему созданием юзверь-фрэндли интерфейса, а разработчика задача — всё это технически воплотить в жизнь.

[ApreDeFoe]

Боже, какой скучный пост. Я тут посижу с вами, повою, хорошо? Спасибо :-)