div option value to form value - html

Question

We have built an html form which contains basic stuff with input and option fields. This works good!
Then we have some fields to choose an option:
<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>
This displays buttons are to choose specific values, but respective data is not transferred with POST because there are some non-html form type fields.
Is there a way to cheat and tell that this are form fields without change anything?
The code displays this buttons here:

Answer 1

Change them into <form> elements
You're asking the wrong question. This look can be achieved with form elements, which is easier and more reliable than "cheating".
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>
This example consists of radio inputs. Use this if there is only one choice, otherwise make the type checkbox if you can have multiple choices.
The label should follow the input so that the corresponding label can be styled when the input is checked.
The label is connected to its corresponding radio input with the matching for and id attributes.
The radio input options are linked with the same name="choices" and only one option can be selected.
CSS
input[type=radio] {
display: none;
}
input[type=radio] + label {
padding: 10px;
border: solid 1px;
cursor: pointer;
}
input[type=radio]:checked + label {
background: red;
}
Hide the radio buttons with display: none
Style the labels that follow the radio buttons input[type=radio] + label
Change the styles when a radio button is selected with input[type=radio]:checked + label
Make the cursor a pointer with cursor: pointer on the labels
Full Example
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>