Кто как делает html формы?

Question

[robvorch]

Не первый раз сталкиваюсь с формами и каждый раз они для меня как страшный сон. Речь не идет о двух полях с сабмитом. Приходится делать для проекта сложные формы с множеством полей/селекторов/чекбоксов и плюс валидация со стороны клиента и сервера. Так вот: все это до сих пор делаю руками так сказать. Без единой библиотеки - просто пишу с нуля. Занимает это массу времени и гору нервов на отладку. Ну вот не могу я поверить в то что студии которые как семечки выплевывают сайты сидят и тоже руками пишут формы. Обязан быть какой-то инструмент который позволяет собирать формы за короткий срок. Гуглил уже и видел множество фреймворков. Но хочется не напороться на очередной перегруженный фреймворк с кучей лишнего под капотом.

Как кто чем собирает? Что посоветуете что бы формы перестали быть проблемой.

Comments

[lega]

Вы про формирование html или его автоматизацию?

[robvorch]

lega: Я про полную сборку php jquery + при возможности sass

[Stanislav]

robvorch: во фреймворках во всех реализовано, не нужно свой код писать. Например в yii2, чтобы вывести инпут:

$form = ActiveForm::begin(); $form->field($model,'userName')->inputText()->label('Имя пользователя');

Соответственно валидация и тому подобное тоже во фреймворке.

[robvorch]

Stasgar: тогда какой фрейм выбрать?

[Stanislav]

robvorch: в каком смысле какой? Это уже как хотите, у всех есть минусы и плюсы. Топ3 - Laravel, Symfony, yii2

[robvorch]

Stasgar: Спасибо

[Stanislav]

robvorch: насчет "куча лишнего под капотом" - пока вы это лишнее ручками не подгрузите в ваш проект - использоваться это лишнее и не будет, а в продакшн так и вообще не пойдет.

[Ankhena]

Если это стандартные формы, то есть правильные соответствующие type у input'ов + свои наработки - ctrc-c/ctrl-v.
Если это какие-то, как Вы пишете, сложные уникальные формы, то я почему-то думаю, что чистый код ручками не отберет больше времени, чем подгонять фреймворки.

[vadim grachev]

посмотри на заготовки в разных фреймворках, проанализируй а потом сделай свои шаблоны, заготовки, снипеты. не забывай про такие штуки как gist. каждый раз писать с нуля конечно не очень разумно

[Erling]

Stasgar "$form = ActiveForm::begin()........" только предстоит начать осваивать Laravel, видел там похожая ситуация (смотрел пару видео на ютубе). Пока не понял: легко ли такие формы кастомизировать? Т.е. форматировать, добавлять какие-то свои атрибуты в форму. Как это делается там?

[Stanislav]

Erling: при чем здесь вообще Laravel? Конечно можно атрибуты, например так:

<?= $form->field($model, 'url')->textInput(['maxlength' => 255, 'class' => 'your class'])->label(false); ?>

Answer 1

[Pretor DH]

Современная форма - это комплекс решений, в разных областях. И поставить один модуль который решит проблему - не возможно в принципе. Каждый специалист может собрать свою часть. Но без архитектора который скажет как это скрутить в кучу, будет велосипед с квадратными колесами - ехать можно но по специальной дороге.

1. Разметка:
   
   • пишу всегда вручную;
     
   • длинные селекты тянутся из базы посредством шаблонизатора (например серверного TWIG);
     
   • прописываю полностью с атрибутами валидации HTML5 (благо все современные браузеры потдерживают);
     
   • выдумывать JS-велосипеды для валидации не стоит уже давно;
     
   • для зависимых полей пока есть простой js-клаcс сверяющий их.
     
   • drag&drop файлов давно уже работает без JS;
     
   • для подгрузки изображений в страницу на стороне клиента js-класс.
     
   
   
2. Стили:
   
   • один раз прописаны стили для разных-форм на уровне тегов и взаимоотношений тегов (в итоге все формы на сайте виглядят в одном стиле);
     
   • класы только для самой формы, определяет как одна выводится: локально, модально или в теле контента;
     
   • кому сложно написать 300 строчек CSS, пользуйтесь фреймворками;
     
   • ни в коем случае не делайте стили форм для каждого раза как онные встречаются (придет дядя даст по рукам :) ).
     
   
   
3. Отправка:
   
   • пользуйтесь action, submit и target;
     
   • нужны данные как модальное окно есть iframe;
     
   • ajax с формами не использую он изначально предназначен для другого:
     
     • для подгрузки полей в селектор, но только если селектор очень большой;
       
     • для поиска налету.
       
     
     
   
   
4. Сервер:
   
   • использую специальный статический класс, который делает валидацию и XSS/injection-очистку;
     
   • как минимум PDO с подготовленными запросами;
     
   • Doctrine;
     
   
   
5. База-данных:
   
   • наименования полей в базе соответствуют наименованиям полей в формах (с префиксом);
     
   
   

Comments

[robvorch]

Отличный ответ. Спасибо!

Answer 2

[Atllantis]

Ну не знаю, я например предпочитаю ручками писать код, да же нудный html/css. Хоть это и занимает много времени, но зато Я контролирую процесс и Я знаю что написано, как написано и легко могу всё изменить. Если же делать подобное с помощью "генераторов" и т.п., то разобраться в разметке, а тем более изменить её (в случае необходимости) может быть проблематично и затратно (по времени).
Имхо!

Comments

[robvorch]

Полностью согласен с Вами. Просто вдруг есть какое то решение немного ускорить данный процесс оставляя все так же прозрачно.

[Максим Тимофеев]

robvorch: Есть, такие решения называются framework. Вы продолжаете полностью контролировать процесс, но за Вас сделана рутина. Если речь о дизайне - есть css framework, для генерации и валидации php framework. Попробуйте yii2 например, там порог входа низкий и все логично.

Answer 3

[Дмитрий Беляев]

студии которые как семечки выплевывают сайты сидят

такие студии просто имеют заготовки для стандартных ситуаций
то есть если это например обратный звонок - то сopy -> paste
а если что в колекции нет - нанимают оутсорс
у них все сайты под одну гребенку, и фреймворки там редко используются, в лучшем случае какая-нибудь джумла/вордпрес

Answer 4

[jaxel]

Не использовать фреймфорки в 2016 году - значит говнокодить. В symfony 2/3 отличный модуль для работы с формами.

Comments

[Максим Тимофеев]

Поддерживаю, но не только в symfony, так же в yii и laravel. И в каждом есть и валидация и т.д. Единственно не видел пока толкового решения для зависимых полей.

[freekir]

Не использовать фреймфорки в 2016 году - значит говнокодить. Не согласен, для ускорения может быть, но говнокодить тут под вопросом, часто бывает что и с фреймворками такое пишут, спорное утверждение.

[Sergii Buinytskyi]

Категорически не согласин на счет говнокода без фреймвоков! И модули для работы с HTML разметкой во фреймворках генерируют ужасный HTML код. Если задача тривиальна, то HTML и стили под него пишу сам вручную с ноля.

Answer 5

[Андрей]

Я много, долго и упорно делал на jQuery+Vanilla JS сложные динамические формы, которые строил генератор по мета-данным.

После одного особо зубодробительного проекта, где в форме была куча нелинейных зависимостей (интеграция потоков данных для циан и внутренней CRM заказчика), когда через некоторое время зависимости нужно было изменять в виду изменившихся условий работы, я познал боль. :)

К тому же прямые манипуляции на DOM для меня стали еще большим злом.

В общем от jQuery как основного движка на фронтенде я отказался категорически, сейчас плотно изучаю React+Redux и ище с ними, предварительно проведя исследования по основным мейнстримовым фреймворкам и библиотекам для фронтенда.

Мне зело симпатишна идея рулить состоянием, а чтобы интерфейс при этом выстраивался автоматически.

Ну и на бэкенде до кучи решил мигрировать на Node.JS, ибо это позволяет отказаться от веб сервера как обязательного элемента-посредника между фронтендом и бэкендом, к тому же это позволяет хранить активное состояние нативно, что доставляет неимоверно.

В совокупности с ES-2015 это всё становится приятнее и интереснее.

Да, безусловно, есть там и свои проблемы, тем не менее прогресс не стоит на месте.

Answer 6

[ummahusla]

Ну я всю разметку почти пишу на Foundation, и копирую готовые елементы из кухни.

Когда без фреймворков, пишу руками, обычно же там 10-15 строчей, остальное копипейст

Answer 7

[Дмитрий]

У меня часть кода из других моих и чужих проектов. Который хорошо отлажен и функционален. Это очень сильно ускоряет разработку новых прилдожений и веб-сервисов. Пишите код универсальный, для использования в будущих проектах.
Хотя видел генераторы для ускорения и создания форм обратной связи, анкет и т.п. но сам мало ими пользовался, сложно расширять их и переделывать...

Answer 8

[trevoga_su]

свое решение

Answer 9

[xmoonlight]

Все студии (я делаю так же):
1. Используют готовые модули и плагины для популярных CMS.
2. Пишут однократно свой велосипед.

Comments

[Максим Тимофеев]

CMS - это давно не популярно в принципе. Эра framework-ов на дворе

[xmoonlight]

Максим Тимофеев: Эх зря я не могу посоревноваться в скорости реализации задачи с Вами)

[freekir]

Максим Тимофеев: В каком кругу не популярно? Особенно нравится слово, давно :) В кругу ваших друзей, студии? Если посмотреть вакансии, то знатоки CMS достаточно сильно востребованы, особенно профессионалы, а не говноделы.

Answer 10

[Андрей Малиновский]

Все зависит от поставленной задачи.
Если нужна сложная форма с множеством зависимостей, проверок и вдобавок user friendly попробуйте knockoutjs.com. Время и усилия затраченные на изучение окупятся :)
Простые формы лучше писать руками.

Answer 11

[maiskiykot]

Формы - по сути не главное. Думаю, что основное - скрипты проверок и обработки. А накидать полей на страницу - не так уж сложно. Посему имею несколько функций, которые практически не требуют допиливания в любой ситуации, ибо репарсят и отправляют любые данные.

Answer 12

[Badou]

В последнее время пишу на ларавеле, там есть удобная вещь - реквесты. В них отписываешь правила валидации в виде массива и инджектишь в нужный экшн нужного контроллера нужный реквест. Опять таки для генерации форм есть пакет laravelcollective/html, для верстки и фронтенд-валидации использую purecss