В прошлом уроке мы изучили понятие формы. Её основная задача - объединить формы ввода данных определённого типа. Например, форма может объединить данные анкеты, теста и тд. В этом уроке мы научимся делать сами поля ввода!
За заполнение формы отвечает специальный тег , у него есть атрибут type, который позволяет создать определённые заполняемые поля: текстовые поля, радиокнопки, флажки, списки, кнопки. Повторяю, все перечисленные вверху элементы доступны лишь в одном теге - .
Тег в HTML
- это одиночный тег, с помощью которого можно создавать определённые элементы документа (текстовые поля, радиокнопки, флажки, списки, кнопки), которые предназначены для заполнения прямо на html-странице.Ниже пример работы в HTML
У тега имеется несколько очень важных значений атрибутов.
name - атрибут, который следует всегда задавать для элемента, чтобы обработчик (скрипт) понимал, input с каким именем он обрабатывает.
Так скрипт обработки поймёт, что это два разных поля.
type - данный атрибут отвечает за указание типа поля. Как уже говорилось ранее, при определённом типе input может стать радиокнопкой, флажком, списком, кнопкой, текстовым поля.
size - атрибут, указывающий размер для текстового поля, когда type указан как text. Указанные данные воспринимаются как ширина поля.
Тег
Атрибут type для input
Теперь давайте подробнее разберем атрибут type и его значения:text - значение атрибута указывает на то, что будет отображено обычное текстовое поле, изначально доступное для изменения.
Атрибут value
не обязателен, его можно вообще не указывать. Однако, если нужно указать значение по умолчанию, которое будет изначально отображаться в поле, то его следует заполнить.
password - превращает input в поле для заполнения пароля. Отличие от text заключается в том, что вводимые данные будут отображаться как звёздочки, а после заполнения всей формы браузер будет понимать, что в этом поле пароль и будет спрашивать, нужно ли его сохранить.
submit - подобное значение атрибута type определяет input как кнопку, при нажатии которой будет прорабатываться определённый сценарий (что такое сценарий вы узнаете позже, изучив языки PHP и JavaScript). Кнопка используется для того, чтобы отправить данные из форм к обработчику, написанному, например, на вышеуказанных языках. Есть и другие, но указал самые популярные.
reset - это ещё один вид кнопки, который обнуляет все значения в форме. после её нажатия их нужно будет заполнить заново.
radio
- Данное значение создает радиокнопку, то есть переключатель. Используется, как правило, для значений с небольшим количеством вариантов. Например, выбрать пол, интервал с возрастом и тп. выглядит следующим образом:
У атрибута type задано значение radio - это радиокнопка. В значение value записывается та фраза или слово, которое вы хотите получить, если кто-то выбрал определенную радиокнопку и отправил данные.
Бывают и другие случаи, когда пользователю нужно выбрать несколько вариантов ответа. В этом случае используется уже не радиокнопка (принимает только один вариант), а флажок или чекбокс.
checkbox - это поле, которое работает так же как и радиокнопка. С разницей лишь в том, что можно выделить несколько чекбоксов в качестве вариантов ответа. Также как и с радиокнопкой, если к вопросу принадлежат несколько чекбоксов, то у них атрибут name должен быть соответственно одинаково заполнен. В value соответственно будет указано значение выбранного поля.
Особенности работы полей input
Тут предлагаю разобрать некоторые вопросы, с которыми также можете столкнутmcя в начале в работе с input.Как сделать так, чтобы у пользователя сразу был выбран ответ (чекбокс или радиокнопка)?
Для этого существует одиночный атрибут checked. Его нужно указать в конце тега input. Так как атрибут одиночный, то значений у него никаких нет. Надо лишь добавить его в элемент input. Например, как в записи ниже:
Как сделать так, чтобы напротив чекбокса или радиокнопки был виден текст, поясняющий данный выбор?
Для этого перед и после радиокнопки или чекбокса пишем тег
Соответственно указываете в теге label, открывающем и закрывающем, сам чекбокс и нужные слова. И внимание! Даже если пользователь нажмёт на слово, то чекбокс всё равно будет выделен.
При создании форм дизайнеры часто стоят перед необходимостью выбора, какой элемент пользовательского интерфейса обеспечит необходимый уровень взаимодействия при изменении параметров. Безусловно, у каждого специалиста есть свои собственные правила, но всем следует помнить о некоторых неизменных аксиомах, которые действуют всегда и везде.
Выбор параметров может осуществляться с помощью флажков, переключателей, радиокнопок и раскрывающихся кнопок. Все варианты хороши, если правильно их использовать. В данной статье речь пойдет о флажках и переключателях.
Флажки
Флажки используются, когда имеется список параметров, и пользователь может выбрать любое их количество: один, несколько или ни одного. Иными словами, каждый флажок является независимым элементом управления, и включение одного из них не отменяет действие другого.
Флажки снабжаются надписями
Переключатели
Переключатель – это элемент управления, который что-то включает и выключает.Переключатели позволяют сделать выбор между двумя прямо противоположными вариантами.
Как правило, переключатели используются для включения и отключения какого-либо действия (запустить или остановить что-то). Здесь можно провести аналогию с выключателем света.
Освещение является наиболее распространенной областью применения переключателей
Флажок – это просто маленький квадратик с галочкой или крестиком.
Два положения флажка: отмечено или не отмечено
Переключатель должен выглядеть, как обычный тумблер с двумя положениями.
Два положения переключателя: включено или выключено
Вам необходимо обеспечить четкое недвусмысленное взаимодействие пользователя с элементом управления. Здесь может помочь небольшая анимация – это особенно важно для мобильных приложений, где пользовательский интерфейс должен быть осязаем.
Переключатель iOS7/8
Старайтесь, чтобы список возможных вариантов располагался вертикально. Это правило касается и флажков, и переключателей. Если уйти от горизонтального размещения нельзя, необходимо расположить элементы с достаточно большим интервалом, чтобы не допустить двойной трактовки, что выбирает каждый флажок. Ниже представлен пример со слишком близко расположенными друг к другу элементами.
Сложно понять, какую радиокнопку следует нажать, чтобы выбрать четвертый вариант
Текущее положение переключателя
При проектировании переключателей следует избегать неопределенности, связанной с текущим состоянием. В качестве примера возьмем переключатель из iOS 6 и посмотрим на него во включенном состоянии – окраска синим цветом и отображается слово ON (включено).
Не ясно, включено – это текущее состояние, или предлагаемое действие
Вы можете сказать однозначно, переключатель находится во включенном положении, или он только перейдет в него, если вы передвините ползунок? «Включено» - это состояние или действие? Не понятно.
Вы не должны вводить пользователей в заблуждение; очень важно проводить отличие между состоянием и действием. Да, можно использовать цвет для дополнительного информирования пользователей, но при этом следует сделать так, чтобы текущий вид воспринимался однозначно, как в следующем примере:
Цвет шрифта обозначает текущее положение
В тексте надписей флажков используйте позитивное подтверждение, чтобы пользователь точно знал, что произойдет, если он поставит отметку. Избегайте фраз типа «Больше не присылайте мне е-мэйл сообщения», которые бы означали, что пользователю необходимо поставить отметку, чтобы что-то не происходило.
Флажки должны иметь надписи с позитивными командами, а не с негативными «Не…»
Сделайте надпись флажка целевой областью
Все флажки сопровождаются лейблами, но лейблы не всегда кликабельны. Флажки имеют маленький размер, и по закону Фиттса на них тяжело попасть, как мышью, так и пальцем. Для того чтобы увеличить область нажатия, дайте пользователям возможность выбирать требуемый параметр не только попаданием точно в квадратик, но и по лейблу или связанным словам.
Позвольте пользователю делать выбор нажатием не только флажка, но и лейбла
Используйте флажки только для изменения параметров, но не в качестве управляющих кнопок
Главное отличие флажка от переключателя состоит в том, что флажок используется для изменения состояния, а переключатель – для включения или отключения действия.
В примере ниже положение переключателя позволяет сказать однозначно: беспроводная связь включена. В случае с флажком пользователю приходится гадать – WiFi включен, или для его включения необходимо поставить галочку.
Для включения/выключения сервисов и компонентов аппаратного обеспечения, таких как WiFi, используйте переключатели
Взаимодействие флажка отличается от взаимодействия переключателя
Вы можете сделать так, чтобы состояние, за которое отвечает флажок, менялось не сразу (как часть отсылаемой формы, например), но действие, за которое отвечает переключатель, должно совершаться сразу же.Хорошей практикой пользовательского взаимодействия является мгновенная смена управляемого параметра с помощью переключателя – не после нажатия кнопки «Сохранить» или перехода к предыдущей странице. Именно этого мы ожидаем от этого элемента управления в реальной жизни – мы щелкаем переключателем, и свет включается.
Включение Wi-Fi в iOS
Используйте флажки, когда для ввода изменения в силу от пользователя ожидаются дополнительные действия
Используйте флажки, когда пользователь должен кликнуть кнопку «Отправить» или «Следующий», чтобы сохранить изменения.
Заключение
При разработке интерфейса будьте последовательны в выборе его элементов. Следуйте общепринятым стандартам; это позволит пользователям получить удобное предсказуемое управление. В противном случае, если нарушать общепринятые стандарты, ваш пользовательский интерфейс будет непредсказуем, как будто в любой момент может случиться все, что угодно.Все разработчики сайтов, веб-приложений и десктопных программ знают, что такое чекбоксы. Но те люди, которые далеки от программирования, встречая такое непонятное иностранное слово, не понимают, о чем идет речь. На самом деле все очень просто. Чекбоксы - это одни из простейших элементов управления при создании форм.
Обычная галочка
Все люди встречались в жизни с такими символами, как галочка, начиная еще со школьной скамьи. При проведении тестирования нужно отмечать правильный вариант этим знаком. Затем при заполнении различных анкет. Ну а в нынешнее время, когда пользователи совершают через Интернет множество действий, без галочек вообще никуда. Даже простейшая регистрация на каком-либо сайте требует отметить некоторые пункты (увлечения, навыки).
Также сейчас развита интернет-торговля. При создании заказа пользователь отмечает интересующие его пункты. А еще часто при установке компьютерной игры предлагается выбрать дополнительное программное обеспечение. И тут тоже нужно сделать выбор. Так вот, чекбоксы - это те самые галочки, которые используются на веб-страницах.
В создании сайтов
Разработчики сайтов видят этот элемент несколько шире. Ведь создать сложнее, чем просто один раз кликнуть мышкой на квадратике и поставить галочку. Сайты разрабатываются при помощи гипертекстового языка разметки, который в профессиональной среде называют всего четырьмя буквами - HTML. И чтобы в нем создать галочку, необходимо написать определенный код.
Как же создаются чекбоксы? HTML имеет специализированный элемент (тег), который является полем, наделенным типом «чекбокс», который пишется следующим образом: .
Принципы функционирования
Работает такой элемент по простейшему принципу: либо утверждение, либо отрицание. Если в поле отмечена галочка, то веб-браузер отправляет переменную, которая отправит имя поля на сервер для обработки, если же галочка не отмечена, то сервер ничего не получает. У элемента есть необязательный атрибут со значением value, но он является необязательным.
Иногда бывает так, что на странице некоторые галочки уже стоят отмеченными. Для этого разработчики добавляют к тегу специальный атрибут, который указывает на уже поставленную по умолчанию галочку. Это атрибут checked, то есть «отмечено».
Чекбоксы - это такие элементы, которые подразумевают не единичный выбор из нескольких вариантов, а отметку всех подходящих. Для разработчика это имеет значение, потому что если одна форма содержит несколько чекбоксов, их имена должны быть отличными друг от друга.
Зависимые чекбоксы
В случае, когда нужно выбирать лишь один вариант из множества, используются другие элементы - радиокнопки, а не флажки. Но иногда применяется такой тип, как зависимые чекбоксы. HTML совместно с языком программирования JavaScript позволяет сделать один главный флажок, от которого зависят другие. При нажатии на него могут быть отмечены сразу несколько чекбоксов. Такое используется редко, так как это несколько противоречит самому правилу отметки галочек.
Как и все теги в HTML, чекбоксы - это такие элементы, которые имеют свои признаки. Какими они бывают? Выше уже был упомянут атрибут для предварительной отметки флажка - checked. Так как в одной форме у чекбоксов должны быть различные имена, нужен атрибут name. Он как раз идентифицирует каждый отдельный флажок. Для того, чтобы задать значение, которое будет отправляться на сервер, используют атрибут value.
Стоит отметить, что чекбоксы - это графические элементы управления, которые используются преимущественно в формах. И работают они в тремх режимах: не выбранный, выбранный и неопределенный.
Применение в таблицах
Чекбокс применяется не только в HTML при разработке сайтов и веб-приложений. Такое программное обеспечение, как 1С, тоже использует данный элемент. Ведь на предприятии есть множество разных составляющих и при работе с документацией все это необходимо отмечать. К примеру, при помощи чекбокса можно отметить список складских запасов или клиентов, которым нужно отправить товар.
В каких еще программах применяется данный элемент? Excel - все знают эту программу для составления таблиц от компании Microsoft, которая часто является Принцип работы флажка здесь таков: если галочка отмечена, то элемент возвращает истинное значение, если снята - ложное. Чтобы вставить чекбокс в документ, нужно включить специальную вкладку для разработчика. Делается это через параметры, которые в каждой версии Excel немного отличаются.
Как найти нужные настройки? Всегда есть справка или поисковая система. После того, как вкладка включена, можно вставлять элемент через команду «Вставить» пункта «Элементы управления». Здесь нужно обратить внимание на то, что это меню также содержит элементы ActiveX, расположенные под необходимыми элементами формы. Там тоже имеются чекбоксы. В чем между ними разница? Для использования элементов ActiveX нужен встроенный язык программирования VBA, который знают немногие. А обыкновенные флажки можно сразу привязать к определенной ячейке в документе.
После того, как чекбоксы в Excel будут вставлены, они по умолчанию становятся отмеченными. При нажатии мышью в любом месте документа отметка снимается. Для обратного выделения нужно кликнуть на флажок правой кнопкой мышки, так как левая кнопка снимает или устанавливает галочку.
При наведении курсора на флажок, зажатии и удерживании левой кнопки можно переместить элемент в любое место на документе. Также это удобно делать клавишами на клавиатуре. При наведении курсора на углы элемента можно растянуть его до большего размера или уменьшить. Специальные настройки позволяют оформить флажок, изменив его цвет, фон, рамку.
Вывод
Итак, как видно из вышесказанного, чекбоксы - это не сложный элемент графического интерфейса, а то, с чем все сталкиваются в повседневной жизни - обыкновенная галочка. Понятие немного отличается для программиста и рядового пользователя, но суть одинакова: это элемент управления, который дает возможность сделать множественный выбор при заполнении какой-либо формы. Важно не перепутать чекбоксы с радиокнопками, которые дают возможность выбрать лишь один пункт из множества.
(✓), или реже крестик(×)). По традиции флажок имеет квадратную форму. Рядом с флажком отображается его обозначение, обычно - подпись, реже - значок. Для увеличения площади активного элемента одинаково реагирует на нажатие мышью как сам флажок, так и подпись к нему.
Поведение
Юникод
В Юникоде , пустой и отмеченный чекбоксы представлены кодами U+2610 (☐ , "BALLOT BOX"), U+2611 (☑ , "BALLOT BOX WITH CHECK"), и U+2612 (☒ , "BALLOT BOX WITH X").
Альтернативы
В мобильных приложениях распространёна особая разновидность переключателя - так называемый тумблер (toggle switch ) . В отличие от флажка, чтобы включить или выключить тумблер, нужно перетащить движок тумблера в ту или иную сторону. Часто на самом тумблере выводят его положение, однако пользователю не всегда очевидно, находится ли тумблер в этом состоянии, или перейдёт в него, если переместить движок. Поэтому обычно советуют подписывать положения тумблера снаружи. Кнопки с фиксацией применяются обычно в панелях инструментов , так как занимают мало места и позволяют размещать на себе значок. По виду кнопки невозможно определить, фиксируется она или нет.
Кнопки с изменяющейся надписью/значком - в них также есть проблема: является ли надпись/значок индикатором текущего состояния или действия, которое произойдёт после нажатия? Поэтому такие кнопки применяются только тогда, когда текущее состояние понятно из контекста.
Также вместо флажка можно использовать переключатели (радиокнопки , кнопки с зависимой фиксацией и т. д.), если им задать только два положения.
Напишите отзыв о статье "Флажок (интерфейс)"
Ссылки
- Анатолий Хомоненко и др. Delphi 7. - СПб: БХВ-Петербург, 2005. - С. 172-175. - 1216 с. - (В подлиннике). - доп,тираж 3 000 экз. - ISBN 5-94157-267-0 .
- Алан Купер. об интерфейсе. Основы проектирования = About Face. The Essentials of Interaction Design. - 3. - СПб: Символ-Плюс, 2009. - С. 499. - 688 с. - 1500 экз. - ISBN 978 5 93286 132 5 .
- в Apple HIG (англ.)
- в GNOME HIG (англ.)
- W3C по элементам управления на веб-страницах
- .
Примечания
| В данной статье или разделе имеется или внешних ссылок , но источники отдельных утверждений остаются неясными из-за отсутствия сносок .
Утверждения, не , могут быть поставлены под сомнение и удалены. Вы можете улучшить статью, внеся более точные указания на источники. |
|
||||||||||||||||||||||||||||||||||||||
Отрывок, характеризующий Флажок (интерфейс)
– Нет, убить человека не хорошо, несправедливо…– Отчего же несправедливо? – повторил князь Андрей; то, что справедливо и несправедливо – не дано судить людям. Люди вечно заблуждались и будут заблуждаться, и ни в чем больше, как в том, что они считают справедливым и несправедливым.
– Несправедливо то, что есть зло для другого человека, – сказал Пьер, с удовольствием чувствуя, что в первый раз со времени его приезда князь Андрей оживлялся и начинал говорить и хотел высказать всё то, что сделало его таким, каким он был теперь.
– А кто тебе сказал, что такое зло для другого человека? – спросил он.
– Зло? Зло? – сказал Пьер, – мы все знаем, что такое зло для себя.
– Да мы знаем, но то зло, которое я знаю для себя, я не могу сделать другому человеку, – всё более и более оживляясь говорил князь Андрей, видимо желая высказать Пьеру свой новый взгляд на вещи. Он говорил по французски. Je ne connais l dans la vie que deux maux bien reels: c"est le remord et la maladie. II n"est de bien que l"absence de ces maux. [Я знаю в жизни только два настоящих несчастья: это угрызение совести и болезнь. И единственное благо есть отсутствие этих зол.] Жить для себя, избегая только этих двух зол: вот вся моя мудрость теперь.
– А любовь к ближнему, а самопожертвование? – заговорил Пьер. – Нет, я с вами не могу согласиться! Жить только так, чтобы не делать зла, чтоб не раскаиваться? этого мало. Я жил так, я жил для себя и погубил свою жизнь. И только теперь, когда я живу, по крайней мере, стараюсь (из скромности поправился Пьер) жить для других, только теперь я понял всё счастие жизни. Нет я не соглашусь с вами, да и вы не думаете того, что вы говорите.
Князь Андрей молча глядел на Пьера и насмешливо улыбался.
– Вот увидишь сестру, княжну Марью. С ней вы сойдетесь, – сказал он. – Может быть, ты прав для себя, – продолжал он, помолчав немного; – но каждый живет по своему: ты жил для себя и говоришь, что этим чуть не погубил свою жизнь, а узнал счастие только тогда, когда стал жить для других. А я испытал противуположное. Я жил для славы. (Ведь что же слава? та же любовь к другим, желание сделать для них что нибудь, желание их похвалы.) Так я жил для других, и не почти, а совсем погубил свою жизнь. И с тех пор стал спокойнее, как живу для одного себя.
– Да как же жить для одного себя? – разгорячаясь спросил Пьер. – А сын, а сестра, а отец?
– Да это всё тот же я, это не другие, – сказал князь Андрей, а другие, ближние, le prochain, как вы с княжной Марьей называете, это главный источник заблуждения и зла. Le prochаin [Ближний] это те, твои киевские мужики, которым ты хочешь сделать добро.
И он посмотрел на Пьера насмешливо вызывающим взглядом. Он, видимо, вызывал Пьера.
– Вы шутите, – всё более и более оживляясь говорил Пьер. Какое же может быть заблуждение и зло в том, что я желал (очень мало и дурно исполнил), но желал сделать добро, да и сделал хотя кое что? Какое же может быть зло, что несчастные люди, наши мужики, люди такие же, как и мы, выростающие и умирающие без другого понятия о Боге и правде, как обряд и бессмысленная молитва, будут поучаться в утешительных верованиях будущей жизни, возмездия, награды, утешения? Какое же зло и заблуждение в том, что люди умирают от болезни, без помощи, когда так легко материально помочь им, и я им дам лекаря, и больницу, и приют старику? И разве не ощутительное, не несомненное благо то, что мужик, баба с ребенком не имеют дня и ночи покоя, а я дам им отдых и досуг?… – говорил Пьер, торопясь и шепелявя. – И я это сделал, хоть плохо, хоть немного, но сделал кое что для этого, и вы не только меня не разуверите в том, что то, что я сделал хорошо, но и не разуверите, чтоб вы сами этого не думали. А главное, – продолжал Пьер, – я вот что знаю и знаю верно, что наслаждение делать это добро есть единственное верное счастие жизни.
– Да, ежели так поставить вопрос, то это другое дело, сказал князь Андрей. – Я строю дом, развожу сад, а ты больницы. И то, и другое может служить препровождением времени. А что справедливо, что добро – предоставь судить тому, кто всё знает, а не нам. Ну ты хочешь спорить, – прибавил он, – ну давай. – Они вышли из за стола и сели на крыльцо, заменявшее балкон.
Как остановить, запустить, отключить службы
Как сделать водяной знак в фотошопе и наложить его на фотографию
Компьютер выключается или перезагружается сам по себе
Как вытащить из черного списка в инстаграме
Как связаться с техподдержкой Вконтакте?