How to get the value of an input and assign a label which he has no association

Question

I'm improving my website, and it has the following dropdown where some can choose the sex:

 <h2>Person Sex</h2> <label for="sex"></label> <select id="sex"> <option id="men">Men</option> <option id="women">Women</option> </select> 

Perfect. To send to my backend is very simple, i just I get the value of #sex id and send too the backend through a ajax.

Now, i want use checkbox's:

  <h1>Person Sex</h1> <label for="men">Men</label> <input type="radio" id="men"/><br/> <label for="women">Women</label> <input type="radio" id="women"/> 

My question is: how can i associate the women or the men to only a label called sex? And how can i make impossible to choose both.

Thanks.

Answer 1

Use the name and value attributes of the input s:

<label for="men">Men</label>
<input type="radio" id="men" value="men" name="sex" /><br/>
<label for="women">Women</label>
<input type="radio" id="women" value="women" name="sex" />

The name field on radio buttons allows them to be grouped. When submitting the form, the value of the selected item should be the value of the response for sex . For example, $sex = $_POST["sex"]; in PHP.

If you want a default value for your radio button group:

<input type="radio" id="women" value="women" name="sex" checked="checked" />

Answer 2

Add a name that is the same in both radio buttons. That way, only one can be chosen.

  <h1>Person Sex</h1> <label for="men">Men</label> <input type="radio" id="men" name="sex"/><br/> <label for="women">Women</label> <input type="radio" id="women" name="sex"/>