В данном случае кнопку нужно делать в виде button или label для инпута?
Как правильно делать такие блоки? Можно ли записать просто в виде button, как в этом коде
<div class="sale__input-block"> <input class="sale__input" type="tel"> <button class="sale__btn"></button> </div> |
<div class="sale__input-block"> <input class="sale__input" type="tel"> <button class="sale__btn"></button> </div>
Дополнительно:
Там еще и форма потерялась.
На скрине кнопка, с типом submit, которая отправляет эту форму (и не важно, что вы там с ней творите на js).
Но лейбл у инпута всё равно должен быть. Если совсем никак, то хотя бы aria-label.
Если что, "Телефон" это не плейсхолдер, это как раз таки label.
<form class="sale__input-block"> <label> <input class="sale__input" type="tel"> <button type="submit" class="sale__btn"></button> </label> </form> |
<form class="sale__input-block"> <label> <input class="sale__input" type="tel"> <button type="submit" class="sale__btn"></button> </label> </form>
Нет, не правильно.
1. label это подпись для инпутов. Кнопки нельзя вкладывать в лейблы.
2. Смысл лейбла в осмысленной подписи для поля. Если её нет видимой в макете, то её придумывают для скринридеров.
Если текста нет, то это как Вовочке мороженное по лбу из известного анекдота.
Подробненько: https://htmlacademy.ru/blog/html/form-design-place...
Как тогда прописывать строку " Телефон" в сам инпут?
Ну в смысле как? Как наложить один тег на другой?
Гридами (лучше). Абсолютами (хуже). Отрицательные margin, transform... что вы ещё умеете..
Кнопка должна быть кнопкой, то есть button
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для решения данной проблемы, нужно учитывать несколько факторов перед принятием окончательного решения. Во-первых, следует учитывать контекст использования кнопки или label.
Если кнопка предназначена для выполнения какого-то действия, например отправки формы или вызова определенной функции, то лучше использовать элемент button. Button предоставляет более широкие возможности для обработки событий, таких как нажатие кнопки мыши или нажатие клавиши Enter при фокусировке на кнопке.
С другой стороны, если мы имеем дело с текстовой меткой, которая служит для указания на содержимое поля ввода или другого элемента интерфейса, то более уместно использовать элемент label. Label улучшает доступность и удобство использования для пользователей, позволяя им кликать на текст метки для выбора соответствующего элемента.
Важно также учитывать дизайн интерфейса и общую концепцию пользовательского опыта. Например, если кнопка должна быть выделена как основное действие на странице, то лучше использовать элемент button для создания выразительной и интерактивной кнопки. С другой стороны, если текст метки должен быть просто информативным элементом, то label будет более подходящим выбором.
Итак, чтобы принять окончательное решение, необходимо учитывать контекст использования элемента, его функциональные требования и дизайн интерфейса. В итоге, правильный выбор между кнопкой и label зависит от конкретной ситуации и целей разработки.