Программирование с нуля с чего начать? Web разработка Урок 12 Labels

Автор Nadezhda Belousova
Программирование с нуля   с чего начать? Web разработка  Урок 12  Labels

в этом видео я вам расскажу еще об одном элементе который используется с элементами Input — это элемент Label, что с английского переводится метка элементы лейбл используется для улучшения доступа к вашему сайту пользователей с ограниченными возможностями такими как плохо видящий или незрячий пользователя или пользователи с нарушениями на данный момент наша страничка хорошо доступно для обычного пользователя.

Если же человек не видит то он использует специальную программу которая называется скринридер и. Она для него произносит название полей который он должен вести какую-то информацию и для того чтобы скринридер прочитал — это поле нужна метка лейбл. Давай я покажу вам как её нужно использовать элемент Label пишется вот таким образом и далее существуют два способа первый способ мы можем просто взять.

Вот этот весь наш элемент с названием Test name is самим полем ввода Input и переместить его.

ВТБ Давайте сохраним файл обновим страницу и сейчас внешний вид страницы не изменился, но скринридер сможет прочитать для плохо видящего или незрячего, что — это поле name которой он должен ввести свое имя, а пользователь с ограниченными моторными функциями сможет начать вот нажав необязательно на сама поле ввода как властные которая у нас не помещена у нас так лейбл нам нужно начать ввод поместить курсор именно полисому и начинать вводить информацию. Если мы будем нажимать рядом где-то на самом названии на самом тексте Last то ничего не происходит если же мы нажмем наперсные то мы можем уже на читать. Вот — это облегчает жизнь людям с ограниченными моторными функциями поэтому желательно помещать все элементы лейбл. Давайте то проделаем я скопирую этот элемент посчитаю сколько у нас тут инпутов 1 234567 инпутов различных и давайте я добавлю четыре пять шесть семь. И теперь я поставляю все инпуты лейбл я хочу вам показать как каждый input меняется если его поместить в лейбл чтобы. Вы — это видели. Как меняется точнее его поведение. Давайте удалим пустое пространство сохраняем файл обновим страницу и теперь если мы нажимаем рядом на тексте на название на самих то вы видите. Как меняется мы можем сразу же начнешь Input и сразу реагирует на нажатие не только в самом инпуте, но и рядом в поле лейбл. Это точно также мы можем. Отправить данные нажав на текст рядом и второй способ немного отличается во втором способе лейбл лейбл элемент помещается только сам текст сама метка, а Input Element. Может помещаться в другом месте то есть мы можем его отсюда убрать и поместить ниже например да то есть они расположены отдельно теперь. Давайте сохраним файл обновим страницу и. Давайте попробуем сейчас нажать на текст, но как вы видите не срабатывает не переводит курсор как выйти. Хантах не помещается в поле самым под элементом то есть теперь у нас лейбл лейбл нас находится текст определённой, а Input у нас находится отдельно и чтобы связать лейбл с инпутом нужно во-первых в инпуте поместить атрибут идентификатор назвать его как-то можем можем назвать его как угодно например. Давайте назовем его First name выебал которая связана с этим ему там указан атрибут for для и указываем этот it First name то есть мы поэтому связываем лейбл с нашим Input элементом сохраним обновим страницу и теперь как увидеть и всё срабатывает.

0 комментариев
0

Читайте также