Skip to content

K
kpp
Commit 3f51e028 authored by Nikolay Gromov's avatar Nikolay Gromov
Browse files
Options

no include-replace for forms

parent b67ac055
Show whitespace changes
Inline Side-by-side
Showing with 392 additions and 167 deletions
src/blocks/field-actions/field-actions.html
View file @ 3f51e028
<!--DEV
Нужно убрать пробел между @-ами:
@ @include('blocks/field-actions/field-actions.html', {
"actions": "<button class=\"btn\">Отправить</button>"
})
-->
<div class="field-actions">
@@actions
<button class="btn">Отправить</button>
</div>
-->
src/blocks/field-checkbox/field-checkbox.html
View file @ 3f51e028
<!--DEV
Нужно убрать пробел между @-ами:
<div class="field-checkbox">
<div class="field-checkbox__title">Стандартный флажок</div>
<div class="field-checkbox__input-wrap">
<label class="field-checkbox__name">
<input class="field-checkbox__input" type="checkbox" checked>
<span class="field-checkbox__name-text">Использовать</span>
</label>
<div class="field-checkbox__help-text">Пояснение не обязательно.</div>
</div>
</div>
@ @include('blocks/field-checkbox/field-checkbox.html',{
"name": "Стандартные флажки",
"text": "Флажок",
"mod": "",
"helpText": "Есть общее название. При желании флажков можно написать несколько подряд."
})
<div class="field-checkbox">
<div class="field-checkbox__title">Стандартные флажки</div>
<div class="field-checkbox__input-wrap">
<label class="field-checkbox__name">
<input class="field-checkbox__input" type="checkbox" checked>
<span class="field-checkbox__name-text">Использовать</span>
</label>
<label class="field-checkbox__name">
<input class="field-checkbox__input" type="checkbox">
<span class="field-checkbox__name-text">Переиспользовать</span>
</label>
<label class="field-checkbox__name">
<input class="field-checkbox__input" type="checkbox">
<span class="field-checkbox__name-text">Нет</span>
</label>
</div>
</div>
@ @include('blocks/field-checkbox/field-checkbox.html',{
"name": "Собственные флажки",
"text": "Флажок",
"mod": "custom",
"helpText": "Есть общее название. При желании флажков можно написать несколько подряд. Изображения в формате SVG, вписываются в CSS-файл функцией <code>data-uri()</code> компилятора LESS."
})
<div class="field-checkbox field-checkbox--custom">
<div class="field-checkbox__title">Собственный флажок</div>
<div class="field-checkbox__input-wrap">
<label class="field-checkbox__name">
<input class="field-checkbox__input" type="checkbox" checked>
<span class="field-checkbox__name-text">Да</span>
</label>
<div class="field-checkbox__help-text">Есть общее название. При желании флажков можно написать несколько подряд. Изображения в формате SVG, вписываются в CSS-файл функцией <code>data-uri()</code> компилятора LESS.</div>
</div>
</div>
-->
@@if(mod === ""){<div class="field-checkbox">}@@if(mod !== ""){<div class="field-checkbox field-checkbox--@@mod">}
<div class="field-checkbox__title">@@name</div>
<div class="field-checkbox field-checkbox--custom">
<div class="field-checkbox__title">Собственные флажки</div>
<div class="field-checkbox__input-wrap">
<label class="field-checkbox__name">
<input class="field-checkbox__input" type="checkbox" checked>
<span class="field-checkbox__name-text">@@text</span>
<span class="field-checkbox__name-text">Да</span>
</label>
<label class="field-checkbox__name">
<input class="field-checkbox__input" type="checkbox">
<span class="field-checkbox__name-text">Нет</span>
</label>
<label class="field-checkbox__name">
<input class="field-checkbox__input" type="checkbox">
<span class="field-checkbox__name-text">Сто лет в обед</span>
</label>
<div class="field-checkbox__help-text">@@helpText</div>
</div>
</div>
-->
src/blocks/field-file/field-file.html
View file @ 3f51e028
<!--DEV
Нужно убрать пробел между @-ами:
@ @include('blocks/field-file/field-file.html', {
"name": "Выбор файлов",
"helpText": "Работа этого стилизованного поля требует Javascript-а. Но только работа. Стилизация — нет."
})
-->
<div class="field-file">
<div class="field-file__name">@@name</div>
<div class="field-file__name">Выбор файлов</div>
<label class="field-file__input-wrap">
<input class="field-file__input" type="file" data-multiple-caption="файлов выбрано: {count}" multiple>
<div class="field-file__name-text" data-button-text="Выбрать файл">Файлы не выбраны</div>
<div class="field-file__help-text">@@helpText</div>
<div class="field-file__name-text" data-button-text="Выбрать файл(ы)">Ничего не выбрано</div>
<div class="field-file__help-text">Отображение выбранного файла(ов) требует Javascript-а. Стилизация — не требует.</div>
</label>
</div>
-->
src/blocks/field-radio/field-radio.html
View file @ 3f51e028
<!--DEV
Нужно убрать пробел между @-ами:
<div class="field-radio">
<div class="field-radio__title">Стандартная радиокнопка</div>
<div class="field-radio__input-wrap">
<label class="field-radio__name">
<input class="field-radio__input" type="radio">
<span class="field-radio__name-text">Да</span>
</label>
<div class="field-radio__help-text">Пояснение не обязательно.</div>
</div>
</div>
@ @include('blocks/field-radio/field-radio.html',{
"name": "Стандартные радиокнопки",
"text": "Радиокнопка",
"mod": "",
"helpText": "Есть общее название. При желании радиокнопок можно написать несколько подряд."
})
<div class="field-radio">
<div class="field-radio__title">Стандартные радиокнопки</div>
<div class="field-radio__input-wrap">
<label class="field-radio__name">
<input class="field-radio__input" type="radio" name="radio-demo" checked>
<span class="field-radio__name-text">Да</span>
</label>
<label class="field-radio__name">
<input class="field-radio__input" type="radio" name="radio-demo">
<span class="field-radio__name-text">Нет</span>
</label>
<label class="field-radio__name">
<input class="field-radio__input" type="radio" name="radio-demo">
<span class="field-radio__name-text">Не знаю</span>
</label>
<div class="field-radio__help-text">Разметка никак не модифицируется, просто добавляются дополнительные <code>label</code>.</div>
</div>
</div>
@ @include('blocks/field-radio/field-radio.html',{
"name": "Собственные радиокнопки",
"text": "Радиокнопка",
"mod": "custom",
"helpText": "Есть общее название. При желании радиокнопок можно написать несколько подряд. Изображения в формате SVG, вписываются в CSS-файл функцией <code>data-uri()</code> компилятора LESS."
})
<div class="field-radio field-radio--custom">
<div class="field-radio__title">Собственная радиокнопка</div>
<div class="field-radio__input-wrap">
<label class="field-radio__name">
<input class="field-radio__input" type="radio">
<span class="field-radio__name-text">Да</span>
</label>
<div class="field-radio__help-text">Есть общее название. При желании радиокнопок можно написать несколько подряд. Изображения в формате SVG, вписываются в CSS-файл функцией <code>data-uri()</code> компилятора LESS.</div>
</div>
</div>
-->
@@if(mod === ""){<div class="field-radio">}@@if(mod !== ""){<div class="field-radio field-radio--@@mod">}
<div class="field-radio__title">@@name</div>
<div class="field-radio field-radio--custom">
<div class="field-radio__title">Собственные радиокнопки</div>
<div class="field-radio__input-wrap">
<label class="field-radio__name">
<input class="field-radio__input" type="radio" checked>
<span class="field-radio__name-text">@@text</span>
<input class="field-radio__input" type="radio" name="radio-demo-2" checked>
<span class="field-radio__name-text">Да</span>
</label>
<div class="field-radio__help-text">@@helpText</div>
<label class="field-radio__name">
<input class="field-radio__input" type="radio" name="radio-demo-2">
<span class="field-radio__name-text">Нет</span>
</label>
<label class="field-radio__name">
<input class="field-radio__input" type="radio" name="radio-demo-2">
<span class="field-radio__name-text">Не знаю</span>
</label>
<div class="field-radio__help-text">Разметка никак не модифицируется, просто добавляются дополнительные <code>label</code>.</div>
</div>
</div>
-->
src/blocks/field-range/field-range.html
View file @ 3f51e028
<!--DEV
Нужно убрать пробел между @-ами:
@ @include('blocks/field-range/field-range.html',{
"name": "Range",
"properties": "min=\"1\" max=\"100\" step=\"5\" value=\"60\"",
"helpText": "<code>min=\"1\" max=\"100\" step=\"5\" value=\"60\"</code>, стилизован без JS."
})
-->
<div class="field-range">
<div class="field-range__name">@@name</div>
<div class="field-range__name">Range</div>
<div class="field-range__input-wrap">
<input class="field-range__input" type="range" @@properties>
<div class="field-range__help-text">@@helpText</div>
<input class="field-range__input" type="range" min="1" max="100" step="1" value="70">
<div class="field-range__help-text"><code>min="1" max="100" step="1" value="70"</code>, стилизован без JS.</div>
</div>
</div>
-->
src/blocks/field-select/field-select.html
View file @ 3f51e028
<!--DEV
Нужно убрать пробел между @-ами:
@ @include('blocks/field-select/field-select.html')
-->
<label class="field-select">
<div class="field-select__name">@@name</div>
<div class="field-select__name">Селект</div>
<div class="field-select__select-wrap">
<select class="field-select__select">
@@options
<optgroup label="Группа">
<option>Значение 1</option>
<option>Значение 2</option>
<option>Значение 3</option>
</optgroup>
<option>Значение 10</option>
</select>
<small class="field-select__help-text">@@helpText</small>
<small class="field-select__help-text">Обёртка — <code>&lt;label&gt;</code>.</small>
</div>
</label>
-->
src/blocks/field-select/img_to_bg/select-down.svg
View file @ 3f51e028
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 11" width="17" height="11"><path d="M.202 1.97L1.956.204A.61.61 0 0 1 2.43 0a.61.61 0 0 1 .47.204L8.5 5.84 14.1.204A.61.61 0 0 1 14.57 0a.61.61 0 0 1 .474.204l1.754 1.766a.618.618 0 0 1 .202.473.62.62 0 0 1-.202.476l-7.826 7.875A.61.61 0 0 1 8.5 11a.61.61 0 0 1-.472-.204L.202 2.92A.618.618 0 0 1 0 2.444c0-.203.067-.34.202-.475z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 11" width="17" height="11"><path fill="#B1B1B1" d="M.202 1.97L1.956.204A.61.61 0 0 1 2.43 0a.61.61 0 0 1 .47.204L8.5 5.84 14.1.204A.61.61 0 0 1 14.57 0a.61.61 0 0 1 .474.204l1.754 1.766a.618.618 0 0 1 .202.473.62.62 0 0 1-.202.476l-7.826 7.875A.61.61 0 0 1 8.5 11a.61.61 0 0 1-.472-.204L.202 2.92A.618.618 0 0 1 0 2.444c0-.203.067-.34.202-.475z"/></svg>
src/blocks/field-text/field-text.html
View file @ 3f51e028
<!--DEV
Нужно убрать пробел между @-ами:
@ @include('blocks/field-text/field-text.html',{
"type": "text",
"name": "Имя",
"placeholder": "Имя",
"helpText":"Введите имя"
})
<label class="field-text">
<div class="field-text__name">Любое поле, выглядящее как текстовое</div>
<div class="field-text__input-wrap">
<input class="field-text__input" type="text" placeholder="input[type=text]">
<div class="field-text__help-text">Обёртка — <code>label</code>. Можно сделать обёртку <code>div</code>, но тогда, возможно, захочется элемент <code>.field-text__name</code> делать <code>label</code> и связывать его с полем по <code>id</code> поля.</div>
</div>
</label>
-->
<label class="field-text">
<div class="field-text__name">@@name</div>
<div class="field-text__name">Многострочное текстовое поле</div>
<div class="field-text__input-wrap">
@@if (type === 'textarea') {<textarea class="field-text__input" placeholder="@@placeholder"></textarea>}@@if (type !== 'textarea') {<input class="field-text__input" type="@@type" placeholder="@@placeholder">}
<div class="field-text__help-text">@@helpText</div>
<textarea class="field-text__input" placeholder="textarea"></textarea>
<div class="field-text__help-text">Обёртка — <code>label</code>.</div>
</div>
</label>
-->
src/blocks/field-toggler/field-toggler.html
View file @ 3f51e028
<!--DEV
Нужно убрать пробел между @-ами:
<div class="field-toggler">
<div class="field-toggler__title">Переключатель-флажок</div>
<div class="field-toggler__input-wrap">
<label class="field-toggler__name">
<input class="field-toggler__input" type="checkbox">
<span class="field-toggler__name-text">Использовать</span>
</label>
<div class="field-toggler__help-text">Графика не используется, всё нарисовано CSS-ом.</div>
</div>
</div>
<div class="field-toggler">
<div class="field-toggler__title">Переключатели-флажки</div>
<div class="field-toggler__input-wrap">
<label class="field-toggler__name">
<input class="field-toggler__input" type="checkbox" checked>
<span class="field-toggler__name-text">Использовать</span>
</label>
<label class="field-toggler__name">
<input class="field-toggler__input" type="checkbox">
<span class="field-toggler__name-text">Не использовать</span>
</label>
<div class="field-toggler__help-text">Графика не используется, всё нарисовано CSS-ом.</div>
</div>
</div>
@ @include('blocks/field-toggler/field-toggler.html',{
"name": "Переключатель",
"type": "checkbox",
"text": "Флажок",
"checked": "",
"helpText": "Какое-то описание"
})
<div class="field-toggler">
<div class="field-toggler__title">Переключатель-радиокнопка</div>
<div class="field-toggler__input-wrap">
<label class="field-toggler__name">
<input class="field-toggler__input" type="radio">
<span class="field-toggler__name-text">Использовать</span>
</label>
<div class="field-toggler__help-text">Графика не используется, всё нарисовано CSS-ом.</div>
</div>
</div>
-->
<div class="field-toggler">
<div class="field-toggler__title">@@name</div>
<div class="field-toggler__title">Переключатели-радиокнопки</div>
<div class="field-toggler__input-wrap">
<label class="field-toggler__name">
<input class="field-toggler__input" type="@@type" @@checked>
<span class="field-toggler__name-text">@@text</span>
<input class="field-toggler__input" type="radio" name="radio-demo-toggler" checked>
<span class="field-toggler__name-text">Использовать</span>
</label>
<label class="field-toggler__name">
<input class="field-toggler__input" type="radio" name="radio-demo-toggler">
<span class="field-toggler__name-text">Не использовать</span>
</label>
<div class="field-toggler__help-text">@@helpText</div>
<div class="field-toggler__help-text">Графика не используется, всё нарисовано CSS-ом.</div>
</div>
</div>
-->
src/blocks_library.html
View file @ 3f51e028
......@@ -283,72 +283,215 @@
<div class="col-md-6">
<form action="" class="form">
<fieldset>
<legend>Варианты разметки и модификаторы</legend>
@@include('blocks/field-text/field-text.html',{
"type": "text",
"name": "Любое поле, выглядящее как текстовое",
"placeholder": "input[type=text]",
"helpText":"Обёртка — <code>label</code>. Можно сделать обёртку <code>div</code>, но тогда, возможно, захочется элемент <code>.field-text__name</code> делать <code>label</code> и связывать его с полем по <code>id</code> поля."
})
@@include('blocks/field-text/field-text.html',{
"type": "textarea",
"name": "Многострочное текстовое поле",
"placeholder": "textarea",
"helpText": "Обёртка — <code>label</code>."
})
@@include('blocks/field-checkbox/field-checkbox.html',{
"name": "Стандартные флажки",
"text": "Флажок",
"mod": "",
"helpText": "Есть общее название. При желании флажков можно написать несколько подряд."
})
@@include('blocks/field-checkbox/field-checkbox.html',{
"name": "Собственные флажки",
"text": "Флажок",
"mod": "custom",
"helpText": "Есть общее название. При желании флажков можно написать несколько подряд. Изображения в формате SVG, вписываются в CSS-файл функцией <code>data-uri()</code> компилятора LESS."
})
@@include('blocks/field-radio/field-radio.html',{
"name": "Стандартные радиокнопки",
"text": "Радиокнопка",
"mod": "",
"helpText": "Есть общее название. При желании радиокнопок можно написать несколько подряд."
})
@@include('blocks/field-radio/field-radio.html',{
"name": "Собственные радиокнопки",
"text": "Радиокнопка",
"mod": "custom",
"helpText": "Есть общее название. При желании радиокнопок можно написать несколько подряд. Изображения в формате SVG, вписываются в CSS-файл функцией <code>data-uri()</code> компилятора LESS."
})
@@include('blocks/field-toggler/field-toggler.html',{
"name": "Переключатель",
"type": "checkbox",
"text": "Флажок",
"checked": "",
"helpText": "Какое-то описание"
})
@@include('blocks/field-select/field-select.html',{
"name": "Селект",
"options": "<optgroup label=\"Группа\"><option>Значение 1</option><option>Значение 2</option><option>Значение 3</option></optgroup><option>Значение 10</option>",
"helpText": "Обёртка — <code>&lt;label&gt;</code>."
})
@@include('blocks/field-range/field-range.html',{
"name": "Range",
"properties": "min=\"1\" max=\"100\" step=\"1\" value=\"70\"",
"helpText": "<code>min=\"1\" max=\"100\" step=\"1\" value=\"70\"</code>, стилизован без JS."
})
@@include('blocks/field-range/field-range.html',{
"name": "Range",
"properties": "min=\"1\" max=\"30\" step=\"5\" value=\"10\"",
"helpText": "<code>min=\"1\" max=\"30\" step=\"5\" value=\"10\"</code>, стилизован без JS."
})
@@include('blocks/field-file/field-file.html', {
"name": "Выбор файлов",
"helpText": "Работа этого стилизованного поля требует Javascript-а. Но только работа. Стилизация — нет."
})
@@include('blocks/field-actions/field-actions.html', {
"actions": "<button class=\"btn\">Отправить</button>"
})
<label class="field-text">
<div class="field-text__name">Любое поле, выглядящее как текстовое</div>
<div class="field-text__input-wrap">
<input class="field-text__input" type="text" placeholder="input[type=text]">
<div class="field-text__help-text">Обёртка — <code>label</code>. Можно сделать обёртку <code>div</code>, но тогда, возможно, захочется элемент <code>.field-text__name</code> делать <code>label</code> и связывать его с полем по <code>id</code> поля.</div>
</div>
</label>
<label class="field-text">
<div class="field-text__name">Многострочное текстовое поле</div>
<div class="field-text__input-wrap">
<textarea class="field-text__input" placeholder="textarea"></textarea>
<div class="field-text__help-text">Обёртка — <code>label</code>.</div>
</div>
</label>
<div class="field-checkbox">
<div class="field-checkbox__title">Стандартный флажок</div>
<div class="field-checkbox__input-wrap">
<label class="field-checkbox__name">
<input class="field-checkbox__input" type="checkbox" checked>
<span class="field-checkbox__name-text">Использовать</span>
</label>
<div class="field-checkbox__help-text">Пояснение не обязательно.</div>
</div>
</div>
<div class="field-checkbox">
<div class="field-checkbox__title">Стандартные флажки</div>
<div class="field-checkbox__input-wrap">
<label class="field-checkbox__name">
<input class="field-checkbox__input" type="checkbox" checked>
<span class="field-checkbox__name-text">Использовать</span>
</label>
<label class="field-checkbox__name">
<input class="field-checkbox__input" type="checkbox">
<span class="field-checkbox__name-text">Переиспользовать</span>
</label>
<label class="field-checkbox__name">
<input class="field-checkbox__input" type="checkbox">
<span class="field-checkbox__name-text">Нет</span>
</label>
<div class="field-checkbox__help-text">Разметка никак не модифицируется, просто добавляются дополнительные <code>label</code>.</div>
</div>
</div>
<div class="field-checkbox field-checkbox--custom">
<div class="field-checkbox__title">Собственный флажок</div>
<div class="field-checkbox__input-wrap">
<label class="field-checkbox__name">
<input class="field-checkbox__input" type="checkbox" checked>
<span class="field-checkbox__name-text">Да</span>
</label>
<div class="field-checkbox__help-text">Есть общее название. При желании флажков можно написать несколько подряд. Изображения в формате SVG, вписываются в CSS-файл функцией <code>data-uri()</code> компилятора LESS.</div>
</div>
</div>
<div class="field-checkbox field-checkbox--custom">
<div class="field-checkbox__title">Собственные флажки</div>
<div class="field-checkbox__input-wrap">
<label class="field-checkbox__name">
<input class="field-checkbox__input" type="checkbox" checked>
<span class="field-checkbox__name-text">Да</span>
</label>
<label class="field-checkbox__name">
<input class="field-checkbox__input" type="checkbox">
<span class="field-checkbox__name-text">Нет</span>
</label>
<label class="field-checkbox__name">
<input class="field-checkbox__input" type="checkbox">
<span class="field-checkbox__name-text">Сто лет в обед</span>
</label>
<div class="field-checkbox__help-text">Разметка никак не модифицируется, просто добавляются дополнительные <code>label</code>.</div>
</div>
</div>
<div class="field-radio">
<div class="field-radio__title">Стандартная радиокнопка</div>
<div class="field-radio__input-wrap">
<label class="field-radio__name">
<input class="field-radio__input" type="radio">
<span class="field-radio__name-text">Да</span>
</label>
<div class="field-radio__help-text">Пояснение не обязательно.</div>
</div>
</div>
<div class="field-radio">
<div class="field-radio__title">Стандартные радиокнопки</div>
<div class="field-radio__input-wrap">
<label class="field-radio__name">
<input class="field-radio__input" type="radio" name="radio-demo" checked>
<span class="field-radio__name-text">Да</span>
</label>
<label class="field-radio__name">
<input class="field-radio__input" type="radio" name="radio-demo">
<span class="field-radio__name-text">Нет</span>
</label>
<label class="field-radio__name">
<input class="field-radio__input" type="radio" name="radio-demo">
<span class="field-radio__name-text">Не знаю</span>
</label>
<div class="field-radio__help-text">Разметка никак не модифицируется, просто добавляются дополнительные <code>label</code>.</div>
</div>
</div>
<div class="field-radio field-radio--custom">
<div class="field-radio__title">Собственная радиокнопка</div>
<div class="field-radio__input-wrap">
<label class="field-radio__name">
<input class="field-radio__input" type="radio">
<span class="field-radio__name-text">Да</span>
</label>
<div class="field-radio__help-text">Есть общее название. При желании радиокнопок можно написать несколько подряд. Изображения в формате SVG, вписываются в CSS-файл функцией <code>data-uri()</code> компилятора LESS.</div>
</div>
</div>
<div class="field-radio field-radio--custom">
<div class="field-radio__title">Собственные радиокнопки</div>
<div class="field-radio__input-wrap">
<label class="field-radio__name">
<input class="field-radio__input" type="radio" name="radio-demo-2" checked>
<span class="field-radio__name-text">Да</span>
</label>
<label class="field-radio__name">
<input class="field-radio__input" type="radio" name="radio-demo-2">
<span class="field-radio__name-text">Нет</span>
</label>
<label class="field-radio__name">
<input class="field-radio__input" type="radio" name="radio-demo-2">
<span class="field-radio__name-text">Не знаю</span>
</label>
<div class="field-radio__help-text">Разметка никак не модифицируется, просто добавляются дополнительные <code>label</code>.</div>
</div>
</div>
<div class="field-toggler">
<div class="field-toggler__title">Переключатель-флажок</div>
<div class="field-toggler__input-wrap">
<label class="field-toggler__name">
<input class="field-toggler__input" type="checkbox">
<span class="field-toggler__name-text">Использовать</span>
</label>
<div class="field-toggler__help-text">Графика не используется, всё нарисовано CSS-ом.</div>
</div>
</div>
<div class="field-toggler">
<div class="field-toggler__title">Переключатели-флажки</div>
<div class="field-toggler__input-wrap">
<label class="field-toggler__name">
<input class="field-toggler__input" type="checkbox" checked>
<span class="field-toggler__name-text">Использовать</span>
</label>
<label class="field-toggler__name">
<input class="field-toggler__input" type="checkbox">
<span class="field-toggler__name-text">Не использовать</span>
</label>
<div class="field-toggler__help-text">Графика не используется, всё нарисовано CSS-ом.</div>
</div>
</div>
<label class="field-select">
<div class="field-select__name">Селект</div>
<div class="field-select__select-wrap">
<select class="field-select__select">
<optgroup label="Группа">
<option>Значение 1</option>
<option>Значение 2</option>
<option>Значение 3</option>
</optgroup>
<option>Значение 10</option>
</select>
<small class="field-select__help-text">Обёртка — <code>&lt;label&gt;</code>.</small>
</div>
</label>
<div class="field-range">
<div class="field-range__name">Range</div>
<div class="field-range__input-wrap">
<input class="field-range__input" type="range" min="1" max="100" step="1" value="70">
<div class="field-range__help-text"><code>min="1" max="100" step="1" value="70"</code>, стилизован без JS.</div>
</div>
</div>
<div class="field-range">
<div class="field-range__name">Range</div>
<div class="field-range__input-wrap">
<input class="field-range__input" type="range" min="1" max="30" step="1" value="3">
<div class="field-range__help-text"><code>min="1" max="30" step="1" value="3"</code>, стилизован без JS.</div>
</div>
</div>
<div class="field-file">
<div class="field-file__name">Выбор файлов</div>
<label class="field-file__input-wrap">
<input class="field-file__input" type="file" data-multiple-caption="файлов выбрано: {count}" multiple>
<div class="field-file__name-text" data-button-text="Выбрать файл(ы)">Ничего не выбрано</div>
<div class="field-file__help-text">Отображение выбранного файла(ов) требует Javascript-а. Стилизация — не требует.</div>
</label>
</div>
<div class="field-actions">
<button class="btn">Отправить</button>
</div>
</fieldset>
</form>
</div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment