Skip to content

K
kpp
Commit 24bc2ba4 authored by Nikolay Gromov's avatar Nikolay Gromov
Browse files
Options

Добавил полям формы id и name

parent 46d40029
Show whitespace changes
Inline Side-by-side
Showing with 53 additions and 53 deletions
src/blocks-demo.html
View file @ 24bc2ba4
...@@ -552,7 +552,7 @@ ...@@ -552,7 +552,7 @@
<label class="field-text"> <label class="field-text">
<span class="field-text__name">Текстовое поле</span> <span class="field-text__name">Текстовое поле</span>
<span class="field-text__input-wrap"> <span class="field-text__input-wrap">
<input class="field-text__input" type="text" placeholder="input[type=text]"> <input class="field-text__input" type="text" placeholder="input[type=text]" id="">
<span class="field-text__help-text">Обёртка — <code>label</code>. Можно сделать обёртку <code>div</code>, но тогда, возможно, захочется элемент <code>.field-text__name</code> делать <code>label</code> и связывать его с полем по <code>id</code> поля.</span> <span class="field-text__help-text">Обёртка — <code>label</code>. Можно сделать обёртку <code>div</code>, но тогда, возможно, захочется элемент <code>.field-text__name</code> делать <code>label</code> и связывать его с полем по <code>id</code> поля.</span>
</span> </span>
</label> </label>
...@@ -576,7 +576,7 @@ ...@@ -576,7 +576,7 @@
<label class="field-text field-text--error"> <label class="field-text field-text--error">
<span class="field-text__name">Текстовое поле в ошибочном состоянии — модификатор <code>field-text--error</code></span> <span class="field-text__name">Текстовое поле в ошибочном состоянии — модификатор <code>field-text--error</code></span>
<span class="field-text__input-wrap"> <span class="field-text__input-wrap">
<input class="field-text__input" type="text" placeholder="input[type=text]"> <input class="field-text__input" type="text" placeholder="input[type=text]" id="">
<span class="field-text__help-text">Описание ошибки.</span> <span class="field-text__help-text">Описание ошибки.</span>
</span> </span>
</label> </label>
...@@ -589,28 +589,28 @@ ...@@ -589,28 +589,28 @@
<label class="field-text"> <label class="field-text">
<span class="field-text__name">Число</span> <span class="field-text__name">Число</span>
<span class="field-text__input-wrap"> <span class="field-text__input-wrap">
<input class="field-text__input" type="number" placeholder="input[type=number]"> <input class="field-text__input" type="number" placeholder="input[type=number]" id="">
<span class="field-text__help-text"></span> <span class="field-text__help-text"></span>
</span> </span>
</label> </label>
<label class="field-text"> <label class="field-text">
<span class="field-text__name">Дата</span> <span class="field-text__name">Дата</span>
<span class="field-text__input-wrap"> <span class="field-text__input-wrap">
<input class="field-text__input" type="date"> <input class="field-text__input" type="date" id="">
<span class="field-text__help-text"></span> <span class="field-text__help-text"></span>
</span> </span>
</label> </label>
<label class="field-text"> <label class="field-text">
<span class="field-text__name">Время</span> <span class="field-text__name">Время</span>
<span class="field-text__input-wrap"> <span class="field-text__input-wrap">
<input class="field-text__input" type="time"> <input class="field-text__input" type="time" id="">
<span class="field-text__help-text"></span> <span class="field-text__help-text"></span>
</span> </span>
</label> </label>
<label class="field-text"> <label class="field-text">
<span class="field-text__name">Поиск</span> <span class="field-text__name">Поиск</span>
<span class="field-text__input-wrap"> <span class="field-text__input-wrap">
<input class="field-text__input" type="search" placeholder="input[type=search]"> <input class="field-text__input" type="search" placeholder="input[type=search]" id="">
<span class="field-text__help-text"></span> <span class="field-text__help-text"></span>
</span> </span>
</label> </label>
...@@ -618,7 +618,7 @@ ...@@ -618,7 +618,7 @@
<code>&lt;label class="field-text"></code> <code>&lt;label class="field-text"></code>
<code> &lt;span class="field-text__name">...&lt;/span></code> <code> &lt;span class="field-text__name">...&lt;/span></code>
<code> &lt;span class="field-text__input-wrap"></code> <code> &lt;span class="field-text__input-wrap"></code>
<code> &lt;input class="field-text__input" type="text" placeholder=""></code> <code> &lt;input class="field-text__input" type="text" placeholder="" id=""></code>
<code> &lt;span class="field-text__help-text">...&lt;/span></code> <code> &lt;span class="field-text__help-text">...&lt;/span></code>
<code> &lt;/span></code> <code> &lt;/span></code>
<code>&lt;/label></code> <code>&lt;/label></code>
...@@ -626,7 +626,7 @@ ...@@ -626,7 +626,7 @@
<code>&lt;div class="field-text"></code> <code>&lt;div class="field-text"></code>
<code> &lt;label class="field-text__name" for="demo-field">...&lt;/label></code> <code> &lt;label class="field-text__name" for="demo-field">...&lt;/label></code>
<code> &lt;span class="field-text__input-wrap"></code> <code> &lt;span class="field-text__input-wrap"></code>
<code> &lt;input class="field-text__input" type="text" id="demo-field" placeholder=""></code> <code> &lt;input class="field-text__input" type="text" id="demo-field" placeholder="" id=""></code>
<code> &lt;span class="field-text__help-text">...&lt;/span></code> <code> &lt;span class="field-text__help-text">...&lt;/span></code>
<code> &lt;/span></code> <code> &lt;/span></code>
<code>&lt;/div></code> <code>&lt;/div></code>
...@@ -634,7 +634,7 @@ ...@@ -634,7 +634,7 @@
<code>&lt;label class="field-text"></code> <code>&lt;label class="field-text"></code>
<code> &lt;span class="field-text__name">...&lt;/span></code> <code> &lt;span class="field-text__name">...&lt;/span></code>
<code> &lt;span class="field-text__input-wrap"></code> <code> &lt;span class="field-text__input-wrap"></code>
<code> &lt;textarea class="field-text__input" placeholder="">&lt;/textarea></code> <code> &lt;textarea class="field-text__input" placeholder="" id="">&lt;/textarea></code>
<code> &lt;span class="field-text__help-text">...&lt;/span></code> <code> &lt;span class="field-text__help-text">...&lt;/span></code>
<code> &lt;/span></code> <code> &lt;/span></code>
<code>&lt;/label></code> <code>&lt;/label></code>
...@@ -661,7 +661,7 @@ ...@@ -661,7 +661,7 @@
<div class="field-checkbox__title">Необязательный общий заголовок</div> <div class="field-checkbox__title">Необязательный общий заголовок</div>
<div class="field-checkbox__input-wrap"> <div class="field-checkbox__input-wrap">
<label class="field-checkbox__name"> <label class="field-checkbox__name">
<input class="field-checkbox__input" type="checkbox" checked> <input class="field-checkbox__input" type="checkbox" id="" checked>
<span class="field-checkbox__name-text">Текст у флажка</span> <span class="field-checkbox__name-text">Текст у флажка</span>
</label> </label>
<div class="field-checkbox__help-text-wrap"> <div class="field-checkbox__help-text-wrap">
...@@ -670,7 +670,7 @@ ...@@ -670,7 +670,7 @@
</div> </div>
<div class="field-checkbox__input-wrap field-checkbox__input-wrap--error"> <div class="field-checkbox__input-wrap field-checkbox__input-wrap--error">
<label class="field-checkbox__name"> <label class="field-checkbox__name">
<input class="field-checkbox__input" type="checkbox"> <input class="field-checkbox__input" type="checkbox" id="">
<span class="field-checkbox__name-text">Ошибочный флажок</span> <span class="field-checkbox__name-text">Ошибочный флажок</span>
</label> </label>
<div class="field-checkbox__help-text-wrap"> <div class="field-checkbox__help-text-wrap">
...@@ -679,7 +679,7 @@ ...@@ -679,7 +679,7 @@
</div> </div>
<div class="field-checkbox__input-wrap"> <div class="field-checkbox__input-wrap">
<label class="field-checkbox__name"> <label class="field-checkbox__name">
<input class="field-checkbox__input" type="checkbox"> <input class="field-checkbox__input" type="checkbox" id="">
<span class="field-checkbox__name-text">Текст у флажка</span> <span class="field-checkbox__name-text">Текст у флажка</span>
</label> </label>
</div> </div>
...@@ -693,7 +693,7 @@ ...@@ -693,7 +693,7 @@
<pre class="code"> <pre class="code">
<code>&lt;div class="field-checkbox"></code> <code>&lt;div class="field-checkbox"></code>
<code> &lt;label class="field-checkbox__name"></code> <code> &lt;label class="field-checkbox__name"></code>
<code> &lt;input class="field-checkbox__input" type="checkbox" checked></code> <code> &lt;input class="field-checkbox__input" type="checkbox" id="" checked></code>
<code> &lt;span class="field-checkbox__name-text">Одинокий чекбокс такой одинокий, но с длинным... текстом внутри label-а. Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Жизни, свое рыбного решила. Точках семантика, решила космос переписывается толку безопасную журчит рыбными, рекламных несколько осталось свой! Знаках, дороге грамматики.&lt;/span></code> <code> &lt;span class="field-checkbox__name-text">Одинокий чекбокс такой одинокий, но с длинным... текстом внутри label-а. Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Жизни, свое рыбного решила. Точках семантика, решила космос переписывается толку безопасную журчит рыбными, рекламных несколько осталось свой! Знаках, дороге грамматики.&lt;/span></code>
<code> &lt;/label></code> <code> &lt;/label></code>
<code>&lt;/div></code> <code>&lt;/div></code>
...@@ -702,7 +702,7 @@ ...@@ -702,7 +702,7 @@
<code> &lt;div class="field-checkbox__title">Необязательный общий заголовок&lt;/div></code> <code> &lt;div class="field-checkbox__title">Необязательный общий заголовок&lt;/div></code>
<code> &lt;div class="field-checkbox__input-wrap"></code> <code> &lt;div class="field-checkbox__input-wrap"></code>
<code> &lt;label class="field-checkbox__name"></code> <code> &lt;label class="field-checkbox__name"></code>
<code> &lt;input class="field-checkbox__input" type="checkbox" checked></code> <code> &lt;input class="field-checkbox__input" type="checkbox" id="" checked></code>
<code> &lt;span class="field-checkbox__name-text">Текст у флажка&lt;/span></code> <code> &lt;span class="field-checkbox__name-text">Текст у флажка&lt;/span></code>
<code> &lt;/label></code> <code> &lt;/label></code>
<code> &lt;div class="field-checkbox__help-text-wrap"></code> <code> &lt;div class="field-checkbox__help-text-wrap"></code>
...@@ -711,13 +711,13 @@ ...@@ -711,13 +711,13 @@
<code> &lt;/div></code> <code> &lt;/div></code>
<code> &lt;div class="field-checkbox__input-wrap field-checkbox__input-wrap--error"></code> <code> &lt;div class="field-checkbox__input-wrap field-checkbox__input-wrap--error"></code>
<code> &lt;label class="field-checkbox__name"></code> <code> &lt;label class="field-checkbox__name"></code>
<code> &lt;input class="field-checkbox__input" type="checkbox"></code> <code> &lt;input class="field-checkbox__input" type="checkbox" id=""></code>
<code> &lt;span class="field-checkbox__name-text">Ошибочный флажок&lt;/span></code> <code> &lt;span class="field-checkbox__name-text">Ошибочный флажок&lt;/span></code>
<code> &lt;/label></code> <code> &lt;/label></code>
<code> &lt;/div></code> <code> &lt;/div></code>
<code> &lt;div class="field-checkbox__input-wrap"></code> <code> &lt;div class="field-checkbox__input-wrap"></code>
<code> &lt;label class="field-checkbox__name"></code> <code> &lt;label class="field-checkbox__name"></code>
<code> &lt;input class="field-checkbox__input" type="checkbox"></code> <code> &lt;input class="field-checkbox__input" type="checkbox" id=""></code>
<code> &lt;span class="field-checkbox__name-text">Текст у флажка&lt;/span></code> <code> &lt;span class="field-checkbox__name-text">Текст у флажка&lt;/span></code>
<code> &lt;/label></code> <code> &lt;/label></code>
<code> &lt;/div></code> <code> &lt;/div></code>
...@@ -745,7 +745,7 @@ ...@@ -745,7 +745,7 @@
<div class="field-radio__title">Необязательный общий заголовок</div> <div class="field-radio__title">Необязательный общий заголовок</div>
<div class="field-radio__input-wrap"> <div class="field-radio__input-wrap">
<label class="field-radio__name"> <label class="field-radio__name">
<input class="field-radio__input" type="radio" name="demo-radio" checked> <input class="field-radio__input" type="radio" id="" name="demo-radio" checked>
<span class="field-radio__name-text">Текст у радиокнопки</span> <span class="field-radio__name-text">Текст у радиокнопки</span>
</label> </label>
<div class="field-radio__help-text-wrap"> <div class="field-radio__help-text-wrap">
...@@ -754,7 +754,7 @@ ...@@ -754,7 +754,7 @@
</div> </div>
<div class="field-radio__input-wrap field-radio__input-wrap--error"> <div class="field-radio__input-wrap field-radio__input-wrap--error">
<label class="field-radio__name"> <label class="field-radio__name">
<input class="field-radio__input" type="radio" name="demo-radio"> <input class="field-radio__input" type="radio" id="" name="demo-radio">
<span class="field-radio__name-text">Ошибочная радиокнопка</span> <span class="field-radio__name-text">Ошибочная радиокнопка</span>
</label> </label>
<div class="field-radio__help-text-wrap"> <div class="field-radio__help-text-wrap">
...@@ -763,7 +763,7 @@ ...@@ -763,7 +763,7 @@
</div> </div>
<div class="field-radio__input-wrap"> <div class="field-radio__input-wrap">
<label class="field-radio__name"> <label class="field-radio__name">
<input class="field-radio__input" type="radio" name="demo-radio"> <input class="field-radio__input" type="radio" id="" name="demo-radio">
<span class="field-radio__name-text">Текст у радиокнопки</span> <span class="field-radio__name-text">Текст у радиокнопки</span>
</label> </label>
</div> </div>
...@@ -777,7 +777,7 @@ ...@@ -777,7 +777,7 @@
<pre class="code"> <pre class="code">
<code>&lt;div class="field-radio"></code> <code>&lt;div class="field-radio"></code>
<code> &lt;label class="field-radio__name"></code> <code> &lt;label class="field-radio__name"></code>
<code> &lt;input class="field-radio__input" type="radio" checked></code> <code> &lt;input class="field-radio__input" type="radio" id="" checked></code>
<code> &lt;span class="field-radio__name-text">Одинокая радиокнопка такой одинокий, но с длинным... текстом внутри label-а. Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Жизни, свое рыбного решила. Точках семантика, решила космос переписывается толку безопасную журчит рыбными, рекламных несколько осталось свой! Знаках, дороге грамматики.&lt;/span></code> <code> &lt;span class="field-radio__name-text">Одинокая радиокнопка такой одинокий, но с длинным... текстом внутри label-а. Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Жизни, свое рыбного решила. Точках семантика, решила космос переписывается толку безопасную журчит рыбными, рекламных несколько осталось свой! Знаках, дороге грамматики.&lt;/span></code>
<code> &lt;/label></code> <code> &lt;/label></code>
<code>&lt;/div></code> <code>&lt;/div></code>
...@@ -786,7 +786,7 @@ ...@@ -786,7 +786,7 @@
<code> &lt;div class="field-radio__title">Необязательный общий заголовок&lt;/div></code> <code> &lt;div class="field-radio__title">Необязательный общий заголовок&lt;/div></code>
<code> &lt;div class="field-radio__input-wrap"></code> <code> &lt;div class="field-radio__input-wrap"></code>
<code> &lt;label class="field-radio__name"></code> <code> &lt;label class="field-radio__name"></code>
<code> &lt;input class="field-radio__input" type="radio" name="demo-radio" checked></code> <code> &lt;input class="field-radio__input" type="radio" id="" name="demo-radio" checked></code>
<code> &lt;span class="field-radio__name-text">Текст у радиокнопки&lt;/span></code> <code> &lt;span class="field-radio__name-text">Текст у радиокнопки&lt;/span></code>
<code> &lt;/label></code> <code> &lt;/label></code>
<code> &lt;div class="field-radio__help-text-wrap"></code> <code> &lt;div class="field-radio__help-text-wrap"></code>
...@@ -795,13 +795,13 @@ ...@@ -795,13 +795,13 @@
<code> &lt;/div></code> <code> &lt;/div></code>
<code> &lt;div class="field-radio__input-wrap"></code> <code> &lt;div class="field-radio__input-wrap"></code>
<code> &lt;label class="field-radio__name"></code> <code> &lt;label class="field-radio__name"></code>
<code> &lt;input class="field-radio__input" type="radio" name="demo-radio"></code> <code> &lt;input class="field-radio__input" type="radio" id="" name="demo-radio"></code>
<code> &lt;span class="field-radio__name-text">Текст у радиокнопки&lt;/span></code> <code> &lt;span class="field-radio__name-text">Текст у радиокнопки&lt;/span></code>
<code> &lt;/label></code> <code> &lt;/label></code>
<code> &lt;/div></code> <code> &lt;/div></code>
<code> &lt;div class="field-radio__input-wrap"></code> <code> &lt;div class="field-radio__input-wrap"></code>
<code> &lt;label class="field-radio__name"></code> <code> &lt;label class="field-radio__name"></code>
<code> &lt;input class="field-radio__input" type="radio" name="demo-radio"></code> <code> &lt;input class="field-radio__input" type="radio" id="" name="demo-radio"></code>
<code> &lt;span class="field-radio__name-text">Текст у радиокнопки&lt;/span></code> <code> &lt;span class="field-radio__name-text">Текст у радиокнопки&lt;/span></code>
<code> &lt;/label></code> <code> &lt;/label></code>
<code> &lt;/div></code> <code> &lt;/div></code>
...@@ -820,7 +820,7 @@ ...@@ -820,7 +820,7 @@
<div class="field-toggler__title">Переключатели-флажки</div> <div class="field-toggler__title">Переключатели-флажки</div>
<div class="field-toggler__input-wrap"> <div class="field-toggler__input-wrap">
<label class="field-toggler__name"> <label class="field-toggler__name">
<input class="field-toggler__input" type="checkbox"> <input class="field-toggler__input" type="checkbox" id="">
<span class="field-toggler__name-text">Использовать</span> <span class="field-toggler__name-text">Использовать</span>
</label> </label>
<div class="field-toggler__help-text">Графика не используется, всё нарисовано CSS-ом.</div> <div class="field-toggler__help-text">Графика не используется, всё нарисовано CSS-ом.</div>
...@@ -835,7 +835,7 @@ ...@@ -835,7 +835,7 @@
<code> &lt;div class="field-toggler__title">Переключатели-флажки&lt;/div></code> <code> &lt;div class="field-toggler__title">Переключатели-флажки&lt;/div></code>
<code> &lt;div class="field-toggler__input-wrap"></code> <code> &lt;div class="field-toggler__input-wrap"></code>
<code> &lt;label class="field-toggler__name"></code> <code> &lt;label class="field-toggler__name"></code>
<code> &lt;input class="field-toggler__input" type="checkbox"></code> <code> &lt;input class="field-toggler__input" type="checkbox" id=""></code>
<code> &lt;span class="field-toggler__name-text">Использовать&lt;/span></code> <code> &lt;span class="field-toggler__name-text">Использовать&lt;/span></code>
<code> &lt;/label></code> <code> &lt;/label></code>
<code> &lt;div class="field-toggler__help-text">Графика не используется, всё нарисовано CSS-ом.&lt;/div></code> <code> &lt;div class="field-toggler__help-text">Графика не используется, всё нарисовано CSS-ом.&lt;/div></code>
...@@ -854,7 +854,7 @@ ...@@ -854,7 +854,7 @@
<div class="field-file"> <div class="field-file">
<div class="field-file__name">Выбор файлов</div> <div class="field-file__name">Выбор файлов</div>
<label class="field-file__input-wrap"> <label class="field-file__input-wrap">
<input class="field-file__input" type="file" data-multiple-caption="файлов выбрано: {count}" multiple> <input class="field-file__input" type="file" data-multiple-caption="файлов выбрано: {count}" id="" multiple>
<span class="field-file__name-text" data-button-text="Выбрать файл(ы)">Ничего не выбрано</span> <span class="field-file__name-text" data-button-text="Выбрать файл(ы)">Ничего не выбрано</span>
<span class="field-file__help-text">Отображение выбранного файла/файлов требует js. Стилизация — не требует.</span> <span class="field-file__help-text">Отображение выбранного файла/файлов требует js. Стилизация — не требует.</span>
</label> </label>
...@@ -863,7 +863,7 @@ ...@@ -863,7 +863,7 @@
<div class="field-file field-file--error"> <div class="field-file field-file--error">
<div class="field-file__name">Выбор файлов</div> <div class="field-file__name">Выбор файлов</div>
<label class="field-file__input-wrap"> <label class="field-file__input-wrap">
<input class="field-file__input" type="file" data-multiple-caption="файлов выбрано: {count}" multiple> <input class="field-file__input" type="file" data-multiple-caption="файлов выбрано: {count}" id="" multiple>
<span class="field-file__name-text" data-button-text="Выбрать файл(ы)">Ничего не выбрано</span> <span class="field-file__name-text" data-button-text="Выбрать файл(ы)">Ничего не выбрано</span>
<span class="field-file__help-text">Дописан модификатор <code>field-file--error</code>.</span> <span class="field-file__help-text">Дописан модификатор <code>field-file--error</code>.</span>
</label> </label>
...@@ -878,7 +878,7 @@ ...@@ -878,7 +878,7 @@
<code>&lt;div class="field-file"></code> <code>&lt;div class="field-file"></code>
<code> &lt;div class="field-file__name">Выбор файлов&lt;/div></code> <code> &lt;div class="field-file__name">Выбор файлов&lt;/div></code>
<code> &lt;label class="field-file__input-wrap"></code> <code> &lt;label class="field-file__input-wrap"></code>
<code> &lt;input class="field-file__input" type="file" data-multiple-caption="файлов выбрано: {count}" multiple></code> <code> &lt;input class="field-file__input" type="file" data-multiple-caption="файлов выбрано: {count}" id="" multiple></code>
<code> &lt;span class="field-file__name-text" data-button-text="Выбрать файл(ы)">Ничего не выбрано&lt;/span></code> <code> &lt;span class="field-file__name-text" data-button-text="Выбрать файл(ы)">Ничего не выбрано&lt;/span></code>
<code> &lt;span class="field-file__help-text">Отображение выбранного файла/файлов требует js. Стилизация — не требует.&lt;/span></code> <code> &lt;span class="field-file__help-text">Отображение выбранного файла/файлов требует js. Стилизация — не требует.&lt;/span></code>
<code> &lt;/label></code> <code> &lt;/label></code>
...@@ -896,7 +896,7 @@ ...@@ -896,7 +896,7 @@
<div class="field-range"> <div class="field-range">
<div class="field-range__name">Range</div> <div class="field-range__name">Range</div>
<div class="field-range__input-wrap"> <div class="field-range__input-wrap">
<input class="field-range__input" type="range" min="1" max="100" step="1" value="70"> <input class="field-range__input" type="range" min="1" max="100" step="1" value="70" id="">
<div class="field-range__help-text"><code>min="1" max="100" step="1" value="70"</code>, стилизован без js.</div> <div class="field-range__help-text"><code>min="1" max="100" step="1" value="70"</code>, стилизован без js.</div>
</div> </div>
</div> </div>
...@@ -908,7 +908,7 @@ ...@@ -908,7 +908,7 @@
<code>&lt;div class="field-range"></code> <code>&lt;div class="field-range"></code>
<code> &lt;div class="field-range__name">Range&lt;/div></code> <code> &lt;div class="field-range__name">Range&lt;/div></code>
<code> &lt;div class="field-range__input-wrap"></code> <code> &lt;div class="field-range__input-wrap"></code>
<code> &lt;input class="field-range__input" type="range" min="1" max="100" step="1" value="70"></code> <code> &lt;input class="field-range__input" type="range" min="1" max="100" step="1" value="70" id=""></code>
<code> &lt;div class="field-range__help-text">&lt;code>min="1" max="100" step="1" value="70"&lt;/code>&lt;/div></code> <code> &lt;div class="field-range__help-text">&lt;code>min="1" max="100" step="1" value="70"&lt;/code>&lt;/div></code>
<code> &lt;/div></code> <code> &lt;/div></code>
<code>&lt;/div></code> <code>&lt;/div></code>
...@@ -925,7 +925,7 @@ ...@@ -925,7 +925,7 @@
<label class="field-select"> <label class="field-select">
<span class="field-select__name">Селект</span> <span class="field-select__name">Селект</span>
<span class="field-select__select-wrap"> <span class="field-select__select-wrap">
<select class="field-select__select"> <select class="field-select__select" id="">
<optgroup label="Группа"> <optgroup label="Группа">
<option>Значение 1</option> <option>Значение 1</option>
<option>Значение 2</option> <option>Значение 2</option>
...@@ -956,7 +956,7 @@ ...@@ -956,7 +956,7 @@
<code>&lt;label class="field-select"></code> <code>&lt;label class="field-select"></code>
<code> &lt;span class="field-select__name">Селект&lt;/span></code> <code> &lt;span class="field-select__name">Селект&lt;/span></code>
<code> &lt;span class="field-select__select-wrap"></code> <code> &lt;span class="field-select__select-wrap"></code>
<code> &lt;select class="field-select__select"></code> <code> &lt;select class="field-select__select" id=""></code>
<code> &lt;optgroup label="Группа"></code> <code> &lt;optgroup label="Группа"></code>
<code> &lt;option>Значение 1&lt;/option></code> <code> &lt;option>Значение 1&lt;/option></code>
<code> &lt;option>Значение 2&lt;/option></code> <code> &lt;option>Значение 2&lt;/option></code>
...@@ -1005,7 +1005,7 @@ ...@@ -1005,7 +1005,7 @@
<div class="fields-group"> <div class="fields-group">
<label class="field-text"> <label class="field-text">
<span class="field-text__input-wrap"> <span class="field-text__input-wrap">
<input class="field-text__input" type="text" placeholder="input[type=text]"> <input class="field-text__input" type="text" placeholder="input[type=text]" id="">
</span> </span>
</label> </label>
<div class="field-actions"> <div class="field-actions">
...@@ -1016,13 +1016,13 @@ ...@@ -1016,13 +1016,13 @@
<div class="fields-group"> <div class="fields-group">
<label class="field-text"> <label class="field-text">
<span class="field-text__input-wrap"> <span class="field-text__input-wrap">
<input class="field-text__input" type="text" placeholder="input[type=text]"> <input class="field-text__input" type="text" placeholder="input[type=text]" id="">
<span class="field-text__help-text">Помощь</span> <span class="field-text__help-text">Помощь</span>
</span> </span>
</label> </label>
<label class="field-text"> <label class="field-text">
<span class="field-text__input-wrap"> <span class="field-text__input-wrap">
<input class="field-text__input" type="text" placeholder="input[type=text]"> <input class="field-text__input" type="text" placeholder="input[type=text]" id="">
<span class="field-text__help-text">Помощь</span> <span class="field-text__help-text">Помощь</span>
</span> </span>
</label> </label>
...@@ -1058,20 +1058,20 @@ ...@@ -1058,20 +1058,20 @@
<label class="field-text"> <label class="field-text">
<span class="field-text__name">Текстовое поле</span> <span class="field-text__name">Текстовое поле</span>
<span class="field-text__input-wrap"> <span class="field-text__input-wrap">
<input class="field-text__input" type="text" placeholder="input[type=text]"> <input class="field-text__input" type="text" placeholder="input[type=text]" id="">
<span class="field-text__help-text">Обёртка — <code>label</code>. Можно сделать обёртку <code>div</code>, но тогда, возможно, захочется элемент <code>.field-text__name</code> делать <code>label</code> и связывать его с полем по <code>id</code> поля.</span> <span class="field-text__help-text">Обёртка — <code>label</code>. Можно сделать обёртку <code>div</code>, но тогда, возможно, захочется элемент <code>.field-text__name</code> делать <code>label</code> и связывать его с полем по <code>id</code> поля.</span>
</span> </span>
</label> </label>
<div class="field-checkbox"> <div class="field-checkbox">
<label class="field-checkbox__name"> <label class="field-checkbox__name">
<input class="field-checkbox__input" type="checkbox" checked> <input class="field-checkbox__input" type="checkbox" id="" checked>
<span class="field-checkbox__name-text">Одинокий чекбокс</span> <span class="field-checkbox__name-text">Одинокий чекбокс</span>
</label> </label>
</div> </div>
<label class="field-text"> <label class="field-text">
<span class="field-text__name">Текстовое поле</span> <span class="field-text__name">Текстовое поле</span>
<span class="field-text__input-wrap"> <span class="field-text__input-wrap">
<input class="field-text__input" type="text" placeholder="input[type=text]"> <input class="field-text__input" type="text" placeholder="input[type=text]" id="">
<span class="field-text__help-text">Обёртка — <code>label</code>. Можно сделать обёртку <code>div</code>, но тогда, возможно, захочется элемент <code>.field-text__name</code> делать <code>label</code> и связывать его с полем по <code>id</code> поля.</span> <span class="field-text__help-text">Обёртка — <code>label</code>. Можно сделать обёртку <code>div</code>, но тогда, возможно, захочется элемент <code>.field-text__name</code> делать <code>label</code> и связывать его с полем по <code>id</code> поля.</span>
</span> </span>
</label> </label>
......
src/blocks/field-checkbox/field-checkbox.html
View file @ 24bc2ba4
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
<div class="field-checkbox"> <div class="field-checkbox">
<label class="field-checkbox__name"> <label class="field-checkbox__name">
<input class="field-checkbox__input" type="checkbox" checked> <input class="field-checkbox__input" type="checkbox" id="" name="" checked>
<span class="field-checkbox__name-text">Текст у флажка</span> <span class="field-checkbox__name-text">Текст у флажка</span>
</label> </label>
</div> </div>
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
<div class="field-checkbox__title">Необязательный общий заголовок</div> <div class="field-checkbox__title">Необязательный общий заголовок</div>
<div class="field-checkbox__input-wrap"> <div class="field-checkbox__input-wrap">
<label class="field-checkbox__name"> <label class="field-checkbox__name">
<input class="field-checkbox__input" type="checkbox" checked> <input class="field-checkbox__input" type="checkbox" id="" name="" checked>
<span class="field-checkbox__name-text">Текст у флажка</span> <span class="field-checkbox__name-text">Текст у флажка</span>
</label> </label>
<div class="field-checkbox__help-text-wrap"> <div class="field-checkbox__help-text-wrap">
...@@ -29,13 +29,13 @@ ...@@ -29,13 +29,13 @@
</div> </div>
<div class="field-checkbox__input-wrap"> <div class="field-checkbox__input-wrap">
<label class="field-checkbox__name"> <label class="field-checkbox__name">
<input class="field-checkbox__input" type="checkbox"> <input class="field-checkbox__input" type="checkbox" id="" name="">
<span class="field-checkbox__name-text">Текст у флажка</span> <span class="field-checkbox__name-text">Текст у флажка</span>
</label> </label>
</div> </div>
<div class="field-checkbox__input-wrap"> <div class="field-checkbox__input-wrap">
<label class="field-checkbox__name"> <label class="field-checkbox__name">
<input class="field-checkbox__input" type="checkbox"> <input class="field-checkbox__input" type="checkbox" id="" name="">
<span class="field-checkbox__name-text">Текст у флажка</span> <span class="field-checkbox__name-text">Текст у флажка</span>
</label> </label>
</div> </div>
......
src/blocks/field-file/field-file.html
View file @ 24bc2ba4
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<div class="field-file"> <div class="field-file">
<div class="field-file__name">Выбор файлов</div> <div class="field-file__name">Выбор файлов</div>
<label class="field-file__input-wrap"> <label class="field-file__input-wrap">
<input class="field-file__input" type="file" data-multiple-caption="файлов выбрано: {count}" multiple> <input class="field-file__input" type="file" data-multiple-caption="файлов выбрано: {count}" id="" name="" multiple>
<div class="field-file__name-text" data-button-text="Выбрать файл(ы)">Ничего не выбрано</div> <div class="field-file__name-text" data-button-text="Выбрать файл(ы)">Ничего не выбрано</div>
<div class="field-file__help-text">Отображение выбранного файла(ов) требует Javascript-а. Стилизация — не требует.</div> <div class="field-file__help-text">Отображение выбранного файла(ов) требует Javascript-а. Стилизация — не требует.</div>
</label> </label>
......
src/blocks/field-radio/field-radio.html
View file @ 24bc2ba4
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
<div class="field-radio"> <div class="field-radio">
<label class="field-radio__name"> <label class="field-radio__name">
<input class="field-radio__input" type="radio" checked> <input class="field-radio__input" type="radio" id="" checked>
<span class="field-radio__name-text">Текст у радиобаттона</span> <span class="field-radio__name-text">Текст у радиобаттона</span>
</label> </label>
</div> </div>
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
<div class="field-radio__title">Необязательный общий заголовок</div> <div class="field-radio__title">Необязательный общий заголовок</div>
<div class="field-radio__input-wrap"> <div class="field-radio__input-wrap">
<label class="field-radio__name"> <label class="field-radio__name">
<input class="field-radio__input" type="radio" name="demo-radio" checked> <input class="field-radio__input" type="radio" id="" name="demo-radio" checked>
<span class="field-radio__name-text">Текст у радиобаттона</span> <span class="field-radio__name-text">Текст у радиобаттона</span>
</label> </label>
<div class="field-radio__help-text-wrap"> <div class="field-radio__help-text-wrap">
...@@ -27,13 +27,13 @@ ...@@ -27,13 +27,13 @@
</div> </div>
<div class="field-radio__input-wrap"> <div class="field-radio__input-wrap">
<label class="field-radio__name"> <label class="field-radio__name">
<input class="field-radio__input" type="radio" name="demo-radio"> <input class="field-radio__input" type="radio" id="" name="demo-radio">
<span class="field-radio__name-text">Текст у радиобаттона</span> <span class="field-radio__name-text">Текст у радиобаттона</span>
</label> </label>
</div> </div>
<div class="field-radio__input-wrap"> <div class="field-radio__input-wrap">
<label class="field-radio__name"> <label class="field-radio__name">
<input class="field-radio__input" type="radio" name="demo-radio"> <input class="field-radio__input" type="radio" id="" name="demo-radio">
<span class="field-radio__name-text">Текст у радиобаттона</span> <span class="field-radio__name-text">Текст у радиобаттона</span>
</label> </label>
</div> </div>
......
src/blocks/field-range/field-range.html
View file @ 24bc2ba4
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
<div class="field-range"> <div class="field-range">
<div class="field-range__name">Range</div> <div class="field-range__name">Range</div>
<div class="field-range__input-wrap"> <div class="field-range__input-wrap">
<input class="field-range__input" type="range" min="1" max="100" step="1" value="70"> <input class="field-range__input" type="range" min="1" max="100" step="1" value="70" id="" name="">
<div class="field-range__help-text"><code>min="1" max="100" step="1" value="70"</code>, стилизован без JS.</div> <div class="field-range__help-text"><code>min="1" max="100" step="1" value="70"</code>, стилизован без JS.</div>
</div> </div>
</div> </div>
......
src/blocks/field-select/field-select.html
View file @ 24bc2ba4
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
<label class="field-select"> <label class="field-select">
<div class="field-select__name">Селект</div> <div class="field-select__name">Селект</div>
<div class="field-select__select-wrap"> <div class="field-select__select-wrap">
<select class="field-select__select"> <select class="field-select__select" id="" name="">
<optgroup label="Группа"> <optgroup label="Группа">
<option>Значение 1</option> <option>Значение 1</option>
<option>Значение 2</option> <option>Значение 2</option>
......
src/blocks/field-text/field-text.html
View file @ 24bc2ba4
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
<label class="field-text"> <label class="field-text">
<span class="field-text__name">Текст</span> <span class="field-text__name">Текст</span>
<span class="field-text__input-wrap"> <span class="field-text__input-wrap">
<input class="field-text__input" type="text" placeholder="placeholder"> <input class="field-text__input" type="text" placeholder="placeholder" id="" name="">
<span class="field-text__help-text">Пояснение</span> <span class="field-text__help-text">Пояснение</span>
</span> </span>
</label> </label>
......
src/blocks/field-toggler/field-toggler.html
View file @ 24bc2ba4
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
<div class="field-toggler__title">Переключатель-флажок</div> <div class="field-toggler__title">Переключатель-флажок</div>
<div class="field-toggler__input-wrap"> <div class="field-toggler__input-wrap">
<label class="field-toggler__name"> <label class="field-toggler__name">
<input class="field-toggler__input" type="checkbox"> <input class="field-toggler__input" type="checkbox" id="" name="">
<span class="field-toggler__name-text">Использовать</span> <span class="field-toggler__name-text">Использовать</span>
</label> </label>
<div class="field-toggler__help-text">Графика не используется, всё нарисовано CSS-ом.</div> <div class="field-toggler__help-text">Графика не используется, всё нарисовано CSS-ом.</div>
...@@ -24,11 +24,11 @@ ...@@ -24,11 +24,11 @@
<div class="field-toggler__title">Переключатели-флажки</div> <div class="field-toggler__title">Переключатели-флажки</div>
<div class="field-toggler__input-wrap"> <div class="field-toggler__input-wrap">
<label class="field-toggler__name"> <label class="field-toggler__name">
<input class="field-toggler__input" type="checkbox" checked> <input class="field-toggler__input" type="checkbox" id="" name="" checked>
<span class="field-toggler__name-text">Использовать</span> <span class="field-toggler__name-text">Использовать</span>
</label> </label>
<label class="field-toggler__name"> <label class="field-toggler__name">
<input class="field-toggler__input" type="checkbox"> <input class="field-toggler__input" type="checkbox" id="" name="">
<span class="field-toggler__name-text">Не использовать</span> <span class="field-toggler__name-text">Не использовать</span>
</label> </label>
<div class="field-toggler__help-text">Графика не используется, всё нарисовано CSS-ом.</div> <div class="field-toggler__help-text">Графика не используется, всё нарисовано CSS-ом.</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