Корректно ли такое оформление и именование формы в БЭМ?

Форум /

<form class="form form_flowers">

        <div class="form__group">
            <div class="label-group">
                <label class="label-group__label" for="test">Текст</label>
            </div>
            <div class="input-group">
                <input class="input-group__input" type="text" id="test">
                <span class="input-group__addon">
                    @
                </span>
            </div>
        </div>

</form>

Создаю шаблон, чтобы использовать для создания формы с полями:

Обычная
Горизонтальная
input c кнопкой
input с иконкой
Группа кнопок

Сорри, если что не так, не разобралась как у вас тут код как-то без отступов выводится(

9 years ago

tadatuta

Приведенный вариант корректный, но я бы предложил какой-то такой вариант:

<form class="form form_flowers">
    <div class="form__inner">
        <div class="label">
            <label class="label__control" for="test">Текст</label>
        </div>
        <div class="input">
            <input class="input__control" type="text" id="test">
            <span class="input__addon">@</span>
        </div>
    </div>
</form>

Т.е. теперь верхнеуровневыми блоками являются form, label и input, а вся их внутренняя разметка — это их элементы.

9 years ago

loratokareva

Спасибо, Ваш вариант возьму на вооружение)

9 years ago

loratokareva

Долго анализировала и появился комбинированный с Вашим вариант

   <form class="form form_flowers">
        <div class="form-group">
            <div class="label__inner">
                <label class="label__control" for="test">Текст</label>
            </div>
            <div class="input__inner">
                <input class="input__control" type="text" id="test">
                <span class="input__addon">
                    @
                </span>
            </div>
        </div>
    </form>

Как думаете, не будет ли это более понятным решением? .input менее информативен чем .input__inner так же для лучшего понимания что за блок .form-group вместо .form__inner

И еще дополнительно в теме c добавлением классов сетки

<div class="form-group row">

или корректнее запись <div class="row form-group">

<form class="form form_flowers">
        <div class="form-group row row_gap">
            <div class="label__inner  col-xs-12 col-md-4">
                <label class="label__control" for="email">Email адрес:</label>
            </div>
            <div class="input__inner col-xs-12 col-md-8">
                <input class="input__control" type="text" id="email" placeholder="Введите Ваш email">
                <span class="input__addon">
                    <span class="fa fa-user fa-1x"></span>
                </span>
            </div>
        </div>
    </form>

или лучше выносить сетку и не "экономить" на тегах

        <div class="form-group row row_gap">
            <div class="col-xs-12 col-md-2">
                <div class="label__inner">
                    <label class="label__control" for="email">Email адрес:</label>
                </div>
            </div>
            <div class="col-xs-12 col-md-10">
                <div class="input__inner">
                    <input class="input__control" type="text" id="email" placeholder="Введите Ваш email">
                    <span class="input__addon">
                        <span class="fa fa-user fa-1x"></span>
                    </span>
                </div>
            </div>
        </div>

Заранее спасибо за помощь ) Извините, просто глубоко хочу раскопать один раз, а спросить просто не у кого(

Никак не могу понять почему как-то странно отрабатывается код и то есть обработанный код с подсветкой, то каша какая-то (

9 years ago

tadatuta

label__inner и input__inner — это элементы соответствующих блоков label и input, поэтому без родительских блоков их использовать не стоит. Следует воспринимать элементы как своего рода Shadow DOM — это именно внутренний мир блока, наружу он «торчать» не должен.

Разницы между <div class="form-group row"> и <div class="row form-group"> нет совершенно никакой, можно использовать как больше нравится.

Что касается экономии на тега — это вопрос к конкретной реализации и требованиям. Я бы предложил начать с миксов, а если где-то будет жать, то добавлять уже отдельные узлы для сетки.

Извините, просто глубоко хочу раскопать один раз, а спросить просто не у кого(

Форум именно для того и создан, будем рады любым вопросам!

Никак не могу понять почему как-то странно отрабатывается код и то есть обработанный код с подсветкой, то каша какая-то (

Для форматирования используется markdown, точно такой же, как на github. Чтобы подсветить код, следует заключать его в три бектика и далее название языка: ```html.

Чтобы оставлять комментарии, необходимо авторизоваться.