Для реализации перехода между блоками <div>
через кнопки <button>
в HTML вы можете использовать следующий подход.
Сначала, создайте два <div>
блока с разным содержимым, которые будут отображать контент для регистрации и входа:
<div id="registerForm" style="display: block;"> <!-- Разместите здесь содержимое формы для регистрации --> <h2>Форма регистрации</h2> <form> <!-- Поля для ввода информации при регистрации --> </form> <button onclick="toggleForms()">Login here !</button> </div> <div id="loginForm" style="display: none;"> <!-- Разместите здесь содержимое формы для входа --> <h2>Форма входа</h2> <form> <!-- Поля для ввода информации при входе --> </form> <button onclick="toggleForms()">Register here !</button> </div>
Затем, используйте скрипт JavaScript для переключения видимости блоков при нажатии на кнопки:
<script> function toggleForms() { var registerForm = document.getElementById('registerForm'); var loginForm = document.getElementById('loginForm'); if (registerForm.style.display === 'block') { registerForm.style.display = 'none'; loginForm.style.display = 'block'; } else { registerForm.style.display = 'block'; loginForm.style.display = 'none'; } } </script>
Теперь, при нажатии на кнопку "Register here !", форма для регистрации будет скрыта, а форма для входа будет отображена, и наоборот.
Этот пример демонстрирует базовую реализацию переключения между блоками с помощью кнопок в HTML и JavaScript. В зависимости от ваших требований, вы можете дальше настраивать оформление и функциональность форм под свои нужды.