ZorNet.Ru — сайт для вебмастера » HTML и CSS » Запрет формы отправки по установки галочки CSS

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

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

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

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

На Demo странице проверял, что изначально выглядит так:

Метод запрета отправки формы где не поставлена галочка checkbox

Метод запрета отправки формы где не поставлена галочка checkbox

Приступаем к установки:

HTML

Код

<div class="clarifieduw-entawrong">
  <input id="checkbox" type="checkbox" name="checkbox" onchange="document.getElementById('submit').disabled = !this.checked;" />
  <label for="checkbox">Подтвердите - установив галочку</label>
  <input type="submit" disabled="disabled" name="submit" id="submit" value="Отправить" />
</div>

CSS

Код

.clarifieduw-entawrong input[type=checkbox] {
  display:none;
}
.clarifieduw-entawrong input[type=checkbox] + label {
  display: block;
  position: relative;
  margin: 9px 0 9px 29px;
  cursor: pointer;
  font-size: 16.7px;
  line-height: 19px;
  color: #312f2f;
}
.clarifieduw-entawrong input[type=checkbox] + label:hover {
  color:#337AB7;
}
.clarifieduw-entawrong input[type=checkbox] + label:before {
  position: absolute;
  content: '';
  width: 19.8px;
  height: 19.8px;
  line-height: 19px;
  left: -30px;
  border: 1px solid #7b7676;
}
.clarifieduw-entawrong input[type=checkbox]:checked + label:before{
  content: '\2714';
  color:#337AB7;
  font-size: 18px;
  text-align: center;
  font-weight: bold;
  border: 1px solid #337AB7;
}
.clarifieduw-entawrong input[type=submit] {
  display: block;
  cursor: pointer;
  font-size: 14px;
  padding: 9px 28px;
  border: 2px solid #b1d2b6;
  background: #1a7733;
  color: #f7f1f1;
  text-transform: uppercase;
  transition: .5s all;
  font-weight: bold;
  border-radius: 73px;
}
.clarifieduw-entawrong input[type=submit]:hover {
  background: #19537f;
}
.clarifieduw-entawrong input[disabled] {
  opacity: .7;
  cursor: not-allowed;
}

Этот метод можно считать самым простым на запрет отправки формы, в то время пока галочка checkbox не установлена на своем месте.

Демонстрация

12 Июля 2018 Просмотров: 1487 Комментариев: (2)

Поделиться в социальных сетях

Материал разместил

Kosten

Комментарии: 2
Порядок вывода комментариев: -SAM- 14 Июля 2018 21:56¹ +2 Можно еще кнопке отправки присвоить required (вот тут пример описано, как и в теме есть скриптовый вариант). UPD.: да, когда выбор есть - это хорошо. Если посмотреть представленный здесь материал, то оно не на css (от css там только внешняя составляющая), ведь там идёт привязана js-функция на onchange (вот и получается, что у кого откл. поддержка js в браузере, то не сработает, в отличии от описанного мной выше). Kosten 14 Июля 2018 23:15² 0 Спасибо -SAM-, что нашли аналог, и теперь есть выбор, а это всяко лучше, когда предлагают выбрать, на стилях или на скрипте.