html - How to avoid the situation where only one can be selected for the entire page when using radio

Question

1. When doing radio selection, I set up two items with a total of 4 options. I planned to have one option for each of the two items, but the entire page can only be selected for radio. What's going on? I used it wrong. Have you typed it, or is there something missing?

2. The relevant code is as follows:
{% extends 'base.html' %}

{% block body %}

<h2>{{ the_title }}</h2>

<form method='POST' action='/search4'>

Please enter your and his (her) information:
gender:	Male<input type="radio" name="sex" /> Female<input type="radio" name="sex" />
Chinese Zodiac:	<select><option>Rat</option><option>Ox</option><option>Tiger</option><option>Rabbit</option><option> ;Dragon</option><option>Snake</option><option>Horse</option><option>Sheep</option><option>Monkey</option><option> ;Chicken</option><option>Dog</option><option>Pig</option> width="60"
gender:	Male<input type="radio" name="sex" /> Female<input type="radio" name="sex" />
Chinese Zodiac:	<select><option>Rat</option><option>Ox</option><option>Tiger</option><option>Rabbit</option><option> ;Dragon</option><option>Snake</option><option>Horse</option><option>Sheep</option><option>Monkey</option><option> ;Chicken</option><option>Dog</option><option>Pig</option>
Color:	<input type="color" name="user_color" />

<p>Fill in the information and click this button to start matching:</p>
<p><input value='Start matching! ' type='SUBMIT'></p>
</form>

{% endblock %}

3. There is one option for each of the two items in this plan, but only one option can be selected on the entire page.

4.

Answer 1

Because the names of your four radios are all sex, and the same names mean they are in the same group. Only one radio can be selected in the same group.
Solution, set different names in different lines, such as sex2