Разное

Checkbox события: Как сделать чекбокс на HTML/CSS

Содержание

Еще раз о визуализации input типа checkbox и radio. Для тех, кто забыл как / Хабр

Тема старая и уже, как выяснилось, подзабытая.

Недавно у меня была короткая работа по разработке ТЗ на модернизацию давно существующего проекта. И, в частности дело касалось стилизации пресловутых <input type=»checkbox»>. Выяснилось, что исполнитель, программист «на все руки» даже не понял, что я ему на словах объяснял как это сделать. Пришлось делать примеры и, как результат, появился этот текст.

Напомню, что сейчас checkbox и radiobox разные сайты изображают по-разному. Бывает, что не отмеченный input сразу и не разглядишь – такой он «дизайнерский красивый», а у последних версий Chrome выбранные checkbox стали гнусного цвета циан.

Итак, ситуация


Есть три компании, которые используют некий программный продукт, связанный с заказами, бухгалтерией, складом и пр. Работа с заказчиками, партнерами, исполнителями и пр.

Маркетологи и рекламщики тоже его используют. Что эта система делает – неважно, на чем написано – неважно.

А важно, что на сайте этого продукта есть много страниц с формами, на которых много input checkbox и radio.

Жалобы сотрудников


Директор: На большом экране плохо видно и незаметны «крыжики».
Главбух: На моем компе «крыжики» выглядят так, у сотрудниц иначе, дома тоже не так, а на планшете совсем иначе.
Маркетолог: А можно, так что бы некоторые не выбранные позиции были красными, а другие выбранные были зелеными?
И т.д., и т.п.

Итак, задача


  1. Минимальными затратами и минимальными изменениями исправить внешний вид checkbox и radiobox.
  2. Сделать стилизацию checkbox и radiobox для разных юзеров. Важно: это закрытый сайт, там «всё свои», «красоты» не нужны, а нужна эффективность восприятия.

Что нельзя


1. Серверную часть трогать нельзя.
2. Файлы javascript трогать нельзя, свой javascript вставлять нельзя.
3. Файлы css трогать нельзя.

А что можно


1. Править html шаблоны.
2. Создать файл стилей для всех юзеров.
4. Создать файл стилей для конкретного юзера или группы юзеров.
А что сделали можно сразу посмотреть на codepen.io, но лучше почитать дальше.

Предварительное изучение показало


1. Почти все имеют поле name, а которые не имеют, то у них есть id.
2. Все имеют поле name, некоторые имеют id.
3. Соответственно, в css к checkbox можно обращаться как по id, так и по name. К radio – или по id, или по номеру потомка у родителя.

Фрагменты исходного кода:

/* вариант 1 */
<tag><input type="checkbox"> Некий текст</tag>

/* вариант 2 */
<tag><input type="checkbox"> Некий текст<br>
<input type="checkbox"> Некий текст</tag>

/* вариант 3 */
...<label><input type="checkbox"> Некий текст</label>...

/* вариант 4 */
<td><input type="checkbox"></td>
<td><label for="idxxx">Некий текст</label></td>

Так исправим код:
/* вариант 1 */
<tag><label><input type="checkbox"><s></s><span>Некий текст</span></label></tag>

/* вариант 2 */
<tag><label><input type="checkbox"><s></s><span>Некий текст</span></label><br>. ..</tag>

/* вариант 3 */
...<label><input type="checkbox"><s></s><span>Некий текст</span></label>...

/* вариант 4 */
<td><label><input type="checkbox"><s></s></label></td>
<td><label for="idxxx">Некий текст</label></td>

Всё тоже самое и для , класс у LABEL тот же.

Что конкретно сделали?


  1. Каждый input (корме варианта 3) обернули тэгом LABEL с нашим классом. Варианту 3 просто добавили класс.
  2. Сразу после input вставили пустой тэг S. Так как сам input будет не видим, то это тэг будет визуализировать это input.
  3. Сопроводительный текст обернули тэгом SPAN (кроме варианта 4). Этот тэг понадобиться, когда будем решать вопрос выравнивания визуального input относительно этого текста.
  4. Варианту 4 добавили еще класс, что бы не осуществлять это выравнивание, раз сопроводительный текст стоит в другой ячейки таблицы.
    Строго говоря, надо было бы сделать на оборот – вариантам 1-3 добавить класс, отвечающий за выравнивание. Но, вариантов 1-3 гораздо больше, чем 4-го и что бы не раздувать html сделано так.

Риторические вопросы и риторические же ответы 1. Зачем тэг S? Ну, не нравится S – можно использовать любой другой строчный элемент. Просто он должен быть, его можно стилизовать в зависимости от состояния предшествующего input.

2. Почему тэги S и SPAN без классов? Ну, зачем раздувать html? Тем более, что не очевидно, что одна из конструкций ниже будет «работать» медленнее другой.

  .new-input > S { }
  .new-input > .new-input-S {}

3. Как вы догадались, мне не нравятся идеи БЭМ, тем более идея «раздувать» html файл обилием упоминаний разных классов. В реальном проекте мы использовали только два класса – mni и mnio. :-))

Некоторые предварительные рассуждения и настройки css касательно box-sizing:border-box, нормализации LABEL, селекторов «A + B», «A ~ B» и «[attr]», псевдоклассов :checked, :disabled и ::before. Кто не уверен, что знает или хочет освежить знания смотрит под катом. Предварительные рассуждения 1. Напомню, что в «старом» css (box-sizing:content-box) свойства width и height задают только ширину и высоту содержимого, а padding и border добавляются к этим значениям. box-sizing:border-box меняет схему так, что padding и border включаются в width и height.

2. Проверка показала, что в нашем случае используется старая модель, а менять «настройки» страниц запрещено. Не «наши» LABEL это простые строчные элементы, в них только текст. Поэтому стилизуем ВСЕ LABEL.

LABEL {
    box-sizing:border-box; cursor:pointer; user-select:none;
}
LABEL *,
LABEL *::before,
LABEL *::after {
    box-sizing:inherit;
}

Т.е., ставим box-sizing:border-box для тэга LABEL, всем его потомкам. Заодно ставим курсор и запрещаем выделение текст (что бы не мешало клику).

3. Комбинация селекторов «A + B» означает, что стили будут применяться только к селектору B, если он следует сразу ПОСЛЕ селектора A, т. е. только для первого B. С другой стороны, «A ~ B» означает, что ко всем селекторам B после селектора A, т.е. для первого и последующих.
Естественно, всё в пределах одного «родителя».

Как это будем использовать?

<label><input type="checkbox"><s></s><span>Некий текст</span></label>
<label><input type="radio"><s></s><span>Некий текст</span></label>
/* 1 */
.new-input > INPUT + S {}
.new-input > INPUT ~ SPAN {}

/* 2 */
.new-input > INPUT:not(:checked) + S {}
.new-input > INPUT:not(:checked) ~ SPAN {}

/* 3 */
.new-input > INPUT:checked + S {}
.new-input > INPUT:checked ~ SPAN {}

/* 4 */
.new-input > INPUT:disabled + S {}
.new-input > INPUT:disabled ~ SPAN {}

/* 5 */
.new-input > INPUT[type="radio"] + S {}

Первая группа – общие стили для тэгов S и SPAN.
Вторая группа – стили только когда INPUT НЕ выбран.
Третья – стили только когда INPUT выбран.
Четвертая – когда INPUT заблокирован.

И, наконец, пятая группа – общие стили для тэга S ТОЛЬКО, если он стоит после input radio.
Таким образом, можно изменять стили тэгов S и SPAN в зависимости от состояния input.

4. Поскольку у нас тэг S будет изображать из себя input, то самому input поставим display:none, его не будет видно, а тэг LABEL будет его переключать, а тэг S будет соответственно меняться. Почему не используем html свойство hidden у input? Потому, что на некоторых браузерах hidden у input «работает» не совсем верно, плюс не будем перегружать html файл.


Итак, начинаем визуализацию input


Пример N 1. Самый простой – используем алфавитные символы
html код тот же, а css будет такой:
/* s1 */
.new-input > INPUT + S::before {
  content: "c";
}
/* s2 */
.new-input > INPUT:checked + S::before {
  content: "V";
}
/* s3 */
.new-input > INPUT[type="radio"] + S::before {
  content: "r";
}
/* s4 */
. new-input > INPUT[type="radio"]:checked + S::before {
  content: "X";
}
/* s5 */
.new-input > INPUT:disabled + S::before {
  opacity: 0.5;
}
/* s6 */
.new-input > S {
  text-decoration: none;
  margin-left: 3px;
  margin-right: 6px;
}
/* s7 */
.new-input > S::before {
  display: inline-block;
  width: 1.25em;
  text-align: center;
  color: #fafafa;
  background-color: #37474f;
}
/* s8 */
.new-input > INPUT[type="radio"] + S::before {
  border-radius: 50%;
}

Тэг S буде визуализировать input. Но мы «разделим» его по функционалу: сам тэг S будет отвечать за размещение в LABEL и выравнивание относительно следующего SPAN.

А псевдоэлемент S::before разместится внутри тэга S и будет изображать из себя input.

Строка s1 определяет, какой символ будет помещен в S::before когда input не выбран. В принципе надо было бы написать «.new-input > INPUT:not(:checked) + S::before», но некоторые браузеры (например, IE), подобную конструкцию могут и не исполнить.
Строка s2 определяет символ, когда input выбран.
Строки s3 и s4 делают то же для input radio.
Строка s5

описывает, что будет если input заблокирован – в данном случае тэг S будет наполовину прозрачным.
Строка s6 определяет выравнивание, в данном случае дает отбивку слева и справа (только в этом примере). Плюс, убирает штатное перечеркивание.
Строка s7 делает квадратик, s8 превращает его в кружок для input radio.

Пример N 1 можно посмотреть на codepen.io. Там представлены нативные input и новые. Первые можно убрать.

Чуток подробнее про display: inline-block, font-size, line-height Конченая высота строки текста определяется на основе заданных font-size, line-height. При единичном line-height – высота будет по font-size, при числовом line-height – высота будет по их произведению или, при указании единиц измерения для line-height – высоту определит максимальное значение. В примере указан line-height:1.25, поэтому и у S::before указано width:1.25em.

Для S::before указано display: inline-block – в этом случае S::before «внутри» себя будет блоком (можно указать ширину, высоту, рамки и пр.), а «снаружи» он останется строчным элементом. В дальнейшем об этом будет подробнее.

Вопрос:

Может можно использовать специальные символы? Типа вот этих:
□ ■ ▢ ▣ ○ ● ◎◉
Задать им нужный размер и всё. Нет?

Ответ:

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

Пример N 2. «Рисуем» элементы input средствами css

html код тот же, а css будет такой:

/* s1 */
.new-input > S::before {
  content: "";
  display: inline-block;
  width: 0. 75em;
  height: 0.75em;
  border: 1px solid currentColor;
  padding: 2px;
  background-clip: content-box;
  border-radius: 20%;
}
/* s2 */
.new-input > INPUT[type="radio"] + S::before {
  border-radius: 50%;
}
/* s3 */
.new-input > INPUT:checked + S::before {
  background-color: currentColor;
}
/* s4 */
.new-input > INPUT:disabled + S::before {
  opacity: 0.5;
}
/* s5 */
.new-input > S {
  text-decoration: none;
  margin-left: 3px;
  margin-right: 6px;
}

Строка s1 определяет S::before для визуализации input. Это будет inline-block, ширина и высота которого установлена в 0.75em, что примерно равно высоте прописной буквы и зависит от font-size родителя. Задана тонкая рамка текущим цветом, внутренняя отбивка, небольшое скругление углов. И – самое важное! – установлено свойство background-clip:content-box. Это очень интересное свойство – если будет установлен background-color, то он закрасит только контентную часть и не затронет отбивку (padding). Что нам и надо.

Строка s2 для input типа radio делает S::before круглым.
Строка s3 для отмеченного input устанавливает для S::before background-color текущим цветом. Т.е., «рисует» внутри квадратик или кружок.
Строка s4 отрабатывает блокировку input, строка s5 дает отбивки слева и справа.

Преимущества этого метода

  1. Всё очень просто. Работает на всех браузерах. Даже у IE10 (в эмуляции у 11-го).
  2. Можно раскрашивать по своему усмотрению.
  3. Раз S::before это inline-block, то он сидит на попе базовой линии ровно и никуда с нее не слезает. Если он по высоте будет больше текста, то просто увеличит высоту строки и останется на базовой линии.
  4. Раз визуализация input находится внутри тэга S, то его можно легко позиционировать и выравнивать.
  5. Размеры S::before в em дают возможность задавать его размер относительно размера текста подписи. Можно, к примеру, поставить предельные значения высоты и ширины.

Недостатки этого метода

В основном в использовании размеров в em. Дело в том, что может возникнуть ситуация когда ширина и высота при расчете (из em в px) будет иметь дробное значение. На обычных компьютерах с обычным экраном округление может произойти не корректно. Например, размеры 12.8px на 12.8px у той же Мозилы могут стать как 13px на 12px. Тогда надо ставить фиксированные размеры. Хотя на современных мониторах и видеокартах, ноутбуках, на планшетах и смартфонах этого не происходит из-за того, что точка (пиксель) браузера состоит из нескольких пикселей экрана.

Пример N 2 можно посмотреть на codepen.io. Там представлены нативные input и новые. Первые можно убрать.
Итак, первую задачу – визуализацию input – выполнили. Переходим к избранной «раскраске».

Раскрашиваем input


html для примера:
<label><input name="chb1" type="checkbox" ...><s></s><span>Некий текст</span></label>
<label><input type="radio" . ..><s></s><span>Некий текст</span></label>

К input типа checkbox будем обращаться по name, к radio по id.

Всё красим в синий

/* только input */
.new-input > INPUT[name="chb1"] + S,
.new-input > INPUT#rb1 + S {
  color: #0091ea;
}
/* только text */
.new-input > INPUT[name="chb1"] ~ SPAN,
.new-input > INPUT#rb1 ~ SPAN {
  color: #0091ea;
}
/* или всё */
.new-input > INPUT[name="chb1"] ~ *,
.new-input > INPUT#rb1 ~ * {
  color: #0091ea;
}

Помним о специфичности в css, эти стили будут более специфичны, чем базовые и сработают обязательно. Чем они отличаются от описанных выше? Тем, что применяются только к избранным input – к тем, что имеет указанное значение name и id.

Тут всё хорошо кроме того, что не выбранные input будут не очень хорошо глядеться – тонкая синяя рамка мало заметна.

Красим в зеленый, когда input выбран

/* только input */
.new-input > INPUT[name="chb1"]:checked + S,
. new-input > INPUT#rb1:checked + S {
  color: #00c853;
}
/* только text */
.new-input > INPUT[name="chb1"]:checked ~ SPAN,
.new-input > INPUT#rb1:checked ~ SPAN {
  color: #00c853;
}
/* или всё */
.new-input > INPUT[name="chb1"]:checked ~ *,
.new-input > INPUT#rb1:checked ~ * {
  color: #00c853;
}

Первый вариант, на мой взгляд, не очень хорош – зеленым будут и рамка, и внутренний квадратик/кружок. Можно раскрасить только его.
/* только input и только внутри */
.new-input > INPUT[name="chb1"]:checked + S::before,
.new-input > INPUT#rb1:checked + S::before {
  background-color: #00c853;
}

Красим в красный, когда input НЕ выбран
/* только input */
.new-input > INPUT[name="chb1"]:not(:checked) + S,
.new-input > INPUT#rb1:not(:checked) + S {
  color: #d50000;
}
/* только text */
.new-input > INPUT[name="chb1"]:not(:checked) ~ SPAN,
.new-input > INPUT#rb1:not(:checked) ~ SPAN {
  color: #d50000;
}
/* или всё */
. new-input > INPUT[name="chb1"]:not(:checked) ~ *,
.new-input > INPUT#rb1:not(:checked) ~ * {
  color: #d50000;
}

Логика понятна? Можно и дальше делать более сложные конструкции.

Например, при не выбранном input текст должен быть красным и жирным, а при выбранном внутренний элемент input и текст должен быть зеленым. Элементарно!

/* текст, когда нет выбора */
.new-input > INPUT[name="chb1"]:not(:checked) ~ SPAN,
.new-input > INPUT#rb1:not(:checked) ~ SPAN {
  color: #d50000;
  font-weight: bold;
}
/* внутренний элемент input, когда выбран */ 
.new-input > INPUT[name="chb1"]:checked + S::before,
.new-input > INPUT#rb1:checked + S::before {
  background-color: #00c853;
}
/* текст, когда выбран */ 
.new-input > INPUT[name="chb1"]:checked ~ SPAN,
.new-input > INPUT#rb1:checked ~ SPAN {
  color: #00c853;
}

А, к примеру, надо обработать целую группу input (10-15 штук). Что бы не писать кучу строк можно найти их общего родителя (. parent_element) и сократить условие.
.parent_element > .new-input > INPUT:not(:checked) ~ SPAN {
  color: #d50000;
  font-weight: bold;
}
.parent_element > .new-input > INPUT:checked + S::before {
  background-color: #00c853;
}
.parent_element > .new-input > INPUT:checked ~ SPAN {
  color: #00c853;
}

Всё можно посмотреть в финальном примере на codepen.io

Вот, вроде как, и всё. Осталось только «почесать родимые пятна» перфекциониста – проблемы выравнивания.

Выравнивание визуального input и сопроводительного текста


Для начала напомню общеизвестные вещи на тему размещения текста, форматирования и прочего. Всё под катом. Общеизвестные вещи Буду стараться не применят специальные термины, ибо в дизайне, верстке и css они иногда отличаются. Всё простыми словами.

1. Свойство font-size не определяет размер букв, а только размер знакоместа. Есть базовая линия (baseline), по которой расположены «нормальные» буквы. У «ненормальных» – g ц – нижние элементы «свисают» ниже её. Есть линия капители (cap height) – это верхняя граница «нормальной» прописной (заглавной) буквы. У «ненормальных» – Ё Й – верхние элементы «вылезают» выше её. Иными словами, размер прописной буквы это расстояние от базовой линии до капители, а знакоместо это чуть больше сверху и снизу. Обычно в «нормальных» шрифтах высота капители это 75% от высоты знакоместо. К примеру, font-size:16px, а размер буквы Н у шрифта Arial будет 12px. Но, бывают «специалисты» у шрифтов которых всё не так.

2. Свойство line-height определяет высоту строки. Если его вычисленное значение больше, чем указано в font-size, то браузер разместит текст так, что бы нормальная прописная буква была по середине высоты строки. Есть нюансы, но тут они не важны.

3. Соответственно, в нашем случае тэги S и SPAN должны иметь одинаковые значения font-size и line-height желательно заданные где-то выше у родителей. В нашем случае в примерах font-size:16px и line-height:1. 25. Поэтому в примере N1 у S::before ширина указана 1.25em, а высота у него определяется автоматически. А в примере N2 (и финальный пример) – у S::before ширина и высота 0.75em, что бы был по высоте с прописную букву. Задав другое значение font-size ничего менять не надо. Естественно, эту величину надо подогнать под конкретный шрифт.

4. Если перед текстом стоит какая-то квадратная или круглая «штучка», то любой дизайнер скажет, что она должна быть по высоте с прописную букву. А отбивка между ними должна быть в определенных процентах от размера шрифта. Если высота меньше высоты буквы, то она должна быть визуально значительно меньше, но не меньше 50%. Если больше, то тоже визуально значительно больше, но не больше 150%. А вот чуть-чуть, на пару пикселей больше/меньше – это ужас-ужас! Ну, и расположена эта штучка должна быть на базовой линии или по середине без всяких там чуть-чуть.

Зачем я это упомянул? А затем, что перфекционисту глаза режет, когда input криво стоит рядом с текстом — или прилипает, или далеко, или чуть меньше, или чуть больше. Мы так делать не должны!


Что будет, если сопроводительный текст в SPAN будет выведен в две или три строки? Очевидно, что он «залезет» под input. Это не красиво, надо исправить.

Один древний метод такой: тэгу S делаем float:left, а тэгу SPAN display:block и overflow:hidden.

Получится колонка текста. Подразумевается, что у кого-то из них будет соответствующий margin, что даст отбивку между ними. Ну, ещё добавляется геморрой с прекращением float после SPAN. Мы пойдем современным путем – применим flexbox. Он тут совершенно к месту.

.new-input {
  display: flex;
  flex-direction: row;
  align-items: start;
}
.new-input > S {
  margin-right: 4px;
  flex: 0 0 auto;
}
.new-input > SPAN {
  flex: 0 1 auto;
}

В этом случае тэг LABEL (который .new-input) будет flex, S и SPAN будут блоками, разместятся вверху LABEL. Текст в SPAN в случае необходимости будет в несколько строк. Вот из-за этого визуальный input описали в S::before. Независимо от высоты SPAN S::before будет расположен на одной базовой линии с первой строкой SPAN. Как вариант можно было указать align-items:center – тогда при однострочном SPAN визуальный input был бы вверху, а при двух строках – посередине, а при трех – у второй строки. В финальном примере можно переключать расположение input.

Вот и всё


Надеюсь, было интересно и кому-нибудь полезно. Прошу, не сильно меня ругать – это мой первый опыт на Хабр.

Пример N 1 – просто демонстрация взаимодействия изменения input и соседнего элемента.

Пример N 2 – визуализация input средствами css, как основа решения.

Финальный пример – всё описанное вместе.

Про конкретную реализацию


Там были обширные формы, где блоки полей возможные для правки конкретным пользователям выделялись слабым фоном, а остальным input имели свойство disabled и служили только для информации. Поэтому стиль «.new-input > INPUT:disabled + S::before» не применяли.

UPD


В ответ на комментарии Пример N 3.
Там работает поддержка клавиш и фокуса для скрытого input.

Класс CheckBox — работа с флажками VBA

В этой статье мы рассмотрим такой элемент управления в окне ToolBox, как Флажок, за работу с ним отвечает класс VBA CheckBox. Флажки довольно часто используются на формах, их часто называют “птичками” или “галочками”. Сами по себе объекты vba класса CheckBox являются независимыми друг от друга, и позволяют определить одно из двух состояний: галочка установлена, или галочка снята.

Флажки удобны при составлении опросов, например, из десяти цветов нужно отметить те, которые больше всего нравятся. Собственно, в этой статье мы и попытаемся сделать своеобразный опрос, но пока, давайте рассмотрим основные свойства класса CheckBox:

Name – ну, как всегда, имя объекта

Caption – определяет надпись, которая будет находится возле галочки справа.

TripleState – свойство позволяет определить третье состояние флажка. Как упоминалось выше, компонент vba CheckBox может принимать два значения: галочка установлена (true), галочка снята (false), но можно задать и третье состояние (Null) – в этом случае объект будет серого цвета и будет недоступен. Если это свойство содержит значение false – будут поддерживаться только два состояния, если true – все три.

Value – данное свойство позволяет получить состояние выбора (true, false или Null).

Событие Change класса CheckBox происходит при изменении состояния флажка.

Скажу честно, цель статьи – показать простой пример использования Флажков, поэтому я особо не вникал во все премудрости данного компонента.

И так, цель задания: добавить в проект форму, на ней разместить 12 флажков, разделенных на 4 группы по 3 штуки, Например,

  • Телефон: Nokia, Samsung, Siemens
  • Девушка: рыжая, светлая, темная (Ха-ха!!!!)
  • Ноутбук: Asus, Acer, Lenovo
  • Транспорт: велосипед, автомобиль, самокат

Ну, думаю, вы суть поняли: размещаете надпись, а под ней в столбик флажки. Справа я добавил компонент ListBox – как только мы будем ставить галочку для vba CheckBox, элемент сразу будет добавляться в список, плюс, элемент управлении Флажок сразу будет становится недоступным после выбора (свойство Enabled примет значение False). Еще на форме (UserForm) нам понадобится кнопка, которая будет очищать список, и будет делать доступными все флажки.

Знаю, знаю, пример не столько практичен, сколько теоретичен….

В коде для формы нужно добавить следующие процедуры:

Private Sub CheckBox1_Change()
    If CheckBox1.Value = True Then
        ListBox1.AddItem CheckBox1.Caption
        CheckBox1.Enabled = False
    End If
End Sub
 
Private Sub CheckBox2_Change()
    If CheckBox2.Value = True Then
        ListBox1.AddItem CheckBox2.Caption
        CheckBox2.Enabled = False
    End If
End Sub
 
Private Sub CheckBox3_Change()
    If CheckBox3.Value = True Then
        ListBox1.AddItem CheckBox3.Caption
        CheckBox3. Enabled = False
    End If
End Sub
 
Private Sub CheckBox4_Change()
    If CheckBox4.Value = True Then
        ListBox1.AddItem CheckBox4.Caption
        CheckBox4.Enabled = False
    End If
End Sub
 
Private Sub CheckBox5_Change()
    If CheckBox5.Value = True Then
        ListBox1.AddItem CheckBox5.Caption
        CheckBox5.Enabled = False
    End If
End Sub
 
Private Sub CheckBox6_Change()
    If CheckBox6.Value = True Then
        ListBox1.AddItem CheckBox6.Caption
        CheckBox6.Enabled = False
    End If
End Sub
Private Sub CheckBox7_Change()
    If CheckBox7.Value = True Then
        ListBox1.AddItem CheckBox7.Caption
        CheckBox7.Enabled = False
    End If
End Sub
 
Private Sub CheckBox8_Change()
    If CheckBox8.Value = True Then
        ListBox1.AddItem CheckBox8.Caption
        CheckBox8.Enabled = False
    End If
End Sub
 
Private Sub CheckBox9_Change()
    If CheckBox9.Value = True Then
        ListBox1.AddItem CheckBox9.Caption
        CheckBox9.Enabled = False
    End If
End Sub
 
Private Sub CheckBox10_Change()
    If CheckBox10. Value = True Then
        ListBox1.AddItem CheckBox10.Caption
        CheckBox10.Enabled = False
    End If
End Sub
 
Private Sub CheckBox11_Change()
    If CheckBox11.Value = True Then
        ListBox1.AddItem CheckBox11.Caption
        CheckBox11.Enabled = False
    End If
End Sub
 
Private Sub CheckBox12_Change()
    If CheckBox12.Value = True Then
        ListBox1.AddItem CheckBox12.Caption
        CheckBox12.Enabled = False
    End If
End Sub
 
Private Sub CommandButton1_Click()
    CheckBox1.Enabled = True
    CheckBox2.Enabled = True
    CheckBox3.Enabled = True
    CheckBox4.Enabled = True
    CheckBox5.Enabled = True
    CheckBox6.Enabled = True
    CheckBox7.Enabled = True
    CheckBox8.Enabled = True
    CheckBox9.Enabled = True
    CheckBox10.Enabled = True
    CheckBox11.Enabled = True
    CheckBox12.Enabled = True
    ListBox1.Clear
End Sub

Процедуры от CheckBox1_Change до CheckBox12_Change носят практически один и тот же характер – идет обработка события Change. Если состояние флажка ровно true (вы поставили птичку), то в список ListBox1 с помощью метода AddItem добавляется значение, хранимое в свойстве Caption (надпись рядом с птичкой). Далее происходит присваивание значения False свойству Enabled – делаем объект CheckBox недоступным.

Процедура CommandButton1_Click отвечает за обработку клика по кнопке. Видим, что для каждого флажка свойство Enabled принимает значение True, то есть, он становится доступным. Метод Cleare – полностью очищает список ListBox1.

И так, в этой статье мы кратко рассмотрели работу с классом CheckBox (Флажок) vba языка, да, я рассмотрел довольно простой пример использования, но… не все сразу.

Кстати, пример показанный в статье можно использовать и в Exel и в Word. Сам расчет идет на то, что бы описать базовую информацию по языку VBA, а уже потом переходить к чему-то более сложному. Так, как только я закончу с элементами управления, я перейду к описанию синтаксиса языка VBA, который практически идентичен языку VBScript, но код VBScript может выполняться самостоятельно в теле отдельного файла (сценариях), а VBA – работает в теле документа Microsoft.

Чекбоксы для сайтов — теория и примеры

Что такое чекбокс для сайта?

Разработчики интернет-проектов, веб-приложений и программ для ПК должны быть осведомлены о том, что такое чекбоксы. Однако обычные интернет-пользователи, не знающие нюансов программирования, далеко не всегда понимают значение данного термина. Стоит заметить, что в этом непонятном слове нет ничего необычного. Чекбоксы – это обычный элемент управления, применяемый в процессе разработки веб-форм.

Обыкновенная галочка

«Галочка» знакома любому человеку. Этот символ впервые встречается еще в школе. Обычно его используют для выбора правильного ответа в процессе прохождения тестирования или анкетирования.

Сегодня такие «галочки» используются и в интернете. Даже обычная процедура регистрации на любом интернет-портале не может обойтись без этого символа.

«Галочки» активно применяются и в интернет-торговле. При помощи чекбоксов пользователи, которые оформляют заказ, выбирают те товары, которые им необходимы. Чекбоксы также применяются в компьютерных играх, точнее – в процессе их инсталляции. Например, «установщик» может попросить пользователя выбрать необходимое ПО.

Применение чекбоксов в процессе веб-разработки

Веб-разработчики видят в чекбоксах не просто символ «галочки». Это обусловлено тем, что создание данного символа намного сложнее, чем клик по выбранному квадратику. Для разработки чекбоксов принято использовать язык разметки HTML. Для создания этого элемента нужно прописать следующий код:

<inputtype=”checkbox”>

Принцип работы

Чекбокс работает по очень простому принципу: отрицание или согласие. Если форма отмечена, веб-браузер получает данные и отправляет их на сервер для дальнейшей обработки. Если форма не отмечена, то и сервер не получит данных для последующей обработки.

Нужно заметить, что эти элементы имеют атрибут, принимающий значение value. Этот атрибут не является обязательным. Веб-разработчки также применяют атрибут, указывающий на отметку, которая была поставлена заранее (то есть по умолчанию). Данный атрибут называется checked. В переводе на русский язык он означает «отмечено».

Особенностью чекбокса является тот факт, что он предусматривает возможность выбора из множества доступных вариантов. При этом пользователь может поставить «галочки» во всех подходящих квадратиках. Эта особенность для разработчиков имеет архиважное значение, так как они должны предусмотреть разные имена для нескольких созданных чекбоксов.

Радиокнопки

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

Используя возможности HTML и JavaScript, разработчики могут создать флажок, нажатие на который позволит выделить все чекбоксы. Ввиду того, что такая функция противоречит принципу чекбоксов, она применяется крайне редко.

Чекбоксы могут иметь несколько атрибутов. Ранее говорилось об атрибуте checked. Также стоит сказать несколько слов об атрибуте name. Он необходим для присваивания чекбоксам различные имена.

Благодаря этому существует возможность идентификации каждого отдельного флажка. Для отправки данных на сервер также используется атрибут value.

В завершение следует заметить, что чекбоксы – это элементы, функционирующие в выбранном, невыбранном и неопределенном режимах.

Смотреть/скачать примеры чекбоксов

Скачать пример чекбокса для сайта


Скачать пример чекбокса для сайта


Скачать пример чекбокса для сайта



Скачать пример чекбокса для сайта



Скачать пример чекбокса для сайта



Скачать пример чекбокса для сайта

Теги:

Меняем оформление input checkbox с помощью CSS

Оформление элементов формы — это старая проблема. Ситуация несомненно улучшается, но финала пока не видно. С появлением псевдо-контейнеров :after и :before стало возможным без дополнительных элементов и скриптов кастомизировать элемент INPUT:CHECKBOX.

<input type=»checkbox» /> <label for=»checkbox-id»>Чекбокс как есть</label>

<input type=»checkbox» />

<label for=»checkbox-id»>Чекбокс как есть</label>

В разных браузерах этот элемент будет выглядеть по разному. Chrome, Opera, IE, Yandex и прочие — будут по мере сил и фантазии разработчиков выводить checkbox с собственным оформлением.

Квадрат и галочку нельзя изменить стандартными стилями вроде:

// это работать не будет input[type=»checkbox»] { border: 1px solid #f00; background: #f00; border-radius: 5; }

// это работать не будет

input[type=»checkbox»] {

  border: 1px solid #f00;

  background: #f00;

  border-radius: 5;

}

Поэтому стоит задача полностью заменить вывод стандартного элемента на свой, и мы сделаем это, используя только CSS.

План действий такой:

  1. Скрываем вывод чек-бокса;
  2. Формируем нужный внешний вид чекбокса в псевдо — элементе label:before;
  3. Дополнительные стили формируют внешний вид текущего статуса.

Важно, чтобы элемент Label был связан с чекбокс (через параметр for), тогда нажатие на метку передаётся на связанный элемент, и все работает как нужно без дополнительных скриптов.

/* прячем input checkbox */ input[type=»checkbox»] { display: none; } /* стили для метки */ label {   color: #000; cursor: default; font-weight: normal; line-height: 30px; padding: 10px 0; vertical-align: middle; } /* формируем внешний вид чекбокса в псевдоэлементе before */ label:before { content: » «; color: #000; display: inline-block; font: 20px/30px Arial; margin-right: 15px; position: relative; text-align: center; text-indent: 0px; width: 30px; height: 30px; background: #FFF; border: 1px solid #e3e3e3; border-image: initial; vertical-align: middle; } /* вариации внешнего вида в зав-ти от статуса checkbox */ /* checked */ input:checked + label:before { content: «x»; } /* disabled */ input:disabled + label:before { background: #eee; color: #aaa; }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

/* прячем input checkbox */

input[type=»checkbox»] {

  display: none;

}

 

/* стили для метки */

label {

  color: #000;

  cursor: default;

  font-weight: normal;

  line-height: 30px;

  padding: 10px 0;

  vertical-align: middle;

}

 

/* формируем внешний вид чекбокса в псевдоэлементе before */

label:before {

  content: » «;

  color: #000;

  display: inline-block;

  font: 20px/30px Arial;

  margin-right: 15px;

  position: relative;

  text-align: center;

  text-indent: 0px;

  width: 30px;

  height: 30px;

  background: #FFF;

  border: 1px solid #e3e3e3;

  border-image: initial;

  vertical-align: middle;

}

 

/* вариации внешнего вида в зав-ти от статуса checkbox */

/* checked */

input:checked + label:before {

  content: «x»;

}

/* disabled */

input:disabled + label:before {

  background: #eee;

  color: #aaa;

}

Теперь внешний вид становится везде одинаковым и выглядит вот так:

Как видите для вывода галочки я использовал просто символ «x» из шрифта Arial. Далее вы можете сами решать как выглядит контейнер и галочка.

Я к примеру использую шрифт awesome, в котором есть литера галочки.

Вот тот же CSS с использованием FontAwesome:

input[type=»checkbox»] { display: none; } label {   color: #000; cursor: default; font-weight: normal; line-height: 30px; padding: 10px 0; vertical-align: middle; } label:before { content: » «; color: #000; display: inline-block; /* шрифт Awesome*/ font: 20px/30px FontAwesome; margin-right: 15px; position: relative; text-align: center; text-indent: 0px; width: 30px; height: 30px; background: #FFF; border: 1px solid #e3e3e3; border-image: initial; vertical-align: middle; } input:checked + label:before { /* глифон — галочка */ content: «\f00c»; } input:disabled + label:before { background: #eee; color: #aaa; }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

input[type=»checkbox»] {

display: none;

}

 

label {

  color: #000;

cursor: default;

font-weight: normal;

line-height: 30px;

padding: 10px 0;

vertical-align: middle;

}

 

label:before {

content: » «;

color: #000;

display: inline-block;

/* шрифт Awesome*/

font: 20px/30px FontAwesome;

margin-right: 15px;

position: relative;

text-align: center;

text-indent: 0px;

width: 30px;

height: 30px;

background: #FFF;

border: 1px solid #e3e3e3;

border-image: initial;

vertical-align: middle;

}

 

input:checked + label:before {

/* глифон — галочка */

content: «\f00c»;

}

 

input:disabled + label:before {

background: #eee;

color: #aaa;

}

Так выглядит checkbox с галочкой из набора иконок Awesome.

Написать комментарий

Данная запись опубликована в 27.12.2017 17:23 и размещена в Танцы с CSS. Вы можете перейти в конец страницы и оставить ваш комментарий.

Мало букафф? Читайте есчо !

Цвет HR — как изменить в CSS

Апрель 27, 2017 г.

Горизонтальная линия HR — независимый HTML элемент — вызывает много вопросов у начинающих. Основная проблема — установка цвета. Установка стилей …

Читать

Псевдо-checkbox на чистом CSS без фоновых изображений

Как сделать красивый стилизованный чекбокс и при этом не написать ни строчки javascript и не искать иконки.

это обычный чекбокс а это — стилизованный

Вот как выглядит код стилизованного чекбокса:

<label>
    <input type=»checkbox»>
    <span>а это — стилизованный</span>
</label>

input[type=checkbox] { display: none; }

. pseudocheckbox::before {  
    content: «\00A0»;
    display: inline-block;
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    background-color: white;
    border: 2px solid #B0B0B0;
    border-radius: 2px;
    margin-right: 6px;
    vertical-align: baseline;
   
    text-align: center;
    font-family: Arial, sans-serif;
    font-size: 16px;
    line-height: 16px;
    font-weight: bold;
    color: #808080;
}

input[type=checkbox]:checked + .pseudocheckbox::before { content: «\2713»; }

Разберем этот код подробно.

Задействуем <label>

Для начала нужно скрыть сам чекбокс:

input[type=checkbox] { display: none; }

Его и относящийся к нему текст нужно заключить в label, чтобы клик мыши по тексту приводил к изменению состояния чекбокса:

<label>
    <input type=»checkbox»>
    <span>а это — стилизованный</span>
</label>

Мы, однако, не только поместили текст внутрь <label>, но и обернули его в <span>. Для чего же это нужно?

Селектор соседа и псевдокласс :checked

В CSS есть селектор соседа. Он позволяет применить стили к указанному элементу только в том случае, если прямо перед ним есть некоторый другой элемент. Записывается он с помощью символа + и выглядит, например, вот так:

input[type=checkbox] + span { (правила) }

Вышеуказанная запись означает: применить правила ко всем <span>, перед которыми есть <input type=»checkbox»>.

С помощью подобного выражения можно провернуть одну хитрость: ограничить предшествующие элементы только теми чекбоксами, которые «включены». Это нам позволит сделать псевдокласс :checked:

input[type=checkbox]:checked + span { (правила) }

Такая запись позволяет визуально выделить конкретно те <span>, которые следуют за включенными чекбоксами. Эффект от такого выделения иллюстрирует простейший пример:

<label>
    <input type=»checkbox»>
    <span>щелкни по мне</span>
</label>

input[type=checkbox]:checked + span { font-weight: bold; }

Вот как получится:

щелкни по мне

(Заметим, что <span> вместе с <input type=checkbox> находится внутри <label>, поэтому клик по нему приводит к изменению состояния <input>. )

Селектор в исходном примере выглядит немного по-другому: не
input[type=checkbox]:checked + span, а
input[type=checkbox]:checked + .pseudocheckbox. По такому селектору браузер быстрее найдет нужный элемент: ему легче искать среди элементов класса pseudocheckbox, чем среди всех <span>. Так что класс добавлен для повышения производительности и никакой другой смысловой нагрузки не несет.

Стилизуем ::before

Вернемся к нашей задаче. Нам требуется не выделять сам <span>, а добиться, чтобы слева от него появилось нечто похожее на переключатель. Для этого нам поможет псевдоэлемент ::before.

::before — это способ дописать что-то в элемент непосредственно перед его содержимым средствами CSS.

<div>раз</div>
<div>два</div>

div::before { content: «Это ::before «; }

Современные браузеры позволяют стилизовать ::before так же, как это делается для обычных HTML-элементов: задавать размеры и отступы, добавлять границы, фон и т. д. Это позволит нам придать ему вид квадратика с рамкой, похожего на переключатель. Взглянем еще раз на правила для него и разберемся, для чего нужно каждое из них:

.pseudocheckbox::before {  
    content: «\00A0»;
    display: inline-block;
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    background-color: white;
    border: 2px solid #B0B0B0;
    border-radius: 2px;
    margin-right: 6px;
    vertical-align: baseline;
   
    text-align: center;
    font-family: Arial, sans-serif;
    font-size: 16px;
    line-height: 16px;
    font-weight: bold;
    color: #808080;
}

content — свойство, необходимое псевдоэлементу, чтобы он проявился. Достаточно даже пустой строки. Но мы используем неразрывный пробел (об этом будет рассказано ниже). Его шестнадцатеричный код — 00A0:

content: «\00A0»;

Нужно задать нашему «квадратику» ширину и высоту. Чтобы они подействовали, необходимо также указать display: inline-block; (по умолчанию у ::before — inline):

display: inline-block;
width: 20px;
height: 20px;

Удобней, чтобы ширина и высота рассчитывались с учетом толщины границ:

box-sizing: border-box;

Которые тут же и укажем вместе с закруглениями для красоты:

border: 2px solid #B0B0B0;
border-radius: 2px;

И добавим небольшой отступ от текста:

margin-right: 6px;

Следует также обратить внимание на выравнивание самого «квадратика» относительно соседнего текста. Одним из подходящих вариантов является выравнивание по базовой линии текста:

vertical-align: baseline;

В случае самого «квадратика» текстом является неразрывный пробел. Если бы текста внутри не было (content: «»), такое выравнивание не подействовало бы. Вот почему в content именно неразрывный пробел, а не пустая строка: выглядят они одинаково, а действуют в данном случае по-разному.

Остальные свойства относятся к переключателю в состоянии «включено».

Состояние «включено» и Unicode-символ «галочка»

Отмеченный переключатель, очевидно, имеет некоторые отличия. Для нас это не проблема, потому что с помощью соседнего селектора можно обращаться не только к самому элементу, но и к его ::before:

input[type=checkbox]:checked + .pseudocheckbox::before { … }

Отмеченный переключатель обычно имеет внутри «галочку». Здесь нам на помощь приходит разнообразие символов Unicode, которое выходят далеко за пределы собственно букв и цифр. Есть среди этого многообразия и несколько значков для «галочки». Код значка мы запишем в свойство content:

input[type=checkbox]:checked + .pseudocheckbox::before { content: «\2714»; }

В результате «галочка» будет вписана во все «квадратики» рядом с отмеченными чекбоксами, чего мы и добивалсь. Однако, не стоит забывать, что технически такая «галочка» — это обычный текстовый символ, который самостоятельно может и не выглядеть ровно так, как надо, и ему нужно ему в этом немного помочь.

Центрируем по горизонтали:

text-align: center;

В разных шрифтах символ «галочки» может выглядеть немного по-разному, поэтому для ясности выбираем какой-то один и указываем его явно. Также подбираем размер:

    font-family: Arial, sans-serif;
font-size: 16px;

Кроме размера нужно добиться необходимого положения символа внутри квадратика по вертикальной оси. Лучше всего это делать с помощью line-height:

line-height: 16px;

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

При выравнивании по базовой линии текста (vertical-align: baseline) именно значение line-height определеяет, где, собственно, будет нижняя граница текста у «квадратика». Если эти значения у отмеченного и неотмеченного будут отличаться, то они окажутся выровненными по-разному (так может получиться, например, если явно указать line-height только у отмеченного). Поэтому line-height лучше указывать в общем блоке стилей для ::before.

line-height обычно подбирают вместе с font-size, поэтому его удобно иметь в блоке стилей рядом. font-size, в свою очередь, может подбираться вместе с другими параметрами текста. Так что все их удобней перенести в общий блок для ::before, хотя, на первый взгляд, правила стилизации текста там выглядит нелогично, т.к. самого текста там нет.

Напоследок добавим жирность и укажем цвет:

font-weight: bold;
color: #808080;


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

Запрет отправки формы пока не установлен флажок

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

Сделать такое можно разными способами, например, проверить на JS заполненные поля, и если не установлен флажок, вывести предупредительное сообщение. Также можно сделать проверку после отправки формы на PHP и проверить уже там, был ли поставлен флажок.

Но есть способ намного проще – просто заблокировать кнопку «отправить» пока не установлена галочка на условиях.

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

<div> <input type=»checkbox» name=»checkbox» onchange=»document. getElementById(‘submit’).disabled = !this.checked;» /> <label for=»checkbox»>Настоящим подтверждаю, что я согласен</label> <input type=»submit» disabled=»disabled» name=»submit» value=»Отправить» /> </div>

<div>

    <input type=»checkbox» name=»checkbox» onchange=»document.getElementById(‘submit’).disabled = !this.checked;» />

    <label for=»checkbox»>Настоящим подтверждаю, что я согласен</label>    

    <input type=»submit» disabled=»disabled» name=»submit» value=»Отправить» />

</div>

При необходимости, добавим немного стилей:

.formname input[type=checkbox] { display:none; } .formname input[type=checkbox] + label { display: block; position: relative; margin: 12px 0 12px 30px; cursor: pointer; font-size: 16px; line-height: 20px; color: #333333; } . formname input[type=checkbox] + label:hover { color:#337AB7; } .formname input[type=checkbox] + label:before { position: absolute; content: »; width: 22px; height: 22px; line-height: 22px; left: -30px; border: 1px solid #808080; } .formname input[type=checkbox]:checked + label:before{ content: ‘\2714’; color:#337AB7; font-size: 14px; text-align: center; font-weight: bold; border: 1px solid #337AB7; } .formname input[type=submit] { display: block; cursor: pointer; font-size: 14px; padding: 10px 30px; border: 1px solid #275F8B; background: #337AB7; color: #FFF; text-transform: uppercase; transition: .4s all; font-weight: bold; } .formname input[type=submit]:hover { background: #275F8B; } .formname input[disabled] { opacity: .6; cursor: not-allowed; }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

. formname input[type=checkbox] {

    display:none;

}

.formname input[type=checkbox] + label {

    display: block;

    position: relative;

    margin: 12px 0 12px 30px;

    cursor: pointer;

    font-size: 16px;

    line-height: 20px;

    color: #333333;

}

.formname input[type=checkbox] + label:hover {

    color:#337AB7;

}

.formname input[type=checkbox] + label:before {

    position: absolute;

    content: »;

    width: 22px;

    height: 22px;

    line-height: 22px;

    left: -30px;

    border: 1px solid #808080;

}

.formname input[type=checkbox]:checked + label:before{

    content: ‘\2714’;

    color:#337AB7;

    font-size: 14px;

    text-align: center;

    font-weight: bold;

    border: 1px solid #337AB7;

}

.formname input[type=submit] {

    display: block;

    cursor: pointer;

    font-size: 14px;

    padding: 10px 30px;

    border: 1px solid #275F8B;

    background: #337AB7;

    color: #FFF;

    text-transform: uppercase;

    transition: . 4s all;

    font-weight: bold;

}

.formname input[type=submit]:hover {

    background: #275F8B;

}

.formname input[disabled] {

    opacity: .6;

    cursor: not-allowed;

}

В итоге получим:

Настоящим подтверждаю, что я согласен

  • Опубликовано:
  • Рубрики: Формы
  • 12072 просмотра

: флажок Селектор | Документация по jQuery API

Описание: Выбирает все элементы типа флажка.

$ (": checkbox") эквивалентно $ ("[type = checkbox]") . Как и в случае с другими селекторами псевдоклассов (те, которые начинаются с «:»), рекомендуется ставить перед ним имя тега или какой-либо другой селектор; в противном случае подразумевается универсальный селектор («*»). Другими словами, пустое значение $ (': checkbox') эквивалентно $ ("*: checkbox") , поэтому вместо него следует использовать $ ("input: checkbox") .

Пример:

Находит все входы флажков.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

 

checkbox demo

Руководство по типам вопросов для флажков — флажок Survey Developer Center

Флажок Элементы опроса классифицируются по элементам вопросов, элементам отображения, элементам действий и элементам отчета. Это руководство сосредоточено на вопросах и содержит подробное описание 12 типов вопросов ниже:

  • Рейтинг
  • Слайдер
  • Рейтинг Порядок
  • Кнопки радио
  • Выпадающий список
  • Флажки
  • Рейтинговая шкала
  • Чистая оценка промоутера
  • Матрица
  • Открытый однострочный текст
  • Открытый многострочный текст
  • Загрузка файла
  • КАПЧА

Каждый тип вопроса имеет уникальный Редактор элементов .В этом руководстве описаны инструменты и параметры, доступные в каждом из них.


Типы вопросов

Меню вопросов открывается по умолчанию, когда вы нажимаете кнопку + Item на странице опроса. Это меню состоит из:

  • 6 элементов с несколькими вариантами выбора: Ползунок, порядок ранжирования, переключатель, раскрывающийся список, флажки, шкала рейтинга, рейтинг, чистая оценка промоутера
  • 2 элемента открытого ответа: Открытый однострочный текст, открытый многострочный текст
  • 1 Элемент матрицы: Сетка из нескольких вопросов, которая может содержать столбцы для общей суммы, ползунка, переключателей, раскрывающегося списка, флажков, шкалы оценок или открытого текста
  • Элемент загрузки 1 файла: Респондент может загрузить изображение, документ или другой файл в 13 различных форматах файлов
  • 1 Элемент CAPTCHA: Показать ввод CAPTCHA, который должен быть подтвержден для продолжения опроса

СОВЕТ ПРОВЕРКИ: Предварительный просмотр элемента будет отображаться справа при выборе. Обратите внимание, что это всего лишь предварительный просмотр и не обязательно указывает на то, как будет выглядеть ваш последний вопрос.


Рейтинг

Рейтинговый вопрос позволяет респондентам оценивать элемент или опыт визуально, используя звездочку, прямоугольник, таблетку, вертикальную или горизонтальную полосу.


Слайдер

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


Ранг Заказ

Элемент Rank Order позволяет респондентам ранжировать возможные варианты ответов, либо присваивая каждому элементу числовой рейтинг, либо физически размещая элементы в определенном порядке. Подробнее об элементе «Порядок рангов» см. В нашем Руководстве по порядку ранжирования.


Радиокнопки

Radio Button вопросов представляют собой список возможных вариантов ответа, из которого можно выбрать только один вариант.

Чтобы создать вопрос с переключателем:

I. Добавьте текст и подтекст вопроса на вкладке «Вопрос»:

  1. Вы можете переключаться между основным текстом вопроса и подтекстом вопроса.
  2. Кнопка <> открывает редактор HTML, если вам нужно отредактировать HTML напрямую.
  3. Значки панели инструментов позволяют вставлять изображения, создавать таблицы, изменять характеристики шрифта, создавать ссылки и т. Д.
  4. Объедините в текст из предыдущих вопросов, атрибутов пользователя или свойств ответа, используя раскрывающийся список объединения.

II. Введите варианты ответа на вкладке «Варианты»:

Вы можете вводить варианты ответа построчно в Normal View или переключаться на Quick Entry для копирования и вставки.

  1. Щелкните оранжевый значок «+», чтобы добавить линию. Выберите красный значок «-», чтобы удалить линию.Щелкните строку для редактирования.
  2. Измените порядок вариантов ответов, выделив пунктирные линии и перетащив вариант ответа в другое место.
  3. Установите переключатель «Текст по умолчанию» слева от варианта ответа, чтобы этот вариант был предварительно выбран в вашем опросе.
  4. Используйте объединение, чтобы вставить ответ из предыдущего вопроса, атрибута пользователя или свойства ответа в поле выбора ответа.
  5. Создайте псевдоним для каждого варианта ответа (необязательно). Этот псевдоним действует как альтернативный текст ответа и может применяться к отчетам или при экспорте данных ответа.
  6. Отредактируйте текст вопроса с помощью редактора HTML.

III. Включить параметры вопроса на вкладке «Поведение»:

  1. Создать вопрос псевдоним . Этот псевдоним действует как альтернативный текст вопроса и может применяться в отчетах или при экспорте данных ответов.
  2. Отметьте «Требуется ответ» , чтобы сделать этот вопрос обязательным. Респонденты не смогут продолжить опрос, пока не будет выбран ответ.
  3. Отметьте «Случайный выбор вариантов» , чтобы случайным образом изменять порядок вариантов ответов на этот вопрос при каждом открытии опроса. Случайный выбор вариантов ответов может помочь предотвратить предвзятость ответа.
  4. Отметьте «Разрешить другим» , чтобы респонденты могли ввести свой собственный ответ вместо выбора одного из представленных ответов. Введите текст по умолчанию в текстовое поле «Другое», чтобы запросить респондента. Вы также можете применить слияние здесь.

СОВЕТ ПРОВЕРКИ. В отчетах и ​​экспортированных данных отображается текст из редактора опросов.Это означает, что если вы использовали объединение в тексте своего вопроса, шестизначный код исходного значения, который был применен к вашему вопросу, появится в вашем отчете / экспорте. Это пример того, когда вы можете захотеть создать псевдоним для текста вашего вопроса, который будет применяться при создании отчета / экспорта.

IV. Выберите параметры макета на вкладке «Внешний вид»:

  1. Измените положение текста вопроса по отношению к вариантам ответа. Параметры включают верх, низ, левый или правый.
  2. Измените обоснование всего вопроса относительно рамки содержания опроса. Возможные варианты: выравнивание по левому краю, выравнивание по правому краю или по центру окна.
  3. Измените раскладку вариантов ответов. Выберите между вертикальным и горизонтальным.
  4. Разложите варианты ответов по столбцам, чтобы избежать прокрутки. Особенно удобно, когда у вас есть длинный список ответов.
  5. Показывать числовые метки слева от вариантов ответа.

В.Добавьте правила, чтобы определить, когда ваш вопрос будет отображаться на вкладке «Условия»:

Щелкните «Новое условие» и создайте одно или несколько правил отображения на основе ответов на предыдущие вопросы, свойств профиля пользователя или свойств ответа, таких как оценка опроса. Подробнее об условиях читайте здесь.


Раскрывающиеся списки

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

Чтобы создать вопрос из раскрывающегося списка:

I. Добавьте текст и подтекст вопроса на вкладке «Вопрос»:

  1. Вы можете переключаться между текстом основного вопроса и подтекстом вопроса.
  2. Кнопка <> открывает редактор HTML, если вам нужно отредактировать HTML напрямую.
  3. Значки панели инструментов позволяют вставлять изображения, создавать таблицы, изменять характеристики шрифта, создавать ссылки и т. Д.
  4. Объедините в текст из предыдущих вопросов, атрибутов пользователя или свойств ответа, используя раскрывающийся список объединения.

II. Введите варианты ответа на вкладке «Варианты»:

Вы можете вводить варианты ответа построчно в Normal View или переключаться на Quick Entry для копирования и вставки.

  1. Щелкните оранжевый значок «+», чтобы добавить линию. Выберите красный значок «-», чтобы удалить линию.Щелкните строку для редактирования.
  2. Измените порядок вариантов ответов, выделив пунктирные линии и перетащив вариант ответа в другое место.
  3. Установите переключатель «Текст по умолчанию» слева от варианта ответа, чтобы этот вариант был предварительно выбран в вашем опросе.
  4. Используйте объединение, чтобы вставить ответ из предыдущего вопроса, атрибута пользователя или свойства ответа в поле выбора ответа.
  5. Создайте псевдоним для каждого варианта ответа (необязательно). Этот псевдоним действует как альтернативный текст ответа и может применяться в отчетах или при экспорте данных ответа.
  6. Отредактируйте текст вопроса с помощью редактора HTML.

III. Включить параметры вопроса на вкладке «Поведение»:

  1. Создать вопрос псевдоним . Этот псевдоним действует как альтернативный текст вопроса и может применяться в отчетах или при экспорте данных ответов.
  2. Отметьте «Требуется ответ» , чтобы сделать этот вопрос обязательным. Респонденты не смогут продолжить опрос, пока не будет выбран ответ.
  3. Отметьте «Случайный выбор вариантов» , чтобы случайным образом изменять порядок вариантов ответов на этот вопрос каждый раз при открытии опроса. Случайный выбор вариантов ответов может помочь предотвратить предвзятость ответа.
  4. Отметьте «Разрешить другим» , чтобы респонденты могли ввести свой собственный ответ вместо выбора одного из представленных ответов. Введите текст по умолчанию в текстовое поле «Другое», чтобы запросить респондента. Вы также можете применить слияние здесь.

СОВЕТ ПРОВЕРКИ. В отчетах и ​​экспортированных данных отображается текст из редактора опросов.Это означает, что если вы использовали объединение в тексте своего вопроса, шестизначный код исходного значения, который был применен к вашему вопросу, появится в вашем отчете / экспорте. Это пример того, когда вы можете захотеть создать псевдоним для текста вашего вопроса, который будет применяться при создании отчета / экспорта.

IV. Выберите параметры макета на вкладке «Внешний вид»:

  1. Измените положение текста вопроса по отношению к вариантам ответа. Параметры включают верх, низ, левый или правый.
  2. Измените обоснование всего вопроса относительно рамки содержания опроса. Возможные варианты: выравнивание по левому краю, выравнивание по правому краю или по центру окна.
  3. Измените раскладку вариантов ответов. Выберите между вертикальным и горизонтальным.
  4. Разложите варианты ответов по столбцам, чтобы избежать прокрутки. Особенно удобно, когда у вас есть длинный список ответов.
  5. Показывать числовые метки слева от вариантов ответа.

В. Добавьте правила, чтобы определить, когда ваш вопрос будет отображаться на вкладке «Условия»:

Щелкните «Новое условие» и создайте одно или несколько правил отображения на основе ответов на предыдущие вопросы, свойств профиля пользователя или свойств ответа, таких как оценка опроса. Подробнее об условиях читайте здесь.


Флажки

В отличие от вопросов с переключателем и раскрывающегося списка, вопросы с флажком позволяют респонденту выбрать несколько вариантов ответа из списка вариантов ответа.Вы можете указать минимальное и максимальное количество ответов, которые респондент может выбрать на вкладке «Поведение».

Чтобы создать вопрос с флажком:

I. Добавьте текст и подтекст вопроса на вкладке «Вопрос»:

  1. Вы можете переключаться между основным текстом вопроса и подтекстом вопроса.
  2. Кнопка <> открывает редактор HTML, если вам нужно отредактировать HTML напрямую.
  3. Значки панели инструментов позволяют вставлять изображения, создавать таблицы, изменять характеристики шрифта, создавать ссылки и т. Д.
  4. Объедините в текст из предыдущих вопросов, атрибутов пользователя или свойств ответа, используя раскрывающийся список объединения.

II. Введите варианты ответа на вкладке «Варианты»:

Вы можете вводить варианты ответа построчно в Normal View или переключаться на Quick Entry для копирования и вставки.

  1. Щелкните оранжевый значок «+», чтобы добавить линию. Выберите красный значок «-», чтобы удалить линию.Щелкните строку для редактирования.
  2. Измените порядок вариантов ответов, выделив пунктирные линии и перетащив вариант ответа в другое место.
  3. Установите переключатель «Текст по умолчанию» слева от варианта ответа, чтобы этот вариант был предварительно выбран в вашем опросе.
  4. Используйте объединение, чтобы вставить ответ из предыдущего вопроса, атрибута пользователя или свойства ответа в поле выбора ответа.
  5. Создайте псевдоним для каждого варианта ответа (необязательно). Этот псевдоним действует как альтернативный текст ответа и может применяться в отчетах или при экспорте данных ответа.
  6. Отредактируйте текст вопроса с помощью редактора HTML.

III. Включите параметры вопроса на вкладке «Поведение»:

  1. Создать вопрос псевдоним . Этот псевдоним действует как альтернативный текст вопроса и может применяться в отчетах или при экспорте данных ответов.
  2. Отметьте «Требуется ответ» , чтобы сделать этот вопрос обязательным. Респонденты не смогут продолжить опрос, пока не будет выбран ответ.
  3. Отметьте «Случайный выбор вариантов» , чтобы случайным образом изменять порядок вариантов ответов на этот вопрос каждый раз при открытии опроса. Случайный выбор вариантов ответов может помочь предотвратить предвзятость ответа.
  4. Отметьте «Разрешить другим» , чтобы респонденты могли ввести свой собственный ответ вместо выбора одного из представленных ответов. Введите текст по умолчанию в текстовое поле «Другое», чтобы запросить респондента. Вы также можете применить слияние здесь.

СОВЕТ ПРОВЕРКИ. В отчетах и ​​экспортированных данных отображается текст из редактора опросов.Это означает, что если вы использовали объединение в тексте своего вопроса, шестизначный код исходного значения, который был применен к вашему вопросу, появится в вашем отчете / экспорте. Это пример того, когда вы можете захотеть создать псевдоним для текста вашего вопроса, который будет применяться при создании отчета / экспорта.

IV. Выберите параметры макета на вкладке «Внешний вид»:

  1. Измените положение текста вопроса по отношению к вариантам ответа. Параметры включают верх, низ, левый или правый.
  2. Измените обоснование всего вопроса относительно рамки содержания опроса. Возможные варианты: выравнивание по левому краю, выравнивание по правому краю или по центру окна.
  3. Измените раскладку вариантов ответов. Выберите между вертикальным и горизонтальным.
  4. Разложите варианты ответов по столбцам, чтобы избежать прокрутки. Особенно удобно, когда у вас есть длинный список ответов.
  5. Показывать числовые метки слева от вариантов ответа.

В.Добавьте правила, чтобы определить, когда ваш вопрос будет отображаться на вкладке «Условия»:

Щелкните «Новое условие» и создайте одно или несколько правил отображения на основе ответов на предыдущие вопросы, свойств профиля пользователя или свойств ответа, таких как оценка опроса. Подробнее об условиях читайте здесь.


Рейтинговая шкала

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

СОВЕТ ПРОВЕРКИ: При создании отчета вопросы «Шкала рейтинга» и «Сетевой промоутер» — единственные типы элементов, которые позволяют использовать элемент отчета «Таблица статистики».

Чтобы создать вопрос со шкалой рейтинга:

I. Добавьте текст и подтекст вопроса на вкладке «Вопрос»:

  1. Вы можете переключаться между текстом основного вопроса и подтекстом вопроса.
  2. Кнопка <> открывает редактор HTML, если вам нужно отредактировать HTML напрямую
  3. Значки панели инструментов позволяют вставлять изображения, создавать таблицы, изменять характеристики шрифта, создавать ссылки и т. Д.
  4. Объедините в тексте из предыдущих вопросов, атрибутов пользователя или свойств ответа, используя раскрывающийся список объединения

ПРИМЕЧАНИЕ. В вопросе «Шкала оценок» нет вкладки «Варианты выбора». Вы можете настроить числа и текст на вкладке «Поведение».

II. Включить параметры вопроса на вкладке «Поведение»:

  1. Создать вопрос псевдоним . Этот псевдоним действует как альтернативный текст вопроса и может применяться в отчетах или при экспорте данных ответов.
  2. Число, введенное в поле «Начальное значение шкалы » , будет первым числом в вашей рейтинговой шкале. Шкала будет увеличиваться в числовом порядке до тех пор, пока не будет достигнуто конечное значение . Радиокнопка будет находиться над каждым числом на шкале.Размер вашей шкалы не ограничен.
  3. Начальный текст шкалы находится над первым числом на шкале. Средний текст шкалы находится над средним числом (номерами) шкалы. Текст конца шкалы находится над последней цифрой шкалы. Убедитесь, что начальный, средний и конечный текст назначены правильному концу шкалы. Например, если вы показываете шкалу от 1 до 5, а 1 означает «очень неудовлетворен», убедитесь, что в тексте начала шкалы, а не в тексте конца шкалы введено «Очень недовольна».Масштабировать текст необязательно.
  4. Отметьте «Требуется ответ» , чтобы сделать этот вопрос обязательным. При этом слева от текста вопроса появится звездочка (*). Респонденты не смогут продолжить опрос, пока не будет выбран ответ.
  5. Отметка «Enable N / A Option» поместит дополнительный переключатель справа от шкалы оценок. Настройте текст «Н / Д» в соответствующем поле. Вы также можете применить слияние здесь.

СОВЕТ ПРОВЕРКИ. В отчетах и ​​экспортированных данных отображается текст из редактора опросов.Это означает, что если вы использовали объединение в тексте своего вопроса, шестизначный код исходного значения, который был применен к вашему вопросу, появится в вашем отчете / экспорте. Это пример того, когда вы можете захотеть создать псевдоним для текста вашего вопроса, который будет применяться при создании отчета / экспорта.

III. Выберите параметры макета на вкладке «Внешний вид»:

  1. Измените раскладку вариантов ответов. Выберите между вертикальным и горизонтальным.
  2. Измените обоснование всего вопроса относительно рамки содержания опроса.Возможные варианты: выравнивание по левому краю, выравнивание по правому краю или по центру окна.
  3. Измените положение текста вопроса относительно вариантов ответа. Возможные варианты: сверху, снизу, слева или справа.
  4. Включите разделительную линию между текстом описания шкалы номера шкалы.
  5. Установите ширину между шагами шкалы в пикселях. Например, если вы введете 100 пикселей в предоставленное текстовое поле, каждый вариант масштаба будет разделен на 100 пикселей.

IV. Добавьте правила, чтобы определить, когда ваш вопрос будет отображаться на вкладке «Условия»:

Щелкните «Новое условие» и создайте одно или несколько правил отображения на основе ответов на предыдущие вопросы, свойств профиля пользователя или свойств ответа, таких как оценка опроса. Подробнее об условиях читайте здесь.


Матрица

Матрица элементы содержат строки и столбцы, составляющие сетку вопросов. Каждая комбинация строки / столбца — это уникальный вопрос.

Чтобы создать матричный вопрос:

I. Добавьте текст и подтекст вопроса на вкладке «Вопрос»:

  1. Вы можете переключаться между текстом основного вопроса и подтекстом вопроса.
  2. Кнопка <> открывает редактор HTML, если вам нужно отредактировать HTML напрямую.
  3. Значки панели инструментов позволяют вставлять изображения, создавать таблицы, изменять характеристики шрифта, создавать ссылки и т. Д.
  4. Объедините в текст из предыдущих вопросов, атрибутов пользователя или свойств ответа, используя раскрывающийся список объединения.

II. Включить параметры вопроса на вкладке «Поведение» :

  1. Создайте для Matrix псевдоним . Этот псевдоним действует как альтернативный текст и может применяться к отчетам или при экспорте данных ответов.

II. Введите текст строки на вкладке «Строки»:

Каждая строка представляет тему вопроса, заданного в столбце (ах) матрицы.Как и вкладка «Выбор» в других редакторах вопросов, вкладка Rows позволяет вводить переменные построчно.

  1. Щелкните оранжевый значок «+», чтобы добавить строку. Щелкните красный значок «-», чтобы удалить строку. Выберите строку для редактирования текста ответа.
  2. Измените порядок строк, выделив пунктирные линии и перетащив вариант ответа в другое место.
  3. Используйте объединение, чтобы вставить ответ на предыдущий вопрос, атрибут пользователя или свойство ответа в поле выбора ответа.

III. Введите столбцы с вопросами на вкладке Столбцы:

Каждый столбец содержит элемент вопроса, например переключатели, шкалу оценок и т. Д.

  1. Первый столбец в таблице заполняется автоматически как столбец Row Texts . Этот столбец представляет метки строк, которые вы создали на вкладке «Строки» редактора элементов.
  2. Измените порядок столбцов, выделив пунктирные линии и перетащив вариант ответа в другое место.
  3. Чтобы добавить новый столбец в матрицу, нажмите кнопку Добавить столбец .

После нажатия кнопки Добавить столбец появится окно с вариантами типа вопроса. В этом примере мы сделали наш первый столбец вопросом шкалы рейтинга.

Выберите Следующий , чтобы задать свойства столбца. На шаге Properties вы можете ввести текст вопроса столбца и настроить поведение вопроса и параметры столбца.В этом примере мы не будем включать текст вопроса.

На шаге «Свойства» в разделе « Поведение » настройте элемент вопроса. Параметры поведения будут зависеть от типа вопроса, который вы выбрали на шаге «Выбрать тип столбца». Поскольку мы выбрали Radio Button, мы видим параметры поведения Radio Button.

На шаге «Свойства» в разделе «Параметры столбца » настройте параметры столбца.

Выберите Завершить , чтобы завершить процесс настройки столбца.

Как видите, в список столбцов добавлен новый столбец «Шкала рейтинга».

IV. Выберите параметры макета на вкладке «Внешний вид» :

  1. Выберите, чтобы добавить линии сетки в матричную таблицу. Возможные варианты: вертикальные, горизонтальные или и то, и другое.
  2. Установите ширину всей матрицы в пикселях. Если вы не зададите ширину столбцов, они будут автоматически настроены в соответствии с установленной здесь шириной матрицы.
  3. Измените обоснование всего вопроса относительно рамки содержания опроса.Возможные варианты: выравнивание по левому краю, выравнивание по правому краю или по центру окна.
  4. Измените положение текста матрицы по отношению к сетке. Возможные варианты: сверху, снизу, слева или справа.
  5. Измените выравнивание текста строки в столбце текста строки.

V. Добавьте правила, чтобы определить, когда ваш вопрос будет отображаться на вкладке «Условия»:

Щелкните «Новое условие» и создайте одно или несколько правил отображения на основе ответов на предыдущие вопросы, свойств профиля пользователя или свойств ответа, таких как оценка опроса.Подробнее об условиях читайте здесь.


Открытый однострочный текст

Открытый однострочный текст элемента используются для сбора одной строки произвольного текста. Этот тип вопросов полезен для сбора демографических данных и контактной информации.

Чтобы создать открытый однострочный вопрос:

I. Добавьте текст и подтекст вопроса на вкладке «Вопрос»:

  1. Вы можете переключаться между текстом основного вопроса и подтекстом вопроса.
  2. Кнопка <> открывает редактор HTML, если вам нужно отредактировать HTML напрямую.
  3. Значки панели инструментов позволяют вставлять изображения, создавать таблицы, изменять характеристики шрифта, создавать ссылки и т. Д.
  4. Объедините в текст из предыдущих вопросов, атрибутов пользователя или свойств ответа, используя раскрывающийся список объединения.

II. Включить параметры вопроса на вкладке «Поведение» :

  1. Укажите формат ответа, например адрес электронной почты, дату, все числа, все буквы и т. Д.Флажок проверяет ответы респондентов в зависимости от того, ввели ли они ответ в указанном здесь формате. Если респондент вводит недопустимый формат, он увидит предупреждение о проверке после попытки продолжить опрос.
  2. Ограничьте объем текста, который респондент может ввести в этот элемент с открытым текстом, введя номер символа в поле Max. Длина поля .
  3. Проверка Требуется ответ , чтобы сделать этот вопрос обязательным. Респонденты не смогут продолжить опрос, пока не будет выбран ответ.
  4. Создайте вопрос псевдоним . Этот псевдоним действует как альтернативный текст вопроса и может применяться при создании отчета или экспорте данных ответа.
  5. Введите Текст по умолчанию здесь, чтобы отображать предварительно заполненный текст в текстовом поле ответа, когда респондент входит на страницу опроса. Этот текст может быть удален или изменен респондентом. Вы также можете использовать слияние здесь.

СОВЕТ ПРОВЕРКИ. В отчетах и ​​экспортированных данных отображается текст из редактора опросов.Это означает, что если вы использовали объединение в тексте своего вопроса, шестизначный код исходного значения, который был применен к вашему вопросу, появится в вашем отчете / экспорте. Это пример того, когда вы можете захотеть создать псевдоним для текста вашего вопроса, который будет применяться при создании отчета / экспорта.

III. Ссылка на необязательный список автозаполнения на вкладке Автозаполнение:

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

IV. Выберите параметры макета на вкладке «Внешний вид»:

  1. Измените обоснование всего вопроса относительно рамки содержания опроса. Возможные варианты: выравнивание по левому краю, выравнивание по правому краю или по центру окна.
  2. Измените положение текста вопроса относительно вариантов ответа. Возможные варианты: сверху, снизу, слева или справа.
  3. Установите здесь ширину текстового поля в пикселях.

СОВЕТ ПРОВЕРКИ: Чтобы свести к минимуму прокрутку в контактных или регистрационных формах, расположите текстовое поле в той же строке, что и текст вопроса, установив для параметра Положение метки значение «Влево».

V. Добавьте правила, чтобы определить, когда ваш вопрос будет отображаться на вкладке «Условия»:

Щелкните «Новое условие» и создайте одно или несколько правил отображения на основе ответов на предыдущие вопросы, свойств профиля пользователя или свойств ответа, таких как оценка опроса.Подробнее об условиях читайте здесь.


Открытый многострочный текст

Открытый многострочный текст элементов используются для сбора нескольких строк произвольного текста в пределах указанного количества строк и столбцов. К тексту ответа можно применить правила форматирования. Этот тип вопросов полезен для сбора открытых ответов, таких как объяснения, предложения, комментарии, вопросы и т. Д.

Чтобы создать открытый многострочный вопрос:

И.Добавьте текст вопроса и подтекст на вкладке вопросов

  1. Вы можете переключаться между текстом основного вопроса и подтекстом вопроса.
  2. Кнопка <> открывает редактор HTML, если вам нужно отредактировать HTML напрямую.
  3. Значки панели инструментов позволяют вставлять изображения, создавать таблицы, изменять характеристики шрифта, создавать ссылки и т. Д.
  4. Объедините в текст из предыдущих вопросов, атрибутов пользователя или свойств ответа, используя раскрывающийся список объединения.

II. Включить параметры вопроса на вкладке «Поведение» :

  1. Проверить Требуется ответ , чтобы сделать этот вопрос обязательным. При этом слева от текста вопроса появится звездочка (*). Респонденты не смогут продолжить опрос, пока не будет выбран ответ.
  2. Включите параметр «Данные в формате HTML» для отображения текстового поля с параметрами форматирования HTML. Не устанавливайте флажок, чтобы собирать ответы в виде обычного текста.
  3. Создайте вопрос псевдоним . Этот псевдоним действует как альтернативный текст вопроса и может применяться в отчетах или при экспорте данных ответов.
  4. Введите Текст по умолчанию здесь, чтобы отображать предварительно заполненный текст в текстовом поле вопроса, когда респондент входит на страницу опроса. Этот текст может быть удален или изменен респондентом. Вы можете объединить пользователей здесь. Нет ограничений на количество текста, которое вы можете ввести в элемент открытого многострочного текста.

III. Выберите параметры макета на вкладке «Внешний вид»:

  1. Укажите количество строк, включенных в текстовое поле. Это определит высоту текстового поля.
  2. Укажите количество столбцов, включенных в текстовое поле. Это определит ширину коробки.
  3. Измените обоснование всего вопроса относительно рамки содержания опроса. Возможные варианты: выравнивание по левому краю, выравнивание по правому краю или по центру окна.
  4. Измените положение текста вопроса относительно вариантов ответа.Возможные варианты: сверху, снизу, слева или справа.

IV. Условия:

Щелкните «Новое условие» и создайте одно или несколько правил отображения на основе ответов на предыдущие вопросы, свойств профиля пользователя или свойств ответа, таких как оценка опроса. Подробнее об условиях читайте здесь.


Загрузка файла

Добавить вариант ввода File Upload , чтобы респонденты могли загружать файл в свой ответ.Затем файл можно экспортировать вместе с ответами.

ПРИМЕЧАНИЕ. Максимальный размер загружаемого файла по умолчанию составляет 4 МБ. Клиенты с серверными лицензиями могут установить максимальный размер файла в соответствии со своими требованиями.

Чтобы создать вопрос о загрузке файла:

I. Добавьте текст и подтекст вопроса на вкладке «Вопрос»:

  1. Выберите между основным текстом вопроса и подтекстом вопроса.
  2. Используйте эту кнопку, чтобы открыть текстовый редактор для поля, которое вы обновляете
  3. Используйте панель инструментов редактора для форматирования текста в представлении HTML.В этом редакторе вы можете вставлять изображения, создавать таблицы, изменять характеристики шрифтов, создавать ссылки и многое другое.
  4. Объединить в текст с предыдущими вопросами, атрибутами пользователя или свойствами ответа

II. Включить параметры вопроса на вкладке «Поведение»:

  1. Проверка Требуется ответ , чтобы сделать этот вопрос обязательным. Респонденты не смогут продолжить опрос, пока не будет выбран ответ.
  2. Создайте вопрос псевдоним . Псевдоним действует как альтернативный текст вопроса и может применяться при создании отчетов или экспорте данных ответов.
  3. Выберите, какие типы файлов респондентам разрешено загружать в свой ответ. Тип (ы) файлов, которые вы выбираете здесь, будет отмечен в элементе вашего опроса.

III. Добавьте правила, чтобы определить, когда ваш вопрос будет отображаться на вкладке «Условия»:

Щелкните «Новое условие» и создайте одно или несколько правил отображения на основе ответов на предыдущие вопросы, свойств профиля пользователя или свойств ответа, таких как оценка опроса.Подробнее об условиях читайте здесь.


Captcha

Включите ввод проверки Captcha , чтобы защитить ваш опрос от интернет-ботов. Captcha отображает уникальный код, который респондент должен ввести в соответствующее текстовое поле. Если введен неверный код, респондент не сможет продолжить опрос.

Чтобы создать вопрос CAPTCHA:

I. Добавьте текст и подтекст вопроса на вкладке «Вопрос»:

  1. Вы можете переключаться между текстом основного вопроса и подтекстом вопроса.
  2. Кнопка <> открывает редактор HTML, если вам нужно отредактировать HTML напрямую.
  3. Значки панели инструментов позволяют вставлять изображения, создавать таблицы, изменять характеристики шрифта, создавать ссылки и т. Д.
  4. Объедините в текст из предыдущих вопросов, атрибутов пользователя или свойств ответа, используя раскрывающийся список объединения.

II. Включить параметры вопроса на вкладке «Поведение»:

  1. Создать вопрос псевдоним .Псевдоним действует как альтернативный текст вопроса и может применяться при создании отчетов или экспорте данных ответов.
  2. Укажите минимальную длину кода элемента Captcha.
  3. Укажите максимальную длину кода элемента Captcha.
  4. Выберите код Captcha Тип кода . Доступны следующие варианты: Alpha, Numeric и AlphaNumeric.
  5. Установите размер кода Captcha Ширина изображения .
  6. Установите размер кода Captcha Высота изображения .
  7. Определите формат изображения . Разверните раскрывающийся список, чтобы просмотреть параметры.

III. Определите, как должен выглядеть ваш текст CAPTCHA, на вкладке «Текстовые форматы»:

Выберите один или несколько стилей Captcha из списка Text Formats . Если вы выберете более одного формата, стили будут чередоваться при обновлении страницы опроса.

IV. Выберите параметры макета на вкладке «Внешний вид»:

Изменить обоснование всего вопроса по отношению к рамке содержания опроса.Возможные варианты: выравнивание по левому краю, выравнивание по правому краю или по центру окна.

V. Добавьте правила, чтобы определить, когда ваш вопрос будет отображаться на вкладке «Условия»:

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

Этот раздел находится в разработке.Все документы, которые выглядят пустыми, будут заполнены как можно скорее. Если у вас есть какие-либо вопросы или вам нужна помощь с чем-то, что в настоящее время не задокументировано, пожалуйста, отправьте заявку в службу поддержки, и мы будем рады помочь вам.

Checkbox Scheduler Docs

Флажок с двумя состояниями.

  
 scheduler.locale.labels.section_checkme = «Я собираюсь участвовать»;

scheduler.config.lightbox.разделы = [
    {name: "text", height: 50, map_to: "text", type: "textarea", focus: true},
    {имя: "checkme", map_to: "участие", тип: "checkbox",
    checked_value: "регистрируемый", unchecked_value: "unchecked", высота: 40},
    {имя: "время", высота: 72, тип: "время", map_to: "авто"}
]; 

Пример по теме: Флажок в лайтбоксе

Инициализация

Чтобы добавить элемент управления Checkbox в лайтбокс, выполните следующие действия:

  1. Включите файл ext / dhtmlxscheduler_editors.js на странице:
      
      
  2. Добавьте раздел в конфигурацию лайтбокса:
      
     scheduler.config.lightbox.sections = [
        {имя: "описание", ...},
        {name: "checkme", map_to: "single_checkbox", тип: "checkbox",
        checked_value: "регистрируемый", высота: 40},
        {имя: "время", ...}
    ]; 
  3. Установить метку для раздела:
      
     планировщик.locale.labels.section_checkme = "Я собираюсь участвовать"; 

Пример по теме: Флажок в лайтбоксе

Недвижимость

Следующие свойства наиболее важны и обычно устанавливаются для элемента управления ‘checkbox’ (см. Полный список здесь):

название ( строка ) название раздела
высота (номер ) высота секции
map_to ( строка ) имя свойства данных, которое будет сопоставлено с разделом
тип ( textarea, time, select, template, multiselect, radio, checkbox, combo ) тип элемента управления раздела
checked_value ( boolean ) значение флажка в отмеченном состоянии.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *