Контактная форма, как сделать валидацию на стороне клиента, и как прикрутить к макету инпуты?
Есть контактная анкета в .psd в ней много слоёв, фон, подчёркивания (линии как в тетради) куда вписывать информацию (смотрите в приложенном скрине). Мне нужно чтобы можно было
1 - Сверстать из этого макета одностраничный сайт, чтобы открывался в браузерах (без локалки)
2 - Чтобы можно было редактировать инфу (ФИО и тд)
3 - Сделать слайдер на JS (ползунок), чтобы можно было передвигать стрелочку (где навыки JS)
4 - И сделать валидацию на стороне клиента при помощи AJAX (именно так), и чтобы инфа отправлялась на указанный в строке "имейл", собственно имейл.
Мой вопрос такой, я с новичок в этом, скажите куда копать? Как сделать эти поля активными для редактирования? Инпуты, но через что их писать? В HTML?в JS? или как? Ну допустим с определились как, но как их расположить в нужных мне местах? Как сделать валидацию через AJAX?Я не прошу за меня решать задачу, просто скажите алгоритм как сделать всё это, последовательность так сказать, ну то что я сделал это, через css сделал макет бэкграундом (пробовал в html вставлять через img, но тогда html инпуты не влазят туда, кароче запутался я), по идее нужно вырезать стрелочку (в ползунке) и потом использовать её в слайдере, но это детали, пока нужно вообще мне понять с чего начать чем закончить, большое спасибо! Извините если что.
ПОЖАЛУЙСТА НЕ ПИШИТЕ ЧТО ТО ТИПА "МОЖНО СДЕЛАТЬ ПРОЩЕ, МОЖНО СДЕЛАТЬ БЕЗ JS" - Нужнос делать именно так как я написал, спасибо.
ajax — это уже не на стороне клиента, потому что он подразумевает передачу данных на сервер. Валидацию на клиенте можешь глянуть на https://jqueryvalidation.org/documentation/
Можешь сверстать каждй элемент, можешь элементы формы кинуть поверх картинки, это уж как заказчик согласится. Можно прямо в лоб сделать: абсолютами прозрачных полей надобавлять, размеры картинки ведь известны.
Ну сначала почитай про html-верстку. Тебе для фона нужно только этот лист бумаги, все остальное верстать придется. И подписи и поля и галки. Как только разберешься с версткой и получишь готовую страницу, можно приступать в ползунку. Для этого придется разбираться в JS. Если не понимаешь, как это делается: гуглишь к примеру "ползунок на javascript" или "перемещение объекта на javascript". Затем делается сама валидация. AJAX и JQuery надо инклудить к проекту, потом вызвать методы AJAX в яваскрипте. Аякс будет посылать запросы на отдельный скриптик пхп например, а скриптик будет валидировать запрос. Как-то так. Я давно этим не занимался, может щас уже и другие технологии конечно.