Задать вопрос
aristosarseno
@aristosarseno
studying html css.

Почему кнопка ДАЛЕЕ игнорирует REQUIRED?

Я понимаю что далее это текст внутри кнопки который переносит на следующую страницу, как мне сделать так чтоб он не делал этого без выполнения условий? Можете сами его вставить и проверить. (из локальных файлов только фоновое изображение, все будет работать) Подскажите пожалуйста.

вот код:
<!DOCTYPE html>
<html>
    <head>
        <title>Дзеранов Артур 211-351</title>
        <meta charset="UTF-8">

        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Chakra+Petch&display=swap" rel="stylesheet">

        <link rel="stylesheet" href="Register.css">
    </head>
    <body>

        <form>
            <h1 title="Форма регестрации">РЕГИСТРАЦИЯ</h1>

            <div class="group" >
                <label for="User_nameID"></label>
                <input type="text" name="User name" id="User_nameID" placeholder="Введите имя пользователя" required>
            </div>  

            <div class="group">
                <label for="passwordID"></label>
                <input type="password"name="password" id="passwordID" placeholder="Введите пароль" required>
            </div>  
            
            <div class="group">
                <center><button><a href="reverse.html" >Далее</a></button></center>
            </div>
        </form>
    
    </body>
</html>

body{
font-family: 'Chakra Petch', sans-serif;
background-color: rgb(0, 0, 0);
margin: 0px;
background-image: url(images/backgroundIMG.png);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}

h1{
cursor: help;
margin: 0px;
padding-bottom: 5px;
border-bottom: 3px solid rgb(49, 194, 16);
}

form{
margin: 30px auto;
background: black;
height: 400 px;
width: 450px;
padding: 20px;
box-shadow: 2px 2px 15px rgb(49, 194, 16);
border-radius: 20px;
color: white;
}

.group{
margin: 10px;
padding: 5px;
}

label{
padding-left: 10px;
text-transform: uppercase;
}

.txt_correct{
color: white;
}

input{
margin-top: 10px;
height: 40px;
width: 400px;
border-radius: 20px/20px;
border: none;
padding-left: 15px;
font-size: 18px;
box-shadow: 2px 2px 15px rgb(49, 194, 16);
}

input:focus{
border: 2px solid rgb(49, 194, 16);
transform: translateX(15px);
width: 385px;
}

button{
cursor: pointer;
padding: 10px 30px;
height: 50px;
color:white;
background-color: rgb(49, 194, 16);
border: none;
box-shadow: 2px 2px 15px rgb(49, 194, 16);
border-radius: 20px;
}

button:hover{
opacity: .80;
font-weight: bold;
transform: scale(1.1);
}

button a{
font-family: 'Chakra Petch', sans-serif;
font-size: 20px;
color: white;
vertical-align: middle;
text-decoration: none;
font-weight: bold;
}
  • Вопрос задан
  • 114 просмотров
Подписаться 1 Простой Комментировать
Решения вопроса 2
delphinpro
@delphinpro Куратор тега CSS
frontend developer
Потому что происходит переход по ссылке, а не отправка формы.
Кто вас надоумил внутрь кнопки положить ссылку? Вам бы основы html изучить сначала...
<form action="reverse.php">
  <div class="group">
    <center><button>Далее</button></center>
  </div>
</form>
Ответ написан
Комментировать
AlexNest
@AlexNest
Работаю с Python/Django
Ну даже не знаю, потому-что внутри кнопки - ссылка?
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы