HTML:Как сделать кнопку отправки с текстом + изображением в ней?

Question

Я хотел бы иметь кнопку отправки, которая содержит текст и образ.Возможно ли это?

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

<button type="button">
<img src="save.gif" alt="Save icon"/>
<br/>
Save
</button>

...но я не нашел способа использовать один из них для своих форм.Есть ли способ сделать это с помощью

<input type="submit" ...> 

элемент?Или я вынужден идти на изображение или текст способ?Спасибо за вашу помощь!

Answer 1

input type="submit" это лучший способ иметь кнопку отправки в форме.Недостатком этого является то, что вы не можете ввести в качестве его значения ничего, кроме текста.Элемент button может содержать другие HTML-элементы и содержимое.

Попробуйте положить type="submit" вместо того , чтобы type="button" в вашем button элемент (Источник).

Однако обратите особое внимание на следующее с этой страницы:

Если вы используете элемент button в HTML-форме, разные браузеры будут передавать разные значения.Internet Explorer отправит текст между <button> и </button> теги, в то время как другие браузеры будут отправлять содержимое атрибута value.Используйте элемент ввода для создания кнопок в HTML-форме.

Answer 2

Допустим, ваше изображение представляет собой иконку размером 16x16 .png под названием icon.png Используйте возможности CSS!

CSS - файл:

input#image-button{
    background: #ccc url('icon.png') no-repeat top left;
    padding-left: 16px;
    height: 16px;
}

HTML:

<input type="submit" id="image-button" value="Text"></input>

Это приведет к размещению изображения слева от текста.

Answer 3

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

Ниже используется комбинация

• шрифт значка (например,Шрифт потрясающий),
• кодировки символов в HTML (например, &#xf090)
• кодовая точка Юникода значка, который вы хотите использовать (например &#xf090 для Вход логотип),
• CSS - файл:

В HTML:

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

<form name="signin" action="#" method="POST">
    <input type="text" name="text-input" placeholder="&#xf183; your username" class="stylish"/><br/>
    <input type="submit" value="&#xf090; sign in" class="stylish"/>
</form>

В CSS:

.stylish {
    font-family: georgia, FontAwesome;
}

jsFiddle ( Ошибка )

Обратите внимание на font-family спецификация:все символы / кодовые точки будут использовать georgia, возвращаясь к FontAwesome для любых кодовых точек georgia не предоставляет символов для. georgia не предоставляет никаких символов в частное использование диапазон, именно там , где FontAwesome разместил свои иконки.

Answer 4

Вы сами действительно близки к ответу

<button type="submit">
<img src="save.gif" alt="Save icon"/>
<br/>
Save
</button>

Или вы можете просто удалить атрибут type-attribute

<button>
<img src="save.gif" alt="Save icon"/>
<br/>
Save
</button>

Answer 5

Я нашел очень простое решение!Если у вас есть форма и вы хотите иметь пользовательскую кнопку отправки, вы можете использовать какой-нибудь код, подобный этому:

<button type="submit">
    <img src="login.png" onmouseover="this.src='login2.png';" onmouseout="this.src='login.png';" />
</button>

Или просто направьте его по ссылке на страницу.

Answer 6

<input type="button" id="btnTexWrapped" style="background: url('http://i0006.photobucket.com/albums/0006/findstuff22/Backgrounds/bokeh2backgrounds.jpg');background-size:30px;width:50px;height:3em;" />

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

Я надеюсь, что это было полезно.

Answer 7

Пожалуйста, перейдите по этой ссылке.У вас может быть любая кнопка, которую вы хотите, просто используйте javascript для отправки формы

http://www.w3schools.com/jsref/met_form_submit.asp

Answer 8

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

Поле изображения_x:80 Поле изображения_y:17

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

Вот мой код для кнопок.

    <tr>
      <td><input type="image" src="images/sendmessage.gif" / ></td>
      <td colspan="2"><input type="image" src="images/printmessage.gif"onclick="window.print()"></td>
    </tr>

Может быть, это поможет и тебе, и мне.

:-)

Answer 9

Ты можешь это сделать:

HTML - код:

    <form action="submit.php" method="get" id="form">        
    <a href="javascript: submitForm()">        
    <img src="save.gif" alt="Save icon"/>        
    <br/>        
    save        
    </a>        
    </form>        

примечание:вы можете использовать и действие, и метод по вашему выбору, и идентификатор, и любой текст, начинающийся с href="javascript:и заканчивая ()" но убедитесь, что, когда я набираю одни и те же данные, такие как id и некоторый текст, вы вводите свою замену в тех же местах (java script и HTML-код).

код java script:

    var form=document.getElementById("form");        
    function submitForm()        
    {        
    form.submit();       
    }         

Answer 10

Вот другой пример:

<button type="submit" name="submit" style="border: none; background-color: white">