Роль атрибута for в данном примере — html вёрстка form

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд
Загрузка...

Вопрос:


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

<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? Для чего это вообще делать? Что от этого меняется?

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

Автор вопроса: JustLearn

День добрый. Подскажите книгу, в которой нашли этот пример. Возможно, он приведен как неверный. Можно начать с того, что дописав немного кода и проверив вашу форму, окажется что она не проходит тест на валидность от 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»
Транслитерация: написание русских слов английскими буквами допустима, но это считается очень плохой практикой.

Источник

Вам также может быть интересно:

Drag and Drop UWP — c# xaml mvvm
Вопрос: Нужно иметь возможность добавлять изображения в приложение путем перетаскивания из файловой системы У Grid включил AllowDrop. Но как добавить перетаскиваемые изображения в коллекцию? Т.к. те ...
Растягивание Высоты , Резина — html css html5
Вопрос: Здравствуйте! Реализовал резиновый дизайн. Растягивается ширина, но длина по % не растягивается. Возможно ли это реализовать? Или так и задумано, растягивание только на ширину ...
Jquery position().left Как быть на мобильниках? — javascript jquery css
Вопрос: На мобильных устройствах, если зумишь экран, position всегда разный. $('g').position().left Как сделать так, чтобы он не менял свои значения? Автор вопроса: ...
Jquery position().left Как быть на мобильниках? — javascript jquery css
Вопрос: На мобильных устройствах, если зумишь экран, position всегда разный. $('g').position().left Как сделать так, чтобы он не менял свои значения? Автор вопроса: ...
requestAnimation и очередность отрисовки — javascript canvas
Вопрос: Здравствуйте! Реализовал 2D игру и в Edge работает все плавно и круто, но в Firefox'e подвисает, сказали, что нужно сделать, чтобы раз-два момент и все ...
Контекстное/всплывающее меню в Android — java android popup
Вопрос: Есть ли техническая возможность сделать приложение, добавляющее свое контекстное или всплывающее меню в любом месте системы? Хочу, чтобы при выделении любого текста появлялась дополнительная кнопка ...
Контекстное/всплывающее меню в Android — java android popup
Вопрос: Есть ли техническая возможность сделать приложение, добавляющее свое контекстное или всплывающее меню в любом месте системы? Хочу, чтобы при выделении любого текста появлялась дополнительная кнопка ...
Завершить службы циклом — c# windows-service
Вопрос: Можно ли остановить службы циклом? У меня есть список служб, занёс их в List List<string> name = new List<string> { "AdobeARMservice", "RemoteRegistry", "TermService", "Messenger", "SSDPSRV", ...
Завершить службы циклом — c# windows-service
Вопрос: Можно ли остановить службы циклом? У меня есть список служб, занёс их в List List<string> name = new List<string> { "AdobeARMservice", "RemoteRegistry", "TermService", "Messenger", "SSDPSRV", ...
RecyclerView — разная разметка — android recyclerview
Вопрос: Смотрел, я смотрел в сторону RecyclerView и наконец решил кинуть ListView и на тебе! В "плохом прошлом" мой ListView использовался для двух разметок. Сейчас я ...
RecyclerView — разная разметка — android recyclerview
Вопрос: Смотрел, я смотрел в сторону RecyclerView и наконец решил кинуть ListView и на тебе! В "плохом прошлом" мой ListView использовался для двух разметок. Сейчас я ...
Как правильно передать массив аргументом для пользовательской функции — php
Вопрос: Если не брать в функцию все это, тогда результат работает. А если вот так в функции все выполнять, тогда PHP ругается: «Invalid ...
Как правильно передать массив аргументом для пользовательской функции — php
Вопрос: Если не брать в функцию все это, тогда результат работает. А если вот так в функции все выполнять, тогда PHP ругается: «Invalid ...
ViewPager внутри ViewPager — такие матрешки работают? — android viewpager
Вопрос: Доброго времени суток. Назрела новая задача. Есть каталог мастеров. При выборе конкретного мастера открывается его страница (активити с ViewPager), и теперь мастеров можно перелистывать свайпом. ...
Почему id всегда 1 Yii2 — yii авторизация
Вопрос: Использую все как по документации. Для получения информации о пользователе использую $identity = $model->findOne(]); И каким бы не был email, id пользователя всегда ...

Оставьте ответ

Ваш e-mail не будет опубликован. Обязательные поля помечены *