我有这个性别选择器代码,如何像上面的文本输入字段一样添加必填属性? 性别代码没有输入标签可添加要求的标签名称和ID,以供 PHP 评估。 如何将性别数据作为普通选择字段发送到下一个处理页面。这是一个两周经验的程序员提出的问题。
$('.gender-selector .item').on('click', function() {
$('.gender-selector .item').removeClass('active');
$(this).addClass('active')
})
.gender-selector {
width: 300px;
}
.gender-selector h1,
h2,
h3,
h4,
h5,
h6 {
text-align: center;
width: 100%;
height: 65px;
align-items: center;
display: flex;
justify-content: center;
font-weight: normal;
}
.gender-selector .container {
width: 100%;
display: flex;
justify-content: space-between;
}
.gender-selector .container .item {
width: 140px;
height: 150px;
border: 2px solid #eceff1;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: relative;
background: #fff;
border-radius: 8px;
box-shadow: inset 0px 0px 0px #000 42;
transition: all linear 0.1s;
}
.gender-selector .container .item.girl.active {
border: 2px solid #e91e63;
}
.gender-selector .container .item.girl.active .circle {
width: 15px;
height: 15px;
background: #e91e63;
}
.gender-selector .container .item.girl:hover {
cursor: pointer;
border: 2px solid #e91e63;
}
.gender-selector .container .item.boy.active {
border: 2px solid #2196f3;
}
.gender-selector .container .item.boy.active .circle {
width: 15px;
height: 15px;
background: #2196f3;
}
.gender-selector .container .item.boy:hover {
cursor: pointer;
border: 2px solid #2196f3;
}
.gender-selector .container .item .icon {
width: 64px;
height: 64px;
overflow: hidden;
margin: 0 auto;
}
.gender-selector .container .item .icon img {
max-width: 100%;
max-height: 100%;
}
.gender-selector .container .item p {
text-align: center;
margin-top: 10px;
}
.gender-selector .container .item .checked {
width: 20px;
height: 20px;
background: #eceff1;
border-radius: 50%;
position: absolute;
top: 5px;
right: 5px;
display: flex;
justify-content: center;
align-items: center;
}
.gender-selector .container .item .checked .circle {
width: 0px;
height: 0px;
background: #e91e63;
border-radius: 50%;
transition: all linear 0.1s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<input type="text" name="name" id="name" placeholder="My name is" required>
<div class="gender-selector center">
<h3>I am</h3>
<div class="container">
<div class="item girl">
<div class="checked">
<div class="circle"></div>
</div>
<div class="icon">
<img src="https://image.flaticon.com/icons/svg/40/40739.svg" alt="">
</div>
<p>Female</p>
</div>
<div class="item boy">
<div class="checked">
<div class="circle"></div>
</div>
<div class="icon">
<img src="https://image.flaticon.com/icons/svg/40/40541.svg" alt="">
</div>
<p>Male</p>
</div>
</div>
</div>
<input type="submit"></input>
</form>