Задать вопрос
@vasya2288
html

Не работает input type="text". что делать?

Почему у меня не работает input type="text" он просто не нажимается.
html
<html>
<head>
    <title>NovaNext</title>
    <link rel="icon" type="image/png" href="./ico.png">
    <link href="style.css" rel="stylesheet">
    <style>
        body{
            background: #000;
        }
    </style>
</head>
<body>
<?php include "./header.php"?>
<div class="buy">
    <img src="power_.png">
    <p class="buy-zagalovok">Power’ka</p>
    <p class="buy-description">Привилегия "Поверка" даёт следующие преимущества
        <br>-Префикс который есть только у владельцев привилегии "Поверка"
        <br>-Роль в Discord сервере<br>(Длительность привилегии 1 сезон)</p>
    <form id="buyform" action="buy_.php">
        <p class="buy-text">Ваш ник на сервере</p>
        <input name="Nickname" class="buy-input" type="text"><br><br>
        <p class="buy-text">Ваша электронная почта</p>
        <input name="email" class="buy-input" type="text">
        <input type="submit" class="buy-button" value="Купить за 70 Руб.">
    </form>
</div>
</body>
</html>


css

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@600&display=swap');
.header-div{
    margin: -10px;
    height: 82px;
    flex-shrink: 0;
    border-radius: 0px 0px 60px 60px;
    background: linear-gradient(136deg, #43B6FE 0%, #9F48FF 100%);
}
.header-text{
    height: 82px;
    flex-shrink: 0;
    border-radius: 0px 0px 60px 60px;
    background: linear-gradient(136deg, #43B6FE 0%, #9F48FF 100%);

}
.header-line{
    margin: 0px 24px;
}
a{
    text-decoration: none;
}
.heading{
    display: flex;
    width: 561px;
    height: 70px;
    flex-direction: column;
    flex-shrink: 0;
    color: #FFF;
    font-size: 26px;
    font-family: 'Noto Sans', sans-serif;
    font-weight: 700;
    margin: 98px 64px;
}
.description{
    display: flex;
    width: 409px;
    height: 254px;
    flex-direction: column;
    flex-shrink: 0;
    color: #8A8A8A;
    font-size: 20px;
    font-family: 'Noto Sans', sans-serif;
    font-weight: 300;
    margin: -120px 64px;
}
.Logo{
    width: 629px;
    height: 267px;
    flex-shrink: 0;
    #background: url(http://nova-next.ru/logo.png), lightgray 50% / cover no-repeat;
    margin: -160px 625px;
}
.Line-text{
    display: flex;
    width: 174px;
    height: 55px;
    flex-direction: column;
    flex-shrink: 0;
    color: #FFF;
    font-size: 32px;
    font-family: 'Noto Sans', sans-serif;
    font-weight: 700;
    text-decoration: none;
    display: inline;
    margin: 0px 10px;
}
.donate{
    width: 281px;
    height: 337px;
    flex-shrink: 0;
    border-radius: 31px;
    background: rgba(255, 255, 255, 0.06);
    margin: 0px 48px;
}
.donate img {
    width: 267px;
    height: 267px;
    flex-shrink: 0;
    border-radius: 31px;
    margin: 7px 7px;
}
.donate p{
    display: flex;
    width: 267px;
    height: 42px;
    flex-direction: column;
    flex-shrink: 0;
    color: #000;
    text-align: center;
    font-size: 26px;
    font-family: 'Noto Sans', sans-serif;
    font-weight: 700;
    margin: -5px;
}
.srv-info{
    display: flex;
    width: 255px;
    height: 59px;
    flex-direction: column;
    flex-shrink: 0;
    color: #FFF;
    font-size: 20px;
    font-family: 'Noto Sans', sans-serif;
}
.optional-mod{
    display: flex;
    width: 454px;
    height: 49px;
    flex-direction: column;
    flex-shrink: 0;
    text-align: center;
    font-size: 32px;
    font-family: 'Noto Sans', sans-serif;
    font-weight: 900;
    background-image: linear-gradient(90deg, rgba(69,178,254,1) 0%, rgba(159,72,255,1) 100%);
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    margin-left: auto;
    margin-right: auto;
}
.mod-div{
    width: 607px;
    height: 80px;
    flex-shrink: 0;
    border-radius: 29px;
    background: #FFF;
    margin-left: auto;
    margin-right: auto;
}
.mod-div p{
    display: flex;
    width: 555px;
    height: 55px;
    flex-direction: column;
    justify-content: center;
    flex-shrink: 0;
    color: #000;
    text-align: center;
    font-size: 32px;
    font-family: 'Noto Sans', sans-serif;
    font-weight: 900;
    margin: 11px 25px;
}

.donate-text{
    display: flex;
    width: 454px;
    height: 49px;
    flex-direction: column;
    flex-shrink: 0;
    text-align: center;
    font-size: 32px;
    font-family: 'Noto Sans', sans-serif;
    font-weight: 900;
    background-image: linear-gradient(90deg, rgba(254,191,69,1) 0%, rgba(252,255,72,1) 100%);
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    margin-left: auto;
    margin-right: auto;
}
.buy{
    margin-left: auto;
    margin-right: auto;
    width: 678px;
    height: 597px;
    flex-shrink: 0;
    border-radius: 39px;
    background: rgba(255, 255, 255, 0.12);
    margin-top: 83px;
}
.buy img{
    width: 221px;
    height: 225px;
    flex-shrink: 0;
    border-radius: 39px;
    margin: 15px 15px;
    display: inline;
}
.buy-zagalovok{
    display: flex;
    width: 353px;
    height: 54px;
    flex-direction: column;
    flex-shrink: 0;
    color: #FFF;
    font-size: 32px;
    font-family: 'Noto Sans', sans-serif;
    font-weight: 700;
    margin: -215px 270px;
}
.buy-description{
    display: flex;
    width: 353px;
    height: 169px;
    flex-direction: column;
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.12);
    font-size: 16px;
    font-family: 'Noto Sans', sans-serif;
    font-weight: 700;
    margin: 210px 270px;
}
.buy-text{
    display: flex;
    width: 380px;
    height: 48px;
    flex-direction: column;
    justify-content: flex-end;
    flex-shrink: 0;
    color: #FFF;
    font-size: 24px;
    font-family: 'Noto Sans', sans-serif;
    font-weight: 700;
    margin: -200px 10px;
}
.buy-input{
    width: 605px;
    height: 53px;
    border-radius: 57px;
    background: #D9D9D9;
    font-family: 'Noto Sans', sans-serif;
    font-size: 25px;
    outline: 0;
    outline-offset: 0;
    margin-left: auto;
    margin-right: auto;
    margin:200px 30px;
}
.buy-button{
    width: 646px;
    height: 53px;
    flex-shrink: 0;
    border-radius: 21px;
    background: linear-gradient(90deg, rgba(254,191,69,1) 0%, rgba(252,255,72,1) 100%);
    color: #FFF;
    text-align: center;
    font-size: 24px;
    font-family: 'Noto Sans', sans-serif;
    font-weight: 700;
    outline: none;
    margin: -170px 15px;
}
#buyform{
    margin: 0px 0px;
}
  • Вопрос задан
  • 280 просмотров
3 комментария
Подписаться 1 Простой 3 комментария
Решения вопроса 1
alexey-m-ukolov
@alexey-m-ukolov Куратор тега HTML
Верхний инпут перекрывает margin нижнего (email). Просто так это не исправить, тут всё надо переделывать на нормальную вёрстку.
Ответ написан
2 комментария
2 комментария
Пригласить эксперта
Ответы на вопрос 1
iamlorddop
@iamlorddop
Проблема была в том, что у вас margin другого инпута перекрывал инпут, который по этой причине стал не доступен.

Но! Искренне не понимаю зачем использовать для тега <p></p> флексы. Поизучайте верстку побольше и флексы посмотрите видео на ютубе. И оочень много margin везде где можно и не надо вообще. Ну и если будете задавать вопрос в следующий раз кидайте пожалуйста ссылку с кодом из какой-нибудь песочницы.

Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
CRM Bitrix24 разработчик
World Vision Clinic • Москва
от 170 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Node.js (TensorFlow) приложение для извлечения именованных сущностей
23 дек. 2024, в 17:12
30000 руб./за проект
Бот ТГ на python с сервисом по поиску упоминаний в Инст
23 дек. 2024, в 17:08
10000 руб./за проект
Web приложение на php+js
23 дек. 2024, в 16:55
25000 руб./за проект
Ещё заказы