Отличие <input type="image"> от <input type="submit">

[psywalker]

Дружище, а ты сам что думаешь насчёт:

Думаю, что <input type="image" /> пора на пенсию, как и <input type="button" />

Т.е. предлагаешь использовать везде <input type="submit" /> ?

[Int]

Это как же без button? Типа <button></button> везде втыкать?

[s0rr0w]

Это как же без button? Типа <button></button> везде втыкать?

<input type="button"> не жизнеспособен без JavaScript'а. Они ничего не делает сам по себе. Теперь вопрос, зачем нужна кнопка, которую может заменить практически любой элемент? Как один из вариантов, чтобы кнопка была именно кнопкой. Теперь возникает второй вопрос, зачем много кнопок в одной форме, если должны быть всего две: Cancel и Save(Submit, Add, Post, Calculate etc.)?

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

[psywalker]

Это как же без button? Типа <button></button> везде втыкать?

<input type="button"> не жизнеспособен без JavaScript'а. Они ничего не делает сам по себе. Теперь вопрос, зачем нужна кнопка, которую может заменить практически любой элемент? Как один из вариантов, чтобы кнопка была именно кнопкой. Теперь возникает второй вопрос, зачем много кнопок в одной форме, если должны быть всего две: Cancel и Save(Submit, Add, Post, Calculate etc.)?

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

Т.е. ты предлагаешь использовать например дивы вместо кнопок?

[s0rr0w]

Т.е. ты предлагаешь использовать например дивы вместо кнопок?

Да хоть <TT />

[LunatiK]

Т.е. ты предлагаешь использовать например дивы вместо кнопок?

А чё нет? Просто и стильно. Ради тупо слова «симантики» усложнять жизнь и себе и пользователям? Красота спасёт Вэб!

[Shift-Web]

Это как же без button? Типа <button></button> везде втыкать?

<input type="button"> не жизнеспособен без JavaScript'а. Они ничего не делает сам по себе. Теперь вопрос, зачем нужна кнопка, которую может заменить практически любой элемент? Как один из вариантов, чтобы кнопка была именно кнопкой. Теперь возникает второй вопрос, зачем много кнопок в одной форме, если должны быть всего две: Cancel и Save(Submit, Add, Post, Calculate etc.)?

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

А как же пользователи лишённые JS?

[s0rr0w]

А как же пользователи лишённые JS?

Они тормозят прогресс. Им не место в современном мире.

[psywalker]

s0rr0w

А почему бы тогда просто не забить на эти погрешности в браузерах, в плане кроссбраузерности, ну будет например в Хроме на пк отличаться от ФФ, ну и что, функционал-то пахать будет главное?

Т.е. ты предлагаешь использовать например дивы вместо кнопок?

А чё нет? Просто и стильно. Ради тупо слова «симантики» усложнять жизнь и себе и пользователям? Красота спасёт Вэб!

Согласен, я всегда готов пожертвовать семантикой ради качества.

[Int]

У меня в проектах нет тега form вообще, хотя самих логически сгруппированых форм навалом.

А у меня есть, на этом спор и окончен. Не хочу рисовать кнопки, я вообще не люблю в гимпе ковыряться, а type="button" набрать легко.

[sigma77]

s0rr0w

А почему бы тогда просто не забить на эти погрешности в браузерах, в плане кроссбраузерности, ну будет например в Хроме на пк отличаться от ФФ, ну и что, функционал-то пахать будет главное?

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

[s0rr0w]

А у меня есть, на этом спор и окончен. Не хочу рисовать кнопки, я вообще не люблю в гимпе ковыряться, а type="button" набрать легко.

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

[Int]

Чёрные? о_О

Ну тогда кастомные стили браузера тоже могут выбиваться из дизайна.

[s0rr0w]

Чёрные? о_О

Темы бывают разными. В мире существует более одной операционной системы...

[Searcher]

Вообще-то image передает ещё и то что у него в value, а value у него не занято визуальной информацией как у button, и это весьма серьезное отличие.

[SelenIT]

Вообще-то image передает ещё и то что у него в value

Насколько я в курсе, не везде, да и не обязан по стандарту. По стандарту value, не завязанный на визуальную информацию, должен передавать как раз <button type="submit">, но тут нас, как обычно, преследует давнее огорченie...

Имхо, то, что стандартные кнопки (как <input type="submit/reset/button">, так и аналогичные <button>) по дефолту выглядят и ведут себя (при наведении, нажатии, получении фокуса tab-ом и т.п.) как привычные юзеру кнопки его любимой среды — не баг, а мегафича, и горе-дизигнеров, которые покушаются на эту привычность ради псевдогламурных рюшечек, надо наказывать 15-ю сутками общественных работ под голым ДОСом . А главный недостаток эмуляции кнопок чем попало — то привычное и удобное поведение, которое для штатных кнопок получается само (тот же tab и т.п.), с такими заменами требует лишних и не всегда очевидных телодвижений в скриптах. Либо замена получается не такой уж полноценной. Поэтому я не согласен, что <input type="button"> — лишний элемент.

Про варианты сабмит форм мои имхи таковы:

• <input type="submit"> — самый "железобетонный" вариант, работает везде и с любым кол-вом кнопок (когда в зависимости от нажатой кнопки форма выполняет разные действия), единственное противопоказание — дизайнерские заморочки;
  
• <button type="submit"> — в теории почти идеал, на практике в старых IE работает лишь для единственной кнопки и требует корявых хаков для стилизации в FF и вебкитных, поэтому оборачивается гемо... в смысле, потерянным временем;
  
• <input type="image"> — вообще-то сильно смахивает на пережиток старины, но на практике часто самый приемлемый компромисс между причудами дизайнера, надежностью формы и быстротой реализации. Лично мне еще нравится идея совмещения отправки с каптчей ("для отправки формы щелкните медвежонка по носу" и т.п.), тут как раз image в тему по его прямому назначению с координатами. Правда, хороших примеров реализации мне как-то не попадалось. Ну и мышкозависимость, конечно, минус...
  
• <whatever onclick="form.submit()"> — позволяет полностью ублажить дизайнера, но таит кучу подводных камней по части юзабилити.
  

Еще мне нравится такой подход: по дефолту поставить самую тупую кнопку type="submit", а в процессе загрузки или по ondomready накрыть ее сверху гламурной кастомной. И скриптом отражать в кастомной кнопке состояние настоящей (напр., получение фокуса с клавиатуры). Тогда в идеальных условиях юзер получит привычное поведение в гламурной обертке, а в неидеальных — форму, работоспособную несмотря ни на что...

[s0rr0w]

<whatever onclick="form.submit()"> — позволяет полностью ублажить дизайнера, но таит кучу подводных камней по части юзабилити.

Например?

[SelenIT]

Та же клавиатурная навигация. Довольно часто даже у меня при заполнении формы логина на автомате выходит такой паттерн: кликом ставлю фокус в поле логина, а дальше чисто клавиатура (набор - таб - набор - таб - энтер). Со штатной кнопкой проблемы не возникнет, со ссылкой на ее месте — скорей всего тоже (хотя под Оперой под вопросом), а вот с дивом вместо кнопки фокус может улететь с формы напрочь... Конечно, вернуть руку на мышку и "добить" форму кликом не проблема, но "осадок останется". Если кнопок несколько, всё еще малость нетривиальнее (у штатных кнопок есть всякие tabindex-ы c accesskey-ями, а с кастомными, насколько я могу судить, не обойтись без глобального мониторинга клавиатуры по всей странице)...

[s0rr0w]

Та же клавиатурная навигация. Довольно часто даже у меня при заполнении формы логина на автомате выходит такой паттерн: кликом ставлю фокус в поле логина, а дальше чисто клавиатура (набор - таб - набор - таб - энтер). Со штатной кнопкой проблемы не возникнет, со ссылкой на ее месте — скорей всего тоже (хотя под Оперой под вопросом), а вот с дивом вместо кнопки фокус может улететь с формы напрочь... Конечно, вернуть руку на мышку и "добить" форму кликом не проблема, но "осадок останется". Если кнопок несколько, всё еще малость нетривиальнее (у штатных кнопок есть всякие tabindex-ы c accesskey-ями, а с кастомными, насколько я могу судить, не обойтись без глобального мониторинга клавиатуры по всей странице)...

Вообще-то правильно не надеяться на автоматическую расстановку табиндексов, а расставлять их вручную самому.

[SelenIT]

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