Я понимаю что далее это текст внутри кнопки который переносит на следующую страницу, как мне сделать так чтоб он не делал этого без выполнения условий? Можете сами его вставить и проверить. (из локальных файлов только фоновое изображение, все будет работать) Подскажите пожалуйста.
вот код:
<!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;
}