Обычно ситуация разворачивается следующим образом: посетитель заполняет все поля формы, отправляет данные, и тут вдруг узнает, что он допустил ошибку при вводе. Если форма включает в себя множество полей, пользователю придется затратить длительное время на исправление случайных ошибок. Вместо этого можно было бы сделать мгновенное определение некорректных данных. Как только пользователь заполнил то или иное поле, он увидит специальное изображение, позволяющее ему не сомневаться в правильности введенных данных.
С помощью бесплатного графического редактора InkScape я создал набор графических изображений, которые будут установлены в качестве бэкграунда для элемента span. С помощью Sprite техники CSS мы будем изменять позицию бэкграунда, чтобы вывести на экран то или иное изображение.
Изображение будет выглядеть следующим образом: