Отдельная метка и значение кнопки input в HTML: возможности

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

Для отображения текста на кнопке HTML используйте <input type="button"> с атрибутом value или <button>:

<input type="button" value="Отправить">  <!-- Весьма просто, правда? -->
<button type="button">Привет, я новая кнопка здесь!</button> <!-- У неё даже есть свой стиль! -->

Первый способ создаст кнопку с подписью "Отправить". Второй даст возможность встроить в <button> различные HTML-элементы, включая жирный текст и многое другое.

<input> против <button>

Хотя <input> — это проверенное временем решение для создания кнопок, <button> предоставляет больше возможностей, в частности, встроить другие HTML-элементы.

<button type="button">
   Нажми <strong>сейчас</strong>, не расстраивай котёнка! <!-- Кто захочет огорчить милого котёнка? -->
</button>

Такой подход не реализуем с использованием <input> поскольку он не поддерживает другие HTML-теги внутри себя.

Потаенное сокровище: когда использовать name и value

Атрибуты name и value особенно важны при отправке формы. Так, стандартная кнопка с текстом "Отправить" может передать уникальные данные на сервер.

<button type="submit" name="send" value="UniqueOffer">Отправить Ваше Предложение</button>

При нажатии такая кнопка отсылает на сервер строку 'send=UniqueOffer', которая является важной информацией для серверной обработки, скрытой от пользователя.

Дайте волю фантазии с <button>

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

<button type="submit">
   <img src="anAwesomeImage.png" alt="КРУТО"> <!-- HTML обожает красочные изображения, правда? -->
   Какой-то текст
   <span style="color:blue">И теперь он синий!</span>
</button>

Забудьте о простых и скучных кнопках!

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

Представьте два прожектора, освещающих артистов. Лейбл здесь — это имя исполнителя, а значение — его реплика:

       🎭 (Исполнитель)
       /      \
🔦 **Лейбл**  🔦 **Значение**

Та же логика применима к input type="button":

<input type="button" value="Привет, я Кнопка!">

При нажатии кнопка "произносит" свою реплику (значение):

Ваша Кнопка: [ Привет, я Кнопка! ]
При нажатии: [ 🗣 "Привет, я Кнопка!" ]

Пользователи воспринимают значение, тогда как лейбл остаётся за кулисами и предназначен только для программного кода.

Динамическое взаимодействие кнопок

Некоторые действия кнопки зависят от значения, иные — от лейбла:

• Ориентированные на значение: значение может послужить параметром функции, вызываемой при клике.
• Ориентированные на лейбл: лейбл, например 'reset', виден пользователю; его значение же может быть незначимым.
• Гибкие кнопки: в динамических формах лейбл может изменяться, но значение остаётся стабильным.

Вопросы доступности

Доступность крайне важна:

• Добавьте aria-label для поддержки чтения экраном (скринридерами).
• Учтите взаимодействие лейбла и значения с tabindex для навигации по клавише "Tab".
• Описательные лейблы улучшают совместимость с экраном, так как значение часто уходит на второй план.

Расширенные возможности с CSS и JavaScript

С помощью CSS и JavaScript вы сможете настроить дизайн кнопки <button> на новый уровень:

<button type="submit" id="mySweetButton">
 Пойдем танцевать! <!-- Вот это да! Настоящая кнопка для вечеринки! -->
</button>
<!-- С помощью CSS и JavaScript можно устроить настоящее световое шоу! -->

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

1. <input>: элемент ввода формы – HTML: HyperText Markup Language | MDN — Всё о HTML-элементе <input> на MDN.
2. HTML button tag — Руководство по тегу <button> на W3Schools.
3. HTML Standard — Официальная спецификация HTML5 для элементов форм.
4. Placeholders in Form Fields Are Harmful — Статья о вреде плейсхолдеров в полях форм от Nielsen Norman Group.