Роль атрибута for в данном примере

149
03 июля 2019, 05:00

В моей книге был приведён следующий пример:

<form action="" method="post"> 
 
  <label for="username">Имя пользователя:<br /> 
        <input type="text" name="imyapolz" required="required"/> 
        </label> <br /> 
  <label for="password">Пароль:<br /> 
        <input type="password" name="parol" required="required"/> 
        </label><br /> 
  <input type="submit" value="Отправить" /> 
</form>

Не понимаю зачем здесь атрибут for. Ранее в книге был приведён пример с переключателями, где роль for была понятна: благодаря for, чтобы выбрать один из вариантов можно кликать не только на кружочек, но и на текст у кружочка. Пример из книги с переключателями:

<html>
<head>
  <title>Формы 13</title>
</head>
<body>
  Пол:
  <input type="radio" id="male" name="pol" value="male" />
  <label for="male">Мужской</label>
  <input type="radio" id="female" name="pol" value="female" />
  <label for="female">Женский</label>
</body>
</html>

К тому же, в примере с переключателями понятно, что присваивается атрибуту for.

Ему присваивается id, который был указан в input.

А в первом примере с вводом имени пользователя и пароля непонятно что вообще присваивается for. Откуда взялось "username" и "password"? ]

Просто так в лишний раз писать любое значение в for, стоящее в input? Для чего это вообще делать? Что от этого меняется?

Я постарался сформулировать вопрос как можно понятнее, но если что-то неясно готов уточнить :)

Answer 1

День добрый. Подскажите книгу, в которой нашли этот пример. Возможно, он приведен как неверный. Можно начать с того, что дописав немного кода и проверив вашу форму, окажется что она не проходит тест на валидность от w3c. Полный пример тут: https://jsfiddle.net/i_pix_by/7zeLqx0a/2/

<body>
    <form action="send.php" method="post">
        <label for="username">Имя пользователя:<br />
            <input type="text" name="imyapolz" required="required" />
        </label> <br />
        <label for="password">Пароль:<br />
            <input type="password" name="parol" required="required" />
        </label><br />
        <input type="submit" value="Отправить" />
    </form>
</body>

Проверить на валидность можно здесь: https://validator.w3.org/nu/#textarea

Однако! Допустимо вкладывать инпуты в лэйблы:

<form action="send.php" method="post">
    <label for="text1">
        text1
        <input type="text" value="text1" id="text1">
    </label>
    <br>
    <label for="text2">
        text2
        <input type="text" value="text2" id="text2">
    </label>
</form>

Данный пример пройдет валидацию.

К слову...

<input type="text" name="imyapolz" required="required"/>
<input type="password" name="parol" required="required"/>

name="imyapolz" и name="parol" Транслитерация: написание русских слов английскими буквами допустима, но это считается очень плохой практикой.

READ ALSO
Ошибка в FireFox
HTML

Ошибка в FireFox

данный кусок кода выдает ошибку в firefox, хотелось бы понять в чем проблема ошибка ReferenceError: event is not defined Весь код находится тут

 139
Не работает плавное перемещение к якорю на Jquery
jQuery

Не работает плавное перемещение к якорю на Jquery

К примеру, у меня есть ссылка:

 153
скрыть checked элементы по нажатию на кнопку в jquery
jQuery

скрыть checked элементы по нажатию на кнопку в jquery

Есть todoлист который добавляет элементы с чекбоксамиНужно написать кнопку при нажатии которой checked задачи скрываются

 176
Отправка почты через SMTP
c#

Отправка почты через SMTP

Использую следующий фрагмент кода для отправки сообщения, почему при отправке сообщения программа зависает? Что я сделал неверно?

 137