Вопрос

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

Если вам нужно отправить данные на другую страницу, но ни одна из них не требует пользовательского ввода, вы можете отправить их по ссылке (или форме) через GET или через форму через POST.Проблема в том, что первый создает уродливые URL-адреса, а второй требует submit кнопка, которая выглядит неуместно.Конечно, я мог бы придумать изображение, но что, если бы мне просто нужен был выбираемый текст?

Итак, я начал немного играть, и Firefox, похоже, отображает следующее так, как я хочу, в виде интерактивной ссылки, которая отправляет форму.Все, что вам нужно сделать, это удалить src атрибут из input type='image' тег:

<form action='some_page' method='post'>
  <input type='hidden' name='email_address' value='test@test.com' />
  <input type='image' value='E-mail User' />
</form>

Работает ли это решение в других браузерах?Каковы недостатки этого (помимо очевидного факта, что ваш CSS-код ссылки не применяется должным образом)?

Это было полезно?

Решение

Мне нравится решение, которое использует реальную ссылку (скрытую), которая открывается через javascript в сочетании с кнопкой внутри тега noscript.

 <form action="some_page" method="post">
    <input type="hidden" name="email_address" value="test@test.com" />
    <a href="#" class="submit-link" style="display: none;">E-mail User</a>
    <noscript>
       <input type="submit" value="E-mail User" />
    </noscript>
 </form>

 $('submit-link').click( function() {
     $(this).closest('form').submit();
     return false;
 })
 .show();

Другие советы

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

<input type="submit" value="E-mail User" class="link">

<style>
input.link {
    border: none;
    background: none;
    cursor: pointer;
    /* etc */
}
</style>

Используя HTML 4.01 Strict, он работал на FF3.5, но не на IE8 или Chrome.Ссылка работает, но там нет текста, просто пустое место для отсутствующего изображения.

Таким образом, это может показаться плохой идеей, поскольку это может работать только в одном браузере.Для меня это довольно большой недостаток, если только ваш рынок не предназначен только для браузеров Firefox, тогда, дерзайте, отличная идея.:)

Как предположил Джеймс Скидмор, легко выполнить onclick с помощью javascript, чтобы отправить его в виде публикации.

Я бы предложил ненавязчивый JS, поэтому, если у кого-то не включен JS, он будет работать как ссылка, выполняя отправку GET, но если у них есть JS, это изменит поведение на POST без уродливого изменения URL.

Или, как уже упоминалось, фон изображения может сливаться с фоном формы.

Вместо этого вы могли бы отправить форму динамически через JS или использовать обычную кнопку отправки с прозрачным или белым фоном.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top