Как разместить label под каждым инпутом и сделать проверку на текст в поле?
Мне нужно чтобы каждый label p.error находился под полем, и чтобы инпуты оставались в таком положении(у меня при добавлении label ипнуты просто сьежают)

<div class="modal_container" style="min-width: 500px;">
<div class="modal_close_button"><ion-icon name="close-outline"></ion-icon></div>
<div class="request__form">
<p class="modal_title">Заявка на консультацию</p>
<form class="request" id="request">
<label for="your_name"><p class="error">*не заполненое поле</p></label>
<input type="text" id="your_name" name="your_name" placeholder="Ваше имя">
<label for="your_number"><p class="error">*не заполненое поле</p></label>
<input type="text" id="your_number" name="your_number" placeholder="Телефон">
<label for="your_email"><p class="error">*не заполненое поле</p></label>
<input type="text" id="your_email" name="your_email" placeholder="e-mail">
<textarea name="your_comment" rows="6" placeholder="Коментарий..."></textarea>
</form>
<div class="request__flex">
<p class="request__policy">Нажимая кнопку «Заказать», Вы соглашаетесь с <a href="#policy">условиями обработки и хранения персональных данных</a></p>
<button class="request__send">Отправить</button>
</div>
</div>
</div>
.modal_container {
width: fit-content;
height: fit-content;
padding: 33px;
background: #f5f5f5;
position: relative;
border-radius: 2px;
opacity: none;
z-index: 9999;
position: absolute;
}
.modal_close_button {
font-size: 35px;
color: #989898;
padding: 0;
margin: 0;
position: absolute;
right: 16px;
top: 16px;
cursor: pointer;
}
.modal_title span{
font-family: 'Gilroy-Regular';
}
.modal_title {
color: #182263;
font-size: 22px;
text-transform: uppercase;
font-family: "Gilroy-ExtraBold";
user-select: none;
}
.request__form {
padding: 30px;
}
form.request {
padding-top: 50px;
display: grid;
width: 700px;
grid-template-columns: 1fr 1fr;
grig-template-rows: 1fr 1fr 1fr;
gap: 30px;
}
form.request input {
height: 50px;
}
[name="your_name"],
form.request textarea {
grid-column: 1/3;
}
.your_number {
grid-column: 1;
}
.your_email {
grid-column: 2;
}
form.request input,
form.request textarea {
outline: none;
border: 1px solid #989898;
border-radius: 2px;
font-family: "Gilroy-Regular";
color: #6d6d6d;
font-size: 16px;
padding-left: 20px;
padding-right: 20px;
}
form.request textarea {
padding-top: 15px;
}
form.request textarea:last-child {
margin-bottom: 0;
}
.request__flex{
padding-top: 20px;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
.request__policy{
font-family: 'Gilroy-Regular';
color: #424242;
font-size: 12px;
display: flex;
justify-content: center;
}
.request__policy a{
padding-left: 3px;
text-decoration: underline;
cursor: pointer;
}
.request__send{
border: none;
cursor: pointer;
outline: none;
background-color: #182263;
color: white;
font-family: 'Gilroy-Medium';
width: 250px;
height: 58px;
text-transform: uppercase;
font-size: 16px;
margin: auto;
margin-top: 25px;
}
.policy__content li{
color: #212121;
font-family: 'Gilroy-Regular';
font-size: 16px;
padding: 5px 0;
}
.policy__content h1{
color: #212121;
font-size: 16px;
font-family: 'Gilroy-Bold';
padding-top: 50px;
padding-bottom: 20px;
}
.policy__content p{
color: #212121;
font-family: 'Gilroy-Regular';
font-size: 16px;
}
p.error{
font-family: 'Gilroy-Regular';
color: #f51a1a;
font-size: 12px;
}
Ответы (1 шт):
Автор решения: Макс к
→ Ссылка
Нужно немного изменить разметку.
Вместо:
<label for="your_name"><p class="error">*не заполненое поле</p></label><input type="text" id="your_name" name="your_name" placeholder="Ваше имя">
Лучше сделать:
<label class = "your_name" for="your_name"><input type="text" id="your_name" name="your_name" placeholder="Ваше имя"><p class="error">*не заполненое поле</p></label>
Ну и подправить шаблона грида, хотя бы вот так:
.modal_container {
width: fit-content;
height: fit-content;
padding: 33px;
background: #f5f5f5;
position: relative;
border-radius: 2px;
opacity: none;
z-index: 9999;
position: absolute;
}
.modal_close_button {
font-size: 35px;
color: #989898;
padding: 0;
margin: 0;
position: absolute;
right: 16px;
top: 16px;
cursor: pointer;
}
.modal_title span{
font-family: 'Gilroy-Regular';
}
.modal_title {
color: #182263;
font-size: 22px;
text-transform: uppercase;
font-family: "Gilroy-ExtraBold";
user-select: none;
}
.request__form {
padding: 30px;
}
.your_name{
grid-column: 1 / -1;
}
.your_number {
grid-column: 1 / 2;
}
.your_email {
grid-column: 2 / 3;
}
.your_comment{
grid-column: 1 / -1;
}
.request {
padding-top: 50px;
display: grid;
grid-template-rows: 1fr;
grid-template-columns: 1fr 1fr;
width: 700px;
grid-gap: 10px;
}
form.request input {
height: 50px;
}
form.request input,
form.request textarea {
outline: none;
border: 1px solid #989898;
border-radius: 2px;
font-family: "Gilroy-Regular";
color: #6d6d6d;
font-size: 16px;
padding-left: 20px;
padding-right: 20px;
}
form.request textarea {
padding-top: 15px;
}
form.request textarea:last-child {
margin-bottom: 0;
}
.request__flex{
padding-top: 20px;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
.request__policy{
font-family: 'Gilroy-Regular';
color: #424242;
font-size: 12px;
display: flex;
justify-content: center;
}
.request__policy a{
padding-left: 3px;
text-decoration: underline;
cursor: pointer;
}
.request__send{
border: none;
cursor: pointer;
outline: none;
background-color: #182263;
color: white;
font-family: 'Gilroy-Medium';
width: 250px;
height: 58px;
text-transform: uppercase;
font-size: 16px;
margin: auto;
margin-top: 25px;
}
.policy__content li{
color: #212121;
font-family: 'Gilroy-Regular';
font-size: 16px;
padding: 5px 0;
}
.policy__content h1{
color: #212121;
font-size: 16px;
font-family: 'Gilroy-Bold';
padding-top: 50px;
padding-bottom: 20px;
}
.policy__content p{
color: #212121;
font-family: 'Gilroy-Regular';
font-size: 16px;
}
.error{
font-family: 'Gilroy-Regular';
color: #f51a1a;
font-size: 12px;
}
label{
display: grid;
}
<div class="modal_container" style="min-width: 500px;">
<div class="modal_close_button"><ion-icon name="close-outline"></ion-icon></div>
<div class="request__form">
<p class="modal_title">Заявка на консультацию</p>
<form class="request" id="request">
<label class = "your_name" for="your_name">
<input type="text" id="your_name" name="your_name" placeholder="Ваше имя">
<p class="error">*не заполненое поле</p>
</label>
<label for="your_number" class = 'your_number'>
<input type="text" id="your_number" name="your_number" placeholder="Телефон">
<p class="error">*не заполненое поле</p></label>
<label for="your_email" class = 'your_email'>
<input type="text" id="your_email" name="your_email" placeholder="e-mail"><p class="error">*не заполненое поле</p></label>
<textarea class = "your_comment" name="your_comment" rows="6" placeholder="Коментарий..."></textarea>
</form>
<div class="request__flex">
<p class="request__policy">Нажимая кнопку «Заказать», Вы соглашаетесь с <a href="#policy">условиями обработки и хранения персональных данных</a></p>
<button class="request__send">Отправить</button>
</div>
</div>
</div>