<div class="wrapper">
<form action="" class="form">
<input type="text" name="login" class="form__input" placeholder="Логин">
<input type="password" name="password" class="form__input" placeholder="Пароль">
<button class="button">Отправить</button>
</form>
<a href="#" class="link" data-type="register">Регистрация</a>
</div>
* {
box-sizing: border-box;
}
body {
background: #0a0a0a;
}
.wrapper {
max-width: 450px;
width: 100%;
margin: 20px auto;
background: #fff;
padding: 20px;
border-radius: 8px;
}
.form {
display: flex;
flex-direction: column;
align-items: center;
&__input {
width: 100%;
margin-bottom: 8px;
}
}
View Compiled
const form = document.querySelector('.form')
const link = document.querySelector('.link')
const loginForm =
`<input type="text" name="login" class="form__input" placeholder="Логин">
<input type="password" name="password" class="form__input" placeholder="Пароль">
<button class="button">Отправить</button>`
const registerForm =
`<input type="text" name="email" class="form__input" placeholder="Email">
<input type="text" name="login" class="form__input" placeholder="Логин">
<input type="password" name="password" class="form__input" placeholder="Пароль">
<input type="password" name="repeatPassword" class="form__input" placeholder="Повторите пароль">
<button class="button">Отправить</button>`
link.addEventListener('click', e => {
e.preventDefault()
if(e.target.dataset.type === 'register') {
form.innerHTML = registerForm
e.target.textContent = 'Войти'
e.target.dataset.type = 'login'
} else {
form.innerHTML = loginForm
e.target.textContent = 'Регистрация'
e.target.dataset.type = 'register'
}
})
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.