Как изменить текст Submit на Like в HTML-кнопке

Быстрый ответ

Для того чтобы изменить стандартный текст кнопки "Submit" в HTML, используйте атрибут value следующим образом:

<input type="submit" value="Вперёд">

В результате текст на кнопке станет "Вперёд" вместо "Submit".

Подробнее о настройке кнопок

Рассмотрим подробности тонкой настройки кнопок после того, как мы увидели краткое решение.

Возможности атрибута value

Атрибут value является основным в изменении текста кнопки, устанавливая его содержимое:

<input type="submit" value="Нравится">

Подробнее об этом расскажет наш спикер на видео

Стилизация кнопок с помощью CSS классов

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

<input type="submit" class="like" value="Нравится">

Используя класс "like", вы можете применить индивидуальные CSS-стили для оформления кнопки.

Гибкость элемента button

Элемент <button> предоставляет больше возможностей для детальной настройки в сравнении с <input>:

<button type="submit">Нравится 👍</button>

Обратите внимание на совместимость с устаревшими браузерами, так как <button> может функционировать не корректно в некоторых старых версиях Internet Explorer.

Как избежать ошибок при настройке

Для того чтобы настройка кнопки была непревзойдённой, стоит избегать потенциальных ошибок.

Внимательно к названиям

Текст, который отображается на кнопке, не зависит от атрибута name="submitBtn", хотя он важен при обработке данных формы.

Помните о доступности

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

Визуализация

Представим, у вас есть дверной звонок 🚪🔔:

<input type="submit" value="Звонок">

Вы хотите изменить надпись на "Нажми", поэтому вы делаете следующее 🚪🆕🔘:

<input type="submit" value="Нажми">

Теперь ваш input приглашает гостей нажать кнопку, на которой написано "Нажми".

Улучшение пользовательского опыта через настройку кнопок

Настройка текста на кнопках может значительно улучшить взаимодействие с пользователем. Рассмотрим, почему это так важно.

Соответствие действию

Текст на кнопке должен отражать ожидаемое действие, например "Поиск" для формы поиска, "Скачать" для загрузок. Это усиливает интуитивность интерфейса.

Соответствие бренду

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

Интернационализация

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

Полезные материалы

1. HTML input type Attribute — изучение различных типов input, которые можно использовать в HTML-формах.
2. <form>: Элемент форма – HTML: HyperText Markup Language | MDN — подробности создания и оформления форм в HTML.
3. ::placeholder | CSS-Tricks — настройка текста placeholder и его стилей.
4. HTML button tag — более глубокое изучение тега <button> для ещё большего контроля над кнопками.
5. JavaScript DOM EventListener — информация о добавлении обработчиков событий к элементам для динамических действий.
6. HTML DOM Button value Property — краткая информация о измении значения кнопки с помощью JavaScript.