В данном случае кнопку нужно делать в виде button или label для инпута?

Question

[Overlord934]

Как правильно делать такие блоки? Можно ли записать просто в виде button, как в этом коде

<div class="sale__input-block">
                        <input class="sale__input" type="tel">
                        <button class="sale__btn"></button>
                    </div>

Comments

[Ankhena]

Там еще и форма потерялась.
На скрине кнопка, с типом submit, которая отправляет эту форму (и не важно, что вы там с ней творите на js).

Но лейбл у инпута всё равно должен быть. Если совсем никак, то хотя бы aria-label.
Если что, "Телефон" это не плейсхолдер, это как раз таки label.

[Overlord934]

Ankhena, если я вас правильно понял код должен быть таким. Верно?

<form class="sale__input-block">
                        <label>
                            <input class="sale__input" type="tel">
                            <button type="submit" class="sale__btn"></button>
                        </label>
                    </form>

[Ankhena]

Overlord934, я бы рекомендовала проверять код валидатором перед тем, как кому-то показывать.

Нет, не правильно.
1. label это подпись для инпутов. Кнопки нельзя вкладывать в лейблы.
2. Смысл лейбла в осмысленной подписи для поля. Если её нет видимой в макете, то её придумывают для скринридеров.
Если текста нет, то это как Вовочке мороженное по лбу из известного анекдота.

[Overlord934]

Ankhena, касательно вашего первого комментария. Почему у инпута текст "Телефон" это не placeholder, а label? Как тогда прописывать строку " Телефон" в сам инпут?

[Ankhena]

Overlord934, даже если не смотреть в справочники, простой перевод слова placeholder намекает на то, что он делает, за что отвечает и в каком формате должен быть.
Подробненько: https://htmlacademy.ru/blog/html/form-design-place...

Как тогда прописывать строку " Телефон" в сам инпут?

Ну в смысле как? Как наложить один тег на другой?
Гридами (лучше). Абсолютами (хуже). Отрицательные margin, transform... что вы ещё умеете..

[Overlord934]

Ankhena, спасибо. Раньше как-то не задумывался, лепил placeholder и дело с концом. Условно говоря в placeholder мы пишем такого формата информацию [phone]?

[Ankhena]

Overlord934, да, верно

Answer 1

[Алексей Ярков]

Кнопка должна быть кнопкой, то есть button