Работа с формами в ASP.NET MVC 5

Описание работы

Клик по названию или по самому чекбоксу приводит к его выбору или снятию выбора.

Что такое чекбокс

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

При заполнении формы пользователь нередко сталкивается с элементами управления (контролами) для выбора каких-то вариантов (опций). Самые распространенные элементы выбора — это чекбоксы, переключатели, радиокнопки и списки. Мы начнём нашу серию статей об элементах выбора с подробного разбора чекбоксов.

Не перемудрите и используйте стандартный вид чекбокса

Традиционно чекбоксы имеют квадратную форму. Пользователи распознают визуальные объекты по форме и стандартная квадратная форма чекбокса – это очень важно. Это связано с тем, что мы воспринимаем то, что ожидаем и ‘эта особенность описана у нас в Золотом правиле №4. Визуальная ясность. То есть пользователь должен легко распознавать элементы управления по их внешнему виду.

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

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

Правильно располагайте списки чекбоксов

Правильно — это значит вертикально, чтобы каждый пункт был в отдельной строке.

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

Используйте в подписях чекбоксов понятные утвердительные формулировки

Подписи к чекбоксам должны быть утвердительными и отражать действия, чтобы было понятно, что произойдет при выборе каждой опции. Избегайте отрицательных формулировок, типа “Не присылать мне рассылку” —  в этом случае получается, что пользователь должен включить опцию, чтобы действие не происходило. Помните, что пользователи думают о своих целях, а не об инструментах для их исполнения.

Не делайте размер чекбокса слишком маленьким

Как известно, чем меньше элемент, тем сложнее пользователю с ним взаимодействовать. Эта проблема очень актуальна для чекбоксов. Как известно по закону Фиттса, в маленький квадрат неудобно ни целится, ни попадать.

Чекбоксы должны реагировать не только при нажатии на квадратик, но и при нажатии на их подписи

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

Используйте опции «выбрать все» и «убрать все»

Чтобы облегчить работу пользователя с большим количеством чекбоксов (более 5), в интерфейсе должны быть предусмотрены опции «Выбрать все чекбоксы» и «Снять все чекбоксы». Представьте, что вам нужно выбрать, скажем, 14 пунктов из 20 в списке. Гораздо удобнее и быстрее будет сначала выбрать все, а потом снять ненужные галочки.

Чекбокс не должен запускать действие мгновенно

Важно понимать, что, когда  пользователь взаимодействует с чекбоксами, он не ждет мгновенной обратной связи. Действие произойдет тогда, когда пользователь нажмет какую-то кнопку: “сохранить”, “отправить”, “подписаться”.

У чекбоксов, которые открывают дополнительные элементы, надписи должны оканчиваться многоточием

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

Applying policy scopes¶

You can also apply policy scopes using the component:

Automatic authorization checks¶

AuthorizationComponent can be configured to automatically apply
authorization based on the controller’s default model class and current action
name. In the following example index and add actions will be authorized:

Checking authorization¶

In your controller actions or callback methods you can check authorization using
the component:

Html.checkbox

Html.CheckBox может применяться для создания сразу двух элементов. Возьмем, к примеру, следующий код:

@Html.CheckBox(“Enable”, false)

Это выражение будет генерировать следующий HTML:

То есть кроме собственно поля флажка, еще и генерируется скрытое поле. Зачем оно нужно? Дело в том, что браузер
посылает значение флажка только тогда, когда флажок выбран или отмечен. А скрытое поле гарантирует, что для элемента
Enable будет установлено значение даже, если пользователь не отметил флажок.

Html.hidden

В примере с формой мы использовали скрытое поле input type=”hidden”, вместо которого могли бы вполне использовать хелпер
Html.Hidden. Так, следующий вызов хелпера:

@Html.Hidden(“BookId”, “2”)

сгенерирует разметку:

А при передаче переменной из ViewBag нам надо привести ее к типу string: @Html.Hidden(“BookId”, @ViewBag.BookId as string)

Html.label

Хелпер Html.Label создает элемент <label/>, а передаваемый в хелпер параметр определяет значение атрибута
for и одновременно текст на элементе. Перегруженная версия хелпера позволяет определить значение атрибута for и
текст на метке независимо друг от друга. Например, объявление хелпера Html.Label(“Name”) создает следующую разметку:

Элемент label представляет простую метку, предназначенную для прикрепления информации к элементам ввода, например, к текстовым полям.
Атрибут for элемента label должен содержать ID ассоциированного элемента ввода. Если пользователь нажимает на
метку, то браузер автоматически передает фокус связанному с этой меткой элементу ввода.

Html.listbox

Хелпер Html.ListBox, также как и DropDownList, создает элемент <select />,
но при этом делает возможным множественное выделение элементов (то есть для атрибута multiple устанавливается значение multiple).

Html.password

Html.Password создает поле для ввода пароля. Он похож на хелпер TextBox, но вместо
введенных символов отображает маску пароля. Следующий код:

Html.radiobutton

Для создания переключателей применяется хелпер Html.RadioButton. Он генерирует элемент input со значением type=”radio”.
Для создания группы переключателей, надо присвоить всем им одно и то же имя (свойство name):

@Html.RadioButton("color", "red")
<span>красный</span> <br />
@Html.RadioButton("color", "blue")
<span>синий</span> <br />
@Html.RadioButton("color", "green", true)
<span>зеленый</span>

Этот код создает следующую разметку:

Html.textarea

Хелпер TextArea используется для создания элемента
<textarea>, который представляет многострочное текстовое поле. Результатом выражения @Html.TextArea(“text”, “привет <br/> мир”)

будет следующая html-разметка:

Обратите внимание, что хелпер декодирует помещаемое в него значение, в том числе и html-теги, (все хелперы декодируют значения моделей
и значения атрибутов). Другие версии хелпера TextArea позволяют указать число строк и столбцов, определяющих размер текстового поля.

@Html.TextArea("text", "привет <br /> мир", 5, 50, null)

Этот хелпер сгенерирует следующую разметку:

Html.textbox

Хелпер Html.TextBox генерирует тег input со значением атрибута type равным text.
Хелпер TextBox используют для получения ввода пользователем информации. Так, перепишем предыдущую форму с заменой полей ввода на хелпер
Html.TextBox:

@using(Html.BeginForm("Buy", "Home", FormMethod.Post))
{
    <input type="hidden" value="@ViewBag.BookId" name="BookId" />
    <p>Введите свое имя: </p>
    @Html.TextBox("Person", "Введите имя")
    <p>Введите адрес :</p>
    @Html.TextBox("Address", "Введите адрес")
    <p><input type="submit" value="Отправить" /></p>
}

Мы получим тот же результат:

Receiving authorization data

After a successful authorization, the widget can return data in two ways:

Skipping authorization¶

Authorization can also be skipped inside an action:

В каком случае выбрать чекбокс, а в каком – переключатель?

Тут все просто – используйте чекбоксы для изменения настроек, а переключатели для обозначения действия.

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

Валидация

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

Если для валидации вы используете тултип, поведение подсказок будет иным. Тултип отображается при наведении на группу чекбоксов.

Ввод информации

В предыдущем примере вместе с хелпером Html.BeginForm использовались стандартные элементы html. Однако набор html-хелперов содержит также
хелперы для ввода информации пользователем. В MVC определен широкий набор хелперов ввода практически для каждого html-элемента. Что выбрать –
хелпер или стандартный элементы ввода html, уже решает сам разработчик.

Вне зависимости от типа все базовые html-хелперы используют как минимум два параметра: первый параметр применяется для установки значений
для атрибутов id и name, а второй параметр – для установки значения атрибута value

Дизайн

Выбранный чекбокс обозначается символом  из шрифта Kontur&nbspIconic.

Название группы выравнивайте по базовой линии первого пункта.

Состояния:

Когда использовать

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

Когда используются чекбоксы?

Основная функция чекбокса — информировать,что у пользователя есть выбор. И он может либо согласиться, поставив галочку, либо отказаться.

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

Самый простой пример группы чекбоксов – это список писем в почте и возможность групповых операций с ними.

Название группы

Название группы чекбоксов пишется с заглавной буквы.

Название чекбокса

Название чекбокса пишется с заглавной буквы.

Обработка чекбоксов в php

Расположение

В общем случае группа чекбоксов должна располагаться в 1 столбец. В списке чекбоксов, размещенных горизонтально или в несколько столбцов тяжелее ориентироваться, потому что не всегда очевидна граница группы.

Группа из одного чекбокса требует аккуратного обращения при верстке формы.

Форма с несколькими кнопками

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

@using (Html.BeginForm("MyAction", "Home", FormMethod.Post))
{
    <input type="text" name="product" /><br/>
    <button name="action" value="add">Добавить</button>
    <button name="action" value="delete">Удалить</button>
}

Самое простое решение состоит в том, что для каждой кнопки устанавливается одинаковое значение атрибута name, но разное для атрибута
value. А метод, принимающий форму, может выглядеть следующим образом:

Хелпер html.beginform

Для создания форм мы вполне можем использовать стандартные элементы html, например:

Это обычная html-форма, которая по нажатию на кнопку отправляет все введенные данные запросом POST на адрес /Home/Buy.
Встроенный хелпер BeginForm/EndForm позволяет создать ту же самую форму:

@using(Html.BeginForm("Buy", "Home", FormMethod.Post))
{
    <input type="hidden" value="@ViewBag.BookId" name="BookId" />
    <table>
        <tr><td><p>Введите свое имя </p></td>
            <td><input type="text" name="Person" /> </td></tr>
        <tr><td><p>Введите адрес :</p></td>
			<td><input type="text" name="Address" /> </td></tr>
        <tr><td><input type="submit" value="Отправить" /> </td>
				<td></td></tr>
    </table>
}

Метод BeginForm принимает в качестве параметров имя метода действия и имя контроллера, а также тип запроса.
Данный хелпер создает как открывающий тег <form>, так и закрывающий тег </form>.

Здесь есть один момент. Если у нас в контроллере определены две версии одного метода – для методов POST и GET, например:

Частично выбранный чекбокс

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

Заключение

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

А у вас на сайте пользователям удобно взаимодействовать с чекбоксами? → Узнайте у наших экспертов прямо сейчас.

Список литературы:

1. Закона Фиттса
2. Немов Р. С. Психология. – 4-е изд. – М.: ВЛАДОС, 2003. – Кн. 1. Общие основы психологии.