<input> vs <a>

[seemax]

http://clip2net.com/s/1RRlj

Обычная кнопочка может быть выполнена кликабельной через <a> или через <input>.

Верстка чуть проще на <a>.

А принципиально ли это для дальнейшей работы программистов?

[ablay2009]

Вообще то, если это форма, то принципиально делать инпутом.

[SelenIT]

Есть еще варианты в виде <button> и <input type="image">. А ссылка — совсем не вариант.

[NeoXidizer]

Всё всегда зависит от потребностей и професионализма. Например на http://store.steampowered.com/ - крупнейшем онлайн дистрибьюторе компьютерных игр, все кнопки (вход, регистрация, установка Steam, совершение покупки, оплаты) выполнены в виде связи <div> + <a> + javascript

[seemax]

Спасибо всем ответившим. Отличный пример NeoXidizer!

  Quote

Всё всегда зависит от ......... и професионализма

настораживает.

С одной стороны ссылка приведена как возможное решение в исполнении неглупых и недешёвых парней.

С другой стороны суть вопроса, а профессионально ли так и эдак?

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

[SelenIT]

<div> + javascript + нестандартное оформление, при условии, что всё это великолепие скриптом и навешивается — понимаю и принимаю. Но <a>-то зачем, объясните наконец мне слоупоку?

[NeoXidizer]

  On 4/30/2012 at 6:20 PM, seemax said:

  Quote

Всё всегда зависит от ......... и професионализма

настораживает.

С одной стороны ссылка приведена как возможное решение в исполнении неглупых и недешёвых парней.

С другой стороны суть вопроса, а профессионально ли так и эдак?

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

я имел ввиду, что заставить работать какой-то вариант максимально кроссбраузерно, требует определенного опыта. А так же некоторый функционал при разных подходах требует разные знания. На примере тех же "негулпых и недешевых парней" - у них пол сайта не работает без javascript, но им это и не нужно, так как все равно все действия (покупка, запуск продукта) выполняется через Steam, а там javascript включен принудительно (используется встроенный в клиент google chrome).

  On 4/30/2012 at 6:45 PM, SelenIT said:

<div> + javascript + нестандартное оформление, при условии, что всё это великолепие скриптом и навешивается — понимаю и принимаю. Но <a>-то зачем, объясните наконец мне слоупоку?

Возможно, <a> и не нужно, однако использование <a> позволяет, в их случае, сократить количество кода: у них одно и тоже оформление для обычных ссылок (которые ведут на другие страницы), ссылок в формах (через которые совершается покупка, используя javascript), ссылок, запускающих приложение (используются специальные ссылки на протокол steam://run/ID) и т.д.

Везде разный функционал, но оформление и логическое преднозначение элемента - одинаково. Так почему бы и не использовать?

и у них же, <a> ведь не обернут в <div>, который бы оформлял кнопку:

<div class="community_activity_signin_buttons">
	<a href="https://store.steampowered.com/login/?snr=1_4_4__110" class="btn_checkout_green">
		<div class="leftcap"></div><div class="rightcap"></div>
		<div class="text">Войти</div>
	</a>
	<div class="community_activity_or">или</div>
	<a href="https://store.steampowered.com/join/?snr=1_4_4__110" class="btn_checkout_green">
		<div class="leftcap"></div><div class="rightcap"></div>
		<div class="text">Создать аккаунт</div>
	</a>
	<div style="clear: left;"></div>
</div>

здесь несколько ссылок размещены внутри одного <div>, который задает оформление окружающего контента (отступы и т.п.).

При этом внутри самих <a> имеется 3 элемента <div>, которые выполняют следующее:

закругленные углы, картинкой-спрайтом

основной фон, картинкой 1 пиксель в ширину + текст ссылки

таким образом создается кроссбраузерная(включая IE6, с небольшими изъянами) объемная кнопка с закругленными уголками и тенью, которую можно влепить куда угодно и она будет работать вне зависимости от браузера и javascript (если это ссылка, ведущая на другой URL)

Edited April 30, 2012 by NeoXidizer

[seemax]

Должна быть форма типа обратной связи http://store.steampowered.com/ с разработчиком...

Рещили парни на ссылках все связать и построили всё на ссылках не спросив других верстателей. Знач удобнее так ребятам.

[ruslan.savenok]

У них все сделано на связке <а>, т.к. используется ruby on rails, там даже стандартный scaffold не будет работать без javaScript и ссылка превращается в кнопку с помощью одного атрибута в шаблоне.

Как говорят rails разработчики: "Это проблема пользователя, если у него не включен JavaScript, не наша"

Edited April 30, 2012 by ruslan.savenok

[SelenIT]

  On 4/30/2012 at 7:09 PM, NeoXidizer said:

таким образом создается кроссбраузерная(включая IE6, с небольшими изъянами) объемная кнопка с закругленными уголками и тенью, которую можно влепить куда угодно и она будет работать вне зависимости от браузера и javascript (если это ссылка, ведущая на другой URL)

Если именно ссылка, ведущая на URL (что я наблюдаю в примерах), которую можно кинуть в закладки, открыть в новом табе и т.п. — никаких вопросов, естественно, странно было бы видеть тут что-то другое, кроме <a> . Недоумение у меня вызывают мутанты с href="javascript:void(0)" (и то в относительно лучшем случае) в качестве весьма далеких от ссылок вещей — типа той же сабмитилки формы.

  On 4/30/2012 at 7:09 PM, NeoXidizer said:

Везде разный функционал, но оформление и логическое преднозначение элемента - одинаково. Так почему бы и не использовать?

Вот хоть убей не могу согласиться, что логическое предназначение ссылки (со всеми ее специфичными ссылочными радостями, см. выше) и кнопки отправки формы (которая не имеет смысла в отрыве от формы и вводимых в нее данных) одинаково. Вот единообразие оформления — аргумент, согласен (хотя тут возникает вопрос к дизайнерам — зачем делать такие функционально разные элементы визуально одинаковыми). Получается, основная причина — сложность кроссбраузерной стилизации нативных кнопок и лень/неопытность верстальщиков в таковой? Или я в упор не вижу еще чего-то очевидного?

[NeoXidizer]

  On 4/30/2012 at 7:50 PM, ruslan.savenok said:

У них все сделано на связке <а>, т.к. используется ruby on rails

откуда информация?

  On 4/30/2012 at 7:53 PM, SelenIT said:

  On 4/30/2012 at 7:09 PM, NeoXidizer said:

таким образом создается кроссбраузерная(включая IE6, с небольшими изъянами) объемная кнопка с закругленными уголками и тенью, которую можно влепить куда угодно и она будет работать вне зависимости от браузера и javascript (если это ссылка, ведущая на другой URL)

Если именно ссылка, ведущая на URL (что я наблюдаю в примерах), которую можно кинуть в закладки, открыть в новом табе и т.п. — никаких вопросов, естественно, странно было бы видеть тут что-то другое, кроме <a> . Недоумение у меня вызывают мутанты с href="javascript:void(0)" (и то в относительно лучшем случае) в качестве весьма далеких от ссылок вещей — типа той же сабмитилки формы.

а что такого? http://store.steampowered.com/agecheck/app/209100/ точно так же - ссылка-кнопка ведет на страницу, которую можно положить в закладки.

  On 4/30/2012 at 7:53 PM, SelenIT said:

  On 4/30/2012 at 7:09 PM, NeoXidizer said:

Везде разный функционал, но оформление и логическое преднозначение элемента - одинаково. Так почему бы и не использовать?

Вот хоть убей не могу согласиться, что логическое предназначение ссылки (со всеми ее специфичными ссылочными радостями, см. выше) и кнопки отправки формы (которая не имеет смысла в отрыве от формы и вводимых в нее данных) одинаково. Вот единообразие оформления — аргумент, согласен (хотя тут возникает вопрос к дизайнерам — зачем делать такие функционально разные элементы визуально одинаковыми). Получается, основная причина — сложность кроссбраузерной стилизации нативных кнопок и лень/неопытность верстальщиков в таковой? Или я в упор не вижу еще чего-то очевидного?

Лично для меня, все логично. Имеется кнопка или ссылка(специальным образом выделенный текст), при нажатии на которую совершается какое-либо действие, чаще всего - совершается переход на другую страницу. Везде суть одна - совершается определенное действие, при нажатии на элемент интерфейса. Будь то сайт, или Visual Studio, или еще что-то. Везде есть кнопки и ссылки. А как реализовывать - каждый решает сам. "Зачем делать такие функционально разные элементы визуально одинаковыми". Попытался представить, что на сайте steam каждая кнопка (скачать steam, зайти на форум, купить, пройти проверку возраста) будет офомлена по разному. Это кошмар. Гораздо удобнее, когда есть кнопка, которая выполяет действие, и выглядит она одинаково везде. Пользователь, увидив знакомый элемент интерфейса, который ему нужен (например, для совершения покупки), не будет искать что-либо еще. Именно этого, как мне кажется, и добиваются

Вот посмотрите на свою клавиатуру. более 100 кнопок, но все оформлены одинаково. Нет различий между кнопками, которые пишут буквы, и цифрами на NumPad'е, кроме их размера (в зависимости от клавиатуры). Хотя выполняет разное преднозанчение - ввод текста и ввод цифр.

[SelenIT]

  On 4/30/2012 at 9:08 PM, NeoXidizer said:

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

Вот посмотрите на свою клавиатуру. более 100 кнопок, но все оформлены одинаково. Нет различий между кнопками, которые пишут буквы, и цифрами на NumPad'е, кроме их размера (в зависимости от клавиатуры). Хотя выполняет разное преднозанчение - ввод текста и ввод цифр.

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

Или всё-таки на каком-то уровне абстракции уместно остановиться? Например, что кнопки клавиатуры выполняют одинаковое преднозначение — ввод (хоть и разных объектов — букв и цифр), а кнопки мышки выполняют другое действие — выбор объекта по указанным координатам? Как и ссылки выполняют одно действие — переход (хоть и по разным адресам), а кнопки формы — другое (подтверждение ввода), и неплохо бы, чтобы это функциональное различие было очевидно для юзера (как разница между клавиатурой и мышкой)?

  On 4/30/2012 at 9:08 PM, NeoXidizer said:

Попытался представить, что на сайте steam каждая кнопка (скачать steam, зайти на форум, купить, пройти проверку возраста) будет офомлена по разному. Это кошмар.

Все перечисленные действия однотипны и действительно являются ссылками по смыслу. Поэтому <a href="..."> в едином оформлении для них уместно и правильно. Но на этой странице есть еще одна кнопка, выполняющая совсем другую задачу и — внимание — оформленная совсем по-другому. Это кнопка в форме поиска. Она не ведет ни на какой определенный URL, класть ее в закладки бессмысленно и бесполезно. Чего ж ради ее оформили через

<a id="store_search_link" onclick="var form = $(this).up('form'); if ( form.onsubmit() ) form.submit(); return false;" href="#">
    <img src="http://cdn.store.steampowered.com/public/images/blank.gif">
</a>

кому какой в этом толк и профит?

[NeoXidizer]

честно, я не совсем понимаю, почему на этом форуме некоторые так яростно отстаивают какие-то фантомные принципы верстки.

  On 4/30/2012 at 5:02 PM, ablay2009 said:

Вообще то, если это форма, то принципиально делать инпутом.

  On 4/30/2012 at 5:08 PM, SelenIT said:

ссылка — совсем не вариант.

не буду дальше цитировать ежедневные подобные высказывания с других тем, наподобие "меню обязательно должно идти списком! <ul><li></li></ul>, иначе - никак нельзя, ведь так написано на html5doctor.com"

просто все верстают, как им удобно, как они умеют, какие у них взгляды на решение проблемы - делать закругленные углы или тень картинкой, или через css-свойства, забив на старые и альтернативные браузеры. У всех своя точка зрения, а единых принципов верстки даже у гигантов интернет индустрии не наблюдается - у всех все сделано и организовано по своему.

  On 4/30/2012 at 9:36 PM, SelenIT said:

  On 4/30/2012 at 9:08 PM, NeoXidizer said:

Вот посмотрите на свою клавиатуру. более 100 кнопок, но все оформлены одинаково. Нет различий между кнопками, которые пишут буквы, и цифрами на NumPad'е, кроме их размера (в зависимости от клавиатуры). Хотя выполняет разное преднозанчение - ввод текста и ввод цифр.

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

потому что дизайн мыши обусловлен эргономикой руки, а клавиатура пошла от печатной машинки + некий минимализм (нет гиганских торчащих кнопок) Я рассматривал кнопки внутри объекта "клавиатура", ведь на мыши тоже - правая и левая кнопки одинаковы, хотя совершают разное действие в системе. Отличаются они только от боковых-дополнительных кнопок, размер и расположение которых обусловлено дизайном, однако они все от друг-друга не сильно отличаются, чтобы человек понимал, что вот эта торчащая хрень справа, это такая же кнопка, как слева. Выполняют они в системе те же действия - быстрый вызов какой-то функции: запуск прогрммы/навигация в браузере/двойное нажатие/управление громкостью и т.д.

  On 4/30/2012 at 9:36 PM, SelenIT said:

Или всё-таки на каком-то уровне абстракции уместно остановиться? Например, что кнопки клавиатуры выполняют одинаковое преднозначение — ввод (хоть и разных объектов — букв и цифр), а кнопки мышки выполняют другое действие — выбор объекта по указанным координатам? Как и ссылки выполняют одно действие — переход (хоть и по разным адресам), а кнопки формы — другое (подтверждение ввода), и неплохо бы, чтобы это функциональное различие было очевидно для юзера (как разница между клавиатурой и мышкой)?

а можно посмотреть и с другой стороны, как это сделали вы: клавиатура - ввод, мышь - передача команды на указанные координаты, ссылки и кнопки на сайте - переход на другую страницу (мы не рассматриваем ajax отправку формы и моментальный приход ответа, на том сайте этого нет, а дисскусия завелась вокруг него). Действия ведь, действительно однотипны

  On 4/30/2012 at 9:36 PM, SelenIT said:

  On 4/30/2012 at 9:08 PM, NeoXidizer said:

Попытался представить, что на сайте steam каждая кнопка (скачать steam, зайти на форум, купить, пройти проверку возраста) будет офомлена по разному. Это кошмар.

Все перечисленные действия однотипны и действительно являются ссылками по смыслу. Поэтому <a href="..."> в едином оформлении для них уместно и правильно.

  On 4/30/2012 at 7:53 PM, SelenIT said:

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

  On 4/30/2012 at 9:36 PM, SelenIT said:

Но на этой странице есть еще одна кнопка, выполняющая совсем другую задачу и — внимание — оформленная совсем по-другому. Это кнопка в форме поиска. Она не ведет ни на какой определенный URL, класть ее в закладки бессмысленно и бесполезно. Чего ж ради ее оформили через

<a id="store_search_link" onclick="var form = $(this).up('form'); if ( form.onsubmit() ) form.submit(); return false;" href="#">
    <img src="http://cdn.store.steampowered.com/public/images/blank.gif">
</a>

кому какой в этом толк и профит?

Потому что так удобно? <a> не является блоным элементом, его размером легко управлять, браузеры не задают ему свои специфичные стили (как кнопке, созданной через <input>), к тому же, все кнопки на странице оформлены в виде <a>, а кнопка поиска - <input>? Это какая-то прихоть разработчика получается... [сарказм]захотелось ему, видите ли, разнообразить верстку[/сарказм]

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

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

[SelenIT]

NeoXidizer, позицию я понял. И даже где-то готов согласиться с ней, если речь о сверхдинамичном веб-приложении, где все действия имеют примерно один и тот же смысл, причем исключительно "здесь и сейчас" (класть в букмарки или отсылать другу нечего). Но для классических сайтов остаюсь при своём мнении.

  On 5/1/2012 at 8:08 AM, NeoXidizer said:

Потому что так удобно? <a> не является блоным элементом, его размером легко управлять, браузеры не задают ему свои специфичные стили...

Почему тогда не <span>? Он тоже не является "блочным элементом" (впрочем, <input> с button-ом — тоже, ну да ладно), его размером управлять не сложнее, чем размером <a>, браузеры задают ему еще меньше специфичных стилей, чем <a> (цвет, подчеркивание и т.п.), и в onclick-е для него нужно писать на целый "; return false" меньше. Плюс при отключенном JS (да, редкость, но бывает — у аддона NoScript для FF более 2 млн. юзеров) такая кнопка не делает ничего (не помогает, но и не мешает), а кнопка из <a> дает сбивающий с толку прыжок к началу страницы. Вот что меня удивляет.

Я бы еще понял, если бы в href кноп ссылки в форме поиска тем же скриптом подставлялся адрес будущего результата (как в поиске по картинкам и т.п. на Яндексе), тогда кнопка будет полноценной и полноправной ссылкой. Но ведь так делают единицы.

  On 5/1/2012 at 8:08 AM, NeoXidizer said:

Это какая-то прихоть разработчика получается... [сарказм]захотелось ему, видите ли, разнообразить верстку[/сарказм]

Вообще-то эта "прихоть" называется доступностью (accessibility). И дает реальный плюс в виде экономии запроса (и, соответственно, ускорения отклика формы вдвое) в Опере Мини, где JS выполняется на сервере (и доля которой в Рунете больше суммы всех старых IE). Да и просто здравый смысл — использовать для разных (хотя и похожих) задач специально предназначенные для них инструменты. А не забивать гвозди отверткой (хотя гвозди и шурупы выполняют одно предназначение — скреплять детали), потому что мастер к отвертке привык и из прихоти "не хочет разнообразить работу" [/сарказм]. Конечно, любые крайности и слепой фанатизм в любую сторону — зло, тут я согласен. Но в любой ситуации нужно исходить именно что не из "прихоти разработчика" (как ему проще, привычнее и приятнее), а прежде всего из специфики задачи — со всеми ее нюансами. И руководствоваться здравым смыслом и заботой о пользователе (а не прикрываться "заботой" о нем).

[cyber_ua]

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