JS формы логин и пароль

Обсуждения
1

Создать html-страницу с формой для логина пользователя и
галочкой «Запомнить меня». После заполнения формы вывести на
экран: «Привет, Имя! Я тебя запомнил/не запомнил».
Подскажите код для такого задания

2

В чем именно сложность? Есть уже какой-то код?

1 лайк
3

HTML

<div class="container">
  <div id="form">
    <div class="row">
      <input type="text" class="name" placeholder="your name" />
    </div>
    <div class="row"><input type="checkbox" id="remember" /> запомнить</div>
    <div class="row">
      <button class="btn" onclick="invisibleBlock()">login</button>
    </div>
  </div>
</div>

JS

const cont = document.querySelector(".container"),
  form = document.querySelector("#form"),
  text = document.querySelector(".name"),
  check = document.querySelector("#remember").checked;

function invisibleBlock() {
  let checked = "";
  
  check ? (checked = "запомнил") : (checked = "не запомнил");
  
  if (text !== "") {
    form.style.display = "none";
    cont.innerHTML = `
    <div class='row'>
      <h1>Привет, ${text.value}! Я тебя ${checked}</h1>
    </div>
    <button class='btn' onclick="reset()">Вернуться назад</button>
    `;
  }
}

function reset() {
  cont.innerHTML = `
  <div class="container">
  <div id="form">
        <div class="row" >
            <input type="text" class="name" placeholder="your name">
        </div>
        <div class="row">
            <input type="checkbox" id='remember'> запомнить
        </div>
        <div class="row">
            <button class="btn" onclick="invisibleBlock()">login</button>
        </div>
</div>
</div>
`;
}

codepen

1 лайк
4

Отлично. Думаю автору поможет.

С реализацией есть нюансы.

  1. Не удобно иметь дубликат разметки формы и в reset и в исходном html. Читающий не поймет что изменив разметку в одном месте нужно менять ее и в другом. Для таких случаев лучше иметь разметку в одном месте (reset, ибо эта фунция незбежно нужна в реализации) и просто вызывать ее при старте приложения.

  2. Из-за того что ссылк на узлы чекбоса запоминаются в начале программы, а потом узлы перезаписываются reset-ом, то значения “запомнить меня” не будут корректными при последующих отправках формы. Поэтому ссылку на чекбокс нужно получать в самой функции обработки события.

Вот код с правками, описанными выше: https://codepen.io/podgorniy/pen/OJvvwQR?editors=1111

1 лайк
5

да, что-то я не подумал о перезаписывании checkobox’a))
код и правду слаще стал)))

6

Круто дякую за посилання на codeopen 😎

1 лайк
7

Я смотрю старые темы неожиданно оживают )))

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title></title>
	<style>
	h1{
	text-align: center;
	}
	h1 span{
	color: crimson;
	}
	label, button{
	cursor: pointer;
	font-weight: bold;
	}
	label:hover{
	color: blue;
	}
	button:hover{
	color: crimson;
	}
	input{
	margin: 3px 10px 3px 3px;
	}
	</style>
  </head>
  <body>
  <form>
  <label><input value="" />Логин</label>
  <br />
  <label><input type="checkbox" />Запомнить</label>
  <br />
  <button>Готово</button>
  </form>
  	<script>
	const btn = document.querySelector('button'),
	      login = document.querySelector('input'),
		  chbx = document.querySelector('[type="checkbox"]');
		  
	login.addEventListener('change', function(){this.value = this.value.trim();});
	
	btn.addEventListener('click', (e) => {
	e.preventDefault();
	const val = login.value;
	if( !val.length ){login.focus();}
	else{
	document.querySelector('h1')?.remove();
	document.body.insertAdjacentHTML('afterbegin', `<h1>Привет, <span>${val}</span>! Я тебя ${!chbx.checked ? 'не' : ''} запомнил</h1>` );
	}
	});
	</script>
  </body>
</html>