HTML Input Label

Введение

HTML-тег <label> используется для добавления подписи или текста подписи к любому HTML-элементу на веб-странице. В этом практическом занятии мы узнаем, как использовать тег <label> в HTML.

Примечание: Вы можете практиковать программирование в index.html и изучить Как писать HTML в Visual Studio Code. Нажмите кнопку "Запустить в браузере" в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем можно обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Добавление подписи к элементу ввода

1. Откройте файл index.html в предпочитаемом текстовом редакторе.
2. Добавьте следующий код, чтобы создать элемент ввода с подписью:

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

3. Атрибут for элемента label должен совпадать с атрибутом id элемента ввода, с которым он связан.

Использование элемента label для создания кликабельной области

1. Откройте файл index.html в предпочитаемом текстовом редакторе.
2. Добавьте следующий код, чтобы создать кликабельную область вокруг элемента ввода:

<label>
  <input type="checkbox" />
  Click here to select
</label>

3. Теперь при нажатии на текст "Click here to select" будет选中аться checkbox.

Связь подписи с элементом формы

1. Откройте файл index.html в предпочитаемом текстовом редакторе.
2. Добавьте следующий код, чтобы создать элемент формы с подписью:

<form action="/" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" />
  <input type="submit" value="Submit" />
</form>

3. Атрибут for элемента label должен совпадать с атрибутом id элемента формы, с которым он связан.

Стилизация подписи

1. Откройте файл index.html в предпочитаемом текстовом редакторе.
2. Добавьте следующий код, чтобы создать элемент подписи с CSS-классом:

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

3. Добавьте следующий CSS в свой файл стилей, чтобы стилизовать подпись:

.large-label {
  font-size: 24px;
  font-weight: bold;
}

Использование элемента label для улучшения доступности

1. Откройте файл index.html в предпочитаемом текстовом редакторе.
2. Добавьте следующий код, чтобы создать элемент ввода с подписью для доступности с использованием экранного ридера:

<label for="name">Name:</label>
<input type="text" id="name" name="name" aria-label="Enter your name" />

3. Атрибут aria-label предоставляет текстовую подпись для элемента ввода, которая доступна для экранных ридеров.

Резюме

В этом практическом занятии мы узнали, как использовать HTML-тег <label> для добавления подзаголовков или текста подписи к HTML-элементам на веб-странице. Тег <label> полезен для улучшения доступности и увеличения кликабельной области элемента. Мы также узнали, как связывать подписи с элементами форм и стилизовать подписи с использованием CSS.