html Заголовок первого уровня внутри формы: «Обратная связь» Каждое текстовое поле формы лежит в обёртке с классом .form-input. Отступ снизу от каждой обёртки создаётся с помощью класса mb-2

Вопрос пользователя:

html Заголовок первого уровня внутри формы: «Обратная связь» Каждое текстовое поле формы лежит в обёртке с классом .form-input. Отступ снизу от каждой обёртки создаётся с помощью класса mb-2. Для каждого текстового поля обязательно наличие <label/>, который будет скрыт с помощью класса sr-only. Чекбокс с принятием условий сервиса имеет обёртку с классами small и mb-1. Реализацию классов mb-2, mb-1, sr-only,small можно посмотреть в файле app.css. css Все дочерние элементы внутри класса form-input должны иметь блочное отображение и иметь ширину в 100% Текстовые поля имеют высоту 50 пикселей с внутренними отступами в 10 пикселей по вертикали и 20 пикселей по горизонтали. Для сохранения размеров измените поведение блочной модели с помощью свойства box-sizing со значением border-box. Поля имеют сплошную границу в 1 пиксель и цветом #e2e2e2. Поле для ввода сообщения имеет высоту 200 пикселей. Запретите пользователю управлять размерами этого поля.

Ответ нейросети:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="app.css">
<title>Feedback Form</title>
</head>
<body>
<form>
<h1>Обратная связь</h1>
<div class="form-input mb-2">
<label for="name" class="sr-only">Имя</label>
<input type="text" id="name" name="name" placeholder="Введите ваше имя" style="height: 50px; padding: 10px 20px; box-sizing: border-box; border: 1px solid #e2e2e2; width: 100%;">
</div>
<div class="form-input mb-2">
<label for="email" class="sr-only">Email</label>
<input type="email" id="email" name="email" placeholder="Введите ваш email" style="height: 50px; padding: 10px 20px; box-sizing: border-box; border: 1px solid #e2e2e2; width: 100%;">
</div>
<div class="form-input mb-2">
<label for="message" class="sr-only">Сообщение</label>
<textarea id="message" name="message" placeholder="Введите ваше сообщение" style="height: 200px; padding: 10px 20px; box-sizing: border-box; border: 1px solid #e2e2e2; width: 100%; resize: none;"></textarea>
</div>
<div class="form-input small mb-1">
<input type="checkbox" id="terms" name="terms">
<label for="terms">Я принимаю условия сервиса</label>
</div>
<button type="submit">Отправить</button>
</form>
</body>
</html>

.form-input * {
    display: block;
    width: 100%;
}

.form-input input[type="text"],
.form-input input[type="email"],
.form-input textarea {
    height: 50px;
    padding: 10px 20px;
    box-sizing: border-box;
    border: 1px solid #e2e2e2;
}

.form-input textarea {
    height: 200px;
    resize: none;
}

.mb-1 {
    margin-bottom: 1rem;
}

.mb-2 {
    margin-bottom: 2rem;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.small {
    font-size: 0.8rem;
}

Напишите нам, если в вопросе есть ваши персональные данные ([email protected])

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="app.css">
<title>Feedback Form</title>
</head>
<body>
<form>
<h1>Обратная связь</h1>
<div class="form-input mb-2">
<label for="name" class="sr-only">Имя</label>
<input type="text" id="name" name="name" placeholder="Введите ваше имя" style="height: 50px; padding: 10px 20px; box-sizing: border-box; border: 1px solid #e2e2e2; width: 100%;">
</div>
<div class="form-input mb-2">
<label for="email" class="sr-only">Email</label>
<input type="email" id="email" name="email" placeholder="Введите ваш email" style="height: 50px; padding: 10px 20px; box-sizing: border-box; border: 1px solid #e2e2e2; width: 100%;">
</div>
<div class="form-input mb-2">
<label for="message" class="sr-only">Сообщение</label>
<textarea id="message" name="message" placeholder="Введите ваше сообщение" style="height: 200px; padding: 10px 20px; box-sizing: border-box; border: 1px solid #e2e2e2; width: 100%; resize: none;"></textarea>
</div>
<div class="form-input small mb-1">
<input type="checkbox" id="terms" name="terms">
<label for="terms">Я принимаю условия сервиса</label>
</div>
<button type="submit">Отправить</button>
</form>
</body>
</html>

.form-input * {
    display: block;
    width: 100%;
}

.form-input input[type="text"],
.form-input input[type="email"],
.form-input textarea {
    height: 50px;
    padding: 10px 20px;
    box-sizing: border-box;
    border: 1px solid #e2e2e2;
}

.form-input textarea {
    height: 200px;
    resize: none;
}

.mb-1 {
    margin-bottom: 1rem;
}

.mb-2 {
    margin-bottom: 2rem;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.small {
    font-size: 0.8rem;
}

Последние вопросы: