Не работает 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> |
<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; } |
@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; }
Дополнительно:
где посмотреть?
Верхний инпут перекрывает margin нижнего (email). Просто так это не исправить, тут всё надо переделывать на нормальную вёрстку.
- так email у меня работает
- Я знаю, что работает. Он ломает верхний инпут. Нажмите F12 и посмотрите как они рендерятся у вас.
Ответы:
Проблема была в том, что у вас margin другого инпута перекрывал инпут, который по этой причине стал не доступен.
Но! Искренне не понимаю зачем использовать для тега <p></p> флексы. Поизучайте верстку побольше и флексы посмотрите видео на ютубе. И оочень много margin везде где можно и не надо вообще. Ну и если будете задавать вопрос в следующий раз кидайте пожалуйста ссылку с кодом из какой-нибудь песочницы.
snippet
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Если у вас возникла проблема с тем, что элемент input type="text" не работает, то есть несколько шагов, которые вы можете предпринять, чтобы попытаться решить эту проблему.
1. Убедитесь, что вы правильно указали атрибут type="text" в вашем элементе input. Неправильно указанный тип может привести к некорректному отображению или работе элемента.
2. Проверьте, не содержит ли ваше поле ввода атрибут readonly или disabled. Эти атрибуты могут делать поле недоступным для ввода.
3. Проверьте CSS стили вашего элемента input. Возможно, есть какие-то стили, которые могут скрывать или изменять отображение поля ввода.
4. Убедитесь, что у вас нет конфликтов с другими скриптами на странице, которые могут влиять на работу элемента input type="text".
5. Попробуйте удалить временно все другие элементы и скрипты на странице, чтобы убедиться, что проблема не связана с другими частями вашего сайта.
Если после всех этих шагов проблема все еще не решена, то возможно, вам стоит обратиться за помощью к разработчику или специалисту по веб-разработке, чтобы более детально изучить проблему и найти ее источник.