Как использовать изображение в качестве кнопки отправки?

Может ли кто-нибудь помочь изменить это, чтобы включить изображение с именем BUTTON1.JPG вместо стандартной кнопки submit?

<form id='formName' name='formName' onsubmit='redirect();return false;'>
    <div class="style7">
        <input type='text' id='userInput' name='userInput' value=''>
        <input type='submit' name='submit' value='Submit'>
    </div>
</form>

html form-submit submit-button
person Rolf    schedule 07.01.2013    source источник
comment
Я просто пытался отличить от кода. Я не знал, что они уже делают это.   -  person Rolf    schedule 07.01.2013

Ответы (5)


arrow_upward
22
arrow_downward

Почему бы и нет:

<button type="submit">
<img src="mybutton.jpg" />
</button>
person volume one    schedule 06.10.2014
comment
мне кажется лучше, так как он сохраняет основной тип действия, запускаемого элементом - person Webwoman; 12.03.2019
comment
Недопустимо связывать карту изображения с IMG, который отображается как содержимое элемента BUTTON. - person Erik Thiart; 22.07.2019
comment
большое спасибо, переполнение стека нуждается в одной важной функции, чтобы показать правильный ответ и пополнить рейтинг, чтобы начать статистику. этот ответ действительно помогает полностью. другой ответ не может, так зачем тратить время разработчиков. - person Mr S Coder; 25.08.2020

arrow_upward
9
arrow_downward

Используйте CSS:

input[type=submit] {

background:url("BUTTON1.jpg");

}

Для HTML:

<input type="submit" value="Login" style="background:url("BUTTON1.jpg");">
person Muhammad Talha Akbar    schedule 07.01.2013
comment
куда мне это вставить? что мне нужно удалить? (я не программист) - person Rolf; 07.01.2013
comment
Наблюдение: в долгосрочной перспективе не в интересах сайта, полного программистов, учить непрограммистов тому, как выжить без найма программистов... - person Devin Burke; 07.01.2013
comment
хахахаха: P Я также собирался опубликовать ответ, который вы опубликовали, но я подумал, что это не очень хорошая идея - говорить новым программистам использовать древние скрипты! Я знаю, я тоже не был хорошим помощником в stacky до того, как начал его, но теперь я просто лучше :D - person Muhammad Talha Akbar; 07.01.2013

arrow_upward
4
arrow_downward

Просто уберите рамку и добавьте фоновое изображение в css

Пример:

$("#form").on('submit', function() {
   alert($("#submit-icon").val());
});
#submit-icon {
  background-image: url("https://pixabay.com/static/uploads/photo/2016/10/18/21/22/california-1751455__340.jpg"); /* Change url to wanted image */
  background-size: cover;
  border: none;
  width: 32px;
  height: 32px;
  cursor: pointer;
  color: transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form">
  <input type="submit" id="submit-icon" value="test">
</form>

person Community    schedule 27.10.2016

arrow_upward
-4
arrow_downward

HTML:

<button type="submit" name="submit" class="button">
  <img src="images/free.png" />
</button>

CSS:

.button {  }
person Shaddy    schedule 10.10.2014

arrow_upward

arrow_downward

person    schedule
comment
Джастин, последний вопрос, как передать это значение «userInput» в форму следующей страницы, чтобы его можно было отправить со следующей формой. Я хочу, чтобы значение было скрыто. - person Rolf; 07.01.2013
comment
Это действительно сложный вопрос, потому что я понятия не имею, с какими языками программирования или фреймворками вы работаете. Лучше опубликовать это как отдельный вопрос и предоставить эту информацию (например, ASP.NET, ASP, PHP и т. д.), чтобы кто-то, специализирующийся в этой области, мог помочь вам более тщательно. Но сначала я бы просмотрела сайт, чтобы узнать, не задавался ли этот вопрос раньше. - person Devin Burke; 07.01.2013
comment
Обратите внимание, что это будет вести себя по-разному в форме по сравнению с фактическим вводом типа submit при определенных условиях. - person TheLegendaryCopyCoder; 14.02.2019
comment
Лучший ответ! Официальный способ сделать кнопку отправки изображения. См. также: developer.mozilla.org/en-US /docs/Web/HTML/Элемент/ввод/изображение - person ArendE; 21.04.2019
comment
Это не сработает, если вы действительно хотите встроить элемент img или svg. - person ICW; 03.09.2019
comment
Этот ответ следует обновить, чтобы объяснить больше почему, а не только как. Как указал @ArendE, это официальный способ сделать это. <input> элементы типа image используются для создания графических кнопок отправки . - person rinogo; 09.07.2021