Malleys,
Спасибо за ваш ответ.
Ваш код не смог редактировать видно что вы профессиональный программист и понимаете Армянский, но методы мне не понятно, я только начал улица и практикую. Хотелось чтобы логика было провеянным Вет правильном будет если в конце этот форма обрабатывайся в php, а после в mysqel (создавать записи или получить ответ => типа там такая запись уже существует и показывать зенитны часы, но это потом) и по этому думаю что вместо input time было input radio и checkbox, а еще в теге img src вставлялось название картинке 1.jpg или 3.jpg и.т.л. сейчас оно не вставляется. Еще label конечно хороший вариант, но в option немного красивые, но это некритично
Вот мой код
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<link rel="stylesheet" href="style.css">
<title>Test</title>
</head>
<body>
<div class="main">
<!-- Form start -->
<div class="form">
<form action="" method="POST">
<div class="sel">
<select name="s_section" id="s_section" class="s_section" required>
<option value="" disabled selected>Ընտրեք բաժինը</option>
<option value="barber">Վարսահարդարում</option>
<option value="manicure">Մատնահարդարում</option>
<option value="makeup">Մակիյաժ</option>
<option value="massage">Մերսում</option>
<option value="surgeon">Ասեղնաբուժություն</option>
</select>
</div>
<div class="sel">
<select name="s_employee" id="s_employee" class="s_employee" required>
<option value="" disabled selected>Ընտրեք աշխատակցին</option>
</select>
</div>
<div class="sel">
<input type="date" class="sel_date" title="Ընտրեք օրը" value="Ընտրեք օրը" >
</div>
<div class="times" required>
<input type="radio" value="1" name="time" class="sp_time" id="time1" required>
<label for="time1">10:00</label>
<input type="radio" value="2" name="time" class="sp_time" id="time2">
<label for="time2">10:30</label>
<input type="radio" value="3" name="time" class="sp_time" id="time3">
<label for="time3">11:00</label>
<input type="checkbox" checked disabled value="4" name="time" class="sp_time" id="time4">
<label for="time4">11:30</label>
<input type="radio" value="5" name="time" class="sp_time" id="time5">
<label for="time5">12:00</label>
<input type="radio" value="6" name="time" class="sp_time" id="time6">
<label for="time6">12:30</label>
<input type="radio" value="7" name="time" class="sp_time" id="time7">
<label for="time7">13:00</label>
<input type="radio" value="8" name="time" class="sp_time" id="time8">
<label for="time8">13:30</label>
<input type="radio" value="9" name="time" class="sp_time" id="time9">
<label for="time9">14:00</label>
<input type="radio" value="10" name="time" class="sp_time" id="time10">
<label for="time10">14:30</label>
<input type="radio" value="11" name="time" class="sp_time" id="time11">
<label for="time11">15:00</label>
<input type="radio" value="12" name="time" class="sp_time" id="time12">
<label for="time12">15:30</label>
<input type="radio" value="13" name="time" class="sp_time" id="time13">
<label for="time13">16:00</label>
<input type="radio" value="14" name="time" class="sp_time" id="time14">
<label for="time14">16:30</label>
<input type="radio" value="15" name="time" class="sp_time" id="time15">
<label for="time15">17:00</label>
<input type="radio" value="16" name="time" class="sp_time" id="time16">
<label for="time16">17:00</label>
<input type="radio" value="17" name="time" class="sp_time" id="time17">
<label for="time17">18:00</label>
<input type="radio" value="18" name="time" class="sp_time" id="time18">
<label for="time18">18:30</label>
<input type="radio" value="19" name="time" class="sp_time" id="time19">
<label for="time19">19:00</label>
<input type="radio" value="20" name="time" class="sp_time" id="time20">
<label for="time20">19:30</label>
</div>
<input type="text" required placeholder="Նշեք ձեր անունը">
<input type="tel" required placeholder="Նշեք ձեր հեռախոսահամարը" pattern="[0-9]{9}"> <br><br>
<input type="submit" value="Հաստատել">
</form>
</div>
<!-- Person_Card -->
<div class="person">
<div class="person_card" id="person_card">
<h3 class="person_name">Աշխատակցի անունը</h3>
<p class="person_zag">Մասնագիտությունը</p>
<img src="person.jpg" alt="person" class="person_img">
<p class="person_desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae aspernatur sunt, atque nisi error quasi dolores itaque saepe ullam. Numquam deleniti delectus laboriosam repellendus illo.</p>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
<style>
body{
margin: 0;
padding: 0;
background: #C1C6D8;
min-height: 1000px;
}
.main{
margin: 0 auto;
max-width: 700px;
display: flex;
justify-content:center;
flex-wrap: wrap;
}
form{
display: flex;
flex-wrap: wrap;
max-width: 310px;
}
.sel{
width: 100%;
}
.sel select,
.sel input,
form input{
padding: 8px;
outline: none;
width: 100%;
border-style: outset;
}
.sel input {
padding: 5px;
box-sizing: border-box;
}
.form{
margin: auto 0;
background: #dcdddd;
padding: 55px 10px;
box-sizing: border-box;
}
input[type="submit"]{
cursor:pointer;
background: #70C370;
transition:.5s;
}
input:valid,
select:valid{
background-color: #96d496 ;
}
.times{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.sp_time{
width: 20px;
height: 20px;
margin: 5px;
position: relative;
position: absolute;
z-index: -1;
}
input[type='radio']:checked + label,
input[type='checkbox']:checked + label{
background: red;
color: #fff;
}
.times label {
height: 15px;
background: #73af73;
padding: 15px;
margin: 5px;
cursor: pointer;
}
.person{
background: #DCDDDD;
max-width: 310px;
padding: 20px 10px;
}
.person_card{
text-align: center;
border:1px solid #000;
padding: 0 5px;
}
.person_img{
height: 250px;
}
</style>