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

[psywalker]

Привет!

Дано:

Есть две кнопки.

1. <input type="image">

2. <input type="submit">

Отличаются они только визуально, а выполняют одну и туже операцию, отправляют данные формы на сервер.

Вопрос:

В чём отличие этих кнопок помимо визуального вида?

И ещё отдельно вопрос к Владу. Влад, расскажи пожалуйста поподробнее вот об этом: http://forum.htmlbook.ru/index.php?showtopic=27256&view=findpost&p=204787

И с точки зрения семантики, какой тег правильный и в каких ситуациях?

[Vlad]

Ну ты же сам стал сторонником семантики, типа использовать элементы только по их прямому назначению. Назначение кнопки быть кнопкой, назначение изображения быть изображением. В принципе, вся разница. Если эти элементы сделать по виду одинаковыми, то при отправке формы кнопка отправляет значение name, рисунок координаты точки нажатия.

[psywalker]

Vlad

Ну ты же сам стал сторонником семантики, типа использовать элементы только по их прямому назначению.

Да, согласен, но я даже как-то не задумывался об этом раньше, всегда юзал <input type="submit">. Но теперь буду иметь ввиду, спасибо.

Если эти элементы сделать по виду одинаковыми, то при отправке формы кнопка отправляет значение name, рисунок координаты точки нажатия.

А вот тут для меня главная непонятка. С одной стороны ты говоришь, что они одинаковы по функционалу, но с другой, что если их сделать визуально одинаковыми, то они будут отправлять разные данные. Поэтому тут вопросы:

1.

кнопка отправляет значение name

Значение name чего? Можно примерчик.

2.

рисунок координаты точки нажатия

А что за координаты, можно примерчик.

[Vlad]

<input type="submit" name="bla">

Здесь пример рисунка. Можешь запустить его и щёлкнуть. В адресной строке увидишь пересылаемый результат.

http://htmlbook.ru/samhtml5/formy/pole-s-izobrazheniem

[psywalker]

<input type="submit" name="bla">

Здесь пример рисунка. Можешь запустить его и щёлкнуть. В адресной строке увидишь пересылаемый результат.

http://htmlbook.ru/samhtml5/formy/pole-s-izobrazheniem

Да, я понял, т.е. x=7&y=3 означает координаты кнопки?

Если да, то тогда почему ты утверждаешь, что <input type="image"> и <input type="submit"> НЕ отличаются? Ведь данные будут передаваться разные?

[alanvanduke]

name можно использовать, как идентификатор нажатой кнопки (отправляется только name той кнопки, которая нажата).

Пример:

HTML (например /edit.php):

<form action="save.php" method="post">
<input name="commit" value="Сохранить и Закрыть" />
<input name="continue" value="Сохранить и Продолжить" />
</form>

PHP (например /save.php):

<?php

if( isset($_POST['commit']) )
   redirect('/main.php');
else
   redirect('/edit.php');

?>

Edited June 13, 2011 by alanvanduke

[Vlad]

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

[psywalker]

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

Ааа, т.е. отправка координат у кнопки и значения name - это как бы отдельная часть от отправки данных и отправляется просто вместе с ними, и никак не влияет на отправленные данные?

[Vlad]

Ну, конечно.

[psywalker]

Ну, конечно.

Понял. Единственное меня смущает, что отправка значения name может всё таки полезная и нужная вещь, которая необходима для данных? Т.е. я понимаю, что и без значения name данные формы будут отправлены, но разве значение атрибута name не так важны?

[Vlad]

Это от ситуации зависит. Некоторые разработчики по name из submit судят о том, что форма отправлена на сервер и получена.

[psywalker]

Это от ситуации зависит. Некоторые разработчики по name из submit судят о том, что форма отправлена на сервер и получена.

Ну вот, поэтому перестраховываясь, я всё же для отправки данных использую именно submit

[alb]

Некоторые разработчики по name из submit судят о том, что форма отправлена на сервер и получена.

уу, эт чё за разработчики такие ?) О том, что форма отправлена, следует судить по методу клиентского запроса, в случае же аяксовой отправки, например get-ом, о факте отправке нам говорят именно эти самые аякс х-заголовки. И это важно, так как если мы будем писать какой-то CMF, то при составлении маршрутов раутинга, ни в коем случае нельзя привязываться к каким-то именованиям клиентской стороны, то есть именам кнопок, делая это, мы нарушаем основные принципы MVC вообще, а в случае веб-интерфейсов, ещё и устанавляваем жёсткую связь между въюхой и бизнес-логикой.

ну а <input type="image"> - это скорее-всего прежитки старого веба, когда и стили то особо никто не пользовал, но украшательства кнопкам сабмита всё-таки были нужны, поэтому и ввели.

Что семантичнее использовать для сабмита при просто отправки формы, когда кнопка сабмита задана картинкой? Имхо, всё-таки <input type="submit">, а type="image", только когда нужно подобие image maps-ов при сабмите.

[psywalker]

а type="image", только когда нужно подобие image maps-ов при сабмите.

А приведи плиз пример.

[alb]

ну например физически одна кнопка в виде изображения Ваш пол: "Мальчик|Девочка". Здесь "Мальчик" и "Девочка" занимают 50% кнопки, и зная общую её ширину, мы можем определить пол. Так же, например, выбор ну... скажем "перса" в какой-то браузерке: групповая картинка Эльфа, Гнома, Хоббита и т.д. и при сабмите можем получить какого перса выбрал игрок, имея только одну кнопку.

в действительности, например эту часть, я бы делал этот выбор например css remote rollovers-ами, и при выборе каждого пункта формы, собирал бы её данные для отправки аяксом.

то есть я про то, что type="image" - это скорее наследие old plain html, и не выпиляли его только из-за того, что позволяет передать координаты клика при сабмите, то есть, нужна в исключительно в специфических приложениях, а все кнопки, которые используют картинку и по своему назначению являются только сабмит-кнопками, я бы всё-таки использовал type="submit"

[psywalker]

я бы делал этот выбор например css remote rollovers-ами, и при выборе каждого пункта формы, собирал бы её данные для отправки аяксом.

К сожалению не дружу с английским. Если не сложно, объясни поподробнее, что это за техника и как её использовать?

[alb]

крутись в самый конец страницы, там есть фотка коленного сустава, маркерами выведены номера, а справа - названия. Подводишь мышку к номеру на картинке, и справа подсвечивается название. Кстати, другой пример - описание к фоткам вконтакте - наводишь мышку на кого-то и за пределами фотки появляется имя этого человека.

Это так же ещё называется CSS ImageMaps (но правильнее именно css remote rollover, как назвал этот способ автор, в первые предложивший использовать для этого чистый ЦСС и абсолютное позиционирование).

То есть, если говорить в привязке к сабжу, то определние перса я бы делал именно через css remote rollover, и передавал бы на сервер сериализованную форму с дополнительными полями, одним из которых бы было название (id) перса, выбранного кликом по css rollover картинки.

кстати, вот более вменяемый пример http://www.cssplay.co.uk/menu/imap.html этого

как оно называется по-русски, сорь не знаю, так как переведённые мануалы не читаю в принципе

[psywalker]

крутись в самый конец страницы, там есть фотка коленного сустава, маркерами выведены номера, а справа - названия. Подводишь мышку к номеру на картинке, и справа подсвечивается название. Кстати, другой пример - описание к фоткам вконтакте - наводишь мышку на кого-то и за пределами фотки появляется имя этого человека.

Это так же ещё называется CSS ImageMaps (но правильнее именно css remote rollover, как назвал этот способ автор, в первые предложивший использовать для этого чистый ЦСС и абсолютное позиционирование).

То есть, если говорить в привязке к сабжу, то определние перса я бы делал именно через css remote rollover, и передавал бы на сервер сериализованную форму с дополнительными полями, одним из которых бы было название (id) перса, выбранного кликом по css rollover картинки.

кстати, вот более вменяемый пример http://www.cssplay.co.uk/menu/imap.html этого

как оно называется по-русски, сорь не знаю, так как переведённые мануалы не читаю в принципе

Ага, понял, спасибо за разъяснения.

[alanvanduke]

крутись в самый конец страницы, там есть фотка коленного сустава, маркерами выведены номера, а справа - названия. Подводишь мышку к номеру на картинке, и справа подсвечивается название. Кстати, другой пример - описание к фоткам вконтакте - наводишь мышку на кого-то и за пределами фотки появляется имя этого человека.

Это так же ещё называется CSS ImageMaps (но правильнее именно css remote rollover, как назвал этот способ автор, в первые предложивший использовать для этого чистый ЦСС и абсолютное позиционирование).

То есть, если говорить в привязке к сабжу, то определние перса я бы делал именно через css remote rollover, и передавал бы на сервер сериализованную форму с дополнительными полями, одним из которых бы было название (id) перса, выбранного кликом по css rollover картинки.

кстати, вот более вменяемый пример http://www.cssplay.co.uk/menu/imap.html этого

как оно называется по-русски, сорь не знаю, так как переведённые мануалы не читаю в принципе

Image Area куда лучше подходит, чем CSS ImageMaps, потому что позволяет выделить нестандартные области на картинке.

[psywalker]

Тема для меня ещё актуально, хотелось бы послушать ещё мнения.

[alanvanduke]

Как насчет

<button><img src="..." /></button>

как полная альтернатива

<input type="image" src=".." />

[Shift-Web]

Ну ты же сам стал сторонником семантики, типа использовать элементы только по их прямому назначению. Назначение кнопки быть кнопкой, назначение изображения быть изображением. В принципе, вся разница. Если эти элементы сделать по виду одинаковыми, то при отправке формы кнопка отправляет значение name, рисунок координаты точки нажатия.

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

[s0rr0w]

<button><img src="..." /></button>

как полная альтернатива

<input type="image" src=".." />

А координаты клика эта "альтернатива" передает?

[psywalker]

s0rr0w

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

1. В чём отличие этих кнопок помимо визуального вида?

2. И с точки зрения семантики, какой тег правильный и в каких ситуациях?

[s0rr0w]

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

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