Атрибут name тега <form> — ім'я форми для скриптів

HTML

<form name="form1">
    <p><label>Ім'я: <input type="text" name="nick" value="Лесь"></label></p>
    <p><button type="button" id="show">Прочитати через document.forms</button></p>
</form>

JS

document.getElementById('show').addEventListener('click', () => {
    console.log("ім'я: " + document.forms['form1'].nick.value);
});

HTML

<form name="poshuk" id="f-poshuk" class="ok">
  <p>Звичайна форма: name і id збігаються</p>
  <input name="q" value="запит">
</form>

<form name="dup" id="f-dup-1" class="dup">
  <p>Перша з двох однойменних — саме її поверне document.forms["dup"]</p>
  <input name="a" value="1">
</form>

<form name="dup" id="f-dup-2" class="dup">
  <p>Друга з двох однойменних — зі скрипта до неї вже не дістатись</p>
  <input name="b" value="2">
</form>

<form id="f-bez-imeni" class="ok">
  <p>Без name узагалі — document.forms["f-bez-imeni"] знаходить її за id</p>
  <input name="c" value="3">
</form>

<form name="pastka" id="f-pastka" class="pastka">
  <p>Пастка: поле з іменем name затуляє собою form.name</p>
  <input name="name" value="я перекриваю імʼя форми">
</form>

CSS

form {
    max-width: 520px;
    margin-bottom: 14px;
    padding: 8px 12px;
    border-radius: 6px;
    border: 2px solid #b9c6d8;
    background: #f6f9ff;
}

form p {
    margin: 0 0 6px;
    font-weight: 600;
}

form::before {
    display: block;
    margin-bottom: 6px;
    font: 13px/1.6 ui-monospace, monospace;
    color: #5a6472;
}

form[name]::before {
    content: "name=" attr(name) "   id=" attr(id);
}

form:not([name])::before {
    content: "без name   id=" attr(id);
}

.ok {
    border-color: #3a9a4f;
    background: #f3fbf4;
}

.dup {
    border-color: #d64545;
    background: #fff4f4;
}

.pastka {
    border-color: #e0a800;
    background: #fff8e6;
}

input {
    padding: 5px 8px;
    font: inherit;
    min-width: 260px;
}

<p>Приклад форми для входу з використанням атрибуту 'name'</p>
<hr>
<form name="contactForm1">
  <label>Ім'я:</label><br>
  <input type="text" name="login"><br>
  
  <label>Email:</label><br>
  <input type="email" name=""><br>
  
  <label>Ваш сайт:</label><br>
  <input type="url"><br>
  
  <label>Ваше повідомлення:</label><br>
  <textarea></textarea>
  <br>
  
  <input type="submit" value="Увійти" >
</form>