значение опции div для формирования значения

Question

Мы создали HTML-форму, которая содержит базовые элементы с полями ввода и параметров. Это хорошо работает!

Тогда у нас есть несколько полей для выбора опции:

<h2 class="space">Franchise</h2>
<div class="spa2">
  <p option value="300" data-value="300" class="s2">300</p>
  <p option value="500" data-value="500" class="s2 selected">500</p>
  <p option value="1000" data-value="1000" class="s2">1000 </p>
  <p option value="1500" data-value="1500" class="s2">1500</p>
  <p option value="2000" data-value="2000" class="s2">2000 </p>
  <p option value="2500" data-value="2500" class="s2">2500</p>
</div>

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

IsЕсть ли способ обмануть и сказать, что это поля формы без изменений?

Код отображает здесь эти кнопки:

Answer 1

Измените их на <form> элементы

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

HTML

<form>
  <input id="one" type="radio" name="choices" />
  <label for="one">300</label>

  <input id="two" type="radio" name="choices" />
  <label for="two">500</label>

  <input id="three" type="radio" name="choices" />
  <label for="three">1000</label>
</form>

• Этот пример состоит из радиовходов. Используйте это, если есть только один выбор, в противном случае введите тип checkbox, если у вас может быть несколько вариантов выбора.

• Метка должна следовать за вводом, чтобы соответствующая метка могла быть стилизована, когдавход проверен.

• Метка подключена к соответствующему радиовходу с соответствующими атрибутами for и id.

• Параметры радиовхода связаны с одним и тем же name="choices", и может быть выбран только один параметр.

CSS

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

input[type=radio] + label {
  padding: 10px;
  border: solid 1px;
  cursor: pointer;
}

input[type=radio]:checked + label {
  background: red;
}

• Скрыть переключатели с помощьюdisplay: none
• Стиль надписей, следующих за переключателями input[type=radio] + label
• Изменение стилей при выборе переключателя с помощью input[type=radio]:checked + label
• Сделать курсор указателемс cursor: pointer на этикетках

Полный пример

form {
  margin: 20px;
}

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

input[type=radio]+label {
  padding: 10px;
  border: solid 1px;
  cursor: pointer;
}

input[type=radio]:checked+label {
  background: red;
}

<form>
  <input id="one" type="radio" name="choices" />
  <label for="one">300</label>

  <input id="two" type="radio" name="choices" />
  <label for="two">500</label>

  <input id="three" type="radio" name="choices" />
  <label for="three">1000</label>
</form>