@toohappy

Как реализовать такую форму?

Как реализовать такую форму что на картинке?
Задача: нужно чтобы юзер мог ввести значения для своего будущего номерного знака.

Как мне видится - это создать 8-мь input'ов и прицепить к данной картинке, но мне кажется, есть лучше решения.
У кого какие доводы, опыт в данных формах есть? Какой лучший вариант?
Пример, как выглядит форма
5d765862cb0dd320646332.png
  • Вопрос задан
  • 104 просмотра
Решения вопроса 2
dollar
@dollar
Canvas, если хочется быть уверенным в кроссбраузерности.
Степень геморности примерно такая же.

При правильном программировании можно будет в будущем легко масштабировать форму целиком и тюнить внутренние макро параметры, меняя лишь константы в скрипте.

С другой стороны, вы потеряете всех, у кого отключён JS в браузере (на вашем сайте).
Ответ написан
Chefranov
@Chefranov
Front-End, Back-End
Я бы сделал один input (для основного номера) и собрал шрифт с двумя начертаниями, одно без заливки, а другое с заливкой. И для placeholder задал бы тот который без заливки, а для поля в фокусе с заливкой. И прикрутил бы какой-нибудь jquery.mask, чтобы бред не писали.

На icomoon можно такое сделать. Вам понадобятся все необходимые буквы и цифры от 0 до 9 в svg, в двух вариантах с заливкой и без.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы