Структура form

[Shenia132]

Всем привет. Подскажите пожалуйста какую сделать лучше структуру для этих форм что на скрине ? Также еще вопрос, как делаются этот выпадающий список валют и инпуты такие ?

http://pixs.ru/showimage/Lichniykab_9600987_19951905.jpg

Edited December 20, 2015 by Shenia132

[abrahadabra]

давайте скрин, попробуем подсказать.

[Shenia132]

давайте скрин, попробуем подсказать.

http://pixs.ru/showimage/Lichniykab_9600987_19951905.jpgзабыл загрузить скрин.

[abrahadabra]

Так а чем не устраивает стандартная структура по сетке с обычными группами полей?

[Shenia132]

Так а чем не устраивает стандартная структура по сетке с обычными группами полей?

Смотри если не брать bootstrap. Там первый блок(я обозначил их) идет обертка для этих всех инпутов с контактными данными(почта,город и т.д), в нем еще два дива и внутри там input по 3 штуки в каждом и так же во втором блоке где тип лизинга,стоимость. Так будет правильно если сделать ?

Скрин - http://pixs.ru/showimage/Lichniykab_1470911_19952037.jpg

[abrahadabra]

если не брать бутстрап, то придётся все те же самые стили писать самостоятельно. Это точно надо?

 

Обведены и помечены цифрами филдсеты. В каждом из них по 6 групп, выстроенных тупо через float:left

 

Что-то типа:

<form className="form">    <fieldset className="form__section">        <div className="form__group">            <label className="form__group_label">Название организации</label>            <input className="form__group_input" value={this.state.company} />        </div>        <div className="form__group">            <label className="form__group_label">Город</label>            <input className="form__group_input" value={this.state.city} />        </div>        <div className="form__group">            <label className="form__group_label">Контактное лицо</label>            <input className="form__group_input" value={this.state.person} />        </div>        /* … тут ещё поля */    </fieldset>    /* тут ещё филдсет */</form>

 ну и соответственно стили:

.form  &__section    margin-bottom: $fieldSectionBottomGap  &__group    @extend .form-group    &_label      color: $labelColor      font:        weight: bold        family: someFontFamily, sans-serif    &_input      @extend .form-control

[Shenia132]

 

если не брать бутстрап, то придётся все те же самые стили писать самостоятельно. Это точно надо?

 

Обведены и помечены цифрами филдсеты. В каждом из них по 6 групп, выстроенных тупо через float:left

 

Что-то типа:

<form className="form">    <fieldset className="form__section">        <div className="form__group">            <label className="form__group_label">Название организации</label>            <input className="form__group_input" value={this.state.company} />        </div>        <div className="form__group">            <label className="form__group_label">Город</label>            <input className="form__group_input" value={this.state.city} />        </div>        <div className="form__group">            <label className="form__group_label">Контактное лицо</label>            <input className="form__group_input" value={this.state.person} />        </div>        /* … тут ещё поля */    </fieldset>    /* тут ещё филдсет */</form>

 ну и соответственно стили:

.form  &__section    margin-bottom: $fieldSectionBottomGap  &__group    @extend .form-group    &_label      color: $labelColor      font:        weight: bold        family: someFontFamily, sans-serif    &_input      @extend .form-control

Понял, спасибо