Разное

Html как сделать кнопку: Как сделать кнопку в HTML — журнал «Доктайп»

17.10.2023

Базовый HTML: Интерактивные элементы в HTML

Урок 6: Интерактивные элементы в HTML

/en/basic-html/links-and-images-in-html/content/

Добавление интерактивных элементов в HTML

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

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

Кнопки

Элемент HTML для кнопки — это именно то, что вы можете догадаться: кнопки, и они часто радикально отличаются друг от друга. Тем не менее, подавляющее большинство этих образов достигается с помощью CSS , о котором мы поговорим позже; базовый HTML обычно не сложнее того, что вы видите выше. Все эти кнопки, например, созданы из одного и того же HTML:

Текст внутри элемента кнопки — это то, что будет отображаться на кнопке, но вместо этого он может содержать элементов изображения . Например, обычный тип кнопки, которую вы видите на многих веб-сайтах (включая этот), называется кнопкой гамбургера , потому что изображение, которое она использует, напоминает гамбургер. HTML-код может выглядеть так:

 <кнопка>
  
 
 png">

В браузере она будет отображаться следующим образом:

Если добавить CSS, чтобы скрыть некоторые элементы внешнего вида кнопки по умолчанию, она может полностью отличаться от кнопок, которые вы видели до сих пор:

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

Вводы

Другой наиболее распространенный способ взаимодействия с веб-сайтами — это вводов . В какой-то момент вас, вероятно, попросили ввести имя пользователя и пароль для веб-сайта. Может быть, там был флажок

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

Каждый из этих параметров является типом ввода HTML . Например, это элементы для ввода текста (например, те, в которые вы вводите имя пользователя или пароль) и флажок ввода

:

 
<тип ввода="флажок">

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

Ввод текста

Флажок

Раскрывающийся ввод, с другой стороны, выполняется с использованием элемента select , который содержит ряд элементов option . HTML-код будет выглядеть примерно так:

   не отображается; вместо этого он действует как инструкция, сообщающая браузеру, как отображать  элементов, вложенных внутрь. Если бы вы отобразили приведенный выше HTML-код в браузере, вы бы увидели следующее: 
 Первый вариантДругой набор вариантов Здесь
 Попробуйте! 
 Попробуйте ввести каждый из предыдущих примеров кода в поле ввода ниже. Если вы установите флажок «Добавить наш CSS», вы обнаружите, что некоторые из них выглядят совершенно иначе, чем браузеры по умолчанию на нашем сайте, а другие не изменились.
 Вы можете ввести их все вместе, если хотите, но может быть легче увидеть, что происходит, если вы  введете их   по одному  :
 Как заставить их что-то делать? 
 Все эти HTML-элементы являются интерактивными без добавления к ним чего-либо — вы можете щелкнуть их, ввести в них текст, выбрать их и т. д. — но HTML сам по себе не может сделать ни одно из этих взаимодействий действительно полезным. Мы пока не будем вдаваться в подробности ни одного из этих методов, но есть два основных инструмента для работы с этими взаимодействиями.0009 HTML-формы  и  JavaScript  .
  •   HTML-формы  : Форма — это HTML-элемент, который можно использовать для хранения связанных входных данных и отправки их значений в другое место. Пока не беспокойтесь о деталях; просто имейте в виду, что форма — это один из способов отправки введенной пользователем информации — будь то имя пользователя или пароль, флажок, который они отметили, или то, что они выбрали в раскрывающемся списке — в другой файл, где есть какой-то другой код. может работать с ним.
  •   JavaScript  : язык программирования JavaScript также можно использовать для чтения значений входных данных и обработки их. JavaScript очень гибок и может выполнять самые разные действия со структурой   и  представлением  веб-страницы в режиме реального времени. Например, флажок «Добавить наш CSS» в действиях «Попробовать это» в этих уроках использует JavaScript для изменения внешнего вида HTML-кода, который вы вводите каждый раз, когда нажимаете на него.
 Сделай сам! 
 Откройте файл  index.html 
 
 вашего проекта  GCF Programming Tutorials  в текстовом редакторе и давайте добавим интерактивный элемент. Это должно быть довольно просто, потому что все, что вы собираетесь добавить, это кнопка.
  1.  Сначала найдите последний введенный вами абзац со ссылкой:
     
    Полный список актеров можно найти на сайте Basketball Dog. 
     
  2.  Чуть ниже этого абзаца введите свою первую кнопку:
      
 На данный момент эта кнопка  ничего не делает  , но в конечном итоге она позволит вам переключаться между несколькими обзорами фильмов, которые вы настроите. После добавления кнопки ваш полный код должен выглядеть так:
 
 
  <тело>
     
Обзоры киноклассики
 
     
Обзор: Баскетбольная собака (2018 г.
 ) 
    
    
4 звезды из 5
    
Режиссер Вики Флеминг рассказывает трогательную историю о мальчике по имени Пит (Трент Дагсон) и его собаке Ровере (озвучивает Бринсон Ламблбрант). Вам может показаться, что мальчик и его собака, познающие истинную ценность дружбы, звучат знакомо, но этот фильм отличает один важный момент: Ровер играет в баскетбол, и у него это чертовски хорошо получается.

    
В этом фильме есть все, о чем вы могли мечтать:

    <ул>
      
  • Баскетбол
    • 
      
  • Собака
    • 
      
  • Захватывающая саспенс
    • 
    
     
    
    
    Возможно, нет необходимости включать все 150 минут игры чемпионата Ровера в режиме реального времени, но Basketball Dog будет удерживать ваш интерес на протяжении всех 4 часов, а финал заставит любого любителя собак расплакаться. Если вы любите баскетбол или спортивных питомцев, этот фильм для вас.
    
    
    Полный список актеров можно найти на  gcfglobal.org">сайте Basketball Dog.
    
    
  

 
     Откройте проводник 
     
      или  Finder  и перейдите к проекту  GCF Programming Tutorials , затем дважды щелкните файл index.html. Ваша веб-страница должна открыться в браузере по умолчанию, и вы должны увидеть что-то вроде этого.
     Поздравляем, вам есть за что щелкнуть!
     Продолжать
 Предыдущий: Ссылки и изображения в HTML
     Далее:Блочные, встроенные и организационные элементы
     /en/basic-html/blocklevel-inline-and-organizational-elements/content/
     Пример переключения с использованием кнопки HTML | ПНГ | ВАИ 
     Пример переключения с помощью HTML-кнопки
     Код в этом примере не предназначен для производственных сред.
 Прежде чем использовать его для каких-либо целей, прочитайте это, чтобы понять, почему.
     
     Это наглядный пример одного из способов использования ARIA, соответствующего спецификации ARIA.
    •  В некоторых случаях могут быть пробелы в поддержке.
 комбинации браузера и вспомогательных технологий,
 особенно для
 мобильные/сенсорные устройства.
 Тестирование кода, основанного на этом примере, со вспомогательными технологиями необходимо, прежде чем рассматривать возможность использования в производственных системах.
      •  
    •  Проект ARIA и Assistive Technologies разрабатывает измерения поддержки вспомогательных технологий для примеров APG.
    •  Надежная доступность может быть дополнительно оптимизирована путем выбора шаблонов реализации, максимально использующих семантический HTML, и принимая во внимание предупреждение о том, что
 Нет ARIA лучше, чем Bad ARIA.
     Об этом примере 
     Этот пример иллюстрирует реализацию шаблона переключения с HTML 9. 0069, кнопка  в качестве элемента переключателя и использование элемента 
     
     SVG  для обеспечения графического отображения состояний переключателя.
 Также показано использование роли  group  для представления нескольких коммутаторов в помеченной группе.
     Аналогичные примеры включают:
    •  Пример переключателя: Переключатель на основе элемента  div , который включает и выключает параметр уведомления.
    •  Пример переключателя с использованием ввода флажка HTML: группа из 2 переключателей на основе HTML  input[type="checkbox"]  элементов, которые включают и выключают настройки специальных возможностей.
     Экологический контроль 
     Специальные возможности 
       
    •  Чтобы помочь пользователям вспомогательных технологий понять, что  Средства контроля окружающей среды  представляют собой группу из двух переключателей, переключатели заключены в группу  , помеченную заголовком, обозначающим набор переключателей.
    •  Чтобы облегчить понимание состояния коммутатора пользователями с нарушениями зрения или когнитивными способностями, рядом с графическим индикатором состояния отображается текстовый эквивалент состояния (
       
       на        или  на ).
 Селекторы атрибутов CSS обеспечивают синхронизацию отображаемой метки со значением атрибута  aria-checked . 
        ПРИМЕЧАНИЕ.  Чтобы предотвратить избыточное объявление состояния программами чтения с экрана, текстовые индикаторы состояния скрыты от вспомогательных технологий с помощью  ария-скрытая  .
    •  Интервалы, ширина обводки и заливка важны для того, чтобы графические состояния были видны и различимы для людей с нарушениями зрения, в том числе при включенных настройках высокой контрастности браузера или операционной системы:
      •  Чтобы сделать графическое представление состояния переключателя легко воспринимаемым, для контейнера состояния переключателя используется ширина штриха в два пикселя, а для заливки прямоугольников, указывающих включенное и выключенное состояния, используется сплошной цвет.
      •  Чтобы пользователи могли видеть разницу между контейнером и прямоугольниками, используемыми для обозначения состояния переключателя, между границей контейнера и прямоугольниками есть расстояние в два пикселя.
    •  Чтобы улучшить восприятие при работе с переключателями, фокус визуальной клавиатуры и наведение стилизованы с использованием псевдоклассов CSS  :hover  и  :focus :
      •  Чтобы облегчить восприятие фокуса и связи между меткой и связанным с ней переключателем, фокус создает рамку вокруг переключателя и метки, а также изменяет цвет фона.
      •  Чтобы было легче понять, что щелчок по метке или переключателю активирует переключатель, индикатор наведения совпадает с индикатором фокусировки.
      •  Чтобы помочь людям с нарушениями зрения идентифицировать переключатель как интерактивный элемент, курсор при наведении на переключатель изменяется на указатель.
    •  Чтобы обеспечить достаточную контрастность графики SVG с фоном, когда настройки высокой контрастности инвертируют цвета, CSS  currentcolor  значение для свойств  штрих  и  заливка  используется для синхронизации цветов с текстовым содержимым.
 Если для задания свойств  штрих  и  заливка  использовались определенные цвета, цвет этих элементов оставался бы тем же самым в режиме высокой контрастности, что могло бы привести к недостаточному контрасту между ними и их фоном или даже сделать их невидимыми, если их цвет должны были соответствовать фону режима высокой контрастности.  fill-opacity  контейнера  rect  устанавливается равным нулю для цвета фона страницы, чтобы обеспечить цвет, контрастирующий с цветами  штриха  и  заливки . 
       ПРИМЕЧАНИЕ. Элементы SVG должны установить для свойства CSS  принудительной настройки цвета  значение  auto , чтобы некоторые браузеры поддерживали значение  currentcolor .
     Подставка для клавиатуры 
     Ключ Функция
      Вкладка 
    •  Перемещает фокус клавиатуры на переключатель   .
      Пробел  ,  Введите 
    •  Тумблер между включением и выключением.
     Роль, свойство, состояние и атрибуты Tabindex 
     Роль Атрибут Элемент Использование
      переключатель   кнопка  Идентифицирует элемент  кнопки  как переключатель   .
      ария-проверено="ложь"   кнопка 
    •  Указывает, что переключатель   выключен.
      •  Селекторы атрибутов CSS
    •  (например,  [aria-checked="false"]  ) используются для синхронизации визуальных состояний со значением атрибута  aria-checked .
      ария-проверено="истина"   кнопка 
    •  Указывает, что переключатель   включен.
      •  Селекторы атрибутов CSS
    •  (например,  [aria-checked="true"]  ) используются для синхронизации визуальных состояний со значением атрибута  aria-checked .
      ария-скрытый = "истина"   диапазон включен  и  диапазон отключен 
    •  Удаляет строки  для  и  для , которые отображаются справа от переключателя из доступного имени переключателя.
    •  Эти строки включены только для улучшения визуального понимания состояния; состояния элементов не разрешены в доступных именах.
      h4  Обеспечивает групповую метку для группы переключателей.
      группа   отдел  Идентифицирует элемент  div  как контейнер  group  для коммутаторов.
    Добавить комментарий 
    Ваш адрес email не будет опубликован. Обязательные поля помечены *
     
     
      
     © Орфографика.рф, 2010 - 2019
     Расшифровки, размещенные на сайте, предназначены только для личного, некоммерческого использования.
     При перепосте материалов обязательна активная ссылка: «Текст подготовлен компанией Орфографика.рф». 
    Вопросы и предложения: info@орфографика.рф.