Для чего нужны эти поля формы HTML?

Question

Я видел некоторый код, HTML-код формы, который выглядит так:

<form name="form1" method="post" action="action.php">
    <label for="name"> Name: <input type="text" name="name">
    <label for="email">Email: <input type="text" name="email">
</form>

Для чего нужна форма "имя"? (-> form1)

Для чего нужны метки? (я никогда этим не пользуюсь, поэтому могу ошибиться при вводе кода)

Answer 1

Метки - это фрагменты текста рядом с полями ввода - они ничем не отличаются от обычного текста, но:

• нажатие на них ставит фокус на поле
• программы чтения с экрана будут считывать их как описание соответствующего поля.

Они также полезны для CSS - используя метки, вы можете легко стилизовать метки полей независимо от других элементов страницы.

Атрибут form name облегчает обращение к форме из JavaScript (хотя в наши дни вы будете использовать id для этого).

Answer 2

Метка - это тег, который связывает определенный текст с элементом формы. Это рекомендуемый способ показать, для чего предназначено каждое поле ввода - программы чтения с экрана и другое программное обеспечение для обеспечения доступности смогут затем использовать этот элемент, чтобы сообщить пользователю, для чего предназначено поле ввода. Он может быть стилизован так же, как и любой другой элемент на странице, и даже не должен находиться рядом с вводом - если имена совпадают, он будет работать. Обратите внимание, что правильный формат для этого должен быть

<label for="name">Name:</label><input type="text" name="name" />
<label for="email">Email:</label><input type="text" name="email" />

Для получения дополнительной информации об элементе метки посетите http://www.w3.org/TR/html401/interact/forms.html#h-17.9 - на странице много информации обо всем, что связано с HTML-формами.

Атрибут name элемента формы может быть полезен для доступа к различным формам из javascript и css, но включать его необязательно. Согласно http://www.w3.org/TR/html401/interact/forms.html#adef-name-FORM он включен только для обратной совместимости - рекомендуется вместо него (или также) использовать атрибут id .

Answer 3

Имя формы предназначено для уникальной идентификации этой формы, чтобы вы могли ссылаться на нее, например, при написании сценариев в JavaScript. Вы также можете использовать атрибут "id" для этого, это не имеет значения.

Элемент метки предназначен для удобства использования и не отображает ничем иначе, чем обычный текст, но если вы заполните атрибут «for» атрибутом «id» соответствующего ввода, то они будут связаны вместе, так что можно щелкнуть текст метки, и он сосредоточится на соответствующем вводе.

Стоит отметить, что код метки, который вы использовали в своем вопросе, неверен, так как вам нужно закрыть тег метки после текста, который вы хотите использовать для метки.

<label for="name">Name:</label><input id="name" type="text" name="name" />

Answer 4

Метка семантически связывает строку «Имя:» с соответствующим полем ввода, заданным атрибутом for. Подробнее смотрите в w3c html документации .

Кроме того, когда пользователь нажимает на метку, фокусируется соответствующее поле ввода - это важно с точки зрения удобства использования формы.