How to make a submit button with text + image in it?
I would like to have a submit button that contains text and an image. Is this possible?
I can get the exact look I want with code that looks like:
. but I haven’t found a way to have one of those for my forms. Is there a way to do that with an
element? Or am I forced to go the image or text way?
10 Answers 10
Let’s say your image is a 16×16 .png icon called icon.png Use the power of CSS!
This will put the image to the left of the text.
input type=»submit» is the best way to have a submit button in a form. The downside of this is that you cannot put anything other than text as its value. The button element can contain other HTML elements and content.
Try putting type=»submit» instead of type=»button» in your button element (source).
Pay particular attention however to the following from that page:
If you use the button element in an HTML form, different browsers will submit different values. Internet Explorer will submit the text between the <button> and </button> tags, while other browsers will submit the content of the value attribute. Use the input element to create buttons in an HTML form.
Как сделать — стиль текстовых кнопок
Чтобы получить «текст кнопки» вид, мы удаляем цвет фона по умолчанию и границы:
Пример
.btn <
border: none;
background-color: inherit;
padding: 14px 28px;
font-size: 16px;
cursor: pointer;
display: inline-block;
>
/* On mouse-over */
.btn:hover
Текстовые кнопки с индивидуальным фоном
Текстовые кнопки с определенным цветом фона при наведении:
Пример
.btn <
border: none;
background-color: inherit;
padding: 14px 28px;
font-size: 16px;
cursor: pointer;
display: inline-block;
>
.success:hover <
background-color: #4CAF50;
color: white;
>
.info:hover <
background: #2196F3;
color: white;
>
.warning:hover <
background: #ff9800;
color: white;
>
.danger:hover <
background: #f44336;
color: white;
>
.default:hover <
background: #e7e7e7;
>
Перейдите на наш CSS кнопки учебник, чтобы узнать больше о том, как стиль кнопок.
<input type=»button»>
<input> типа button визуализируются как простые нажимные кнопки, которые можно запрограммировать для управления пользовательскими функциями в любом месте веб-страницы по мере необходимости, когда им назначена функция обработчика событий (обычно для click ).
Try it
Примечание. Хотя элементы <input> типа button по- прежнему являются корректным HTML, более новый элемент <button> теперь является предпочтительным способом создания кнопок. Учитывая, что текст метки <button> вставляется между открывающим и закрывающим тегами, вы можете включать HTML в метку, даже изображения.
Value
Кнопка со значением
Атрибут value элемента <input type=»button»> содержит строку, которая используется в качестве метки кнопки. value
Кнопка без значения
Если вы не укажете value , вы получите пустую кнопку:
Using buttons
<input type=»button»> не имеют поведения по умолчанию (их двоюродные братья, <input type=»submit»> и <input type=»reset»> используются для отправки и сброса форм соответственно). Чтобы заставить кнопки что-то делать, вам нужно написать код JavaScript для выполнения этой работы.
Простая кнопка
Мы начнем с создания простой кнопки с обработчиком события click value кнопки и текстовое содержимое следующего абзаца):
Скрипт получает ссылку на объект HTMLInputElement , представляющий <input> в DOM, сохраняя эту ссылку в переменной button . addEventListener() используется для установки функции, которая будет запускаться, когда на click происходят события щелчка.
Добавление клавиатурных сокращений к кнопкам
Сочетания клавиш, также известные как клавиши доступа и их эквиваленты, позволяют пользователю активировать кнопку с помощью клавиши или комбинации клавиш на клавиатуре. Чтобы добавить сочетание клавиш к кнопке — так же, как и к любому <input> , для которого это имеет смысл, — вы используете глобальный атрибут accesskey .
В этом примере, s указывается в качестве клавиши доступа (необходимо нажать кнопку s плюс конкретные клавиши-модификаторы для комбинации вашего браузера / ОС; см. ключ доступа для полезного списка).
Примечание . Проблема с приведенным выше примером, конечно же, заключается в том, что пользователь не будет знать, что такое ключ доступа! На реальном сайте вам придется предоставить эту информацию таким образом, чтобы не мешать дизайну сайта (например, путем предоставления легкодоступной ссылки, которая указывает на информацию о ключах доступа к сайту).
Отключение и включение кнопки
Чтобы отключить кнопку, укажите для нее disabled глобальный атрибут, например:
Установка атрибута disabled
Вы можете включать и отключать кнопки во время выполнения, установив для disabled значение true или false . В этом примере наша кнопка button.disabled = true включается, но если вы ее нажмете, она будет отключена с помощью button.disabled = true . setTimeout() функция затем используется для сброса кнопку обратно в его включенном состоянии после двух секунд.
Наследование отключенного состояния
Если атрибут disabled не указан, кнопка наследует свое disabled состояние от своего родительского элемента. Это позволяет включать и отключать все группы элементов одновременно, заключая их в контейнер, такой как элемент <fieldset> , а затем устанавливая в контейнере disabled .
Пример ниже показывает это в действии. Это очень похоже на предыдущий пример, за исключением того, что атрибут disabled устанавливается в <fieldset> при нажатии первой кнопки — это приводит к отключению всех трех кнопок до тех пор, пока не пройдет двухсекундный тайм-аут.
Примечание: Firefox будет, в отличии от других браузеров по умолчанию сохраняется динамическое отключенное состояние в виде <button> по загрузке страницы. Используйте атрибут autocomplete для управления этой функцией.
Validation
Кнопки не участвуют в валидации ограничений;они не имеют реальной ценности,которую можно было бы ограничить.
Examples
В приведенном ниже примере показано очень простое приложение для рисования, созданное с использованием элемента <canvas> и некоторых простых CSS и JavaScript (мы скроем CSS для краткости). Два верхних элемента управления позволяют выбрать цвет и размер пера для рисования. При нажатии на кнопку запускается функция, очищающая холст.